こんにちは、内藤です。

モバイルフレンドリーの連載、第3回目です。前回、GoogleとAppleの推奨するフォントサイズについてご紹介しました。では実際、世の中のサイトはどのくらいのフォントサイズを設定しているのでしょうか。今回、"記事が読まれること"を主目的としているサイトを30ほどピックアップして、各サイトのフォントサイズ、文章量について調べてみました。

また設計時に判断の迷う、「ページ分割」についてもリサーチしてみたので合わせてご覧ください。

<SINAP モバイルフレンドリー対応 連載>
第1回：「スマホで読まれる文章とは？」
第2回：「GoogleとAppleの推奨フォントは？」
第3回：「スマホサイトで指定すべき最適なフォントサイズとは？」
第4回：「スマホサイトの「続きを読む」は必要か？」
第5回：「スマホで読まれる文字数は？」
第6回：「記事をページ分割するメリット・デメリット」

それでは第3回、いってみましょう。今回ちょっと長い記事になってしまったので前編後編に分けました。まずは前編です。

リサーチの対象サイトと調査ツール

まず調査方法について軽くお伝えします。今回対象としたサイトの数は30、「ポータルサイト」「新聞社」「IT系ニュース」「バイラルメディア」「趣味系サイト」そして、こういったトピックへの感度の高い「ウェブ制作系ブログ」の5つのカテゴリで各5つの記事をランダムに選択して調査しています。

世の中のサイトと言っても様々な目的がありますが、今回は"スマートフォンで文章を読んでもらう"ためにはどうすればいいのかというリサーチですので、"記事を読んでもらうこと" を主目的としたサイトをピックアップしました。

今回行った主な調査はフォントサイズのリサーチです。「WhatFont」というブックマークレットを使って各サイトで使用されているフォントサイズを確認しました。（Chrome拡張）割り切れない数値が結果として表示された場合は、小数点第2位を四捨五入しています。

今回のリサーチのデータはここで一般公開していますので、よかったらこちらもご覧ください。

記事タイトルのフォントサイズは抑えめ傾向

こちらが記事タイトルのフォントサイズの結果です。

あまり驚きの結果ではないですが、ほぼ全てのサイトでタイトルのフォントサイズは本文のサイズよりも大きいものを採用していました。一番多かったサイズは18pxで、また約75%以上が17px以上を採用しています。

タイトルと本文の区別が一瞬でつくようにフォントサイズを設定することがある種セオリー的なところがある一方で、PCサイトほどジャンプ率は大きくなく、ページ全体のメリハリは抑えめな印象がありました。スマートフォンという小さな画面のファーストビューで、タイトルのフォントサイズを大きくして目立たせるよりは他の情報を多く見せることを優先しているといった感じでしょうか。または、トップページなどのインデックスページ経由にしろ、SNS経由にしろ、すでにタイトルを見て詳細ページに訪れている場合が多いので、詳細ページでのタイトルは情報としての優先度があまり高くないと判断しているのかもしれません。

本文中の小見出しは設定されていないサイトが半数

本文中に使われている小見出しの結果はこんな感じでした。

小見出しはルールを設定していないサイトが半分ありました。カテゴリ別に見てみると「ポータルサイト」「新聞社」「IT系ニュース」でその多数を占めています。これらは記事をじっくり読ませるというよりは事実を早く伝えることを優先するサイトであるため、ある程度テンプレート化された構成でどこよりも早く記事を提供することがユーザの興味を引き付けることができ、構成を決めてその中からユーザを引き付ける見出しを考える必要がないのかもしれません。

また、ポータルサイトは様々なメディアの記事を掲載しているため、小見出しがあったりなかったりは、掲載元によるところが大きいようでした。

小見出しを設定しているサイトのフォントサイズでは、特定のサイズに集中しているということは見られませんでした。カテゴリ別で見ても同じです。小見出しで引きをもたせようとしているのか、記事のアクセントとして使っているのか、ここはサイトやライターの戦略によって個々で変わってきそうです。

本文フォントサイズは16px、行間は1.5emが人気

本文で使っているフォントサイズと行間の結果はこちら。

フォントサイズは 16px、行間は 1.5emが人気ですね。前回の記事でGoogleの提唱する行間は 1.2emだとお伝えしましたが、今回の調査の中では 1.2emのサイトはありませんでした。Googleのモバイルフレンドリーのガイドラインは日本語で書いてありましたが、1.2em は日本語にはあまり向いていないというのが現場の意見なのかもしれません。

組み合わせで言えば、上記の組み合わせ「16pxと1.5em」が30サイト中、5サイト（Yahoo、msn、日本経済新聞、毎日新聞、キュレイジー）で、一番多かったです。他の組み合わせは様々でした。

フォントサイズと行間、これに関してのカテゴリによる傾向はあまりない印象ですが、今回の対象サイトの中で強いて言えば、趣味系サイトは比較的フォントサイズが抑えめな結果となりました。

まとめ

前回のブログでご紹介した、本文サイズはだいたい16pxが良さそうというGoogleのガイドラインに対して、多くのサイトが応えているという結果になりました。また、特にガイドラインで明記されていなかった見出しとタイトルは、各サイトでの戦略に基づいた設計がされ、多くに好まれて使われているフォントサイズというのはなさそうということが分かりました。見出しやタイトルのフォントサイズの読みやすさ（16px以上）は大前提として、記事全体のバランスとその要素をどのように活用したいのかという検討のもと、フォントサイズ、行間は決定されていると予想されます。何となく感覚としては理解していたものの、改めてリサーチしてみると納得感がありますね。

さて後編は、今回のフォントサイズ、行間をリサーチしたサイトと同じサイトを対象に1記事あたりの文章量を見て行きたいと思います。

<SINAP モバイルフレンドリー対応 連載>
第1回：「スマホで読まれる文章とは？」
第2回：「GoogleとAppleの推奨フォントは？」
第3回：「スマホサイトで指定すべき最適なフォントサイズとは？」
第4回：「スマホサイトの「続きを読む」は必要か？」
第5回：「スマホで読まれる文字数は？」
第6回：「記事をページ分割するメリット・デメリット」