日本語サイトで一行が長すぎると、文章が読まれにくくなる

PC画面いっぱいに日本語本文を広げると、改行後の行頭を見失いやすくなります。W3Cのアクセシビリティ資料を踏まえ、行長、余白、文字サイズを実務で調整する方法を解説します。

横幅を広く使うことが、読みやすさとは限らない

大きなPC画面で本文を端から端まで広げると、一行に多くの文字が入り、次の行の先頭を見失いやすくなります。画面を有効利用しているように見えても、長文では読む負担が増えます。

本文、比較表、写真ギャラリーは必要な幅が異なります。ページ全体を一つの最大幅にせず、文章部分に読みやすい幅を設定します。

WCAGの視覚表現に関する解説では、行を80字またはグリフ以内、CJK（中国語・日本語・韓国語）では40字以内にする考え方が示されています。長い行が、視覚・認知上の困難がある人の読書を妨げるためです。

これはすべての日本語サイトを機械的に40字へ固定する指定ではありません。フォント、文字サイズ、読者、端末、文章の種類と合わせて、長すぎない基準として使います。

CSSのchは「0」の幅を基準にするため、日本語一文字と完全には一致しませんが、px固定より文字サイズとの関係を保ちやすい方法です。日本語ではemを使い、40em前後から実画面で調整する方法もあります。

幅だけでなく、行間、段落間、見出し、漢字と英数字の混在も確認します。

.article-body {
  max-width: 40em;
  margin-inline: auto;
  padding-inline: 20px;
  line-height: 1.8;
}

狭い画面で左右余白を大きくしすぎると、一行が短くなりすぎ、改行が増えます。PCでは本文幅を制限し、スマホでは安全な余白を残しつつ画面を使うように調整します。

本文の中に長いURL、英単語、表があると横スクロールが起きる場合があります。日本語本文だけでなく実データで確認します。

ブラウザのズームやOSの文字拡大で、文字が重なる、切れる、横スクロールが発生しないか確認します。高さを固定したカードやボタンは、文字が二行になったときに壊れやすい部分です。

一行の文字数を整える目的は、デザインを揃えることではなく、内容を読み続けられる状態にすることです。

日本語本文は画面いっぱいに広げず、一行40字程度を一つの目安として実際のフォントと端末で調整します。本文幅、行間、段落、文字拡大を一緒に確認すると、長文を読み進めやすくできます。