―HOMEABOUTSERVICEWORKSRECRUITBLOGACCESSCONTACTBLOGTOPBLOG2015/05/15スマホサイトで指定すべき最適なフォントサイズとは?(モバイルフレンドリー対応)こんにちは、内藤です。モバイルフレンドリーの連載、第3回目です。前回、GoogleとAppleの推奨するフォントサイズについてご紹介しました。実際、世の中のサイトはどのくらいのフォントサイズを設定しているのでしょうか。今回、"記事が読まれること"を主目的としているサイトを30ほどピックアップして、各サイトのフォントサイズ、文章量について調べてみました。設計時に判断の迷う、「ページ分割」についてもリサーチしてみたので合わせてご覧ください。第6回:「記事をページ分割するメリット・デメリット」それでは第3回、いってみましょう。今回ちょっと長い記事になってしまったので前編後編に分けました。リサーチの対象サイトと調査ツールまず調査方法について軽くお伝えします。今回対象としたサイトの数は30、「ポータルサイト」「新聞社」「IT系ニュース」「バイラルメディア」「趣味系サイト」そして、こういったトピックへの感度の高い「ウェブ制作系ブログ」の5つのカテゴリで各5つの記事をランダムに選択して調査しています。主目的としたサイトをピックアップしました。今回行った主な調査はフォントサイズのリサーチです。「WhatFont」というブックマークレットを使って各サイトで使用されているフォントサイズを確認しました。(Chrome拡張)割り切れない数値が結果として表示された場合は、小数点第2位を四捨五入しています。今回のリサーチのデータはここで一般公開していますので、よかったらこちらもご覧ください。記事タイトルのフォントサイズは抑えめ傾向こちらが記事タイトルのフォントサイズの結果です。驚きの結果ではないですが、ほぼ全てのサイトでタイトルのフォントサイズは本文のサイズよりも大きいものを採用していました。多かったサイズは18pxで、また約75%以上が17px以上を採用しています。タイトルと本文の区別が一瞬でつくようにフォントサイズを設定することがある種セオリー的なところがある一方で、PCサイトほどジャンプ率は大きくなく、ページ全体のメリハリは抑えめな印象がありました。スマートフォンという小さな画面のファーストビューで、タイトルのフォントサイズを大きくして目立たせるよりは他の情報を多く見せることを優先しているといった感じでしょうか。トップページなどのインデックスページ経由にしろ、SNS経由にしろ、すでにタイトルを見て詳細ページに訪れている場合が多いので、詳細ページでのタイトルは情報としての優先度があまり高くないと判断しているのかもしれません。本文中に使われている小見出しの結果はこんな感じでした。小見出しはルールを設定していないサイトが半分ありました。カテゴリ別に見てみると「ポータルサイト」「新聞社」「IT系ニュース」でその多数を占めています。これらは記事をじっくり読ませるというよりは事実を早く伝えることを優先するサイトであるため、ある程度テンプレート化された構成でどこよりも早く記事を提供することがユーザの興味を引き付けることができ、構成を決めてその中からユーザを引き付ける見出しを考える必要がないのかもしれません。ポータルサイトは様々なメディアの記事を掲載しているため、小見出しがあったりなかったりは、掲載元によるところが大きいようでした。小見出しを設定しているサイトのフォントサイズでは、特定のサイズに集中しているということは見られませんでした。カテゴリ別で見ても同じです。小見出しで引きをもたせようとしているのか、記事のアクセントとして使っているのか、ここはサイトやライターの戦略によって個々で変わってきそうです。本文で使っているフォントサイズと行間の結果はこちら。1.5emが人気ですね。1.2emのサイトはありませんでした。日本語にはあまり向いていないというのが現場の意見なのかもしれません。レイジー)で、一番多かったです。他の組み合わせは様々でした。フォントサイズと行間、これに関してのカテゴリによる傾向はあまりない印象ですが、今回の対象サイトの中で強いて言えば、趣味系サイトは比較的フォントサイズが抑えめな結果となりました。まとめ前回のブログでご紹介した、本文サイズはだいたい16pxが良さそうというGoogleのガイドラインに対して、多くのサイトが応えているという結果になりました。ガイドラインで明記されていなかった見出しとタイトルは、各サイトでの戦略に基づいた設計がされ、多くに好まれて使われているフォントサイズというのはなさそうということが分かりました。見出しやタイトルのフォントサイズの読みやすさ(16px以上)は大前提として、記事全体のバランスとその要素をどのように活用したいのかという検討のもと、フォントサイズ、行間は決定されていると予想されます。何となく感覚としては理解していたものの、改めてリサーチしてみると納得感がありますね。後編は、今回のフォントサイズ、行間をリサーチしたサイトと同じサイトを対象に1記事あたりの文章量を見て行きたいと思います。公式アカウントブログの更新情報やシナップからのお知らせを配信しています。SINAPシナップの活動報告や、IT業界のトレンド情報などを発信しています。ご相談・お問い合わせお仕事のご依頼やご相談など、お気軽にお問い合わせください。