読みやすさ抜群！web, 行間調整の基本知識を徹底解説

2025 11/05

2025/11/05

はじめに

Webサイトの「行間」は、一見目立たない要素ですが、読みやすさや印象に大きく影響します。本記事では、行間の意味から具体的な調整方法、デザイン上の目安、SEOやユーザビリティへの影響、HTMLとの関係、実践的なコツやよくある疑問までをやさしく丁寧に解説します。

対象は、Web制作者やデザイナー、サイト運営者、そしてこれから学ぶ初心者の方です。専門的な説明は必要最小限にとどめ、具体例を交えてわかりやすく説明します。

この記事を読むと、以下のことが身につきます。

行間が与える視覚的な効果の理解
CSSのline-heightを使った基本的な調整方法
実際に使える行間の目安と設定例
行間調整がユーザー体験や検索に与える影響

各章は順に読めば理解が深まる構成です。まず第2章で行間の概念を押さえ、第3章で具体的なCSSの使い方を学んでください。最後に実例やQ&Aで疑問を解消できるようにしています。

この章では目的と全体像を簡潔に示しました。次の章から、具体的な説明に入ります。

行間とは何か？Webデザインにおける意味

定義

行間とは、文章の各行と次の行とのあいだにあるスペースのことです。印刷物でもWebでも同じ概念で、Webでは主にCSSの「line-height」プロパティで調整しますが、ここでは見た目と役割を中心に説明します。

なぜ大切か

読みやすさ：行間が狭いと文字が詰まり、長文を読むときに疲れやすくなります。逆に広すぎると文のつながりが分かりにくくなります。たとえばニュース記事やマニュアルはやや広め、広告のキャッチコピーは狭めにすることが多いです。
情報の伝わりやすさ：視線の移動がスムーズだと読者は内容を速く理解できます。適切な行間は読み進めるリズムを作ります。
印象づくり：行間はデザインの雰囲気を左右します。ゆったりした行間は落ち着いた印象、詰まった行間は引き締まった印象を与えます。
アクセシビリティ：視力の弱い人や高齢者に配慮するなら、少し広めの行間が親切です。

具体例と判断ポイント

狭い行間：文字が重なって見える、行を追いにくい。短い見出しや強調に向きます。
広い行間：読みやすいがスクロール量が増える。長めの本文や読み物に向きます。

次章では、Webで実際に行間を調整するCSSの基本（line-height）をわかりやすく解説します。

行間を調整するCSS「line-height」プロパティの基本

line-heightとは

line-heightはテキストの行と行の間隔を決めるCSSプロパティです。読みやすさに直結するため、本文や見出しでよく使います。単純に「行間」を増やしたり減らしたりできます。

指定方法と意味

数値（例: line-height: 1.5;）
フォントサイズに掛ける倍率で指定します。本文が16pxなら1.5で24pxの行高さになります。相対的なのでレスポンシブに有利です。
パーセンテージ（例: line-height: 150%;）
フォントサイズに対する割合で指定します。数値とほぼ同じ使い方です。
長さ（例: line-height: 24px;、1.2em）
pxやemで絶対値を指定します。細かく制御したいときに便利です。

キーワード

normal：ブラウザのデフォルト（約1.2～1.5倍）。フォントや環境により変わります。

実例と注意点

基本文：p { line-height: 1.7; } は読みやすい目安です。
見出しはテキストが大きいため、やや小さめの倍率にすることが多いです。
子要素に継承されるので、親要素で指定すると全体に適用できます。
数値指定は小数も使えます（例: 1.25）。

よくある間違い

pxで指定したあとにフォントサイズを変えるとバランスが崩れます。レスポンシブ対応では数値やemを優先してください。

この章では基本の使い方とポイントを押さえました。次章で設計に応じた具体的な目安を見ていきます。

適切な行間の目安とデザインへの影響

基本の目安

Webではline-height: 1.5〜2.0（150%〜200%）が読みやすい目安です。例：文字サイズ16pxならline-heightは24px（1.5倍）〜32px（2.0倍）。この範囲が最も視線の移動を助け、読むリズムを保ちます。

狭い行間の影響

行間が狭すぎると行と行が詰まり、各行の初めと終わりを見分けにくくなります。結果として読者の疲労が増え、文章を最後まで追いにくくなります。

広い行間の影響

行間が広すぎると行同士のつながりが弱まり、文章の流れが途切れます。視線が次の行を探す回数が増え、読む速度が落ちる場合があります。

見出しと本文の使い分け

見出しは本文よりやや狭め（例：1.2〜1.4倍）にすると視覚的にまとまりが出ます。本文は読みやすさ重視で1.5〜1.8倍を基準に調整してください。

デバイスと読み手による調整

モバイルでは画面幅が狭いため若干広めが効果的です（例：1.6〜1.9倍）。高齢者向けや長文の場合も広めに設定すると負担が減ります。

実用的なCSS例

相対指定：line-height: 1.6;（推奨）
パーセント：line-height: 160%;
固定ピクセル：font-size:16px; line-height:24px;

これらを基準に、フォントの種類や本文の長さで微調整してください。

行間とSEO・ユーザビリティとの関係

概要

行間（line-height）は直接的に検索順位を左右しませんが、ユーザビリティを通じて間接的に影響します。読みやすい行間は離脱率を下げ、滞在時間や読了率を高めます。検索エンジンはこうした行動データを評価材料の一つとするため、結果的に有利になることがあります。

なぜ間接的に影響するのか

読みづらい行間はスキャン性を下げ、ユーザーがすぐにページを離れる原因になります。逆に適切な行間は読み進めやすく、コンテンツを最後まで読んでもらいやすくなります。滞在時間や直帰率の改善は、検索評価の向上につながる可能性があります。

スマートフォンでの注意点

小さな画面では行間をやや広め（例: line-height:1.5〜1.8）にすると読みやすくなります。フォントサイズとのバランスを必ず確認してください。ボタンやフォーム周りは余白を確保し、誤タップを防ぎます。

具体的な対策とチェックポイント

本文は相対値（1.4〜1.8）で設定する。px指定より柔軟です。
見出しと本文で行間を変えて視覚的に整理する。
実際のデバイスで読了率や離脱率を計測し、A/Bテストで最適値を探す。
一貫性を保ち、ページ間で極端に差をつけない。

適切な行間はユーザー満足度を高め、結果としてSEOにも良い影響を与えます。

HTMLタグと行間調整の注意点

段落と改行の違い

HTMLでは段落は

タグで表現します。段落はブロック要素で、CSSのline-heightを適用して行間を調整できます。文章を複数行で扱う場合は

でまとめるのが基本です。

タグの扱い

は強制改行を入れるためのインライン要素です。1行だけ改行したいときに便利ですが、
自体は行間の代表的な調整手段になりません。多用すると行間がバラバラになりやすいので注意してください。

line-heightの継承と対象

line-heightは主にブロック要素に意味を持ちます。例えば

にline-heightを指定すれば、その段落内のテキストに効きます。インライン要素にも効きますが、親のline-heightを継承するため、まとめて設定する方が扱いやすいです。

注意するポイント

ブラウザの既定のpマージン（margin）により見た目の行間が広く見える場合があります。必要ならリセットしてください。
line-heightは単位を付けない（数値）で指定すると、フォントサイズに応じて自然に拡大縮小します。可読性の面で推奨です。
小さな改行には
を使い、大きな段落は
＋CSSで整えると一貫性が保てます。

実用例（参考）

p { line-height: 1.6; margin-bottom: 1em; }

行間を調整する際のデザインTips

基本の考え方

行間は読みやすさとテキストのリズムを決めます。本文は1.4〜1.8の範囲で調整すると多くの場面で安定します。見出しは本文よりやや詰め、キャプションはさらに詰めるなど、役割ごとに差をつけてください。

余白（marginやpadding）との組み合わせ

行間だけで詰まり感を解消しようとせず、段落間の余白も活用します。例: p { line-height: 1.6; margin-bottom: 0.8em; }。段落の下に適度な余白を置くと読み進めやすくなります。

文字間（letter-spacing）との相乗効果

文字間をわずかに広げると空間が生まれ、行間と調和します。見出しは letter-spacing: 0.02em〜0.05em、本文は 0〜0.02em を目安にして、視覚で確認してください。

サイト全体での基準作り

変化をつけるにしても基準を設けるとデザインが整います。CSS変数で基準を作ると管理が楽です。例: :root { –base-line: 1.6; }

デバイス別の微調整

スマホでは文字が小さく見えるため、やや行間を増やすと読みやすくなります。メディアクエリで調整しましょう。

チェックポイント

行間が狭すぎて行を追いにくくないか確認
段落間の余白とバランスを取る
見出しと本文で密度を調整
実際のページで複数ブラウザ・端末で必ず確認

これらを意識して調整すると、読みやすく整ったタイポグラフィが実現できます。

実例・よくある疑問Q&A

簡潔なQ&Aで実例を示します。現場でよくある悩みに対して、実践的な設定例を添えて説明します。

Q1：行間を広げすぎると何が問題？

A：文章のまとまりが崩れて読みづらくなります。行間が過度に広いと視線が次の行を探す時間が増え、読みの流れが途切れます。対策は本文で1.4〜1.8程度を目安にし、最大でも約1.9以内に収めることです。例：.body{line-height:1.6}

Q2：日本語と英語で最適な行間は違う？

A：違います。日本語は文字同士の密度が高いため、やや広め（1.6〜1.9）が読みやすい傾向です。英語は単語間のスペースがあるので少し狭め（1.4〜1.6）で十分です。多言語ページでは言語ごとにルールを分けると良いです（例：.jp{line-height:1.7} .en{line-height:1.5}）。

Q3：スマホとPCで行間を変えるべき？

A：はい。スマホは画面が小さく文字が相対的に見にくくなるので、やや広めに設定します。推奨例：PC 1.5〜1.7、スマホ 1.7〜1.9。実装例：@media (max-width:600px){body{line-height:1.8}}

その他のよくある疑問

見出しは本文より狭めに：見出しは強調目的なので0.9〜1.2が多いです。
箇条書きや表は要素ごとに調整：行間が揃うと見た目が整います。

現場で使える数値例を試して、ユーザー層に合わせて微調整してください。

まとめとおすすめ設定

要点

行間は可読性・デザイン・SEOに影響します。読みやすい行間は滞在時間や理解度を高め、結果としてユーザーに優しいサイトになります。

デバイス別の調整例

モバイル: 画面幅が狭い分、行の折り返しが多くなるため少し広めに。例: @media (max-width:600px){ body{ line-height:1.7; }}
小さいフォント（12px前後）: 行間をpxで広げると読みやすくなります。例: font-size:12px; line-height:18px;