こんにちは、デザイナーのまきこです。モーニング娘。’16のオーディションのゆくえが気になる今日この頃です。
さて、LIGでは、日々たくさんの企業さまからさまざまなサイト制作についてのお問い合わせをいただいています。その中でわりとご依頼が多いのが、メディアサイトの制作です。
メディアサイトの制作でキモとなるのが、記事ページの文字周りのデザイン。ここがうまくいかないと、いくら魅力的な記事が書かれていても、ユーザーにしっかり読んでもらって価値を提供することができません。そこで今回は、世の中のメディアサイトやWebマガジンの中から「人気がある」「デザインのクオリティーが高い」とわたしが勝手に思うサイトを10点選び、記事ページの文字周りがどんな数値でデザインされているのかを調べてみました。
- 調べ方について
-
下記の図のような数値について、PCはMac（ディスプレイ幅1440px）で、SPはiphone6（ディスプレイ幅750px）で調査をおこないました。
各サイトの数値は検証ツールなどを使って推測し、比較しやすいように同じ単位に直した、おおよその数値です。
1. BETAMAG
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
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
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
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
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
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. 花椿
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
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
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
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マガジンやメディアサイトをつくる機会があれば、ぜひ参考にしてみてくださいね！
情報をより早く、より強く届けるために、わたしもデザインの力で貢献できたらいいなと思っています！
それでは、また！
まきこでした。
キャリアアップ
「Studio上野でWebクリエイターを目指す！」
LIGはWebサイト制作を支援しています。ご興味のある方は事業ぺージをぜひご覧ください。
