行間・字間の微調整で劇的に変わるWebデザイン｜現場で使える実践テクニック

こんにちは！

今日は「行間・字間の微調整で劇的に変わるWebデザイン」について解説します。

行間・字間はなぜそこまで重要なのか

僕も最初のころは、フォント選びと文字サイズのことばっかり気にしてました。
行間？字間？「そんなのデフォルトでええやん」って思ってたんですよ。
ほんま、甘かったです。

あるクライアントから「なんか、このテキスト読みづらいんだけど…」という指摘を受けたんです。
フォントも大きさも問題ないのに。
そのとき初めて気づきました。
行間と字間が窮屈すぎて、視線が疲れやすくなってたんですよ。

現場でよく見るのは、デザイナーが作った高級感のあるデザインが、開発時点で何か違う感じになってることですね。
その多くの原因は行間・字間の設定なんです。
ピクセルパーフェクトでデザイン通りに再現してるのに、なぜか「ちょっと違う」ってなる。
あるあるです。

実践的な行間設定のコツ

line-heightはめっちゃ奥が深いんです。
単純に「1.5」とか「1.6」を入れてるだけじゃダメなんですよ。

まず理解してほしいのは、行間には2つの考え方があるということです。

• 倍数指定（単位なし）：line-height: 1.6 ← フォントサイズに対する比率
• 固定値指定：line-height: 24px または line-height: 1.5rem ← 絶対的な高さ

本文テキストならline-height: 1.6から1.8くらいがおすすめです。
特に日本語は漢字とひらがなが混在するから、英語より少し広めに取ったほうが読みやすいですよ。

僕が現場で推奨してるのはこんな設定です：

• 見出し（h1, h2）：line-height: 1.3 から 1.4 ← 詰め気味で存在感を出す
• 本文段落：line-height: 1.7 から 1.8 ← ゆったり読みやすく
• スマホ表示：さらに +0.1 から +0.2 足す ← 小さい画面だから余裕が必要

あと、line-heightを倍数指定するときは、後続要素のmarginに影響を与えないように注意してください。
子要素で予期せぬ広がりが起きることがあるんです。

字間調整で高級感を出すテクニック

letter-spacingは、ほんっとに細かい調整ですが、これで「あ、ちゃんとしてるな」って感じが出るんですよ。

デフォルトではletter-spacing: normalですが、実は用途によって変えたほうがいいです。

• 見出しやタイトル：letter-spacing: 0.1em から 0.15em ← 高級感が出る
• 本文：letter-spacing: 0 または 0.02em ← ほぼそのまま
• 全部大文字のキャッチコピー：letter-spacing: 0.2em 以上 ← スペースを活かす

ここで失敗しやすいのが、字間を広げすぎることですね。
0.2emとか0.3emをデフォルトで使っちゃうと、ほんまに読みにくくなります。
「高級感を出したい＝字間を広げる」は半分正解ですが、0.05emくらいの微調整が重要なんですよ。

スマホ表示では字間を調整しない、という選択肢もあります。
小さい画面では字間が広いと、単語の境界が曖昧になってかえって読みづらくなるからです。
メディアクエリで本文のletter-spacingをリセットするのもテクニックの一つですよ。

まとめ

行間・字間は、一見小さな調整に見えますが、実はデザインの完成度を決める要素です。
フォント選びと同じくらい重要なんです。

覚えてほしいのはこの3つです。

• line-height: 1.7～1.8で本文の可読性がぐっと上がる
• letter-spacingは見出しで活躍、本文では控えめに
• スマホとデスクトップで分ける意識が大切

最初は「こんな細かいことで？」って思うかもしれません。
でも、デザイナーとのやり取りで「あ、行間と字間を整えるだけで解決する」って気づくようになると、めっちゃ仕事の質が上がりますよ。