モバイルフレンドリー対応_GoogleとAppleの推奨フォントは?

2015.04.23
  • UXデザイン

こんにちは、内藤です。

モバイルフレンドリー対応の連載、第2回目です。今回は、GoogleとAppleの推奨するフォントについて調べたので、それをお伝えしたいと思います!

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

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

それでは第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.25px14.6px)を推奨

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

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

追記(2015/4/28):「1ポイント0.75px」は計算が間違っていました。96ppiの場合「1ポイント 1.33...px」です。よって、Appleのアプリのガイドラインである、11ポイントというのは、約14.6pxとして考えていただければと思います。

まとめ

上記まとめると、

  • Goolgeは、フォントサイズ16px、行間1.2em を推奨
  • Androidは、標準フォントサイズ18sp を推奨
  • Appleは、極小で8.25px14.6px 以上を基準にフォントサイズを決定することを推奨

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

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

シナップではサイト内最適化、UI改善のお手伝いを行なっております。
お気軽にお問い合わせください。

シナップは、Webサイト、アプリ、IoTなどインターネットとつながるユーザー接点すべてをデザインし、クライアントのビジネス立ち上げ、サービスの継続的発展をサポートすることを得意としている会社です。
サイト内最適化、UI改善に関するご相談ございましたら、お気軽にお問い合わせください

Web戦略から制作、グロースまで総合的に支援します
シナップはサービスの継続的な成長をサポートするデザインコンサルティングです。戦略的から制作・開発、そしてサービスのグロース・運用まで、すべてのワークフローにおいて支援が可能です。
この記事をシェアする

関連記事

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を使用してアクセスデータの取得・利用等を行います。