「行間と行長」の黄金ルール：読みやすさを劇的に変える-「なぜか読みづらい」を卒業する。

記事内に広告が含まれています。

「一生懸命ブログを書いたのに、最後まで読んでもらえない」「資料の文字がぎっしりしていて、読む前から疲れると言われた」という経験はありませんか。

その原因は文章の内容ではなく、行と行の間の空き(行間)と、1行の長さ(行長)にあるかもしれません。

この記事では、行間とは何か、行長とは何かという基本から、読みやすい数値の目安、CSSやデザインツールでの設定方法までを初心者向けに解説します。

行間と行長の基本

まずは行間・行長という言葉の意味と、読みやすさにどう関わるのかを押さえましょう。

あわせて、よく混同される「行送り」との違いと、数値の目安も紹介します。

行間とは?行送りとの違い

行間とは、ある行と次の行のあいだにある空きのことです。

行間が狭すぎると上下の行がくっついて見え、どこまでが1行なのかを目で追いにくくなります。

同じ文章でも、行間を変えるだけで読みやすさは大きく変わります。

文字を読みやすくするには、文字そのものだけでなく、行と行のあいだの空きにも目を向けることが大切です。空きが変わると、文章全体の印象も変わります。

行間が狭い(line-height: 1.1)

文字を読みやすくするには、文字そのものだけでなく、行と行のあいだの空きにも目を向けることが大切です。空きが変わると、文章全体の印象も変わります。

適度な行間(line-height: 1.8)

文字を読みやすくするには、文字そのものだけでなく、行と行のあいだの空きにも目を向けることが大切です。空きが変わると、文章全体の印象も変わります。

行間が広すぎる(line-height: 2.8)

左の見本は行どうしが近すぎて窮屈に感じ、右の見本は行が離れすぎて文章のまとまりが感じにくくなっています。

真ん中の見本のように、行と行のあいだに文字の高さの半分以上の空きがあると、目が自然に次の行へ移れます。

ここで注意したいのが、行間とよく似た「行送り」という言葉です。

W3Cがまとめた日本語組版処理の要件では、行送りを「隣接する行の基準点から基準点までの距離」、行間を「行と行の間の空き」として区別し、「行送り=文字サイズ+行間」と説明しています。

「基準点」とは、どの行でも同じ位置に決めた目印のことです。
たとえば「1行目の文字の下端から、2行目の文字の下端まで」の距離が行送りだと考えると、イメージしやすいでしょう。
下端どうしを測ると、文字1つ分の高さと、その下の空き(行間)を足した長さになるので、「行送り=文字サイズ+行間」になります。

用語	意味	主に使われる場面
行間	行と行のあいだの空き	日常会話、Word・PowerPointの「行間」設定
行送り	1行の基準点から次の行の基準点までの距離(文字サイズ+行間)	Illustrator・InDesignの「行送り」、印刷物の組版
line-height	1行分の高さ(文字サイズ+上下の空き)	CSS、Figmaの「Line height」

つまり、CSSのline-height: 1.8;は「行間が文字1.8個分」という意味ではなく、「1行の高さが文字サイズの1.8倍」、行間に直すと文字サイズの0.8倍という意味です。

この記事で「行間の目安」として倍率を書くときは、CSSと同じ「文字サイズに対する1行の高さ(行送り)」の倍率で表します。

行長とは?長すぎても短すぎても読みにくい

行長とは、1行に並ぶ文章の横幅、つまり1行あたりの文字数のことです。

行長は長すぎても短すぎても読みにくくなります。

1行が長すぎると、行の終わりから次の行の頭へ視線を戻すときに、どの行を読んでいたかを見失いやすくなり、同じ行を読み直してしまう原因になります。

反対に1行が短すぎると、数文字ごとに行が変わって言葉の途中で何度も途切れ、文章のリズムが崩れてしまいます。

1行が短すぎると、言葉の途中で何度も改行が入り、内容が頭に入りにくくなります。

短すぎる行長(1行8文字)

1行が短すぎると、言葉の途中で何度も改行が入り、内容が頭に入りにくくなります。

ほどよい行長(1行20文字。スマホ表示に近い長さ)

上の見本は1行8文字なので「改行」「入りにくく」のような言葉が途中で分かれてしまい、下の見本のほうが言葉のまとまりを追いやすくなっています。

反対に、大きなモニターで本文の幅を画面いっぱいに広げると、1行が60〜80文字にもなり、今度は長すぎて読みにくくなります。

読みやすい行間・行長の目安

Webや資料の本文であれば、行間は文字サイズの1.5〜1.8倍、行長は全角35〜40文字前後を目安にすると失敗しにくくなります。

これらの数値は感覚だけで決められたものではなく、Webのアクセシビリティ(障害の有無や年齢にかかわらず、誰もが情報を利用できること)の国際的なガイドラインであるWCAGにも、近い基準が書かれています。

項目	目安	裏付け・補足
行間(1行の高さ)	文字サイズの1.5〜1.8倍	WCAGの達成基準1.4.8で「段落中の行送りは少なくとも1.5文字分」とされている。1.4.12では、行送りを1.5倍に広げても表示が崩れないことが求められている
行長(日本語)	全角35〜40文字前後	WCAGの達成基準1.4.8(最上位のAAAレベル)で「全角40字を越えない」とされている
行長(英語などの欧文)	半角45〜75文字程度	欧文組版でよく使われる経験的な目安。WCAGでは80字以内

行間と行長の基準は、WAICによる日本語訳の達成基準 1.4.8 視覚的提示と達成基準 1.4.12 テキストの間隔で確認できます。

WCAGの達成基準には、A・AA・AAAの3つのレベルがあり、AAAがいちばん厳しい基準です。
多くのWebサイトはAAまでを目標にしていて、AAAは「できればここまで」という目標と考えてかまいません。

1.4.8は最も厳しいAAAレベルの基準なので必ず満たさなければいけないものではありませんが、「日本語なら1行40字まで」という上限の目安として役立ちます。

なお、文字と文字の左右の間隔(字間)の調整についてはカーニングとトラッキングの記事で解説しています。

行長と行間はセットで考える

行長が長くなるほど、行間も広めにとる必要があります。

1行が長いと、行の終わりから次の行の頭まで視線を戻す距離が長くなり、そのぶん行間が狭いと隣の行と取り違えやすくなるからです。

行長と行間の関係

行長が長い(幅が広い)なら、行間は広めにする
行長が短い(幅が狭い)なら、行間は少し狭めでもよい

実際に、同じ長めの行で行間だけを変えて比べてみましょう。

1行が長い文章では、行の終わりまで読んだあとに次の行の頭を探す距離が長くなります。そのとき行と行のあいだが狭いと、ひとつ下の行ではなく同じ行や二つ下の行に視線が移ってしまい、読み直しが増えます。行間を広げると行の区切りがはっきりして、長い行でも次の行を見つけやすくなります。

長い行×狭い行間(line-height: 1.3)

1行が長い文章では、行の終わりまで読んだあとに次の行の頭を探す距離が長くなります。そのとき行と行のあいだが狭いと、ひとつ下の行ではなく同じ行や二つ下の行に視線が移ってしまい、読み直しが増えます。行間を広げると行の区切りがはっきりして、長い行でも次の行を見つけやすくなります。

長い行×広めの行間(line-height: 2.0)

上の見本は行が詰まっていて次の行を探しにくく、下の見本は行の区切りがはっきりしているので、長い行でも迷わず読み進められます。

ただし、行間を広げるのは応急処置であり、行長そのものを40文字前後に収めるのが根本的な解決策です。

行間・行長の設定方法

ここからは、Webサイト(CSS)とデザインツール・資料作成ツールで、行間と行長を実際に設定する方法を紹介します。

Webサイト(CSS)で設定する

Webサイトでは、行間をline-height、行長を本文エリアの最大幅max-widthで指定します。

Webではブラウザの幅によって1行の長さが変わるため、行間と最大幅をセットで決めておくことが大切です。

次のCSSは、本文の行間を文字サイズの1.8倍にし、本文エリアの幅を全角40文字分までに制限する例です。

.article-body {
  max-width: 40em; /* 1em = 文字1つ分。全角40文字分の幅 */
}

.article-body p {
  line-height: 1.8; /* 単位なしで指定する */
}

emは「その要素の文字サイズ1つ分」を表す単位なので、40emと書くと、全角文字がおよそ40文字並ぶ幅になります(単位の違いはremとemの違いの記事で解説しています)。

本文が一般的な16pxなら、40emは16px×40=640pxです。
横幅1280pxのパソコン画面なら、本文の幅がおよそ半分に収まるイメージです。

line-heightは1.8のように単位なしで書くのがおすすめです。

MDNのline-heightの解説でも、単位なしの値は各要素の文字サイズに合わせて計算されるため、継承(親要素の設定が子要素に引き継がれること)による予期しない結果を避けられる好ましい方法とされています。

たとえば本文(16px)を囲む要素にline-height: 1.8em;と単位つきで書くと、16px×1.8=28.8pxという固定の高さが計算され、その中の32pxの見出しにも28.8pxがそのまま引き継がれます。
見出しの文字より1行の高さが小さくなるので、見出しが2行になると上下の行が重なってしまいます。
単位なしの1.8なら「1.8倍」という倍率が引き継がれ、見出しは32px×1.8、本文は16px×1.8と、それぞれの文字サイズで計算し直されるので、こうした事故が起きません。

同じページで、本文の段落についてはline-heightを1.5以上にすることも、アクセシビリティの観点から推奨されています。

デザインツール・資料作成ツールで設定する

FigmaやIllustrator、PowerPointなどでも考え方は同じですが、ツールによって「行間」の数値の意味が違うので注意が必要です。

ツール	行間の設定項目	設定の目安
Figma	Line height(%またはpx)	150〜180%(16pxの文字なら24〜29px)
Illustrator・Photoshop	行送り(pt)	文字サイズの1.5〜1.8倍(10ptの文字なら15〜18pt)
PowerPoint・Googleスライド・Word	行間(倍数)	「1.2〜1.3倍」程度から試して、実際に読んで調整

FigmaやIllustratorでは、自動(Auto)のままにせず、%やptで数値を指定しておくと、文字サイズを変えたときもレイアウトが崩れにくくなります。

PowerPointやWordの「倍数」は、文字サイズに対する倍率ではなく、そのフォント本来の1行の高さに対する倍率です。

PowerPointやWordの「1.0」は文字サイズちょうどの高さではなく、フォントにもともと決められている上下の余白を含んだ高さで、多くのフォントでは文字サイズより大きくなります。
どれくらい大きいかはフォントによって違い、游ゴシックのように1.0でもかなり広く見えるフォントもあります。
そこに1.8を掛けると「もともと広めの高さ×1.8」になるので、CSSと同じ数値ではスカスカになってしまうのです。

そのため、CSSの1.8と同じ数字を入れると広がりすぎることが多く、まずは少しだけ広げて画面で確認するのが確実です。

行長については、どのツールでもテキストボックスを横いっぱいに広げず、1行が40文字前後に収まる幅にしておきましょう。

スライドでは、左右に余白を残してテキストボックスの幅を絞るだけでも、ぐっと読みやすくなります。

スマホでの見え方を確認する

PCで行長を整えたら、必ずスマホでも表示を確認しましょう。

スマホは画面幅が狭いため、16pxの文字だと1行は20文字前後になり、行長は自然と短くなります。

その結果、PCでちょうどよかった行間がスマホでは広すぎて間延びして見えたり、見出しが1〜2文字だけ次の行にはみ出したりすることがあります。

気になる場合は、スマホ表示のときだけ行間を少し狭めるなど、画面幅に応じて調整します。

見出しのはみ出しが気になるときは、次のような直し方があります。

スマホ表示のときだけ、見出しの文字サイズを少し小さくする
見出しの言葉を短くして、スマホでも1〜2行に収まるようにする
改行してほしい位置をHTMLで指定し、言葉の区切りのよいところで改行させる

改行位置をCSSやHTMLで整える方法は、ジャンプ率の記事の「改行をコントロールする」の節で紹介しています。

実践のポイント

行間と行長を設定するときに陥りやすい失敗と、よくある疑問をまとめます。

注意点・よくある間違い

大きなモニターで作業していると、本文の幅を広く取りすぎて1行の文字数が増えていることに気づきにくくなります。
本文エリアにはmax-widthを指定して、幅が広がりすぎないようにしましょう。
line-height: 24px;のように固定の単位で指定すると、文字サイズの大きい見出しなどで行が重なってしまうことがあります。
本文の行間は単位なしの倍率で指定するのが基本です。
見出しにも本文と同じ広い行間を当てると、2行になった見出しが間延びして見えます。
文字の大きい見出しは、本文より行間を詰めて(1.3〜1.4倍程度)ひとまとまりに見せましょう。
行間を広げすぎると、段落と段落の区切りが分かりにくくなります。
段落の間は行間よりもはっきり広く空けて、文章のまとまりが見えるようにしましょう。

よくある質問

Q. 行間と行送りは何が違うの?
A. 行間は「行と行のあいだの空き」、行送りは「1行の基準点から次の行の基準点までの距離」で、行送りは文字サイズと行間を足したものです。
CSSのline-heightやFigmaのLine heightは、行送りに近い考え方で数値を指定します。
Q. 結局、行間は何倍にすればいい?
A. Webの本文なら、文字サイズの1.5〜1.8倍(CSSならline-height: 1.5〜1.8)から始めるのがおすすめです。
1行が長めのレイアウトでは広め、短めのレイアウトでは狭めに調整します。
Q. 1行は何文字にすればいい?
A. 日本語の本文なら、全角35〜40文字前後が目安です。
スマホではそれより短くなりますが、極端に短すぎなければ問題ありません。