「詰まった」レイアウトを直す余白の問題診断法｜現場で使える実践テクニック

2026年04月13日

クリオ

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

こんにちは！
今日は「デザインが『詰まった』に見えるときの余白トラブル診断法」について解説します。

これね、ほんま現場あるあるなんですよ。
デザインカンプはスッキリしてるのに、実装するとなぜか「詰まった」印象になってしまう…。
そんなときって、たいてい余白の設定が細かくズレてるんです。

「詰まった」レイアウトあるあるの原因

僕も最初のころね、デザイナーさんから「なんか詰まった感じになってる」って指摘されて、ぜんぜん原因が分からなかったんですよ。
線も太さも違わないのに、なぜ…？って思ってました。

でも経験を重ねると気づくんですけど、原因ってだいたい「隠れた余白」なんです。
具体的には以下の3つのパターンが多いです。

これらが複合的に絡まると、パッと見では「何が悪いのか」がわからなくなるんですよ。
だからこそ、体系的に診断する方法が必要なんです。

まずはここからですよ。
Chromeのデベロッパーツール（F12キー）を開いて、怪しい要素を右クリック → 「検証」を選びます。

すると画面下にStylesパネルが出るんですけど、その下の方に「Box Model」という図が表示されます。
これがめっちゃ重要。
ここで視覚的にmarginとpaddingがどう設定されてるかが一目瞭然になるんです。

よくある勘違いなのが、「見た目がおかしい＝余白の値が間違ってる」と思うことなんですけど、実は「想定と違う計算式で余白が決まってる」ことが多いんです。
例えばmargin-bottom: autoが知らず知らずに効いてたり、親要素のdisplay: flexの影響を受けてたり。

次は、デザインカンプと実装版を並べて、ピクセル単位で計測することです。
デザインツール（FigmaとかPhotoshop）には距離測定機能がありますよね。
そこで「想定している余白」を明確にします。

例えば、ボタンの上下左右の内部余白が12pxだとしたら、それに対して実装はどうなってるか。
ボタンとその下のテキストのスペースが24pxだとしたら、実装は？
こういうのを丁寧に照らし合わせると、「あ、ここが16pxになってた」みたいに気づくんです。

これもよく見落とされるんですけど、ブラウザのデフォルト余白が思わぬところで効いてることがあります。
<p>タグって、デフォルトでmargin-topとmargin-bottomに値が入ってますよね。
<h1>〜<h6>もそう。
リスト要素もです。

もしリセットCSSを使ってないなら、こういう初期値が複合的に「詰まり感」を生み出してるケースがほんまに多いです。
だから、余白おかしいな…と思ったら、まずは該当要素のすべてのmarginとpaddingを明示的に0にしてから、改めて自分で値を入れるといいですよ。

現場でうまくいってる人たちって、実は「余白の設定ルール」を自分たちで決めてるんです。
それがぶれないから、詰まった問題が起きにくいんですよ。

僕がいま使ってるアプローチは、こんな感じです。

このルールを守ると、意外とシンプルになるんです。
そしたら後から見直すときも「あ、このmargin-bottomが原因か」って一発で分かるようになります。

あとね、CSSで余白を設定するときは、コメントを入れておくといいですよ。
例えば：

.card { padding: 20px; /* 内部: テキストと枠の距離 */ }

.card + .card { margin-top: 16px; /* カード同士の間隔 */ }

こうしておくと、3ヶ月後に見直すときも「なぜこの値なのか」が分かるんです。

「詰まった」レイアウトって、じつは設定がめちゃくちゃになってるわけじゃなくて、小さなズレが積み重なってるケースがほとんどです。
だからこそ、体系的に診断する方法を持つことが大事なんです。

今回紹介した「Box Model可視化」「デザインカンプとの比較」「初期値確認」の3ステップを意識すれば、原因の9割は見つかります。
そして、余白の設定ルールを決めておくと、同じ悩みが減るんですよ。

最初は「こんなの面倒だな」と思うかもしれません。
でも慣れると、むしろこっちの方が早くなります。
ぜひ試してみてくださいね！

Web制作で