メディアサイトの記事ページをデザインするときに、参考になる数値まとめ

まきこ


メディアサイトの記事ページをデザインするときに、参考になる数値まとめ

こんにちは、デザイナーのまきこです。モーニング娘。’16のオーディションのゆくえが気になる今日この頃です。

さて、LIGでは、日々たくさんの企業さまからさまざまなサイト制作についてのお問い合わせをいただいています。その中でわりとご依頼が多いのが、メディアサイトの制作です。

メディアサイトの制作でキモとなるのが、記事ページの文字周りのデザイン。ここがうまくいかないと、いくら魅力的な記事が書かれていても、ユーザーにしっかり読んでもらって価値を提供することができません。そこで今回は、世の中のメディアサイトやWebマガジンの中から「人気がある」「デザインのクオリティーが高い」とわたしが勝手に思うサイトを10点選び、記事ページの文字周りがどんな数値でデザインされているのかを調べてみました。

調べ方について
下記の図のような数値について、PCはMac(ディスプレイ幅1440px)で、SPはiphone6(ディスプレイ幅750px)で調査をおこないました。
各サイトの数値は検証ツールなどを使って推測し、比較しやすいように同じ単位に直した、おおよその数値です。

201607-explain

1. BETAMAG

site1

http://betamag.newbalance.co.jp/
株式会社ニューバランス ジャパンが運営し、ファッションを中心にしたライフスタイルを発信しているWebマガジン。ニューバランスらしい洗練された上品なオシャレ感が漂うサイトです。

PC SP
記事タイトルサイズ 32px 48px
見出し(大)サイズ 18px 30px
見出し(中)サイズ
本文サイズ 15px 30px
line-height 1.7 1.7
フォントファミリー 游ゴシック ヒラギノ角ゴシック
記事エリア横幅 1080px 675px
一行の文字数 71文字 22文字

記事内ではクオリティーの高い写真が大きく配置されているため、記事部分の横幅は広め。記事の左右に別カラムを設けていないこともあって、かなりすっきりとした印象のデザインになっています。

まったくの余談ですが、わたしは秋頃にはニューバランスのグレーのスニーカーが欲しいなあと思ってます!

2. Qetic

site2

http://www.qetic.jp/
「時代に口髭を生やす」というユニークなコンセプトを掲げ、国内外の最新カルチャーニュースを配信しているWebマガジン。エッジの効いたデザインが印象的なサイトです。

PC SP
記事タイトルサイズ 20px 28px
見出し(大)サイズ 18px 36px
見出し(中)サイズ
本文サイズ 15px 26px
line-height 1.7 1.7
フォントファミリー 游ゴシック ヒラギノ角ゴシック
記事エリア横幅 700px 670px
一行の文字数 46文字 26文字

SP版では記事タイトルよりも記事内の見出しが大きくなっているのが面白いですね! line-heightがゆったりと設定されているのは、派手なデザインの中でも読みやすくなる工夫なのかもしれません。

カルチャー紹介系のメディアはたくさんありますが、このQeticは読みやすさを担保したままでカルチャーの持つ熱量が表現されている気がして、わたしはすごく好きです!

3. HereNow

site5

https://www.herenow.city/tokyo/
東京、京都、福岡、台北など、その街の「今、何が面白いのか」を紹介するサイト。街ごとに設定されたキーカラーがモノトーンのベースに映えて、おしゃれでポップな印象のデザインにまとめられています。

PC SP
記事タイトルサイズ 36px 48px
見出し(大)サイズ 22px 44px
見出し(中)サイズ 20px 40px
本文サイズ 17px 28px
line-height 2 2
フォントファミリー 游ゴシック ヒラギノ角ゴシック
記事エリア横幅 765px 710px
一行の文字数 45文字 25文字

記事内では、写真の横幅よりもテキストボックスの横幅の方が広くなっています。そのせいか、このサイトでは写真はさらっと流して文章を読み進めていくことができますね。写真が文章の補完ではなく、雰囲気を伝えるために機能するようなサイトでは、同じ工夫をしてみる価値がありそうです!

4. AdverTimes

site6

http://www.advertimes.com/
マーケティング、メディア、広報、広告クリエイティブなど、コミュニケーション分野を取り巻くニュースや情報を発信するメディア。宣伝会議が運営しており、ニュートラルな印象のデザインのサイトです。

PC SP
記事タイトルサイズ 30px 54px
見出し(大)サイズ 22px 48px
見出し(中)サイズ 18px 38px
本文サイズ 16px 32px
line-height 1.8 1.8
フォントファミリー NotoSans ヒラギノ角ゴシック
記事エリア横幅 630px 710px
一行の文字数 39文字 22文字

PC版では、記事エリアの左カラムにシェアボタン、右カラムにバナーなどが設置されています。フォントにNoto Sansが使用されているため、堅実で信頼感ある雰囲気が醸成されていますね!

5. SPUR.jp

site3

https://spur.hpplus.jp/
集英社の雑誌「SPUR」から生まれ、「ファッションの今、ファッションのその先へ」をコンセプトに掲げるWebマガジンです。

PC SP
記事タイトルサイズ 22px 32px
見出し(大)サイズ
見出し(中)サイズ
本文サイズ 15px 28px
line-height 1.8 18
フォントファミリー 游ゴシック ヒラギノ角ゴシック
記事エリア横幅 630px 702px
一行の文字数 42文字 25文字

記事タイトルに装飾がなく、余白とフォントサイズだけで本文とのメリハリをつけています。そのわりに文字のジャンプ率が低めなのは、カタカナ語が多くて記事タイトルが長くなりがちだからなのかもしれません。

そういえば、わたしがまだ10代だったときは、自分が今くらいの年齢になったらSPURに載っているようなブランドものをガンガン買えるようになっているんだろうなーって想像していたんですけど……未来ってわからないものですね!

6. RETRIP

site10

https://retrip.jp/
「あなたを旅に連れて行く」をコンセプトに掲げている、旅行系キュレーションメディア。Facebookのウォールにこのサイトの記事が流れていると、きれいな旅行写真に惹かれてついつい訪れてしまうサイトです。

PC SP
記事タイトルサイズ 32px 36px
見出し(大)サイズ 22px 34px
見出し(中)サイズ 18px 32px
本文サイズ 16px 30px
line-height 1.6 1.6
フォントファミリー ヒラギノ角ゴシック ヒラギノ角ゴシック
記事エリア横幅 700px 702px
一行の文字数 43文字 22文字

h2にふられたclassによって、見出しの下線の色がオレンジや青などに変えられる仕様になっているようです。RETRIPでの法則性はわからないですが、カテゴリーごとに異なる印象を与えたい場合などに、こうした色の使い分けが有効かもしれませんね!

7. 花椿

site4

http://hanatsubaki.shiseidogroup.jp/
資生堂の雑誌「花椿」が季刊となり、かわりに生まれたWebマガジン。雑誌時代のグラフィカルでおしゃれな「花椿らしさ」が、サイトデザインにもしっかりと引き継がれています。

PC SP
記事タイトルサイズ 40px 48px
見出し(大)サイズ
見出し(中)サイズ
本文サイズ 16px 32px
line-height 1.8 1.8
フォントファミリー 本明朝、秀英角ゴシック 本明朝、秀英角ゴシック
記事エリア横幅 490px 670px
一行の文字数 31文字 25文字

本文も細かく文字詰めがされているようで、どうやら「FLAutoKerning」が使用されているっぽいです。フォントも明朝を使っていたりと、花椿らしいこだわりが感じられますね! また、1行の文字数が少ないため、なんとなく記事というよりコラムと呼びたくなるような、そんな佇まいをしていらっしゃいます。素敵や!

8. MERY

site9
http://mery.jp/
10〜20代女性向けのファッション・ビューティー関連の情報がまとめられたキュレーションメディア。メインカラーにピンクが使われていたり、記事への「♡」マークの登場頻度が群を抜いていたりと、かわいさと女子力がつまったサイトです。

PC SP
記事タイトルサイズ 26px 36px
見出し(大)サイズ 20px 32px
見出し(中)サイズ
本文サイズ 14px 28px
line-height 1.5 1.5
フォントファミリー ヒラギノ角ゴシック ヒラギノ角ゴシック
記事エリア横幅 690px 690px
一行の文字数 49文字 24文字

本文のline-height、けっこう詰めぎみなんですね。サイトのターゲット層や記事のカテゴリーを考えると、文章を10行にもおよぶほど長くすることはあまりなさそうなので、line-heightは詰めぎみのほうが合うのかもしれません。

9. UX MILK

site7

http://uxmilk.jp/
IT系クリエイター向けに、UXに関する情報を発信しているメディア。ロゴに使用されたイラストのせいもあってか、内容のわりに小難しい印象を与えず、親しみやすいサイトです。

PC SP
記事タイトルサイズ 37px 44px
見出し(大)サイズ 22px 38px
見出し(中)サイズ 19px 36px
本文サイズ 15px 30px
line-height 1.8 1.75
フォントファミリー ヒラギノ角ゴシック ヒラギノ角ゴシック
記事エリア横幅 640px 710px
一行の文字数 41文字 23文字

PC版では、右カラムに記事の目次が入っているのが面白いポイント。記事内の写真はすべて角丸で統一されていて、やわらかくポップなイメージを打ち出していますね。

このサイトは毎日記事を配信しているので、わたしもよくチェックしています!

10. WIRED

site8

http://wired.jp/
テクノロジーを軸に、生活や社会、カルチャーの未来がどうなるのかについて発信しているWebマガジン。同名の雑誌もありますね。純粋に記事が面白く、読んでいると自分の頭がよくなったような気分になるので、好きなサイトです!

PC SP
記事タイトルサイズ 18px 36px
見出し(大)サイズ 14px 28px
見出し(中)サイズ
本文サイズ 14px 28px
line-height 1.8 1.8
フォントファミリー 游ゴシック ヒラギノ角ゴシック
記事エリア横幅 460px 670px
一行の文字数 32文字 23文字

タイトル・見出し・本文のジャンプ率が低いことと、記事エリアの横幅が小さいことが、このサイトの特徴でしょうか。そういえばWIREDの文体って落ち着いたトーンなので、ジャンプ率が低めでアカデミックな見た目のほうが合いますよね。世の中のサイトのデザインって、よく考えられているんだなあ……(しみじみ)

まとめ

ということで、今回調べた10サイトのデザインの傾向をまとめます!

PC SP
記事タイトル 18〜40px
32pxくらいが多い
28〜54px
40pxくらいが多い
見出し(大) 14〜22px
22pxくらいが多い
28〜48px
36pxくらいが多い
見出し(中) 18〜20px 32〜40px
本文 14〜17px
15か16pxが多い
26〜32px
28・30・32pxが多い
line-height 1.5〜2
1.8くらいが多い
1.5〜2
1.8くらいが多い
フォント 游ゴシックが多い ヒラギノ角ゴシックが多い
記事エリア横幅 460〜1080px
670pxくらいが多い
670〜710px
670か710pxが多い
一行の文字数 31〜71文字
45文字くらいが多い
22〜26文字
24文字くらいが多い

と、こんな結果になりました!

数字がいっぱいで途中ちょっとうんざりしてきましたが、こうしてまとめてみると、なんとなく記事ページのスタンダードが見えてきましたね! デザインの数値は制作するサイトのコンセプトによるところが多いですが、上記の数値を目安にすることはできそうです。みなさんもWebマガジンやメディアサイトをつくる機会があれば、ぜひ参考にしてみてくださいね!

情報をより早く、より強く届けるために、わたしもデザインの力で貢献できたらいいなと思っています!

それでは、また!
まきこでした。

まきこ
この記事を書いた人
まきこ

デザイナー

おすすめ記事

Recommended by