このページはAIの支援を受けて翻訳されました。正文は英語の原文です。
行長 — 伝統的な用語では measure — は、文字数で数えたテキストカラムの幅です。2005年版は1行あたり55〜65字、おおよそ10〜12語を推奨し、画面での読書は印刷より疲れやすいため、短い行と小さな段落のほうが安全だと警告していました。もとの研究のなかで、この推奨は最もよく持ちこたえています。快適な行長についてのタイポグラフィ上の合意は、1世紀を超える印刷の実践を通じて安定しており、画面についても繰り返し再確認されてきました。変わったのは数値ではなく、それを取り巻く仕組みです。ウェブにはいまや行長を直接表現できる単位があり、それを枠づける標準があり、当時は想像もできなかったビューポートがあります。
2005年以降に変わったこと
2005年には、行長を制約するとは、平均的な文字から推測した固定ピクセル幅を指定することでした。現代の CSS は行長をテキスト自身の尺度で表現します。ch 単位は現在のフォントにおけるゼロのグリフの送り幅に等しく、平均文字幅の実用的な代用として機能します。たったひとつの宣言 — max-width: 65ch — がこの章の核心的な推奨をコードとして表現し、フォント、サイズ、ユーザー設定が変わっても自動的に追随します。これはデザイナーが書ける、アクセシビリティに最も資する CSS の一行です。ただし ch は近似であることに注意してください。65ch のカラムはプロポーショナルなテキストでは実際には65字を少し超えることが多く、ゼロは平均より幅広だからです。保証ではなく目標として扱い、実際の段落で確認してください。
いまでは標準がこの範囲を枠づけています。WCAG の達成基準 1.4.8 視覚的提示(レベル AAA)は、テキストブロックの幅が80字(CJK 系の文字では40字)を超えないようにできる仕組みが利用可能であることを定めています。80 は上限であって目標ではありません — この基準は可読性の損なわれ方がアクセシビリティ上の問題になる境界を定義するものであり、快適さのピークは依然として 55〜65 の領域にあります。最大でおおよそ 65〜70ch に収まるカラムなら、このガイドラインと従来の職人的な合意の両方を満たします。
もうひとつの新しい制約は、逆の方向に働きます。達成基準 1.4.10 リフロー(レベル AA、WCAG 2.1 および 2.2)は、コンテンツが 320 CSS ピクセル幅のビューポート — デスクトップページを 400% にズームしたのと同等 — に、二次元スクロールなしでリフローすることを要求します。2005年のリスクは行が長すぎることでしたが、2026年には、短くなることを拒むレイアウトが同等のリスクです。幅固定のカラム、決して縦に積み重ならない横並びレイアウト、硬直した最小幅を持つ要素はいずれも 320px で横スクロールを強い、それは適合上の失敗であると同時に現実の障壁でもあります。一行読むごとに横へスクロールしなければならないテキストを読むことは、ロービジョンのユーザーが報告する体験のなかでも最も過酷なもののひとつです。320px で本文が 16px なら、行はおおよそ 30〜40字になります。これは快適域を下回りますが、それで構いません — 短い行は読みをわずかに遅くするだけで壊しはしませんが、横スクロールは読みを完全に壊します。行長は最大値として設計し、決して最小値にしないでください。
この範囲が機能する理由
55〜65 という推奨の安定性は、読みのメカニズムを反映しています。長い行はリターンスイープ — 次の行の先頭へと目が跳び戻る動き — を長くし、読者が誤った行に着地するダブリングのエラーを増やします。補うために追加の行間を要求します。極端に短い行は、各固視のプレビューに入る語が少なすぎ、絶え間ない行の切り替えを強い、フレーズを文法構造に逆らって切り刻みます。判読性研究はこの構図を興味深いかたちで複雑にしています。いくつかの画面上の研究では、長い行のほうが読みが速くなることが見いだされており、おそらくコストの高いリターンスイープの回数が減るためです — それでも読者は一貫して中庸な行を好み、より快適だと評価します。そして快適さこそが、人が読み続けるかどうかを左右します。持続的な読書においては、選好と疲労の軽減が中庸な行長を支持しており、本章が引き続き推奨するのもそれです。
前章で扱った行間との相互依存は、ひとつのルールとして繰り返す価値があります。行長が長くならざるを得ないなら、行間を足すこと。75字の行も line-height 1.6 なら読めますが、同じ行が 1.3 ではダブリングを招きます。
実践におけるレスポンシブな行長
現代的なパターンは3つの要素を組み合わせます。max-width をおおよそ 60〜70ch にしたコンテンツカラムが、大画面での理想的な行長を確立します。流動的な水平パディングが、横スクロールを一切引き起こすことなく、狭いビューポートまでカラムに余裕を持たせます。そして流動的なタイポグラフィを使っている場合 — clamp() でフォントサイズがビューポートに応じてスケールする場合 — 行長はピクセルではなく文字数で数えるものだということを思い出してください。ch はフォントサイズに追随するため、ch ベースの max-width は文字が大きくなるとともに広がり、文字数をほぼ一定に保ちます。これこそが望ましい挙動です。
もとのテキストからのひとつの転換があります。2005年版は本文でのハイフネーションを避けるよう助言していました。ゆとりのある行長でのラグ組み(左揃え)なら、ハイフネーションは確かに不要です。しかしリフローが要求する狭い行長では、ハイフネーションのないテキスト中の長い単語は、ぽっかりと空いたラグを生むか、完全にあふれ出します。hyphens: auto を有効にすること(ハイフネーションは辞書駆動なので、正しい lang 属性の設定とともに)は、狭いカラムに耐えなければならない本文にとって、いまでは良い実践です。対応環境では text-wrap: pretty を併用し、より良い改行判断を得てください。
最後に、段落の長さについてのもとの版の助言はいまも有効で、むしろ強制力を持つようになりました。短い段落は、スクリーンリーダー、拾い読みする人、注意や記憶に困難のある読者のすべてが頼る道しるべとしての働きを助けます。WCAG 1.4.12 はさらに、ユーザーが段落間隔を広げてもコンテンツが耐えることを期待しているので、段落が正確な高さに収まることを前提とするレイアウトは避けてください。
CSS では
article {
max-width: 65ch; /* 45–75 characters; ~65 is the sweet spot */
margin-inline: auto;
padding-inline: 1rem; /* fluid gutter at every width */
}
/* Test at a 320px viewport: no horizontal scrolling (WCAG 1.4.10) */推奨事項
- 本文は1行あたり55〜65字を目標とし、WCAG 1.4.8 に従って80字を外側の限界として扱う。
- 行長はコンテンツカラムの max-width を ch 単位(おおよそ 60〜70ch)で実装する。
- コンテンツが 320px のビューポートで横スクロールなしにリフローすることを確認する(WCAG 1.4.10)。行長の最小値は決して設定しない。
- 行長が長くなるときは行間を増やす。この2つの設定はひとつの決定である。
- 狭いカラムできれいに改行されるよう、正しい lang 属性とともに hyphens: auto を有効にし、対応環境では text-wrap: pretty を加える。
- 流動的なタイポグラフィでは、フォントサイズがスケールしても行長が安定するよう、文字相対の単位で行長を保つ。
- 段落は短く保ち、WCAG 1.4.12 のもとで段落間隔の拡大にレイアウトが耐えることを検証する。