行間の「黄金比」を意識していますか？テキストの読みやすさを劇的に変える調整法｜現場で使える実践テクニック

2026年06月05日

クリオ

Web制作ディレクター / フロントエンジニア

こんにちは！

今日は「行間の黄金比」について解説します。
これ、ほんま奥が深いテーマなんですよ。

行間がデザインに与える影響、意外と見落とされている理由

僕も最初の頃は、フォント選びとフォントサイズにばっかり気を取られてて、行間になんか深く考えてませんでした。
でもある日、デザイナーさんから「クリオ君、この行間もうちょっと広げてくれん？」って言われて、line-heightを調整したら、めっちゃ記事が読みやすくなったんですよ。

それからやと思います。
行間の大切さに気付いたのは。

実は行間って、フォント選びやサイズ選びと違って「目に見えにくい」んです。
ぱっと見では気付きにくいけど、無意識のうちに読み疲れさせてるか、スッと読ませるかを決める要素なんですよ。

現場でよく見るのは、こんなパターンです。

ユーザーは「なんか読みにくいな」と感じるんですが、その原因が行間だとは気付かないんですよね。
だからこそ、ここを丁寧に調整することが、プロのWebデザイナーやエンジニアの腕の見せどころやと僕は思います。

では、実際にどの値を選ぶといいのか、という話です。

まず基本として、行間は「相対値」で指定するのがセオリーです。
line-height: 1.5;みたいに、フォントサイズに対する倍率で指定するわけです。

では、文字サイズ別でどう使い分けるか、というと、こんな感じですよ。

これはね、「黄金比」っていわれるやつです。
正確には理論的な計算がありますが、実務では上記の感覚を持ってると大体うまくいきます。

ほんまの実例を挙げましょう。
僕が最近いじったLPは、本文が16pxでline-height: 1.6に設定してました。
クライアントさんから「スマートフォンで読むと少し詰まって見える」という指摘をもらったので、試しに1.7に変更したんです。

そうしたら、「あ、これで十分です」って返ってきました。
本当に細かい調整ですが、その細かさが「プロっぽさ」に繋がるんですよ。

もう一つ大事なポイント。
line-heightを指定するときは、px単位で絶対値を指定しちゃいけません。

例えば、line-height: 24px;みたいに指定すると、後からフォントサイズを変更したときにバランスが崩れちゃいます。
必ずline-height: 1.5;みたいに相対値で指定するんですよ。

ここが現場あるあるなんですけど、Google Fontsとか使ってWebフォントを導入した時に、「あ、行間がちょっと変わったな」って感じることありますよね。

これはね、フォントメトリクス（フォントが持つ内部的な上下の余白）が、フォントごとに違うからなんです。

line-height: 1.6に設定してても、システムフォントの「游ゴシック」と、Google Fontsの「Noto Sans Japanese」では、実際の見た目の行間が微妙に違う。

だから、Webフォントに切り替える時は、実装した後に必ず確認して、必要に応じて微調整するんですよ。

具体的な対応としては、こんな感じです。

最初、このメトリクスの話を知らなかったとき、僕は「なんでフォント変えたら行間が変わるねん？」ってめっちゃ困惑しました。
バグだと思ってたくらいです（笑）

でも今は、このメトリクスの違いを逆手に取って、「このWebフォント、メトリクスが良さそうだから、行間を少し詰めても大丈夫そう」みたいな判断ができるようになりました。

ひとつ、実装のコツを紹介しますね。
letter-spacing（字間）とline-height（行間）の両方を調整する必要がある時があります。

例えば、CSSはこんな感じ。

body { font-family: 'Noto Sans Japanese', sans-serif; font-size: 16px; line-height: 1.6; letter-spacing: 0.02em; }

letter-spacing: 0.02em;は字間を少し広げる指定なんですが、これとline-heightを組み合わせると、本当に読みやすいテキストになります。

行間の調整は、タイポグラフィの中でも「地味だけど超大事」な要素です。
フォント選びやサイズと違って、一見すると変化が分かりにくいかもしれません。

でもね、ユーザーの「読みやすさ」「快適さ」に直結する部分なんですよ。

覚えておくべきポイントをまとめると。