Webデザインの余白、何pxが正解？ — 4px/8pxグリッドで「なんかダサい」が消える仕組み

「余白が大事」。

Webデザインを少しでもかじった人なら、誰でも知っています。

デザイン本にも書いてある。ブログにも書いてある。YouTubeでも言っている。

じゃあ聞きます。

あなたのサイトのセクション間、何pxですか？

答えられる人はほぼいません。

「余白を取りましょう」の先に、具体的な数値を教えてくれる記事がほとんどないからです。

この記事では、デザイン実装歴17年の経験から、余白設計の「正解の数値」を出します。

4px/8pxグリッドシステムの仕組みと、CSSでの具体的な実装例。

AI生成デザインの余白がなぜダサく見えるのかも、数値で説明します。

AIが生成するデザインの余白問題
4px/8pxグリッドシステムの仕組み
- なぜ4の倍数なのか
- スペーシングスケール
padding / margin / gap の使い分け
実装例 — CSSでの余白設計
- Vanilla CSS
- Tailwind CSS
AI生成デザインの余白を修正する — Before / After
- Before（AI生成のまま）
- After（8pxグリッド準拠に修正）
まとめ：余白は「何もない空間」ではなく「情報設計」
このシリーズの他の記事

AIが生成するデザインの余白問題

まず、現状を見てください。

Claude Code、Cursor、v0。

どのAIツールでサイトを作っても、余白に共通の問題が出ます。

2パターンあります。

パターン1：均一すぎる

CSS

/* AIが生成しがちなCSS */

.section { padding: 40px 0; }

.card { padding: 12px; }

h2 { margin-bottom: 4px; }

p { margin-bottom: 4px; }

全部同じ。

セクション間もカード内も見出し下も、ほぼ均一な数値が並びます。

これの何がまずいか。

余白が均一だと、情報のグループが見えません。

「ここで話題が変わった」「この3つはひとまとまり」という構造が、読者の脳に伝わらない。

ノートに文字をびっしり詰めたような状態です。

パターン2：中途半端な値

CSS

.hero { padding: 47px 23px; }

.feature-card { padding: 13px; }

.section-gap { margin-top: 53px; }

47px。13px。53px。

これはAI特有の問題です。

機械学習のトレーニングデータから「平均値っぽい数値」を吐いている。

人間のデザイナーは47pxなんて値を使いません。48pxか、せいぜい40pxです。

バイブコーディングの限界を痛感した体験でも書きましたが、AIは「動くコード」を書くのが得意です。

でも「意図のあるコード」は書けない。余白は、まさにその典型例です。

なぜAIは余白を間違えるのか

理由はシンプルです。

AIには「この余白で情報が正しく伝わるか」を判断する基準がない。

「要素Aと要素Bの間に余白を入れる」は処理できます。

でも「要素Aと要素Bは強い関連があるから近く、要素Bと要素Cは別のグループだから遠く」という意味的な判断ができません。

だから均一になるか、無意味な中間値になる。

ぶっちゃけ、この問題に気づかないうちは何度AIに再生成させても同じです。

問題はプロンプトでもツールでもなく、余白の判断基準がないこと。

Figma AIが「使えない」と感じた本当の原因でも書きましたが、AIの出力を評価する目がなければ、どのツールを使っても結果は変わりません。

4px/8pxグリッドシステムの仕組み

具体的な数値の話に入ります。

なぜ4の倍数なのか

Webデザインの余白は、4pxまたは8pxの倍数で設計するのが業界標準です。

Google Material Design、Apple HIG、IBM Carbon。主

要なデザインシステムはすべて8pxベースのグリッドを採用しています。

理由は3つあります。

1. 画面解像度との相性

現在のモニターは1x（96dpi）、2x（Retina）、3x（一部Android）のいずれか。

4の倍数なら、どの倍率でもピクセルが割り切れます。

8pxの要素は、2x表示で16物理ピクセル、3x表示で24物理ピクセル。

サブピクセルレンダリングが発生しないので、エッジがにじまない。

2. 組み合わせの柔軟性

8, 16, 24, 32, 48, 64, 80, 96, 120。

この9つの値だけで、ほぼすべてのWebデザインの余白をカバーできます。

9つしかない。選択肢が絞られているから、迷わない。

3. 視覚的な整合性

人間の目は微妙な不揃いを敏感に察知します。

13pxと16pxの差は気づかなくても、「なんか揃ってない」という違和感は感じる。

4の倍数に統一するだけで、この違和感が消えます。

スペーシングスケール

実装で使う具体的な値です。

トークン名	値	用途
`space-1`	4px	アイコンとラベルの間、極小の隙間
`space-2`	8px	リスト項目間、見出しと本文の間
`space-3`	16px	カード内padding（最小）、フォーム要素間
`space-4`	24px	カード内padding（推奨）、グループ間
`space-5`	32px	カード同士の間、サイドバーとメインの間
`space-6`	48px	セクション内の大きな区切り
`space-7`	64px	セクション間（最小）
`space-8`	80px	セクション間（標準）
`space-9`	96px	ヒーロー下、大きなトピック変更
`space-10`	120px	フッター前、最大の区切り

これが余白の参考です。

padding / margin / gap の使い分け

値の基準はわかった。

次は「どのCSSプロパティを使うか」です。

padding — 要素の内側

CSS

/* カードの中身に余裕を持たせる */

.card {

padding: 24px;

}

/* ボタンの内側 */

.button {

padding: 12px 24px;

}

paddingは箱の中の余白です。

カードの枠から中身までの距離。ボタンのテキストから端までの距離。

「コンテンツを包む」ときに使います。

margin — 要素の外側

CSS

/* セクション間の区切り */

.section {

margin-bottom: 80px;

}

/* 見出しの上に余白を足す */

h2 {

margin-top: 48px;

margin-bottom: 8px;

}

marginは箱の外の余白です。セクションとセクションの間の距離。

注意点が1つ。marginには「相殺」（margin collapsing）があります。

上下のmarginが重なると、大きい方だけが適用される。

これが意図しない余白崩れの原因になることがあります。

gap — Flex/Gridの子要素間（おすすめ）

CSS

/* カードグリッドの間隔 */

.card-grid {

display: grid;

grid-template-columns: repeat(3, 1fr);

gap: 32px;

}

/* ナビゲーションのリンク間 */

.nav-links {

display: flex;

gap: 24px;

}

gapはFlexboxやGridの子要素間の距離です。

marginの相殺問題が起きない。

最初と最後の要素に不要な余白がつかない。

管理が圧倒的にシンプルです。

迷ったらgapを使ってください。

2026年現在、モダンブラウザはすべて対応しています。

実装例 — CSSでの余白設計

具体的なコードを書きます。

典型的なLPのセクション構成で、余白をどう設計するか。

Vanilla CSS

CSS

/* ===== スペーシング変数 ===== */

:root {

--space-1: 4px;

--space-2: 8px;

--space-3: 16px;

--space-4: 24px;

--space-5: 32px;

--space-6: 48px;

--space-7: 64px;

--space-8: 80px;

--space-9: 96px;

}

/* ===== セクション間 ===== */

.section {

padding-block: var(--space-8); /* 上下80px */

}

.section--hero {

padding-block: var(--space-9); /* ヒーローは上下96px */

}

.section--cta {

padding-block: var(--space-9); /* CTA前後も96px */

}

/* ===== セクション内の要素 ===== */

.section__header {

margin-bottom: var(--space-6); /* 見出しブロック下 48px */

}

.section__title {

margin-bottom: var(--space-2); /* タイトル下 8px */

}

.section__description {

margin-bottom: 0; /* 親のmargin-bottomで制御 */

}

/* ===== カード ===== */

.card {

padding: var(--space-4); /* 内側 24px */

}

.card-grid {

display: grid;

grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));

gap: var(--space-5); /* カード間 32px */

}

/* ===== ボタン ===== */

.button {

padding: 12px var(--space-4); /* 上下12px 左右24px */

}

Tailwind CSS

HTML

<!-- ヒーローセクション -->

<section class="py-24">

<div class="max-w-4xl mx-auto px-6">

<h1 class="text-4xl font-bold mb-2">...</h1>

<p class="text-lg text-gray-600 mb-8">...</p>

<a href="#" class="px-6 py-3 bg-blue-600 text-white rounded">...</a>

</div>

</section>

<!-- 特徴セクション -->

<section class="py-20">

<div class="max-w-6xl mx-auto px-6">

<h2 class="text-2xl font-bold mb-2">...</h2>

<p class="text-gray-600 mb-12">...</p>

<!-- カードグリッド：gap-8 = 32px -->

<div class="grid grid-cols-1 md:grid-cols-3 gap-8">

<!-- カード：p-6 = 24px -->

<div class="p-6 border rounded-lg">

<h3 class="text-lg font-semibold mb-2">...</h3>

<p class="text-gray-600">...</p>

</div>

</div>

</div>

</section>

<!-- CTAセクション -->

<section class="py-24 bg-gray-50">

<div class="max-w-2xl mx-auto px-6 text-center">

<h2 class="text-3xl font-bold mb-4">...</h2>

<p class="text-gray-600 mb-8">...</p>

<a href="#" class="px-8 py-4 bg-blue-600 text-white rounded-lg text-lg">...</a>

</div>

</section>

Tailwindの場合、`py-20`は`padding-block: 80px`、`py-24`は`padding-block: 96px`に対応します。`p-6`は`padding: 24px`、`gap-8`は`gap: 32px`。

Tailwindのデフォルトスケールは4pxベースなので、8pxグリッドと完全に互換します。

Tailwindのレスポンシブ設計ガイドも合わせて読むと、余白のレスポンシブ対応まで一気に理解できます。

AI生成デザインの余白を修正する — Before / After

ここまでの知識を使って、実際のAI生成CSSを修正します。

Before（AI生成のまま）

CSS

.hero {

padding: 47px 23px;

}

.section {

padding: 40px 0;

}

.card {

padding: 12px;

margin-bottom: 15px;

}

h2 {

margin-bottom: 4px;

}

p {

margin-bottom: 4px;

}

.cta-section {

padding: 35px 0;

}

問題点を整理します。

`padding: 47px 23px` — 4の倍数でない。47pxは中途半端
`.section { padding: 40px }` — セクション間としては小さすぎる
`.card { padding: 12px }` — カード内が窮屈。12pxは8pxグリッドだが最小すぎ
`h2 { margin-bottom: 4px }` と `p { margin-bottom: 4px }` — 見出し下も本文下も同じ。階層がない
`margin-bottom: 15px` — 4の倍数でない
`.cta-section { padding: 35px }` — CTA前の余白が足りない。35pxは中途半端

After（8pxグリッド準拠に修正）

CSS

.hero {

padding: 96px 24px; /* 48→96px（ヒーローは大きく）、24pxに揃え */

}

.section {

padding: 80px 24px; /* 40→80px（セクション間標準） */

}

.card {

padding: 24px; /* 12→24px（カード内に余裕を） */

}

.card-grid {

display: grid;

gap: 32px; /* margin-bottom: 15px → gap: 32px に変更 */

}

h2 {

margin-bottom: 8px; /* 4→8px（見出しと本文は近い） */

}

p {

margin-bottom: 24px; /* 4→24px（段落間は離す） */

}

p:last-child {

margin-bottom: 0;

}

.cta-section {

padding: 96px 24px; /* 35→96px（CTAは広く取る） */

}

変更箇所をまとめます。

要素	Before	After	変更理由
ヒーロー	47px	96px	ヒーローは最も目立つセクション。余白を大きく
セクション間	40px	80px	標準のセクション余白に
カード内	12px	24px	コンテンツに呼吸させる
カード間	margin 15px	gap 32px	marginからgapに変更。値も8の倍数に
見出し下	4px	8px	見出しと本文は近く（関連が強い）
段落間	4px	24px	段落間は離す（ここで区切り）
CTA前	35px	96px	CTAには十分な余白で視線を集中