見やすいスマホサイトとは? ニュースサイトの比較で適切なフォントサイズを探る

公開日:2015-03-09 更新日:2024-02-05 by SEデザイン編集部

目次

スマートフォン向けのWebサイトは、PCよりもはるかに小さい4~5インチ前後の画面サイズで作ることを念頭におく必要があります。PCサイトのようにたくさんの要素を配置してしまうと、それに合わせてフォントサイズも小さくなり、見にくくなってしまいます。

では、スマホサイトのフォントサイズはどれくらいが適切なのでしょうか。
それには人気の高いニュースサイトを調べるのが近道。というわけで、PC版Chromeの拡張機能「CSSViewer」(https://chrome.google.com/webstore/search/cssviewer)を使い、著名ニュース・コラムサイトのスマートフォン向けトップページで使われているフォントサイズ(使用単位:px/%)を調べてみました。

Yahoo!ニュース

http://news.yahoo.co.jp/
Yahoo!ニュース画面

国内外の政治・経済から、IT、エンタメに至るまで、あらゆるジャンルのニュースをいち早く伝える国内最大手のニュースサイト。タブ状のボタンでジャンルの切り替えがすばやく行える工夫もあります。

  • 最大フォントサイズ:18px
  • 最小フォントサイズ:10px
  • 使用フォントサイズ:9パターン(10/11/12/13/14/15/18px、13pxの87.5%/14pxの87.5%)

マイナビニュース

マイナビニュース画面

最新のデジタル・IT関連ニュースを中心に、エンタメやライフスタイル、エンジニア向けニュースなど、ライトな情報もコアな情報もまとめて読むことができます。トップページはシンプルな構成で、注目の記事をサクサク読んでいけるのがうれしいところ。

  • 最大フォントサイズ:14px
  • 最小フォントサイズ:10px
  • 使用フォントサイズ:5パターン(10/11/12/13/14px)

ロケットニュース

http://rocketnews24.com/

ロケットニュース画面

ジャンルにこだわらず、独自の視点で世の中やネットの面白い話題を取り上げるサイト。写真を多数使い、ざっくばらんな語り口でブログ風に展開する記事内容が、ライトなユーザー層に人気。

  • 最大フォントサイズ:15px
  • 最小フォントサイズ:12px
  • 使用フォントサイズ:4パターン(12/13/15px、13pxの108%)

cakes

cakes画面

新しい電子マガジンを志向する、今回紹介する中では最も後発のコラムサイト。著名ライター、コラムニスト、作家、クリエイターらが執筆を担当する豪華布陣で、ここでしか読めないコンテンツが盛りだくさん。

  • 最大フォントサイズ:14px
  • 最小フォントサイズ:10px
  • 使用フォントサイズ:5パターン(10/11/12/13/14px)

Antenna

https://antenna.jp/
Antenna画面

アプリ版も用意されているキュレーションサイト。ニュースサイトにおける記事やコラムをビジネス、IT・モバイル、ライフスタイルなど、分かりやすいカテゴリーに分類して紹介しています。大きな画像が並ぶマガジン風のトップページが特徴です。

  • 最大フォントサイズ:40px
  • 最小フォントサイズ:24px
  • 使用フォントサイズ:4パターン(24/30/36/40px)

まとめ

以上の通り、ほとんどのニュース・コラムサイトでは4~5種類のフォントサイズを使い分けており、その中でも12/13pxが多いという結果となりました。

Yahoo!ニュースのみ9種類と多いものの、扱うコンテンツが大量にあり見にくくなりがちなところを、フォントサイズにメリハリをつけることで整理しているものと思われます。

Antennaは他と比べて一回り以上フォントサイズが大きめに設定されていますが、これはビジュアルを大きくし、少ない文字数でマガジン風に見せるという独特のスタイルによるものでしょう。一概には言えませんが、マガジン風のインターフェースには大きめのフォントサイズが合うということが言えます。

なお、今回はWebブラウザからアクセスしたWebサイトを調査対象としましたが、同じ画面サイズなので、アプリのUIにも参考になります。Android開発者向けサイトでも、フォントサイズは限定することが推奨されており、多数のフォントサイズを使うのは混乱を招くことに注意しましょう。

コンテンツマーケティング最新トレンドHRtech編

LPOの基礎
新規CTA

関連記事

コンテンツマーケティングで、
ビジネスの効果を最大化しませんか?

もっと詳しく知りたい方

ご質問・ご相談したい方