・WEBデザインの適切なフォントサイズについて知りたい人
目次
WEBデザインのフォントサイズ
Illustration by Viktoriya Belinio from Ouch!
FigmaやAdobe XDなどのツールを使ってWEBデザインを行う際「このサイズで良いのかな？」と迷うことがありますよね。
適切なフォントサイズはユーザーの可読性とデザインの一貫性を確保するために非常に重要です。フォントサイズは、デザインの目的や対象ユーザーに応じて変える必要がありますが、一般的なガイドラインがあります。
ここからWEBデザインやUIデザインにおけるフォントサイズの基本的な考え方やガイドラインを詳しく説明します。
基本的なフォントサイズの考え方
WEBやUIデザインにおいて、フォントサイズはピクセル（px）やポイント（pt）、エム（em）、ルートエム（rem）などの単位で指定されます。近年では相対的な単位（remやem）を使うことが推奨されていますが、pxも依然として多く使われています。
フォントサイズの単位
- px（ピクセル）: 画面上のフォントサイズを固定で指定する場合に使用します。絶対的なサイズで、ブラウザやデバイスによって変わらないので、視覚的な安定感があります。
- em（エム）: 親要素のフォントサイズに基づいて相対的に指定されます。可変なデザインが必要な場合に使われます。
- rem（ルートエム）: HTMLのルート要素に基づいた相対的なフォントサイズ。emよりも予測しやすく、レスポンシブデザインでよく使われます。
デザイン初心者は、自己流でフォントサイズを決めないように注意しましょう。
基本的なフォントサイズガイドライン
Illustration by Icons 8 from Ouch!
一般的に推奨されるフォントサイズの範囲は次の通りです。
本文（ボディテキスト）
- 推奨サイズ: 16px ～ 18px
- 理由: 読みやすさを保つためには、最低でも16px以上が推奨されています。小さすぎると読みにくく、ユーザーがストレスを感じやすくなります。モバイル端末では18px程度にすることで、視認性を高められます。
見出し（ヘッディング）
- h1: 32px ～ 48px
- h2: 24px ～ 36px
- h3: 18px ～ 24px
- 理由: 見出しは本文よりも大きめのサイズにすることで、テキストの階層や重要性を視覚的に表現できます。見出しは目立たせる必要があるので、フォントサイズは大胆に設定します。
キャプション（説明文）
- 推奨サイズ: 12px ～ 14px
- 理由: メインのテキストより少し小さめにすることで、メインコンテンツとの視覚的な差をつけます。ただし、小さすぎると読みにくくなるため、慎重に設定します。
ボタンやナビゲーション
- 推奨サイズ: 14px ～ 16px
- 理由: ボタンやメニューのテキストはクリックやタップのしやすさを考慮し、最低限14px程度に設定するのが一般的です。小さすぎると操作しづらく、可読性も低下します。
モバイルとデスクトップでの違い
モバイルデザイン
- モバイル画面はデスクトップよりも小さいため、フォントサイズはやや大きめにすることが推奨されます。モバイルでの最小推奨フォントサイズは16pxですが、見やすさを確保するために18px以上を使用することもあります。
- タップしやすいように、ボタンやリンクのフォントサイズやクリックエリアも十分に大きくすることが重要です。
デスクトップデザイン
- デスクトップ画面では、本文のフォントサイズは通常16px以上であれば十分です。見出しはモバイルよりもさらに大きくして、画面の広さに合わせたバランスを取ります。
レスポンシブデザインでのフォントサイズ
レスポンシブデザインでは、画面サイズに応じてフォントサイズを自動調整する必要があります。remやemを使うと、デバイスに応じた柔軟なフォントサイズの変更が可能です。例えば、デスクトップでは大きなフォントサイズ、モバイルでは少し小さめにするなどの調整が必要です。
フォントサイズと可読性
フォントサイズが小さすぎると、ユーザーにとっての可読性が低下し、離脱率が高くなる可能性があります。適切なフォントサイズを選ぶ際には、可読性を最優先に考えましょう。
行間（ラインハイト）
- 推奨される行間: フォントサイズの1.5倍程度
- 理由: 行間を広げることで、文字が詰まって見えず、読みやすさが向上します。小さなフォントサイズでも、行間を適切に設定することで可読性が保たれます。
行間が狭いと読みにくいですよね。
すべての人が使いやすいフォントサイズ
すべての人が使いやすいように工夫されたデザインやシステムを考慮すると、フォントサイズを大きめに設定し、画面の拡大縮小機能の対応が必要です。すべての人に配慮することで、視覚障がいを持つユーザーも含め、ユーザーがWebサイトを快適に利用できるようになります。
最低フォントサイズ:
16px以上が基本
相対的なフォントサイズの使用:
remやemを使うことで、ユーザーが拡大しても崩れにくいデザインを実現します。
デザイナーが使うフォントサイズ
実際にデザイナーがどれぐらいのフォントサイズにするかは、作るデザインによって変わってきます。
デザイン初心者は適切なフォントサイズを感覚的につかむために、ギャラリーサイトで良さそうなサイトをトレースすると良いと思います。
デザイン初心者におすすめのギャラリーサイト
今回紹介するギャラリーサイトは全部おすすめなので、お気に入りにいれてチェックしましょう！
WEBデザイン制作の参考になるサイトです。
Web Design Clip [S] スマホサイト・レスポンシブデザインのクリップ集
Webデザインギャラリー・参考サイト集｜MUUUUU.ORG
SANKOU! | Webデザインギャラリー･参考サイト集 (sankoudesign.com)
Responsive Web Design JP | 日本国内の秀逸なレスポンシブWebデザインを集めたギャラリーサイト (responsive-jp.com)
サムネイルなら、こちらのサイトがおすすめです。
SAMUNE｜良質なサムネイル専門のデザインギャラリー (thumbnail-gallery.net)
バナーなら、こちらのサイトがおすすめです。
【総数6696件】BANNER LIBRARY | デザインの参考に！おしゃれなバナーだけを集めたギャラリーサイト (design-library.jp)
テイストの違うものをいくつかトレースしてみましょう！
まとめ
WebデザインやUIデザインでのフォントサイズは、ユーザーの読みやすさやデバイスに合わせて調整する必要があります。基本的に本文は16px以上、見出しやボタンは大きめに設定し、画面サイズに応じて動的に変更できるように相対的なフォント単位（remやem）を使うことが理想です。また、すべての人が使いやすいように工夫されたデザインにすることが、使いやすく美しいデザインにつながります。
さいごに
WEBデザインを学ぶなら、業界最安値のWEBスキル特化型オンラインスクールの「デイトラ」がおすすめです。現場のスキルが身につくカリキュラムが揃っているので、現役のデザイナーから見てもレベルの高いスクールだと思います。
グラフィックデザイナー/WEBデザイナーのアマノです。
今回は、WEBデザインのフォントサイズについてまとめました。