「詰まった」から「流れた」へ。余白で作るテキスト読みやすさの処方箋｜現場で使える実践テクニック

こんにちは！

今日は「余白で作るテキスト読みやすさの処方箋」について解説します。

なぜテキストが「詰まった」に見えるのか

僕も最初は気づかなかったんですけど、現場でめっちゃよく見るのが「テキストが詰まって見えて、なんか読みにくいサイト」なんです。
デザイナーから「行間を調整してください」と指摘されるまで、実は余白がどこまで効いているのか、全然意識してなかったんですよ。

テキストが詰まって見える原因は、大きく3つあります。

• line-height（行の高さ）が小さすぎる
• 段落同士の間隔がない、または小さすぎる
• letter-spacing（字間）のバランスが悪い

特に注意が必要なのは、ブラウザのデフォルトのline-heightです。
HTMLを何も指定しなければ、ブラウザはline-height: normal（約1.0～1.2）を勝手に設定しちゃいます。
これが「詰まった」感じの正体なんですよ。

現場あるあるなんですが、フォントサイズを16pxにしたのに、デフォルトの行間のままだと、ほんま窮屈に見えます。
特に本文テキストが200文字以上続くような段落だと、読み進めるのが疲れちゃう。
これだけで直帰率が変わることもあるんで、決して無視できないポイントなんです。

line-heightとletter-spacingの実践的な値の決め方

では実際に、どんな値を設定するといいのか。
ここで僕が現場で使ってる「すぐに効く」ルールをお伝えしますね。

本文テキスト（16px～18px）の場合

本文はline-height: 1.6～1.8を目安に設定するといいですよ。
これは「フォントサイズの1.6倍～1.8倍」という意味です。
例えばfont-size: 16pxなら、line-height: 1.6だと実際の行間は25.6pxになります。

実際のコード例を見てみましょう。

body {
  font-size: 16px;
  line-height: 1.7;
  letter-spacing: 0.02em;
}

この1.7という値は、僕が色々試した中で「読んでて疲れにくい」と感じる値です。
最初は1.6で試して、クライアントの反応を見ながら調整するのがいいですよ。

見出しや短い文章の場合

見出しやCTA文言のように、短いテキストならline-height: 1.4～1.5でOKです。
ここで1.7を使うと、逆に間が空きすぎて不自然に見えちゃいます。

つまり「テキストの長さ」によって、適切な行間は変わるということ。
これがほんま大事なポイントやん。

letter-spacingで微調整

letter-spacing（字間）も重要な要素です。
デフォルトは0ですが、本文テキストには0.02em～0.05emの値を入れるといいですよ。
これだけで「読みやすくなった感」が全然違います。

僕の失敗談なんですが、昔はletter-spacing: 0.1emみたいに大きい値を入れてた時期があります。
デザイナーから「字間が空きすぎてて、単語が分割されて見える」って指摘されました。
今は控えめな0.02em～0.04emを使ってます。

段落間の余白で「呼吸感」を作る

行間の次に大事なのが「段落と段落の間」の余白です。
これを上手く使うと、テキスト全体に「呼吸感」が生まれるんです。

現場でよく見るミスは、段落間をmargin-bottom: 10px程度で済ましちゃうパターン。
本文のline-height: 1.7に比べて、段落間が小さいと、視覚的に詰まった印象になっちゃいます。

ここで使うといい値は、本文のフォントサイズの1.5～2倍です。

p {
  font-size: 16px;
  line-height: 1.7;
  margin-bottom: 24px; /* 16px × 1.5 */
}

24pxあれば、段落と段落の間に心地いい「空き」が生まれます。
読者が一呼吸置いて、次の段落に進める感じになるんですよ。

さらに上級テクニックとしては、セクションごとに段落間を変えることもできます。
例えば、重要な情報が続く部分はmargin-bottom: 20px、それ以外は24pxみたいに。
こうすることで、テキストの「リズム」が生まれて、読み手の体験が変わるんです。

まとめ

余白を使ったテキストの読みやすさって、実はめっちゃシンプルなルールで解決できます。

• 本文はline-height: 1.6～1.8を基本に
• letter-spacing: 0.02em～0.04emで微調整
• 段落間は本文フォントサイズの1.5～2倍を目安に

この3つを押さえるだけで、「詰まった」から「流れた」テキストに変身します。
デザイナーからの指摘も減りますし、ユーザーの読了率も上がりやすくなるんですよ。

最初は「こんなに空けるの？」って思うかもしれません。
でも実装して、自分で読んでみると「あ、こっちの方が圧倒的に読みやすい」って気づきます。
ぜひ試してみてくださいね。