Webデザインの配色ルール｜60-30-10の法則から実践テクニックまで
色彩 New

Webデザインの配色ルール｜60-30-10の法則から実践テクニックまで

Webデザインで失敗しない配色の基本ルールを解説。60-30-10の法則、色数の目安、コントラストの取り方、業種別カラーパターンまで。初心者でも使えるWeb配色の教科書。

配色Webデザイン60-30-10カラー設計UI/UX

Webデザインにおいて、配色は最も重要な要素のひとつだ。

色の選び方ひとつで、サイトの印象は「プロフェッショナル」にも「素人っぽい」にもなる。しかし、配色には明確なルールがある。ルールを知っていれば、センスに頼らず、誰でも「それっぽい」配色ができる。

本記事では、Webデザインで使える配色の基本ルールを解説する。

60-30-10の法則

最も有名な配色ルール。インテリアデザインから生まれ、Webデザインにも応用されている。

比率

役割比率用途
ベースカラー60%背景、余白
セカンダリカラー30%カード、セクション背景
アクセントカラー10%ボタン、リンク、CTA

実例

ベース（60%）: #FFFFFF（白）
セカンダリ（30%）: #F5F5F5（ライトグレー）
アクセント（10%）: #3B82F6（ブルー）

この比率を守れば、バランスの取れた配色になる。

注意点

  • アクセントカラーは「見せたい場所」にだけ使う
  • ベースカラーが多すぎると間延びする
  • セカンダリカラーで「区切り」を作る

色数の目安

基本は3〜5色

色数印象適したサイト
2色ミニマル、洗練ポートフォリオ、LP
3色バランス良いコーポレート、ブログ
4色情報豊富ECサイト、メディア
5色以上賑やか、複雑キッズ向け、エンタメ

色を増やす方法

同じ色相の明度・彩度違いを使えば、色数を増やしても統一感を保てる。

/* 青系で5段階 */
--blue-100: #DBEAFE;  /* 背景 */
--blue-300: #93C5FD;  /* ボーダー */
--blue-500: #3B82F6;  /* メイン */
--blue-700: #1D4ED8;  /* ホバー */
--blue-900: #1E3A8A;  /* テキスト */

コントラストの取り方

明暗のコントラスト

暗い背景には明るいテキスト、明るい背景には暗いテキスト。

/* ライトモード */
body {
  background: #FFFFFF;
  color: #1F2937;  /* 暗いグレー */
}

/* ダークモード */
body.dark {
  background: #111827;
  color: #F9FAFB;  /* 明るいグレー */
}

WCAGのコントラスト基準

レベル比率用途
AA4.5:1以上本文テキスト
AA（大）3:1以上18pt以上のテキスト
AAA7:1以上最高水準

確認ツール: 当サイトのカラーコード変換ツールでコントラスト比を確認できる。

彩度のコントラスト

高彩度の色同士は避ける。片方を低彩度にすると目に優しい。

❌ 赤（高彩度）+ 青（高彩度）→ 目がチカチカ
✅ 赤（高彩度）+ グレー（低彩度）→ バランス良い

役割別カラー設計

1. 背景色

  • ベースは白 or ライトグレーが無難
  • ダークモードなら**#111827〜#1F2937**
  • 純粋な黒（#000000）は避ける（コントラストが強すぎる）
/* ライトモードの背景 */
--bg-primary: #FFFFFF;
--bg-secondary: #F9FAFB;
--bg-tertiary: #F3F4F6;

/* ダークモードの背景 */
--bg-primary-dark: #111827;
--bg-secondary-dark: #1F2937;
--bg-tertiary-dark: #374151;

2. テキスト色

  • 本文はグレー系（#1F2937, #374151）
  • 見出しは少し濃く
  • 補足テキストは薄く
--text-primary: #1F2937;    /* 本文 */
--text-secondary: #6B7280;  /* 補足 */
--text-muted: #9CA3AF;      /* 薄いテキスト */

3. アクション色

ボタン、リンク、CTAに使う目立つ色。

色印象適したアクション
青信頼、安全送信、保存
緑成功、確認完了、承認
赤警告、削除削除、キャンセル
オレンジ注意、促進購入、登録

4. セマンティックカラー

意味を持つ色。UIで統一すべき。

--color-success: #10B981;  /* 成功 */
--color-warning: #F59E0B;  /* 警告 */
--color-error: #EF4444;    /* エラー */
--color-info: #3B82F6;     /* 情報 */

業種別カラーパターン

IT・テック

メイン: ブルー系（#3B82F6, #6366F1）
サブ: ダークグレー
アクセント: シアン、グリーン

理由: 信頼性、先進性、知性

金融・保険

メイン: ネイビー（#1E3A5F）
サブ: ゴールド、ホワイト
アクセント: グリーン（成長）

理由: 信頼、安定、堅実

医療・ヘルスケア

メイン: ライトブルー（#0EA5E9）
サブ: ホワイト、ライトグリーン
アクセント: ティール

理由: 清潔感、安心、専門性

飲食・食品

メイン: レッド、オレンジ（#F97316）
サブ: クリーム、ベージュ
アクセント: グリーン（新鮮さ）

理由: 食欲増進、温かみ

ファッション・美容

メイン: ブラック or パステル
サブ: ホワイト、ピンク
アクセント: ゴールド

理由: 洗練、高級感、美

環境・サステナビリティ

メイン: グリーン（#059669）
サブ: アースカラー、ベージュ
アクセント: ブラウン

理由: 自然、環境配慮

実践テクニック

1. 迷ったらブルー

ブルーは最も失敗しにくい色。業種を選ばず、万人に好まれる。

--primary: #3B82F6;  /* Tailwind blue-500 */

2. 白と黒は0.5段階ずらす

純粋な白（#FFFFFF）と黒（#000000）は避け、少しずらすと洗練される。

/* 純粋な白黒は避ける */
--white: #FAFAFA;  /* やや温かみ */
--black: #1A1A1A;  /* やや柔らか */

3. ブランドカラーからパレットを作る

ブランドカラーが決まったら、そこから明度違いを展開。

/* ブランドカラー: #8B5CF6 */
--brand-50: #F5F3FF;
--brand-100: #EDE9FE;
--brand-200: #DDD6FE;
--brand-300: #C4B5FD;
--brand-400: #A78BFA;
--brand-500: #8B5CF6;  /* メイン */
--brand-600: #7C3AED;
--brand-700: #6D28D9;
--brand-800: #5B21B6;
--brand-900: #4C1D95;

4. グレースケールを先に決める

色を決める前に、グレーのバリエーションを先に設計。

--gray-50: #F9FAFB;
--gray-100: #F3F4F6;
--gray-200: #E5E7EB;
--gray-300: #D1D5DB;
--gray-400: #9CA3AF;
--gray-500: #6B7280;
--gray-600: #4B5563;
--gray-700: #374151;
--gray-800: #1F2937;
--gray-900: #111827;

ツールを活用する

ツール用途
当サイトのパレット生成カラーパレット作成
当サイトのコントラストチェックWCAG準拠確認
Coolorsパレット生成
Tailwind CSS Colors色のリファレンス

まとめ

Webデザインの配色ルール：

ルール内容
60-30-10ベース60%、セカンダリ30%、アクセント10%
色数3〜5色に抑える
コントラスト4.5:1以上（テキスト）
グレー純粋な白黒は避ける
ブルー迷ったらブルー

これらのルールを守れば、センスに頼らず、失敗しない配色ができる。

当サイトのパレット生成ツールを使って、ぜひ自分のサイトの配色を作ってみてほしい。

関連記事

記事一覧に戻る