現代のWebで読みやすい文字を実現する実践ガイド

なぜ多くのWebサイトは、本来より読みにくいのか

2026年の平均的なWebサイトには、カスタムフォントファミリー、慎重に選ばれたブランドカラー、ピクセル単位で余白を指定するデザインシステムが備わっています。それでも、訪問者の多くが実際に読みに来た本文テキストは、低コントラストのグレーで14pxに設定され、段落ではなく見出し向けに最適化された書体で表示されていることが少なくありません。

これはデザイナーへの批判ではありません。読みやすさはビジュアルデザインとは別の専門領域であり、この2つは必ずしも一致しない、という確認です。ヒーローセクションでシャープに見える書体も、段落の長さになると読むのが疲れることがあります。写真映えするカラーパレットが、コントラストチェックに通らないこともあります。27インチのモニターで機能するレイアウトが、モバイルでは細いカラムに崩れることもあります。

よい知らせは、読みやすい文字にタイポグラフィの学位は必要ないということです。必要なのは、影響の大きい少数の変数に注意を払うことです。

フォントサイズ：思っているより大きく

Webで最もよくある読みやすさの失敗は、本文テキストが小さすぎることです。デザイナーはデスクトップのスケールで「すっきり見える」ために本文を14pxや15pxに設定しがちですが、読者のかなりの割合がスマートフォンで読んでおり、多くの場合、照明条件も理想的ではないことを忘れてしまいます。

2026年の本文テキストにおける実用的な基準は次のとおりです。

• Desktop: 最小18px、推奨20px
• Mobile: 最小16px、推奨18px

小さな文字に慣れていると、これらの数値は大きく感じるかもしれません。しかし、これは人が実際に画面上で読む方法を反映しています。文字を大きくすると目の疲れが軽減され、理解しやすくなり、ブラウザ設定を調整していない軽度の視覚障害のある読者にもコンテンツが届きやすくなります。

デザインシステムがより小さい文字を指定しているなら、日光の下でスマートフォン上でテストしてください。目を細める必要があるなら、小さすぎます。

行の高さ：テキストに呼吸する余地を与える

行の高さ（leading）とは、テキストの行間にある垂直方向のスペースです。狭すぎると行同士がにじんで見えます。広すぎると、目が次の行とのつながりを見失います。

本文テキストでは、1.5〜1.7 の行の高さがほとんどの書体で機能します。見出しはもっと詰めてもかまいません（1.1〜1.3）が、本文には余白が必要です。

CSSは次のとおりです。

body {
  font-size: 18px;
  line-height: 1.6;
}

これは、読みやすさを改善する最も簡単な方法の1つです。現在の本文テキストが line-height: 1.2 になっている、または固定のピクセル値を使っているなら、今日変更しましょう。

行の長さ：思っているより短く

本文テキストに最適な行の長さは、1行あたり45〜75文字、おおよそ8〜12語です。90文字を超える行は、次の行の先頭へ視線を戻すのが難しくなります。40文字未満の行は、途切れ途切れで断片的な読書体験を生みます。

多くのWebサイトは、特にデスクトップで、テキストをビューポート全幅に広げてしまうことでこれを誤っています。幅1920pxのモニターでは1行に150文字以上を収められますが、これは読むにはかなり疲れます。

解決策は、テキストコンテナにmax-widthを設定することです。

.prose {
  max-width: 65ch; /* 65 characters */
  margin-inline: auto;
}

ch 単位はあまり使われていませんが、この用途には最適です。フォントサイズに合わせてスケールし、おおよそ文字幅に対応します。

コントラスト：白地に黒ほど単純ではない

WCAG 2.1は、本文テキストに対して4.5:1の最小コントラスト比（AAレベル）と、7:1の強化されたアクセシビリティ（AAAレベル）を定めています。多くのWebサイトは紙の上ではこれを満たしていますが、実際には白い背景に薄いグレーのテキストを使っているため失敗します。

よくある問題例は次のとおりです。

• #666666 on #FFFFFF（4.54:1、ぎりぎり合格）
• #777777 on #FFFFFF（4.47:1、不合格）
• 白背景で #767676 より薄いすべての色（不合格）

デザインシステムで「text-secondary」が薄いグレーとして指定されているなら、テストしてください。WebAIM contrast checker が確認する最速の方法です。

ダークモードでは、これがさらに複雑になります。純白のテキストを純黒に置くとハレーション（発光して見える効果）が生じ、濃いグレーの上にわずかにオフホワイトを置くより読みにくくなります。よりよいアプローチは次のとおりです。

@media (prefers-color-scheme: dark) {
  body {
    background: #1a1a1a;
    color: #e4e4e4;
  }
}

書体の選択：デフォルトフォントは思っているより優れている

カスタムWebフォントは広く使われていますが、トレードオフもあります。レイテンシを増やし、ページの重さを増し、慎重に読み込まなければレンダリングをブロックすることがあります。本文テキストでは、システムフォントのほうがよい選択であることがよくあります。

2026年の堅牢なシステムフォントスタックは次のとおりです。

body {
  font-family: system-ui, -apple-system, 'Segoe UI', 
               Roboto, Helvetica, Arial, sans-serif;
}

これにより、macOS/iOSではSan Francisco、WindowsではSegoe UI、AndroidではRobotoが使われます。いずれも非常に読みやすく、プロが設計した書体で、即座に読み込まれます。

本文テキストにカスタムフォントを使う場合は、ディスプレイ用ではなく、長文読解向けに設計されたものを選んでください。避けるべきものは次のとおりです。

• 本文用の超ライトまたは超ボールドのウェイト
• コンデンスまたはエクステンドされたバリアント
• x-height（小文字の高さ）が低いフォント

採用を決める前に、選んだ書体を段落の長さでテストしてください。

レスポンシブタイポグラフィ：流動的な文字スケール

固定のフォントサイズは、デバイス間でうまくスケールしません。デスクトップでは快適な20pxの本文フォントも、モバイルでは大きすぎると感じることがあります。

流動的なタイポグラフィでは、clamp() を使って、最小値と最大値の間でフォントサイズをなめらかに変化させます。

body {
  font-size: clamp(1rem, 0.9rem + 0.5vw, 1.25rem);
}

これは小さな画面の16pxから大きな画面の20pxまでスケールし、その間をなめらかに補間します。メディアクエリのブレークポイントより洗練されており、あらゆるビューポート幅に適応します。

見出し、本文、小さなテキストを含む完全なタイプスケールには、Utopia のようなツールが、制約に基づいて流動的なスケールを生成します。

段落の間隔とテキスト揃え

重要な小さなディテールが2つあります。

1. 段落の間隔： 段落の間にスペースを追加する（margin-block-end: 1em）か、1行目のインデントを使う（text-indent: 1.5em）かのどちらかにします。両方は使いません。ほとんどのWebコンテンツでは間隔を使います。

1. テキスト揃え： 左揃え（RTL言語では右揃え）は、ほとんどの場合、均等揃えより読みやすいです。均等揃えは、ハイフネーションが有効でない限り、単語間隔が不均一になります。中央揃えの本文テキストは読みにくく、短い文章に限って使うべきです。

実践で読みやすさをテストする

読みやすさは完全に客観的なものではありませんが、テストはできます。

• 自分のコンテンツをスマートフォンで読む。異なる照明条件で試してください
• Lighthouseアクセシビリティ監査を実行する。コントラストやフォントサイズの問題を見つけられます（手順は how to read a Lighthouse report を参照してください）
• 50歳以上の人にページを読んでもらう。設定を調整せずに試してもらいます
• テキスト量の多いページの直帰率をアナリティクスで確認する。人がすぐ離脱しているなら、読みやすさが要因かもしれません

コンテンツが読みにくければ、人はそれを読みません。それだけのことです。

実際にはどう見えるか

2026年の読みやすい本文テキストスタイルは、たとえば次のようになります。

.prose {
  font-family: system-ui, sans-serif;
  font-size: clamp(1.125rem, 1rem + 0.5vw, 1.25rem);
  line-height: 1.6;
  color: #1a1a1a;
  max-width: 65ch;
  margin-inline: auto;
}

.prose p {
  margin-block-end: 1.25em;
}

@media (prefers-color-scheme: dark) {
  .prose {
    background: #1a1a1a;
    color: #e4e4e4;
  }
}

これは、フォントサイズ、行の高さ、行の長さ、コントラスト、レスポンシブなスケーリングを、十数行のCSSでカバーしています。派手ではありませんが、機能します。

ルールを破ってよいとき

これらのガイドラインは、情報を得るために人が読む段落、つまり本文テキストに適用されます。見出し、キャプション、UIラベル、マーケティングコピーには別の制約があり、これらのルールを曲げることができます。

しかし、誰かが記事、ドキュメントページ、製品説明を読むためにあなたのサイトに来たのなら、読みやすい文字は任意ではありません。それは基本的な期待です。