【保存版】Webデザインの基本原則10：配色・余白・タイポの黄金比

この記事は、はじめてのWebデザインから運用改善まで一貫して使える実務ガイドです。
「見やすい・分かりやすい・伝わる」を同時に満たすために、10の原則を“なぜ（理屈）→どうやる（手順）→何で測る（基準）”の順で解説します。コピペで使えるCSSトークン、チェックリスト、NG例も付けました。

情報設計と視覚階層（Hierarchy）
グリッドと余白（Spacing）
版面と視線誘導（Layout & Flow）
タイポグラフィ（Font・サイズ・行間）
配色戦略（色数・コントラスト・アクセント）
一貫性とコンポーネント（Design System）
画像・アイコン・図解（Visual Assets）
インタラクションとモーション（Feedback）
アクセシビリティ（A11y）とユニバーサルデザイン
速度・SEO・運用（Performance & Governance）

付録A：即導入できるCSSデザイントークン
付録B：WordPressで崩れない実装（theme.json / ブロックエディタ）
付録C：公開前チェックリスト（30項目）

1. 情報設計と視覚階層（Hierarchy）

なぜ

人の目は強い→弱いへ順に要素を追います。重要度を“デザインで”宣言できれば、迷いが消え、CVRや滞在時間が伸びます。

どうやる

一画面一メッセージ：ヒーローで最重要ベネフィットを一言に圧縮。副説明は1〜2文に制限。
階層は3段以内：H1 / H2 / 本文の3段。どうしても必要なときだけH3。
視覚の重み付け
- サイズ：H1＞H2＞本文（後述のタイポスケールを使用）
- コントラスト：重要ほどコントラストを高く
- 位置：上・左・中央が強い
- 余白：重要要素の外側に余白を確保（内側を詰めすぎない）

測る

ファーストビュー5秒テスト：何のサイトか、次に何をしてほしいかが言えるか。

NG：要素が全部大きく・全部太い → 結果、何も目立たない。

2. グリッドと余白（Spacing）

なぜ

余白は“何もない”ではなく意味。正しい余白は関連性を示し、誤読を防ぎます。

どうやる

8pxベースのモジュール（4でも可）：4/8/12/16/24/32/48/64…
グリッド：モバイル1列、タブレット2列、デスクトップ12列が定番。
群の原則：関連要素は内側を狭く、群と群の外側を広く。
行間の空気：本文の行間はフォントサイズ×1.6前後、段落間は行間の1.5〜2倍。

測る

コンポーネント間の縦リズムが揃っているか（後述のベースライン）。

NG：カード内のテキストとボタンがべったり、カード間の外側余白が不足。

3. 版面と視線誘導（Layout & Flow）

なぜ

人の視線はF字/Z字型を取りやすい。版面が流れを補助すると読了率が上がります。

どうやる

最大行長：日本語本文は35〜45字／行を目安。英数は45〜75cpl。
段落の頭は2文字下げより余白で区切るほうがWebでは読みやすい。
視線のガイド：セクション冒頭に結論、右端や下端にCTA。
折返し昇順：モバイル→タブレット→PCの順（モバイルファースト）。

測る

見出しだけ拾い読みしても筋が見えるか。
1スクロールあたり“要点→証拠→CTA”がまとまっているか。

4. タイポグラフィ（Font・サイズ・行間）

なぜ

タイポは可読性と信頼の根幹。読みやすさがUXとCVRに直結します。

どうやる

フォント選定
- 日本語UI：可読性重視のゴシック（例：Noto Sans JP, ヒラギノ角ゴ, Yu Gothic UI）
- 見出しで差を出したいなら見出し専用の太字ウエイトを1つ足す（本文と混ぜ過ぎない）
見出しスケール（例）
- H1: 28–36px / H2: 22–28px / H3: 18–20px / 本文: 16–18px
- 行間（line-height）：本文1.6前後、見出し1.25–1.4
字間：日本語は基本標準。英数は見出しのみletter-spacing: .02em程度で整える。
強調：太字は1画面1〜2箇所に抑え、色は安易に変えない。

測る

モバイルで13〜14px以下の本文は不可。
英数字と記号の混じりで崩れないか（日時・価格・式など）。

NG：見出しと本文の差が小さく、階層が曖昧／行間が詰まり読みにくい。

5. 配色戦略（色数・コントラスト・アクセント）

なぜ

色は情報の優先度とブランドらしさを同時に運びます。使う色を減らすほど、サイトは整います。

どうやる

60–30–10の法則：背景60%・本文/枠30%・アクセント10%
色数：原則3色＋グレー。アクセントは1色だけ。
状態色：成功・警告・危険を固定し、全ページで同一運用。
コントラスト：本文は十分な明度差（WCAGの目安：通常テキストで4.5:1以上、見出し等の大きい文字で3:1以上）
CTAは“唯一無二”：他の要素と形も色も被らせない。

測る

CTAの色が他のボタン類と混線していないか。
文字色と背景のコントラストが基準を満たすか。

NG：グラデ・シャドウ・枠線・色が多重で“うるさい”。伝えたい一点が埋もれる。

6. 一貫性とコンポーネント（Design System）

なぜ

一貫性は学習コストを下げる＝ユーザーは迷わず操作できます。運用側の改修も早く確実に。

どうやる

デザイントークンを全ての土台に（色、余白、角丸、影、フォント）。
コンポーネント化：ボタン、カード、モーダル、フォーム、ナビ、バッジ。
状態定義：Default / Hover / Active / Disabled / Focus を必ず作る。
命名：btn--primary / card--elevated / badge--warning のように役割で。

測る

同じ役割の要素が同じ見た目・同じ振る舞いか。

NG：ページごとにボタン角丸が違う、フォーカスが出たり出なかったり。

7. 画像・アイコン・図解（Visual Assets）

なぜ

ビジュアルは一瞬で意味を伝える。品質差がブランドの品質認知に直結します。

どうやる

画像は役割別に比率を固定（ヒーロー 16:9、カード 4:3 など）。
圧縮：WebP/AVIFを優先、表示サイズに合わせリサイズ。
代替テキスト：意味を説明（“女性の写真”ではなく“ノートPCで作業する女性の手元”）。
アイコンは線の太さ・角の丸みを統一（混ぜない）。
図解は文→図→要点の順で。凡例を上か左に置くと理解が速い。

測る

同じ種類の画像で枠・角丸・影が揃っているか。
ヒーローのテキストと背景のコントラストは十分か。

8. インタラクションとモーション（Feedback）

なぜ

「押せる」「処理中」「完了した」を体感で理解させるのがモーション。過剰は禁物、短く・意味のある動きだけ。

どうやる

ホバー：色の明度差 or 影の強弱を120–200msで。
押下：0.95倍のスケール or 影を消す。
ローディング：スケルトン or プログレス（予測できる体験に）。
トランジション：同一平面内はブレンド、別レイヤー（モーダル等）は方向性を付ける。
減衰カーブ：cubic-bezier(0.2, 0.6, 0.2, 1) など自然な加減速。

測る

主要操作の反応時間が100ms以内か（クリック→視覚変化）。
操作に結果のフィードバック（トースト/バッジ）が必ず返るか。

9. アクセシビリティ（A11y）とユニバーサルデザイン

なぜ

誰にとっても使いやすいことは検索エンジンにも好影響。同時に法令・ポリシー対応の土台です。

どうやる

コントラストの基準クリア（本文4.5:1以上の目安）。
フォーカスリングを消さない。outlineをブランド色で上書き。
タップ領域は44×44px以上。
画像に代替テキスト、フォームにラベル、ボタンに役割。
キーボードだけで全操作可能（Tab順序の検証）。
動画にはキャプション、動画/動く背景は自動再生オフ。

測る

キーボードで予約や購入の最終操作まで到達できるか。
フォームのエラーを音声でも理解できるか（ARIA）。

10. 速度・SEO・運用（Performance & Governance）

なぜ

速さはUXの一部。LCP/FID/CLSが良いほど離脱が減り、検索流入も伸びます。

どうやる

画像最適化：srcset / sizes / loading="lazy" / WebP。
フォント：表示に必要なサブセットだけ、font-display: swap。
CSS/JS：クリティカルCSSをインライン、不要JSは遅延。
メタ：ページごとに唯一のH1、固有のtitle/description/OGP。
運用基準：デザイン変更はコンポーネント単位で。PRD/設計書を残す。

測る

Core Web Vitals（LCP<2.5s, CLS<0.1を目安）。
重要導線（申込/購入）の速度と離脱率の相関。

付録A：即導入できるCSSデザイントークン（抜粋）

:root{
  /* 色 */
  --c-bg:#ffffff;
  --c-fg:#0f172a;         /* 本文 */
  --c-muted:#64748b;      /* 補助 */
  --c-primary:#0ea5e9;    /* CTA等（唯一無二）*/
  --c-danger:#ef4444;
  --c-warning:#f59e0b;
  --c-success:#10b981;

  /* 余白（8pxスケール）*/
  --sp-1:8px; --sp-2:12px; --sp-3:16px; --sp-4:24px;
  --sp-5:32px; --sp-6:48px; --sp-7:64px;

  /* 角丸・影 */
  --radius:12px;
  --shadow:0 6px 20px rgba(2,6,23,.08);

  /* タイポ（流体タイポの例）*/
  --fs-body:clamp(15px, 2vw, 17px);
  --fs-h3:clamp(18px, 2.2vw, 22px);
  --fs-h2:clamp(22px, 3vw, 28px);
  --fs-h1:clamp(28px, 5vw, 36px);
  --lh-body:1.6;
  --lh-heading:1.3;
}
body{
  color:var(--c-fg); background:var(--c-bg);
  font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic UI", system-ui, sans-serif;
  font-size:var(--fs-body); line-height:var(--lh-body);
}
h1,h2,h3{ line-height:var(--lh-heading); margin:0 0 var(--sp-3); }
h1{ font-size:var(--fs-h1); } h2{ font-size:var(--fs-h2); } h3{ font-size:var(--fs-h3); }
p{ margin:0 0 calc(var(--sp-3)*1.5); color:var(--c-fg); }
.text-muted{ color:var(--c-muted); }
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  gap:10px; padding:12px 18px; border-radius:var(--radius);
  background:var(--c-primary); color:#fff; font-weight:600; border:1px solid transparent;
  transition: all .18s cubic-bezier(.2,.6,.2,1);
}
.btn:hover{ transform:translateY(-1px); box-shadow:var(--shadow); }
.btn:active{ transform:translateY(0); box-shadow:none; }
.btn:focus-visible{ outline:3px solid color-mix(in srgb, var(--c-primary), #fff 30%); outline-offset:2px; }
.card{
  background:#fff; border:1px solid #e2e8f0; border-radius:var(--radius);
  box-shadow:0 1px 0 rgba(2,6,23,.03); padding:var(--sp-4);
}
.grid{ display:grid; gap:var(--sp-4); }
@media(min-width:768px){ .grid.cols-2{ grid-template-columns:repeat(2,1fr);} }
@media(min-width:1024px){ .grid.cols-3{ grid-template-columns:repeat(3,1fr);} }

付録B：WordPressで崩れない実装（Gutenberg / theme.json）

theme.json（抜粋）
テーマ直下に置くと、ブロックエディタでもトークンが効きます。

{
  "version": 2,
  "settings": {
    "color": {
      "palette": [
        {"slug":"fg","color":"#0f172a","name":"Foreground"},
        {"slug":"bg","color":"#ffffff","name":"Background"},
        {"slug":"primary","color":"#0ea5e9","name":"Primary"},
        {"slug":"muted","color":"#64748b","name":"Muted"}
      ]
    },
    "typography": {
      "fontFamilies": [
        {
          "slug": "noto-sans-jp",
          "name": "Noto Sans JP",
          "fontFamily": "\"Noto Sans JP\", system-ui, sans-serif"
        }
      ],
      "fontSizes": [
        {"slug":"body","size":"clamp(15px,2vw,17px)","name":"Body"},
        {"slug":"h3","size":"clamp(18px,2.2vw,22px)","name":"H3"},
        {"slug":"h2","size":"clamp(22px,3vw,28px)","name":"H2"},
        {"slug":"h1","size":"clamp(28px,5vw,36px)","name":"H1"}
      ],
      "lineHeight": {"paragraph":"1.6","heading":"1.3"}
    },
    "spacing": { "units": ["px","rem","%"] }
  },
  "styles": {
    "typography": { "fontFamily":"var(--wp--preset--font-family--noto-sans-jp)" },
    "elements": {
      "heading": { "typography": {"lineHeight":"1.3"} },
      "button": {
        "color": {"text":"#fff","background":"var(--wp--preset--color--primary)"},
        "border": {"radius":"12px"}
      }
    }
  }
}

ポイント

色とタイポをプリセットで固定 → ブロックエディタ上でも統一。
角丸・余白はクラスよりプリセットを優先（編集者が迷わない）。

付録C：公開前チェックリスト（30項目）

ヒーロー

何のサイトか一言で分かる
主CTAが唯一無二の色で視認できる
サブ証拠（実績/ロゴ/数値）が1〜3点

見出し・本文

H1/H2/本文の差が明確（サイズ/太さ/間隔）
本文行間1.6前後、行長35〜45字
強調が過剰でない（1画面1〜2箇所）

配色

色は3色＋グレーの範囲
文字のコントラストが十分
状態色（成功/警告/危険）が固定

余白・レイアウト

8px系の余白スケールで統一
コンポーネント間の縦リズムが揃う
カードの画像比率が統一（崩れなし）

インタラクション

ホバー/フォーカス/押下が定義済み
フォームのエラー表示が明確
ローディングにスケルトンor表示変化

A11y

キーボードのみで完遂できる
代替テキスト・ラベルが整備
タップ領域44×44px以上

速度・SEO

画像はWebP/AVIF、遅延読み込み
title/description/OGPが固有
LCP<2.5s, CLS<0.1（目安）

まとめ

設計→視覚階層→余白→タイポ→色の順で整えると、驚くほど“読める・伝わる”に近づきます。
迷ったら色を減らす・余白を増やす・見出しをはっきりが三種の神器。
運用ではデザイントークンを軸に、コンポーネントを積み上げるだけ。
そして最後は測る：5秒テスト、コントラスト、Core Web Vitals、離脱率。

【保存版】Webデザインの基本原則10：配色・余白・タイポの黄金比

目次

1. 情報設計と視覚階層（Hierarchy）

なぜ

どうやる

測る

2. グリッドと余白（Spacing）

なぜ

どうやる

測る

3. 版面と視線誘導（Layout & Flow）

なぜ

どうやる

測る

4. タイポグラフィ（Font・サイズ・行間）

なぜ

どうやる

測る

5. 配色戦略（色数・コントラスト・アクセント）

なぜ

どうやる

測る

6. 一貫性とコンポーネント（Design System）

なぜ

どうやる

測る

7. 画像・アイコン・図解（Visual Assets）

なぜ

どうやる

測る

8. インタラクションとモーション（Feedback）

なぜ

どうやる

測る

9. アクセシビリティ（A11y）とユニバーサルデザイン

なぜ

どうやる

測る

10. 速度・SEO・運用（Performance & Governance）

なぜ

どうやる

測る

付録A：即導入できるCSSデザイントークン（抜粋）

付録B：WordPressで崩れない実装（Gutenberg / theme.json）

付録C：公開前チェックリスト（30項目）

まとめ

関連投稿