スマホサイトで指定すべき最適なフォントサイズとは?(モバイルフレンドリー対応)

2015.05.15
  • UXデザイン

んにちは、内藤です。

モバイルフレンドリーの連載、第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回:「記事をページ分割するメリット・デメリット」

この記事をシェアする

関連記事

Webサービスを成功に導くシナップのUXリサーチ

2023.10.04
  • UXデザイン

一見良さそうに見えるデザインにも問題点が… デザイン4大原則から考えるUIデザインの完成度を高める方法

2023.06.06
  • UXデザイン
  • UI/UX

カスタマージャーニーマップは何で作る?カスタマージャーニーマップを作るツール3選

2022.10.25
  • UXデザイン

UXリサーチとは?今日からスモールスタートで始めるUXリサーチ

2022.06.14
  • UXデザイン

成長するサービスに必要不可欠なデザインシステム4つのメリット

2021.11.09
  • UXデザイン

成長するサービスを支えスケールを可能にするデザインシステムとは

2021.10.12
  • UXデザイン

いますぐできる利用者のネガティブな感情を取り除き、 ポジティブな感情をもたらすUXデザインのヒント

2021.04.13
  • UXデザイン

春のスタートダッシュを決めよう!~2021年度版:Web業界の新人さんにオススメの書籍10選~

2021.04.07
  • UXデザイン

この3つだけはおさえておきたい。明日から作業効率が大幅アップする!この半年で行われたAdobeXDの新機能(2020年6月-12月)

2021.01.14
  • UXデザイン

2020年春からおさえておきたいデザイントレンド 7選

2020.04.14
  • UXデザイン

参考にしたいデザインシステムまとめ 10選

2019.04.11
  • UXデザイン

簡単に作れて見栄えする!CSSで作るリッチなhover演出

2018.06.21
  • UXデザイン

パーツごとに見るモバイルUI:参考にしたいUIまとめ

2017.09.12
  • UXデザイン

パーツごとに見るモバイルUI:フォームの事例と、UIを考えるときのポイント

2017.09.06
  • UXデザイン

パーツごとに見るモバイルUI:カルーセルの事例と、設計・デザイン時に気をつけること

2017.08.29
  • UXデザイン

パーツごとに見るモバイルUI:ハンバーガーメニューを押した際のナビゲーションの表現方法

2017.08.23
  • UXデザイン

パーツごとに見るモバイルUI:ハンバーガーメニュー以外の特徴的なメニュー表現の事例紹介

2017.08.09
  • UXデザイン

視覚で伝わるインフォグラフィック!面白い事例も作ってみました!

2017.06.01
  • UXデザイン

初めてでも大丈夫!Adobe XDの書き出し機能と使い方

2016.12.14
  • UXデザイン

スムーズに検索させよう!複雑な検索をするときの画面やUIパターン

2016.02.09
  • UXデザイン

よくわかるIoTの仕組み 「モノ」とインターネットを接続するには

2015.11.19
  • UXデザイン

記事をページ分割するメリット・デメリット(モバイルフレンドリー対応)

2015.08.07
  • UXデザイン

モバイルフレンドリー対応:スマホで読まれる文字数は?

2015.07.30
  • UXデザイン

スマホサイトの「続きを読む」は必要か?(モバイルフレンドリー)

2015.05.28
  • UXデザイン

人気記事

このサイトでは、利用状況の把握などのために、プライバシーポリシーに基づき、Cookieを使用してアクセスデータの取得・利用等を行います。