分割補色スキームを使用したウェブデザインの基礎

10年以上ウェブサイトを構築してきた私の経験では、アマチュアデザインとプロフェッショナルなデザインを分ける最大の要因は色です。使う色の数ではなく、どの色を組み合わせるか、そしてなぜそうするのかが重要です。私を含む多くの開発者は、安全なグレーと1つのアクセントカラーに頼るか、その瞬間は良く見えるが実運用では濁って見える色を選んでしまいます。

解決策は400ページのテキストから色彩理論を学ぶことではありません。1つの信頼できる配色スキームを学び、それが自然になるまで使うことです。私の経験では、そのスキームは分割補色です。そしてそれに慣れたら、三色配色が次のステップになります。両方について説明します。

目次

• 分割補色とは？
• 色相環で分割補色を見つける方法
• 分割補色が初心者に最適な理由
• CSSにおける分割補色
• 分割補色を使用した実際のウェブデザイン例
• 三色配色とは？
• 分割補色 vs 三色配色：使い分けのポイント
• 色調和を適用するための実践的なヒント
• FAQ

分割補色とは？

まず、純粋な補色から始めましょう。標準的な色相環では、補色は直接向かい合う位置にあります。青とオレンジ、赤と緑、紫と黄色を思い浮かべてください。最大のコントラストを作り出します。問題は何か？最大のコントラストは攻撃的に感じることができます。青とオレンジのウェブサイトはあなたに叫びかけます。デザインの観点からいえば、ケンカのようなものです。

分割補色はこの概念をソフトにします。ベースの色の直対補色を使う代わりに、補色に隣接する 2つの色を使います。つまり、ベースの色が青の場合、補色はオレンジになります。しかし、オレンジではなく、黄色みのオレンジと赤みのオレンジを選ぶのです。

それで全てです。それが全てのコンセプトです。

その結果は、強い視覚的コントラスト（色相環の反対側から選んでいるため）を持ちながら、より微妙で対立的でない3色のパレットになります。緊張感は生まれますが、衝突はありません。

その背景にある幾何学

360度の色相環では：

1. ベースの色相を選びます（例：豊かな青の場合220°）
2. 補色を見つけます：ベース + 180°（この場合40°で、オレンジです）
3. 40°の代わりに、どちらか一方に30°の側に行きます：10°（赤みのオレンジ）と70°（黄色みのオレンジ）

標準的な分割は補色から±30°ですが、デザイナーの中には±25°または±35°を使って、少し異なる雰囲気を作り出す人もいます。厳しいルールはありません。最終的な判断者はあなたの目です。

色相環で分割補色を見つける方法

HSL値を使ってこれを手動で行うことができます。開発者にはこれをお勧めします。CSSに直接マッピングするためです。ここにメンタルモデルがあります：

ベース：         H
補色：           H + 180°
分割1：          H + 150°
分割2：          H + 210°

補色±30°ではなく150°と210°である理由は何ですか？同じもの、異なる計算方法です。(H + 180) - 30 = H + 150と(H + 180) + 30 = H + 210です。これらは色相環上の同じ位置です。

ブランドカラーがhsl(175, 65%, 45%)のティール色だとしましょう：

• ベース： 175°
• 分割1： 175 + 150 = 325°（バラ/マゼンタ）
• 分割2： 175 + 210 = 385° → 25°（暖かいコーラル/オレンジ）

3色のパレット：ティール、バラ、コーラル。これは素晴らしい組み合わせであり、デザインの直感は必要ありません。単なる算数です。

当社のインタラクティブ色相環で試してください。任意の基本色を選択すると、両方の分割が即座に計算されます。

分割補色が初心者に最適な理由

色について聞いてくる全ての開発者に分割補色をお勧めしています。その理由はこちらです：

失敗がほぼ不可能

補色配色は俗っぽく見えることがあります。類似色配色（色相環の隣同士の色）は薄く見えて、コントラストが足りないかもしれません。三色配色は注意深いバランスが必要です。しかし分割補色？ただ...うまくいきます。3色の間の幾何学的な関係は、純粋な補色の厳しさなしで、視覚的階層のためのコントラストを保証します。

明確な主色が得られます

三色配色では、3つの色相が均等に配置されているため、どれがリードするかを決めるのが難しい場合があります。分割補色スキームでは、1つの色が明確にベースであり、他の2つがサポート的な役割を果たします。これは以下を必要とするウェブデザインに完璧にマッピングされます：

• プライマリブランドカラー（ベース）
• アクセントカラー CTAとインタラクティブ要素用（1つの分割）
• セカンダリアクセントハイライト、バッジ、またはホバー状態用（もう1つの分割）

構成を優雅にスケールダウン

ページによっては、3色中2色しか使用しないかもしれません。各分割はベースそのものと個別に良好なコントラストを持っているため、それでも機能します。すべての場所で3色を使用するように固定されていません。

CSSにおける分割補色

ここは私が通常、HSLを使ってCSS カスタムプロパティで分割補色パレットを設定する方法です。HSLはここが重要です。色相が単に色相環上の度数であるため、色彩理論の計算は簡単になります。

:root {
  /* ベースの色相 */
  --hue-base: 220; /* 豊かな青 */
  --hue-split-1: calc(var(--hue-base) + 150); /* ~10° 暖色の赤みオレンジ */
  --hue-split-2: calc(var(--hue-base) + 210); /* ~70° ゴールデンイエロー */

  /* プライマリパレット */
  --color-primary: hsl(var(--hue-base), 65%, 50%);
  --color-accent-warm: hsl(var(--hue-split-1), 70%, 55%);
  --color-accent-cool: hsl(var(--hue-split-2), 60%, 50%);

  /* 拡張パレット — 明るい/暗いバリエーション */
  --color-primary-light: hsl(var(--hue-base), 65%, 90%);
  --color-primary-dark: hsl(var(--hue-base), 65%, 25%);
  --color-accent-warm-light: hsl(var(--hue-split-1), 70%, 92%);
  --color-accent-cool-light: hsl(var(--hue-split-2), 60%, 90%);

  /* ベース色相から派生したニュートラル */
  --color-bg: hsl(var(--hue-base), 10%, 98%);
  --color-surface: hsl(var(--hue-base), 8%, 100%);
  --color-text: hsl(var(--hue-base), 15%, 15%);
  --color-text-muted: hsl(var(--hue-base), 10%, 45%);
}

下部のニュートラルに注目してください。ベース色相の彩度をわずかな量で白とグレーをティントしています。これは小さな詳細ですが、大きな違いをもたらします。背景があなたの配色から切り離された感じにはなりません。これは無意識に気づかないことですが、目は確実に認識します。

60-30-10ルールの適用

古典的なインテリアデザインの比率はここで完璧に機能します：

/* 60% — プライマリ/ニュートラル（背景、大きなサーフェス） */
.page-wrapper {
  background-color: var(--color-bg);
  color: var(--color-text);
}

/* 30% — ベースカラー（ヘッダー、ナビ、カード） */
.site-header {
  background-color: var(--color-primary);
  color: white;
}

.card {
  border-left: 4px solid var(--color-primary);
  background: var(--color-surface);
}

/* 10% — アクセント分割（CTA、ハイライト、バッジ） */
.btn-cta {
  background-color: var(--color-accent-warm);
  color: white;
  border: none;
  padding: 0.75rem 1.5rem;
  border-radius: 6px;
}

.badge-new {
  background-color: var(--color-accent-cool-light);
  color: var(--color-accent-cool);
  padding: 0.25rem 0.75rem;
  border-radius: 999px;
  font-size: 0.8rem;
}

.link-highlight {
  color: var(--color-accent-warm);
  text-decoration: underline;
}

暖色アクセント（赤みオレンジ）はゴールデンイエローよりも目を引くため、プライマリCTAに使用します。クーラーなアクセントはセカンダリ要素に機能します。これはハードルールではありません。両方をテストして、特定の色相がどのように見えるかを確認してください。

分割補色を使用した実際のウェブデザイン例

実際のサイトがこのスキームをどのように使用しているか見てみましょう。たとえそれを呼ばなくても。

例1：SaaS ダッシュボード（青ベース）

• ベース： 青（#3B82F6） — ナビゲーション、ヘッダー、プライマリボタン
• 分割1： 暖色アンバー（#F59E0B） — 警告状態、アップグレードCTA、アクティブインジケータ
• 分割2： ローズ（#F43F5E） — エラー状態、通知バッジ、削除アクション

これは本質的にTailwind CSSのデフォルトパレットが可能にしているものです。青がプライマリで、アンバーとローズがアクセント。Tailwind チームが意図したかどうかにかかわらず、それは分割補色です。

例2：e-コマース（緑ベース）

• ベース： フォレストグリーン（#16A34A） — ブランドアイデンティティ、「カートに追加」ボタン
• 分割1： 暖色赤（#DC2626） — セールタグ、緊急性インジケータ
• 分割2： バイオレット（#7C3AED） — ロイヤルティプログラムバッジ、プレミアム製品ハイライト

例3：ポートフォリオサイト（紫ベース）

• ベース： パープル（#8B5CF6） — 見出し、ヒーローセクション
• 分割1： ティール（#14B8A6） — リンク、インタラクティブ要素
• 分割2： ライム（#84CC16） — 成功状態、注目プロジェクトバッジ

パターンを見ますか？ベースカラーはブランドアイデンティティの大部分を処理し、2つの分割はベースから目立つ必要があるサポート的な役割を処理します。

三色配色とは？

三色配色は、色相環上で120°間隔で均等に配置された3つの色相です。分割補色が色相環上の二等辺三角形の場合、三色配色は正三角形です。

ベース：      H
三色1：       H + 120°
三色2：       H + 240°

古典的な三色配色の組み合わせ：

• 赤、黄、青（プライマリカラー — これが最も有名な三色配色セットです）
• オレンジ、グリーン、パープル（セカンダリカラー）
• ティール、マゼンタ、ゴールド

当社の三色配色ツールで三色配色を探索できます。

CSSにおける三色配色

:root {
  --hue-base: 0; /* 赤 */
  --hue-triadic-1: calc(var(--hue-base) + 120); /* 120° グリーン */
  --hue-triadic-2: calc(var(--hue-base) + 240); /* 240° ブルー */

  --color-primary: hsl(var(--hue-base), 70%, 50%);
  --color-secondary: hsl(var(--hue-triadic-1), 60%, 42%);
  --color-tertiary: hsl(var(--hue-triadic-2), 65%, 50%);
}

三色配色はボールドです。エネルギッシュです。制御も難しいです。すべての3つの色が同じ視覚的な重みを持つため、各色をどのくらい使用するかについて、より意図的である必要があります。Googleのブランドカラー（赤、黄、青、緑）は本質的にダブル三色配色であり、それが製品全体で機能するのに何百人ものデザインチームがかかります。

分割補色 vs 三色配色：使い分けのポイント

ここは各スキームが意味をなす時間について、正直な見解です：

要因	分割補色	三色配色
難易度	初心者向け	中級者向け
コントラストレベル	高い、しかし制御可能	非常に高い、同じ緊張感
主色	内在的（ベース）	自然な主色なし — あなたが選択
最適用途	ビジネスサイト、SaaS、ブログ、ポートフォリオ	クリエイティブエージェンシー、子供向けブランド、ゲーミング、エンターテインメント
俗っぽく見えるリスク	低い	中程度から高い、うまく管理できていない場合
カラーバランス	60-30-10が自然にマップ	比率決定に慎重な検討が必要
汎用性	あらゆる彩度で機能	脱彩色またはティントが必要でプロフェッショナルに見える
感情的なトーン	洗練、親しみやすい	遊び心、ダイナミック、ボールド

分割補色を選択する場合

• プロフェッショナル、コーポレートサイトを構築している
• 1つの色をブランドアイデンティティに支配させたい
• パレットが多くのテキストコンテンツで機能する必要があります（ブログ、ドキュメンテーション）
• クライアントがブランドガイドラインを提供していないため、安全なスタートポイントが必要です
• ヘッドレスCMSプロジェクトで作業していて、コンテンツエディタがUI色とうまく機能する必要があるイメージを追加するかもしれません

三色配色を選択する場合

• ブランドは本質的に遊び心のある、または若い
• エンターテインメント、ゲーミング、または子供向け製品用にデザインしている
• デザインはイラストレーションまたはアニメーションに大きく依存しています
• 強いデザイン技術があり、クリエイティブな境界をプッシュしたい
• クリエイティブポートフォリオまたはエージェンシーサイトを構築している

Social Animalで構築しているNext.js プロジェクトとAstro サイトほとんどにとって、分割補色がデフォルトの推奨事項です。コンテンツヘビーなレイアウトとうまく配置でき、視覚的な華やかさよりも読みやすさが重要です。

色調和を適用するための実践的なヒント

ヒント1：大度に彩度を下げます

色相環からの未加工色相は、ほとんどのウェブインターフェースにはあまりに激しいです。彩度を50-70%まで下げてプライマリカラーと背景はさらに低くします。高彩度は小さなアクセント — ボタン、バッジ、アイコン — で機能します。1200pxの幅のヘッダーには機能しません。

ヒント2：知覚の均一性のためにHSLの代わりにOKLCHを使用します

HSLには汚い秘密があります：その明度値は人間が実際に明るさをどのように認識するかに対応していません。hsl(60, 100%, 50%)の黄色はhsl(240, 100%, 50%)の青よりもはるかに明るく見えます。どちらも「50%の明度」でも。OKLCHはこれを修正します。

:root {
  /* OKLCHは知覚的に均一な明度を与えます */
  --color-primary: oklch(55% 0.15 220);
  --color-accent-warm: oklch(55% 0.18 10);
  --color-accent-cool: oklch(55% 0.14 70);
  /* すべての3つは実際に同じくらい明るく見えます */
}

2025年現在、OKLCHはブラウザのサポートが優れています（グローバルで96%以上）。可能ならば使用してください。

ヒント3：コントラスト比をチェックします

色調和はアクセシビリティをオーバーライドしません。すべてのテキスト背景の組み合わせはWCAG 2.2コントラスト比を満たす必要があります — 通常テキストの場合4.5:1、大きいテキストの場合3:1。WebAIM Contrast Checkerまたは組み込みChrome DevTools コントラストインスペクタなどのツールは非交渉です。

ヒント4：実際のコンテンツでテストします

実際の写真、ユーザーアバター、製品イメージを追加すると、どれだけ多くの美しいパレットが崩れるかについて、あなたに言うことはできません。常に実際のコンテンツで色スキームをテストしてください。ティール、バラ、コーラルで分割補色パレットは、主にサーモンの英雄イメージと恐ろしく衝突する可能性があります。実稼働コンテンツで早期にモックアップします。

ヒント5：ダークモードバリエーションを作成します

あなたが明度と彩度を調整する場合、両方のスキームはダークモードに良好に翻訳されます：

@media (prefers-color-scheme: dark) {
  :root {
    --color-primary: hsl(var(--hue-base), 55%, 65%);
    --color-accent-warm: hsl(var(--hue-split-1), 60%, 65%);
    --color-bg: hsl(var(--hue-base), 15%, 10%);
    --color-surface: hsl(var(--hue-base), 12%, 15%);
    --color-text: hsl(var(--hue-base), 10%, 90%);
  }
}

ダークモードでは、通常、前景色の明度を増加させ、彩度をわずかに減少させたいです。暗い背景の上の明るい、飽和した色は目疲れを引き起こします。

FAQ

分割補色スキームとは何ですか？ 分割補色スキームは3つの色を使用します：1つのベースカラーおよび色相環上の補色に隣接する2つの色。ベースの直対補色（標準補色）を選ぶ代わりに、その補色の2つの隣を選びます。通常、どちらか一方に30°です。これにより、純粋な補色ペアの視覚的な緊張が少ない強いコントラストが得られます。

色相環で分割補色を見つけるにはどうしたらよいですか？ ベースカラーの色相値を度数（0-360）で開始します。150°を追加して最初の分割を取得し、210°を追加して2番目の分割を取得します。結果が360°を超える場合、360°を引きます。例えば、220°（青）のベースは10°（赤みオレンジ）と70°（黄色みオレンジ）の分割を与えます。CSS でHSL値で手動で行うことができます。または当社の無料の色相環ツールを使用して視覚的に計算してください。

分割補色と三色配色の違いは何ですか？ 分割補色は1つのベースカラーと補色の近くの2つの色（ベースから150°と210°）を使用します。三色配色は120°間隔で均等に配置された3つの色を使用します。主な違いはバランスです：分割補色は明確な主色を持っています。三色配色は3色すべてを同等に扱います。分割補色はより洗練されて感じます。三色配色はより活力的に感じます。

純粋な補色よりもウェブデザイン用の分割補色がなぜ良いですか？ 直補色スキーム（色相環上で直接反対の2つの色）は最大コントラストを作成します。大量で見るのが困難または見るのが攻撃的に感じることができます。分割補色は、大部分のコントラストを維持しながら、バリエーションと全体的な効果のソフトニングのための3番目の色を追加します。これにより、2色ではなく3色でより多くのデザインの柔軟性が得られます。そして、視覚的階層を作成するのははるかに簡単です。

Tailwind CSS で分割補色を使用できますか？ 絶対に。tailwind.config.jsのtheme.extend.colorsで3つの色相を定義し、マークアップ全体で使用してください。Tailwind のデフォルトパレットは偶然にいくつかの分割補色グループを含んでいます — 青/アンバー/ローズが開発者が到達する最も一般的なものです。Tailwind v4 でのOKLCH サポートを使用して、知覚的に均一な色計算を使用することもできます。

ウェブサイトは実際には何色を使用すべきですか？ ほとんどのプロフェッショナルなウェブサイトは最大3～5の色相を使用し、ニュートラルバリエーション（ベース色でティントされたグレー）を加えます。分割補色スキームはあなたにちょうど3つの色相を与えます。これは甘い場所です。それら3つから、背景、境界線、ホバー状態のための明るいおよび暗いバリエーションを生成します。60-30-10ルールは良い開始フレームワークです：ニュートラル/ベースの60%、プライマリの30%、アクセントの10%。

三色配色はプロフェッショナル/コーポレートウェブサイトで機能しますか？ それらはできます。しかしそれはより多くのスキルが必要です。鍵は重い脱彩と慎重な比率管理です。3つの三色色すべてを完全彩度と同じ量で使用する場合、子供のおもちゃのように見えるデザインが得られます。2つの3つの色を大幅に消音し、控えめに使用します。ほとんどのコーポレートまたはSaaS プロジェクトでは、分割補色が安全で、多くの場合より良い選択です。

分割補色と三色配色のパレットを選ぶのに役立つツールは何ですか？ 当社のインタラクティブ色相環では、両方の調和を即座に視覚化できます。その他の適切なツールには、Coolors（coolors.co）、Adobe Color、Juxtopposedによる Realtime Colors が含まれます。これにより、ライブのウェブサイトのモックアップでパレットをプレビューできます。開発者の場合、コード内でパレット値をインラインで確認できるので、VS Code 拡張機能「Color Highlight」もお勧めします。