第2回 モバイルフレンドリー対応：「GoogleとAppleの推奨するフォントについて」

こんにちは、内藤です。

スマホ サイト内最適化の連載、第2回目です。今回は、GoogleとAppleの推奨するフォントについて調べたので、それをお伝えしたいと思います！

とはいえ、ウェブ制作をされている方ならご存知の方は多いと思いますので、今回はさらっとおさらいしていただければと思います。

<連載予定>
第1回：「"スマホで読まれやすい文章"とはどういうものか」
第2回：「GoogleとAppleの推奨するフォントについて」
第3回：「世の中のスマホサイトのフォントサイズと文章量はこんなかんじを調査してみた」
第4回：「"読まれる文章"への改善のために基準となる数値を取得してみた」
第5回：「"読まれる文章"のために実施した改善、果たして効果はあったのか」
番外編：「フォントだけじゃない！　世の中のスマホサイトは、読んでもらうためにこんな工夫をしているよ」

それでは第2回、いってみましょう。

フォントの設計にある程度の正解は存在する

ウェブは誰のものでもないので、良くも悪くも「このルールに従って作りなさい」というものがありません。日々、ユーザ調査を行い、ユーザにどのように情報を提供されると効果的なのかについて制作者は考え、その時に一番良いとされるもので設計を行います。その設計は「誰がどのように使うのか」を基準に色々なことが決定されるため、正解はありません。

一方で、ウェブを使う時は大抵の人がGoogleの検索エンジンサービスを利用するため、Googleが自分たちの決めたルールに従わせる力をある程度持っているのも事実です。4月21日に始まったGoogleのモバイルフレンドリー評価がスマートフォンサイトでの検索結果に影響を与えるため、慌ててスマホサイト版をつくったり、モバイルフレンドリーのテスト結果を見てGoogleのルールに沿ってサイトの改善を行ったところは多かったのではないでしょうか。

また、ウェブサイトではありませんが、同じスマートフォンでの閲覧という意味ではアプリのルールも無視することはできません。特に、Appleの提供するiPhoneで販売するアプリはAppleの審査を通過しないといけないため、Appleのアプリ制作ルールに従う必要があります。

言うまでもありませんが、このGoogleとAppleは何も自分たちの力を誇示するためにルールを敷いているわけではなく、彼らもユーザにとって使いやすいものを追求しており、そのための調査をし、「こう作ったらいいよ」という最適解を私たちに共有してくれているので、それに従わない理由は特にありません。

では、このウェブで力をもっている2つ会社の提唱するフォントルールについて見て行きましょう。

Googleの提唱するフォントサイズは16px、行間は1.2em

Googleの定義する「読みやすいフォントサイズ」はこのページで確認することができます。さらっとサマると、こんな感じです。

• 16 CSS ピクセルの基本フォントサイズを使用する。
• 基本サイズに対して相対的なサイズを使って、フォントの拡大縮小を定義する。
• 一般的には、ブラウザのデフォルトの行の高さ 1.2 em がおすすめ。
• さまざまな端末でフォントが期待どおりに拡大縮小されるように、ビューポートを設定する。

このページの最終更新日は2014年4月11日、ちょうど1年前くらいですね。また、その約1年前の2013年には、IMJ社が900名を対象に行った「タブレット端末でのサイトユーザビリティ調査」でも、16pxが一番好まれるフォントサイズだとリポートしているので、現在の最適解としては一番適切なものだと感じます。

Androidのガイドラインでは 18sp が標準フォントサイズ

では、同じGoogleでもAndroidはどうでしょう。以下がAndroidのデザインガイドラインによるフォントサイズです。

• Text Size Micro（極小） 12sp
• Text Size Small（小）：14sp
• Text Size Medium（標準）：18sp
• Text Size Large（第）： 22sp

端末の解像度ごとに表示サイズが異なるのを防ぐため、またユーザの設定によってフォントサイズを調整できるように、Androidでは px ではなく sp という単位を使います。そのため、必ずしもpxと同じ前提のもとでの比較となりませんが、参考資料としては十分かと思います。

行間についてのルールは特にありませんでした。

iOSの基本的な考え方は「読みやすさを優先」、最低11ポイント（8.25px）を推奨

基本的な考え方としては「テキストの体裁については常に読みやすさを優先」とし、iOS7から加わった機能「Dynamic Type」に対応することを推奨しています。これに対応することによって、ユーザ側で好きなフォントサイズを設定することができます。

そのため、明確に◯pxというようなルールはないのですが、「iOS Human Interface Guidelines」によると、ユーザが「極小」を選択しても、11ポイント未満（1ポイント0.75pxで計算して、8.25px）にはしないように、と明記されています。Androidほど細かくルールはありませんが、ユーザが好きなフォントサイズを選べるように、選択肢を用意することを推奨する考えは同じですね。

まとめ

上記まとめると、

というかんじでしょうか。
フォントサイズは標準を、16〜18pxくらいで設定しておくのがよさそうですね。もちろんサイトやアプリによってターゲットが異なりますから、この標準を意識した上で適切な設計をしていくのがいいと思います。

次回は、世の中のサイトではどのようなフォントサイズを設定しているのかを見て行きたいと思います。