「余白が狭い」と言われた時の正しい診断方法｜デザイナーとの認識ズレを減らすコツ
こんにちは！
今日は「『余白が狭い』と言われた時の正しい診断方法」についてお話しします。
これ、ほんまに現場で頻出の悩みなんですよ。
「余白が狭い」という指摘の正体を知ろう
クライアントやデザイナーから「余白が狭い感じがします」という指摘をもらった時、皆さんはどうしていますか？
正直に言うと、僕も最初の頃は「どこを広げればいいの？」ってパニくってました。笑
ここで大切なポイントは、「余白が狭い」という言葉は実はめっちゃふわっとしているってことです。
それは以下の理由からなんです。
- 実際には「余白」ではなく「行間」かもしれない
- 特定の要素間のスペーシングかもしれない
- 全体的なバランスの感覚的な違いかもしれない
- モバイル表示とデスクトップ表示で感覚が違うかもしれない
- デザイナーが想定していた
margin値と実装値がズレているかもしれない
だから「狭い」と言われても、修正する前にまず「何が狭いのか」を診断するが重要なんですよ。
これをスキップするから、修正してもまた「やっぱり狭い感じ」って言われちゃうんです。
デザイナーの「狭い」を5つのパターンで診断する
では実際に、「余白が狭い」という指摘が来たときの診断方法を5つのパターンに分けて説明します。
これは僕が現場で何度も経験した分類なので、きっと役に立つと思いますよ。
パターン1：要素と要素の間隔が狭い（マージン問題）
これが一番多いです。
例えば、見出し（<h2>）とその下の段落（<p>）の間が狭い、というケースですね。
デザインカンプでは32pxのmargin-bottomが指定されていたのに、実装では16pxになってた、みたいなやつです。
ここはデザインファイルのスペック確認が最優先です。
確認すべきポイント：
- デザインカンプ（Figmaやスケッチなど）で計測してみる
- 実装したコードで
marginとpaddingの値を確認する - ブラウザの開発者ツールでボックスモデルを視覚化する
パターン2：行間（line-height）が狭い
これも地味に多いんです。
段落内の行と行の間隔を指すline-heightが、デザイナーのイメージより狭くなってるケースです。
デザイナーは「読みやすさ」を重視するので、line-height: 1.5やline-height: 1.6を想定していることが多いです。
でも実装ではline-height: 1.2になってたりする。
特に長文コンテンツで「全体的に窮屈に見える」と言われたら、ここを疑ってみるといいですよ。
パターン3：セクション間の余白（外側の余白）が狭い
ページ全体のセクション（例えばヘッダー、メインコンテンツ、フッターみたいな大きな塊）の間隔が狭い、というパターンです。
これは「余白が狭い」というより「ページ全体が詰まってる感じ」と表現されることも多いですね。
ここはグリッド単位での余白設計を見直すポイントです。
僕の経験では、セクション間は少なくとも60px以上取ると、ぐっと見栄えが良くなることが多いです。
パターン4：要素内の内部余白（パディング）が狭い
ボタンやカード、ボックス要素の内側の空間が窮屈に見えるパターンです。
例えば、ボタンのテキストと枠線の間のスペース（padding）ですね。
ここはブランドガイドラインに基づいてることが多いので、デザイナーに「このボタンのpaddingは何か」を直接聞くのが早いです。
パターン5：レスポンシブ時の余白が狭い（媒体依存）
デスクトップでは良さそうだけど、モバイルで見ると窮屈に見える、というやつです。
または逆に、モバイル表示の余白がデスクトップに引きずられてる。
ここは@mediaクエリでの余白値の調整が必要です。
スマートフォンでは縦幅が限られるので、余白を調整する必要が出てきます。
修正時にズレないコミュニケーション術
診断ができたら、次はデザイナーとの認識合わせが大事です。
ここで失敗するとめっちゃ時間がかかっちゃいます。
修正提案する時の黄金フレーズ
診断結果が出たら、デザイナーに報告する時はこんな風に言うといいですよ。
「〇〇と〇〇の間のマージンが現在16pxになってるんですが、デザインカンプではどのくらい想定されてましたか？」
これが大事なのは、修正前に「正解の値」を確認してるからです。
推測で修正して「これ違う」って言われるのは悔しいですからね。笑
スクリーンショットと計測値をセットで共有する
口頭だけじゃなく、視覚的な情報も一緒に渡すのがポイントです。
- 現在の実装画面のスクリーンショット
- ブラウザ開発者ツールのボックスモデル画像
- デザインカンプとの並べ比較画像
こうすることで「あ、ここのことね」って瞬時に理解してもらえます。
修正後の確認ルーチンを作る
修正したら「この値で大丈夫ですか？」と一声確認する習慣をつけましょう。
これだけでデザイナーとのやり取り回数が激減します。
特にレスポンシブ対応の場合は、デスクトップとモバイル両方の確認が必須です。
「モバイルではどうでしょう？」って聞くだけで信頼度が上がりますよ。
まとめ
「余白が狭い」と言われたら、パニくるのでは