サイトアイコン IT & ライフハックブログ｜学びと実践のためのアイデア集

日本語Webタイポグラフィ実践ガイド｜文字サイズ・行間・コントラストをWCAG 2.2で整える

greeden
alphabet letter text on black background

Photo by Magda Ehlers on Pexels.com

日本語のWebページを読みやすくするには、文字を大きくするだけでは足りません。

文字サイズ、行間、1行の長さ、段落の余白、配色を整え、拡大しても内容が欠けないかを確かめる必要があります。

一方、スクリーンリーダーが見出しやリンクを理解できるかは、見た目ではなくHTMLの構造に左右されます。

この記事では、編集者、デザイナー、フロントエンド開発者が共同で確認できるように、設計の出発点とWCAG 2.2の基準を分けて整理します。

最初に押さえる4つの判断

可読性とアクセシビリティの違い

可読性は、文字や文章を無理なく読み取れる度合いです。

文字の形、サイズ、行間、行長、配色、文章の組み立てなどが影響します。

Webアクセシビリティは、心身の特性や利用環境が異なっても、情報や機能を利用できるようにする考え方です。

可読性はその一部ですが、キーボード操作、代替テキスト、フォームのラベル、見出し構造なども含まれます。

したがって、文字が見やすいだけでスクリーンリーダーにも使いやすくなるわけではありません。

ページ全体の考え方は、関連記事「Webアクセシビリティとは何か」で確認できます。

WCAG 2.2の基準値と設計上の目安

数値を扱うときは、適合判定に使う基準と、読みやすさを調整するための出発点を混同しないことが大切です。

文字表示に関係する主なWCAG 2.2 Level AAの達成基準
確認項目 基準の要点 実務での確認
1.4.3 コントラスト（最低限） 通常の文字は4.5:1以上、大きな文字は3:1以上 文字と、その背後に実際に表示される色を組み合わせて測る
1.4.4 テキストのサイズ変更 文字を200%まで拡大しても、内容や機能を失わない 本文だけでなく、ボタン名、入力欄、通知も確認する
1.4.10 リフロー 横書きの内容は幅320 CSSピクセル相当で、原則として縦横両方のスクロールを求めない 狭い表示幅で本文、ナビゲーション、固定部品が欠けないかを見る
1.4.11 非テキストのコントラスト 操作部品や意味のある図形は、隣接色との間に3:1以上が必要となる場合がある 入力欄の境界、アイコン、フォーカス表示を状態ごとに測る
1.4.12 テキストの間隔 利用者が所定の行間や文字間隔などを上書きしても、内容や機能を失わない 文字の重なり、切り欠け、操作部品からのはみ出しを確認する
2.5.8 ターゲットのサイズ（最低限） 例外を除き、操作対象を24×24 CSSピクセル以上にするか、所定の間隔を確保する 小さなアイコンや隣接するリンクを実機でも操作する

文字の4.5:1と3:1は、W3Cの「1.4.3 コントラスト（最低限）」解説に基づく値です。

ここでいう大きな文字には書体や太さを含む定義があるため、見た目の印象だけで判定しません。

本文16px、行間1.7、行長40文字といった値は、WCAGの適合条件ではありません。

これらは試作を始めるための候補として扱い、実際の書体と文章で読みやすさを確かめます。

本文の文字サイズ、行間、行長

文字サイズは利用者の設定を妨げない

ブラウザの既定文字サイズを基準にし、本文は相対単位で指定します。

remはルート要素の文字サイズを基準にする単位で、サイト内の大きさを揃えやすくします。

clamp()は最小値、画面幅に応じた値、最大値をまとめて指定する関数です。

ただし、狭い画面で文字を縮める指定が、利用者の拡大を打ち消していないかを確認します。

:root {
  --text-size: clamp(1rem, 0.96rem + 0.2vw, 1.125rem);
  --text-leading: 1.7;
  --content-measure: 40rem;
}

.article-body {
  max-inline-size: var(--content-measure);
  margin-inline: auto;
  padding-inline: 1rem;
  font-size: var(--text-size);
  line-height: var(--text-leading);
}

このCSSは適合を保証する設定ではなく、調整を始めるための例です。

行間と行長は一緒に調整する

行間だけを広げても、1行が長すぎれば次の行を見つけにくくなります。

反対に、行を短くしすぎると改行が増え、文章の流れを追いにくくなります。

まず本文を実際の幅で表示し、行末から次の行頭へ視線を移しやすいかを確認します。

日本語本文では、たとえば行間1.6から1.8程度、1行35から45文字程度を試作の範囲にできますが、書体や読者層によって調整が必要です。

段落と見出しの余白で構造を見せる

段落は字下げだけに頼らず、段落間の余白でも区切ります。

見出しの前を後ろより広くすると、見出しが後続の本文に属することを視覚的に示せます。

ただし、余白だけで見出しを表現してはいけません。

WordPressの投稿タイトルをページの主見出しにし、本文はh2、必要な小見出しはh3という順序で構造化します。

200%拡大とリフローを別々に確認する

「200%まで文字を拡大できること」と「幅320 CSSピクセル相当で内容がリフローすること」は別の達成基準です。

リフローとは、表示幅に合わせて文章や部品が並び直されることです。

W3Cは横書きの内容について、幅1280 CSSピクセルの表示を400%に拡大した状態を、幅320 CSSピクセル相当の例として示しています。

詳しい条件と表などの例外は、W3Cの「1.4.10 リフロー」解説で確認できます。

.long-token {
  overflow-wrap: anywhere;
}

pre {
  max-inline-size: 100%;
  overflow-x: auto;
}

スマートフォンでの拡大やリフローは「モバイルWebアクセシビリティ実践ガイド」でも解説しています。

色とコントラスト

色の役割は、文字を背景から見分けられるようにし、リンクや状態の違いを伝えることです。

色相が違って見えても、明るさが近ければ十分なコントラストにならない場合があります。

配色は目視だけで決めず、コントラスト比を測定します。

配色の確認方法は「見やすい配色の基本」にまとめています。

ダークモードでも測り直す

prefers-color-schemeは、利用者がOSなどで選んだ明暗の配色設定をCSSで参照する仕組みです。

ダークモードは背景色を反転するだけでは完成しません。

本文、補助文、リンク、境界線、フォーカス表示を、暗い配色の組み合わせでも測り直します。

prefers-contrastを使う場合も、それだけに依存せず、通常の表示で必要な基準を満たしたうえで追加の調整として扱います。

ルビ、言語情報、表記

ルビは画像ではなくHTMLで表す

ルビは、漢字などの基底文字に読み方や注釈を添える表記です。

HTMLではrubyとrtを使い、必要に応じて非対応環境向けの括弧をrpで示します。

<ruby>可読性<rp>（</rp><rt>かどくせい</rt><rp>）</rp></ruby>

長い文章のすべてにルビを付けると、行間や改行が不安定になる場合があります。

対象読者に合わせて難しい語に絞り、実際のブラウザと読み上げ環境で確認します。

言語が変わる箇所をlang属性で示す

lang属性は、その要素の内容で使われる主な言語を示します。

記事全体をlang='ja'にし、英語の句へ本当に切り替わる箇所だけをlang='en'にします。

<p>認証方式は <span lang='en'>Single Sign-On</span> に対応します。</p>

日本語として定着した外来語まで機械的に英語指定する必要はありません。

読み上げ方は支援技術や音声によって異なるため、固有名詞を含む箇所は実際に聞いて確かめます。

見出し、ラベル、読み順の確認は「スクリーンリーダー対応の実装ガイド」を参照してください。

数字と単位は媒体の規則を決める

数字や単位は、半角か全角かを一律の正解にせず、媒体の表記規則と読み手に合わせます。

日付、容量、時間などは、前後の文脈から意味が一つに定まる表記にします。

表記を決めたら、見出し、本文、表、入力例で同じ規則を使います。

縦書きを使うときの設計

writing-mode: vertical-rlを使うと、行は縦方向に進み、列は右から左へ並びます。

縦書きでは、横書きと同じ幅や高さの考え方をそのまま当てはめられません。

論理プロパティのinline-sizeとblock-sizeを使うと、書字方向に沿って寸法を考えやすくなります。

.vertical-text {
  writing-mode: vertical-rl;
  text-orientation: mixed;
  max-inline-size: 32rem;
  line-height: 1.8;
}

数値は例であり、本文量と書体に合わせて調整します。

縦中横、句読点、英数字、ルビの表示にはブラウザ差があり得るため、対応する環境で可視確認します。

長文や操作部品を縦書きにすると読みにくい場合は、同じ情報を自然な順序で読める横書きの構成も検討します。

可変フォントと読み込み

可変フォントは、太さなどの複数の字体を一つのフォントファイル内で連続的に扱える仕組みです。

対応する軸があっても、太さにはfont-weightのような上位のCSSプロパティを優先します。

低水準のfont-variation-settingsを直接指定するより、継承やフォールバックを扱いやすいためです。

@font-face {
  font-family: 'Example JP Variable';
  src: url('/fonts/example-jp-variable.woff2') format('woff2');
  font-weight: 100 900;
  font-display: swap;
}

body {
  font-family: 'Example JP Variable', system-ui, sans-serif;
}

strong {
  font-weight: 700;
}

FOITはフォントの読み込み中に文字が見えない状態、FOUTは代替書体が先に表示されて後からWebフォントへ切り替わる状態を指します。

font-display: swapは本文を早く表示しやすくしますが、書体の切り替えで行折りやレイアウトが変わる場合があります。

読みやすい代替書体を選び、実際の通信条件で表示の変化を確認します。

可変フォントの扱いはW3CのCSS Fonts Module Level 4でも確認できます。

ボタン、フォーム、表の文字設計

ボタン

フォーム

表とグラフ

公開前の確認手順

  1. ブラウザの文字サイズまたはテキスト拡大を200%にし、内容と機能が欠けないか確認する。
  2. 横書きのページを幅320 CSSピクセル相当で表示し、例外となる図表などを除いて縦横両方のスクロールが生じないか確認する。
  3. 通常表示とダークモードで、文字、リンク、操作部品、フォーカス表示のコントラストを測る。
  4. キーボードだけで操作し、現在位置が見えるか、操作順が自然かを確かめる。
  5. スクリーンリーダーの見出し一覧とリンク一覧を使い、名称と順序を確かめる。
  6. 長いURL、長い英数字、ルビ、縦書き、表を含むページで折り返しを確認する。
  7. 可能であれば、実際の読者に主要な作業を依頼し、数値検査だけでは見つからない困りごとを記録する。

この短い確認は問題の早期発見に役立ちますが、WCAGへの適合を証明する試験そのものではありません。

運用ルールに落とし込む

記事ごとに文字サイズや配色を決め直すと、同じサイト内でも読み心地が揃いません。

本文、見出し、注釈、リンク、境界線、フォーカス表示をデザイントークンとして管理し、再利用する部品へ反映します。

編集ガイドには、見出し順序、ルビ、外来語、数字、単位、リンク文言の規則を記します。

コードレビューには、200%の文字拡大、幅320 CSSピクセル相当のリフロー、コントラスト、キーボード操作、読み上げ確認を組み込みます。

これにより、タイポグラフィを個人の感覚だけに任せず、設計、実装、編集、検証で共有できます。

日本語タイポグラフィ改善のまとめ

最初に直すのは、本文の大きさ、行間、行長、段落余白、コントラストです。

次に、200%の文字拡大と幅320 CSSピクセル相当のリフローを別々に確認します。

そのうえで、見出し構造、ルビ、言語情報、フォームのラベルまでHTMLで意味を伝えます。

設定値は完成品ではありません。

実際の文章、端末、支援技術で確かめ、運用の中で調整を続けることが、読みやすさを保つ方法です。

参考資料

この記事に関連する株式会社greedenの取り組み

読みやすい文字設計は、数値を決めて終わりではなく、実装後の確認と継続的な改善まで含めて成り立ちます。株式会社greedenは、Webアクセシビリティのチェックと改善支援を通じ、閲覧時の困りごとを減らすサイトづくりを支援しています。

モバイルバージョンを終了