Tarokenlog

Contact

有名メディアサイト22個のレイアウト・フォントの設定を調査してみた【見やすいサイトを作る為に】

kentaro koga

「有名メディアサイトってどんなレイアウト・フォント設定をしてるんだろう
見やすいサイトを作る為に参考にしたい、、、調べてみよう・・・」

どうも、けんたろう(@kentaro_koga)です。

僕自身フリーランスでWebサイト制作をしており、見やすいサイトがどんなサイトなのか気になったので「有名なメディアサイト22個のレイアウト・フォント」について調査してみました。

なぜ有名メディアサイトなのか？

理由：「訪問者をいっぱい獲得しているであろう有名なメディアサイトが見にくい訳が無いだろう」と考えたから

ただただ調査結果をあげるだけだとつまらないので、以下の内容にしてみました

記事の内容

  • 調査させていただいたメディアサイト22個(リンク集)
  • レイアウト毎の特徴
  • 視線の動きの法則【Zの法則・Fの法則】
  • レイアウトについての調査結果
  • フォントの設定について
  • フォントについての調査結果
  • 見やすいフォント設定について
  • まとめ

様々なレイアウト・フォントの設定があるのでどれが正解とは言えませんが、参考にできる一つの指標として見てみてくださいませ。
＊もちろんコンテンツありきなので、レイアウト・フォントの設定が同じでもコンテンツが悪ければ元も子もないですww


調査させていただいたメディアサイト22個(リンク集)

どれも皆さんの知っているようなメディアサイトかと思います。
素晴らしいサイトばかりです。

レイアウト毎の特徴

まず調査結果に入る前にサイトのレイアウト毎の特徴を考えていきます。

とはいっても良い点・微妙な点をいくつかあげるだけです。

有名メディアサイトはどんなレイアウトが多いのか予想しながら読んでみてくださいませ

１カラムレイアウト

良い点

サイドバーが無いからコンテンツに集中しやすい
レスポンシブ(スマホ対応)に対応しやすい

微妙な点

サイドバーが無いのでユーザーの回遊率は低い

＊回遊率：サイト内をうろちょろする率

よく使われているサイトのタイプ：

プロモーション・コーポレート・アーティスト・ポートフォリオ・LP

1カラムの例：https://i-donuts.com/

２カラムレイアウト

良い点

ユーザーが回遊しやすい
情報量のバランスが良い

微妙な点

商品のプロモーションページにはちょっと向いていないこともある

よく使われているサイトのタイプ：

ブログ・メディアサイト・コーポレート・EC

2カラムの例：このブログww

３カラムレイアウト

良い点

ユーザーが回遊しやすい
パッと見の情報量が多い

微妙な点

商品のプロモーションページにはちょっと向いていない

よく使われているサイトのタイプ：

メディアサイト・EC・とにかく情報量が多いサイト

3カラムの例：gigazineの記事ページ

以上を踏まえて、、、
2カラムが一番バランスが取れていてメディアサイトには向いている印象。

2カラムにも「右サイドバー」「左サイドバー」があるので、どっちが多いのか「視線の動きの法則」を考えつつ予想してみる。

視線の動きの法則【Zの法則・Fの法則】

よく知られている法則かと思いますが、代表的な視線の動きの法則は２つあります。

  • Zの法則
  • Fの法則

どんなところで使われている？

紙媒体・Webサイト・コンビニ / スーパーの棚の陳列・自動販売機・・・etc

Zの法則

雑誌・チラシ・パンフレット・サイトのトップページなどを見ればわかりやすいです。

以下のように視線がZの形に動きやすいということです。
Webサイトでいうと主に初めて訪れるページ・トップページで視線の動きがZっぽくなるようです。

Fの法則

サイトの記事ページや商品ページを見る時の視線の動きが「Fの形に似ている」ことからFの法則と呼ばれています。

こんな感じで左→右、下に行って左→右・・・という動きになります。

参考：ユーザビリティ研究の第一人者ヤコブ・ニールセン博士の研究結果

アラビア語や日本語の縦書きでない限り、文章は左から右に読みますよね？

これらの視線の法則を考えてみると、サイドバーがどっちにあった方が良いのか見えてきます。

右サイドバーの方が記事に集中しやすい

記事の読み始め(左)にサイドバーが無いから、記事に集中できます。

なのでブログなどにもよく使われていますよね

左サイドバーは回遊率重視？

こっちは記事の読み始め(左)にサイドバーがあるので、目に入ってしまい少し記事に集中し辛いです

以下の赤い部分が目に入ってしまう。

しかし、サイドバーに気になる記事や商品があるとクリックしたくなるので回遊率は上がるかと思います。

実際に楽天市場などのECサイトの商品ページとかに使われたりしていますね。

予想的には「2カラムの右サイドバー」が一番見やすいし親しみがあるのかなぁって感じです。

レイアウトについての調査結果

調査結果は以下です。

トップページ

  • 2カラム右サイドバー：15個
  • 2カラム左サイドバー：1個
  • 1カラム：4個
  • 3カラム：2個

記事ページ

  • 2カラム右サイドバー：17個
  • 2カラム左サイドバー：1個
  • １カラム：2個
  • 3カラム：2個

圧倒的に「2カラム右サイドバー」が多かったです。

トップがグリッドデザインで、記事ページが1カラムみたいなサイトもありましたが、2カラムの右サイドバーの圧勝でした。

フォントの設定について

今回は文章(pタグ)のみ紹介します。

理由としては、h2 / h3 / h4についてはいろんなデザインがあったので共通点は特に見当たらなかったからです。

Google先生はどんなフォント設定を推奨しているのか？

以下記事によると、「基本のフォントサイズが16px」「行間：1.2em以上」＊19.2px以上(親要素が16pxの場合)のようですね

確かに文章は16px周辺の設定が多いですね

＊見出しについて少しTIP

見出しについて、強いて言えば、背景と文字の色の差がはっきりしていると見やすい、視認性が高いので色に気をつけた方がいいかと思います。

例：これは見にくい

例：これは見やすい

Chromeの検証ツールで、背景と文字の色の組み合わせで見やすいのか見にくいのか見れますのでどうぞ。

とりあえずGoogle先生の意思に従い、文章pタグは16pxが多いと予想。

pタグ(文章)の設定の調査結果

PC

  • 14px：4
  • 15px：3
  • 16px：13
  • 17px：1
  • 18px：1

スマホ

  • 13px：1
  • 14px：4
  • 15px：5
  • 16px：11
  • 18px：1

＊rem,em,%の場合はpx換算して四捨五入しているので多少誤差はあるかと思います。

16pxの勝利ですね。

好みによっては少し小さくしてスタイリッシュにしているブログもありますが、今回調査した有名メディアサイトでは16px周辺が多かったです。

Google先生は偉大ですね

行間(line-height)の設定についてはバラバラ

見やすいフォント設定について

調査結果にも触れながら読みやすいフォント設定について紹介します。

文章pタグのみの紹介です。

文字間隔：letter-spacing

そもそもletter-spacingはブラウザのデフォルトで十分見やすいので設定しているサイトが全然なかったです。

文字間隔を設定していたサイトは22個中、3個だけ。

ちなみに0.07emくらいが可読性が高いと言われています。
＊可読性：読みやすさ

特にこだわらない場合はデフォルトで良さそうですね

行間：line-height

この設定については単位無しの設定がおすすめです。

例：p { line-height: 1.5; }

理由はフォントサイズに応じて高さを調節してくれるから。

emや%だと親要素で計算された行間が、子要素にそのまま引き継がれてしまいます。

参考：【CSS】CSSのline-heightで単位を指定しない理由

段落感の余白：margin / padding

調査したサイト22個中15個はmargin-bottomで設定していました。

一番多かった余白は20pxでしたが、これもバラバラでした。

段落間は最低でも１文字分の余白を取っておくと良いです。

近すぎると、読みにくいし、遠すぎるとそれはそれで読みにくい。。。

書体：font-family

「明朝体(セリフ体)」「ゴシック体(サンセリフ体)」がありますよね

基本的に「明朝体(セリフ体)」の方が長文では特に可読性が高いと言われていて新聞やレポート、企画書でよく使われているようです。

さて、調査した22個のサイトはどっちのフォントが多かったのでしょうか？

結果・・・全サイトゴシック体でした

ゴシック体の特徴が以下

  • タイトルや見出しにはゴシック体の方が見やすい(明朝体は太字に向かない)
  • 太字でなければゴシック体でも可読性は高い
  • スクリーン上のもの(スライド・ポスター等)はゴシック体の方が視認性が高まる

＊視認性：見た瞬間の認識のしやすさ、字の発見のし易さ

記事には見出しがよく出てきますし、以上の特徴を考えるとゴシック体がメディアサイトに向いていたみたいですね。

まとめ：２カラム右サイドバー多し。フォントは16pxくらいが多し。

調査結果をまとめると以下

  • レイアウト：2カラム右サイドバー
  • 文章(pタグ)のフォントサイズ：16px
  • 書体：ゴシック体(サンセリフ)
  • 文章(pタグ)の行間(line-height)：26px(結構バラバラ)
  • 文章(pタグ)の段落感の余白(margin / padding)：20px(結構バラバラ)

よく見るブログも右サイドバーが多く、PCでも読みやすいですね

でも、実際今はほとんどスマホが主流なので今後はスマホでどんな風に見せるのか大事になってきそうです(というかもうなっていますww)

Googleもモバイルファーストインデックスとやらを始めましたしね。

まぁでもPCサイト(特にメディアサイト)を制作する際に、どんなレイアウトにするか迷った時は参考になるかと思います。

以上、「有名メディアサイト22個のレイアウト・フォント設定を調査してみた」でした！！

サイト制作の依頼やコーディングの依頼を募集していますので気軽にご連絡くださ〜い^ ^
Web制作・コーディング依頼ページ
お問い合わせ

Twitter(@kentaro_koga)のDMでも大丈夫です^ ^


Posted

in

Tags:

,