はじめに
この文書は、Webサイト制作で「見やすく」「伝わりやすい」文字サイズの決め方をまとめたガイドです。本文と見出しの推奨サイズ、階層の視覚表現、デスクトップ／モバイルでの最適化、子ども向けの配慮、フォントの太さや種類まで扱います。目的は、読みやすさ（可読性）と情報の階層（視覚的な優先度）を明確にすることです。
なぜ文字サイズが大切か
– 読みやすさを左右します。本文が小さいと読み疲れしやすく、情報を最後まで読んでもらえません。反対に大きすぎると行長やレイアウトが崩れます。
– 見出しのサイズ差で構造が一目で分かります。見出しが本文より明確に大きければ、読者は内容を素早く把握できます。
対象読者と使い方
– デザイナー、ライター、開発者、サイト運営者の方へ向けています。
– 各章で具体的な数値例と実践手順を示します。まずはこの章で目的と全体像をつかんでください。
本文フォントサイズの基本は16px
はじめに
本文の可読性を確保する上で、フォントサイズは最も基本的で重要な要素です。ここでは「16px」を基準に、その理由と実践的な調整方法をわかりやすく説明します。
なぜ16pxが推奨されるか
多くのユーザーにとって16pxは読みやすい大きさです。ブラウザの既定値に近く、行間や文字幅と組み合わせると視認性が高くなります。検索エンジンやアクセシビリティの観点でも評価されやすいです。
調整の目安（具体例）
- 標準サイト：16px、行間は1.4〜1.8倍
- 情報量が多いサイト：14pxにして行間を広めに（1.6〜1.8）
- 子ども・高齢者向け：16〜18pxを推奨
モバイルでの注意点
モバイルではピンチズームやビューポート設定で表示が変わります。CSS例：
body { font-size: 16px; line-height: 1.6; }
メディアクエリで微調整すると良いです。
実践的な考え方
サイト全体のバランスを見て、見出しとのサイズ差を保ちます。まず16pxを基準に試し、ユーザーテストで調整してください。
見出しの階層構造と推奨サイズ
見出しの役割
見出しは情報の優先順位を示し、読者が内容を素早く把握できます。本文より明確に大きく設定すると視覚的に階層が伝わります。読みやすさと導線を考えて調整してください。
基本の推奨サイズ（本文基準16px）
- H1（大見出し）: 28〜32px
- H2（中見出し）: 22〜26px
- H3（小見出し）: 18〜20px
H3は本文（16px）より2〜4px大きくするのが一般的です。
実務的な注意点
- 一貫性を保つ: 同じ階層は同じサイズで統一してください。読者が章と節を直感的に区別できます。
- 間隔と行間: 見出しは余白を十分に取り、本文との距離で階層感を強めます。
- コントラスト: 背景と文字色の差を確保し、視認性を高めます。
- 相対指定の活用: remやemで指定するとレスポンシブ対応が容易です。
具体例（簡潔）
CSS例: h1{font-size:2rem} h2{font-size:1.4rem} h3{font-size:1.125rem}
これらを基準に、デザイン全体のバランスを見ながら調整してください。
見出しサイズ設定の実践的なアプローチ
はじめに
見出しサイズは見た目の印象と可読性に直結します。ここでは実務で使える手順と具体例を丁寧に説明します。
参考サイトのフォント確認方法
- ブラウザの検証ツール（右クリック→検証）で該当見出しのフォントサイズを確認します。例：ニュースサイトのH2が28pxなら、同業種で似た印象が出せます。
- 複数サイトを比較して平均値を取ります。業界の傾向がわかります。
業界別ベンチマークの活用
- コーポレートサイト：落ち着いた印象で36〜42px（H1）をよく使います。
- ブログ・ニュース：見出しの区切りを明確にするため、H2は28〜34pxが多いです。
日本語と英語の混在への配慮
日本語は字幅が広めに見えます。英語のみの見出しは同じpxでも小さく見えるため、英語見出しはH2で32〜36pxを目安に調整してください。
書体による調整
明朝体は小さく見えがちなのでやや大きめに、ゴシック体は太めに見えるため控えめに。実機で必ず確認します。
実務チェックリスト
- 参考サイトを3つ以上調査する
- 日本語・英語それぞれで見た目確認する
- 書体を切り替えて表示テストする
- デスクトップとモバイルでサイズ感を確認する
この手順を踏めば、業種に合った見出しサイズを効率よく決められます。
見出しと本文のサイズ差による視覚的効果
視覚的な階層が一目で分かる
見出しを本文より1.5～2倍にすると、情報の階層がはっきり伝わります。読者はページを流し読みしても、重要な見出しへ自然に視線を誘導されます。
強調と読みやすさのバランス
フォントの太さ（ウェイト）も合わせて調整すると効果が高まります。本文は400～500のノーマル〜中程度、見出しは600～700のやや太めを推奨します。太さとサイズを両方使うと、過度に大きな文字に頼らずに強調できます。
実践的な例（本文16pxを基準に）
- 本文: 16px、ウェイト400–500、行間は1.4–1.6
- 小見出し（H2相当）: 24px（1.5倍）、ウェイト600
- 大見出し（H1相当）: 32px（2倍）、ウェイト700
この組み合わせで見出しの優先度が自然に伝わります。
注意点と確認方法
差が小さすぎると階層が分かりにくく、逆に大きすぎると文脈が断ち切られます。実機で「一目で見出しが拾えるか」「本文の読みやすさが損なわれないか」を確認してください。色や余白も一緒に調整すると、より安定した視認性が得られます。
デスクトップとモバイルでの最適化
共通の基本
本文の基準は16pxのまま可読性を最優先にします。フォントは読みやすいものを選び、行間（line-height）と最大行長を合わせて調整します。視認性を上げることでUXが向上します。
デスクトップの最適化
行間は1.5〜2.0倍を目安にします。画面幅が広いため、1行の文字数が多くなりがちです。読みやすさを保つには最大行長を60〜75文字（一般的にはmax-width:65ch）に制限すると良いです。段組みを使う場合は列間を広めに取り、見出しの階層差を明確にします。
モバイルの最適化
スマートフォンでも本文は16pxを基準に維持します。行間は1.6〜1.8倍にして詰まり感を解消します。段落を短めにし、見出しを簡潔にすることでスクロール中の負担を軽減します。タッチ対象は十分な余白を確保してください。
実装のポイント（簡単なCSS例）
- 基本：html{font-size:16px;} body{line-height:1.6; max-width:65ch;}
- レスポンシブ：@media (max-width:600px){body{line-height:1.7; padding:16px;}}
見出しと本文の比率
見出しは本文より明確に大きくし、階層を視覚で判別できるようにします。デスクトップでは差をやや大きめに、モバイルでは過度に大きくしないことがポイントです。
子ども・若年層向けサイトの特別な配慮
はじめに
子どもや若年層向けのサイトは、読みやすさと親しみやすさが最優先です。デザインは楽しくても、文字が読みにくければ情報が伝わりません。ここでは具体的なフォント設計のポイントをわかりやすくまとめます。
フォント選び
丸みのある書体を基本に選びます。ひらがなやカタカナが多い文章では、角が強いゴシック体より柔らかいラウンド系が親しみやすく読みやすいです。例としては丸ゴシック系やラウンドサンセリフ系を検討してください。
文字間と行間
文字間は通常よりやや広めに設定します。特にひらがな・カタカナが多い場合は0.02em〜0.08em程度の字間を試してください。行間は1.6〜1.8倍を目安にし、行間を広くして一行ごとの区切りを明確にします。
文字サイズと見出し
本文は16〜18pxを基本にします。小学校低学年向けには18px寄り、高学年や若年層は16pxでも問題ありません。見出しは情報の重要度を伝えるため20px以上を目安に段階的に大きくします。見出しは太めのウエイトで視線を引きます。
配色と可読性
背景と文字のコントラストを十分に確保します。黒や濃いグレーの文字色を基本にし、強調色は明るく鮮やかな色を使います。小さな装飾や細い線は避けて、はっきり見える形を保ちます。
実践チェックリスト
- 本文16〜18pxで確認する
- 行間1.6〜1.8倍に設定する
- 字間をやや広めに調整する
- 見出しを20px以上で階層化する
- コントラストとタッチ領域を確認する
上記を基に数パターン作って、実際の子どもや保護者に見てもらうと確実です。
