こんにちは！mizuki（@kikapyon）です。
フォントサイズは、デバイスによって読みやすいと感じる大きさが違い、何に沿って決めていけばいいか最初はよく分からないですよね。
この記事ではフォントサイズを決めていくためのガイドラインや業務で使えるコツをご紹介していきます。
私のようなUIデザイン初心者で、そもそもどのくらいのフォントサイズが普通なんだ？と疑問に思っている方や、初心に立ち返ってフォントサイズについて知りたい方はぜひご覧ください。
目次
結局のところ、適したフォントサイズってなに？
結論から言うと決まり・規則は無い
フォントサイズは必ずこれ！これなら間違いない！という決まりはありません。というのも、想定される表示環境（デバイスや解像度や用途など）が多く、適切なフォントサイズはその時々の状況によるからです。
そのため今回は、最終的な記事のゴールとして「手元にある本を読む時のような自然と心地良いフォントサイズ」を模索していく時に役立つ情報を集めました。論文や記事などを調べてみて、いくつか参考になりそうなガイドラインや考え方のコツなどを発見したのでそちらをシェアしていきますね。
調べたところちょっと面白いガイドラインを見つけました。
読みやすいのはベースラインから0.3°の高さの文字です。
これは理論的には素晴らしいことですが、実際には計算が非常に困難です。
- 誰もが同じ距離からスマートフォンやモニターを見ているわけではない
- すべてのデバイスが同じサイズのピクセルを持っているわけではない
- 同じフォントサイズ、ピクセル密度、表示距離であっても、すべてのフォントが同じ読みやすさというわけではない
「引用：Font Sizes in UI Design: Principles & Resources/Angular Size （筆者翻訳）」
見ているモニター環境などが違うので一概に言えないのはもちろん、いちいち測ってデザインするのは現実的ではないですよね。
規則が無いならどう決めていけば良いのか
というわけで、ここからは実務で使えるフォントサイズを決める方法を4つ紹介します。
1.デザインガイドラインを参考にする
実はマテリアルデザイン（Google）やDeveloper（Apple）という有名なガイドラインがあります。まずは、この2大ガイドラインを理解しておくのがおすすめです。なぜなら、フォントサイズだけでなく、あらゆるUIデザインの基礎知識が身につき、自分のデザインに活用できるようにからです。
- material design（Google）マテリアルデザインのデフォルトのフォントサイズは、16pxのRoboto、セカンダリーフォントサイズは14pxです。参考：https://m2.material.io/design/typography/the-type-system.html#type-scale
- Developer（Apple）iOSのデフォルトのフォントサイズは17pxのSF Pro、セカンダリーフォントサイズは15pxです。参考：Typography
会社によっては、偶数単位（12px、14px、16px…）でデザインしたりと、各々のガイドラインを運用しているところもあります。
2.ページの用途別にサイズを変える
快適なフォントサイズは、用途別でも異なります。
デスクトップWebサイトまたはWebアプリの場合、ほとんどはテキストが多いページとインタラクション（相互作用によるユーザーとページの交流）が多いページの2つに分類できます。
- テキストが多いページ
テキストが多いページは記事やブログ、ニュースなどです。これらは、ページ上にユーザーの目的があるページなので、インタラクションは少なく、あっても少しのリンク程度です。テキストの多いページでは目が疲れないように、より大きなフォントサイズが好まれます。記事やブログなどのページ以外では、よっぽどでないとページ内の全ての文字を読むことってなかなか無いですよね。装飾的な意味でのテキストと、テキストがメインのコンテンツは同列では語れません。
- インタラクションが多いページ
インタラクションが多いページはホバー、クリック、リストまたはテーブル内の項目の検索、編集、入力などを頻繁に行うページです。ページには多くのテキストがあっても、すべてを読むものではありません。テキストが多いページと違い、比較的小さいテキストサイズでも許容されることが多いです。さらに、ページ内でより重要な意味を持つテキストはより大きく、目立つようにする必要性があります。カラーをつける場合はコントラスト比のチェックを忘れずに！
【関連記事】
【初心者向け】デジタルプロダクトにおける最適なコントラスト比を考えよう
3.できるだけ少ないフォントサイズを使う
多種類のフォントサイズを使用してしまうことは初心者のUIデザイナーがやってしまいがちです。私もよく分からずにそれぞれの箇所に合わせた多くのフォントサイズを使っていました。ですが、パッと全体を見た時まとまって見えないなと感じることが多々ありました。
サイズの種類が多いと、メリハリがつかなくなって全体的にぼんやりとした印象になってしまい、本来の読ませたいテキストを読んでもらえなかったりします。
インタラクションが多いページであったとしても、合計で約4種類のフォントサイズを使用すると、見栄えがよくなります。少ないフォントサイズの中でも、しっかりと強弱をつけてみてください。
4.他言語のサイズ感を知っておく
画像を見て分かるように、同じptのテキストでも英語と日本語を並べて比べてみると、顕著に違いが現れます。言語によっては大きさが異なることを理解した上で、その都度サイズ感を調整しながらデザインしていくのがおすすめです。
デバイス別のフォントサイズについて
常に実際のデバイスでデザインを表示すること
モバイルのフォントサイズを検討する際、必ず実際のデバイスでデザインを表示することをおすすめします。pc画面などでのデザインの感触は、手に持って見ている時とは大きく異なるため、逐一確認していくことが大切です。
デスクトップで見ていたデザインを手元で確認してみると、フォントのサイズや間隔などが思っていたデザインとずれていることが多々あります。
プレビューを確認する際も、画面に合わせて拡大されている場合があるので、実際のサイズ（100%）になっていることを再度確認してください。
デスクトップ環境とモバイル環境の感じ方の違い
まずユーザーは以下のような理由から、デスクトップと比べてモバイルでWebを見ることに負担を感じています。
- ダウンロードが遅い
- データ入力用の物理的なキーボードが無い
- マウスが無いため、コマンドを使用したりコンテキストメニューを開くことができない
- モバイルに未対応のデスクトップ用Webサイトでは操作がしにくい
- 画面が縮小されるためテキストも小さく表示され、見にくい
- 一貫性のない奇抜なアプリUIである
私自身も画面とテキストが縮小されて見にくくなってしまうので、わざわざパソコンを取り出してwebページを開いた経験があります。こんな時、さらにテキストが小さく見づらかったら、特に文字の多いページはユーザーの読む気を無くしてしまいます。
さらには、デスクトップモニターと比べてモバイルのコンテンツ理解度は48%という研究結果が出ています。同じデザインでも約1/2も差が出てしまうので、そこを頭に入れた上でより分かりやすく2倍認知しやすいUIを作っていきたいですね。
ユーザーが認知がしやすい一貫性のあるUIに興味がある方は、ぜひこちらの記事もご覧ください。
【関連記事】
【初心者向け】デザインにすぐ活かせる！カラーや形やサイズの一貫性がユーザーにもたらす影響をまとめてみた
おわりに
いかがでしたでしょうか。今回は読みやすいフォントサイズの決定へのコツをご紹介しました。これさえ覚えとけば間違いないというフォントサイズはありませんが、知識があればより見やすくデザインできます。
紹介してきたような参考情報をいくつか持っていれば、とりあえずは安心ですよね。
どのデジタルプロダクトで表示されるか、ページの用途は何かでも変わってくるため、大体のガイドラインを参考にしつつ、それぞれの環境デバイスで必ずチェックしながら決定していくのがおすすめです。
参考文献
Mobile Content Is Twice as Difficult
Font Sizes in UI Design: Principles & Resources
The Responsive Website Font Size Guidelines
Web Content Accessibility Guidelines (WCAG) 2.0
Twitterでは新着記事の情報やTipsを日々更新中です！フォローいいねコメントお待ちしております。
