赤いパッケージに緑のロゴ、青い背景にオレンジのボタン。こうした「よく目立つ」組み合わせの裏には、「補色」という色相環上の関係があります。
この記事では、補色とは何か、そしてなぜ補色同士を組み合わせると目立つのかを、初心者向けに解説します。
基本の理解
まずは補色の定義と、その効果がなぜ生まれるのかを押さえましょう。
補色とは何か
補色とは、色相環の中で正反対の位置にある色同士の関係のことです。
色相環とは、赤・橙・黄・緑・青・紫といった色み(色相)を、変化の順番通りに円形に並べた図のことです。
この円の上で向かい合う位置、つまり最も離れた位置にある2色が補色にあたります。たとえば赤に対する緑、青に対するオレンジなどの組み合わせです。
補色同士を並べると、お互いの色を強調し合い、非常に目立つ組み合わせになります。これは色相環上で最も離れた位置にある色同士だからこそ生まれる効果です。
補色同士は、こうして「並べる」ときはお互いの彩度(色の鮮やかさ)を引き立て合って目立ちますが、絵の具のように「混ぜる」と、お互いの個性を消し合い、彩度の低いグレーに近い色に変化していきます。
同じ補色の組み合わせでも、「並べる」か「混ぜる」かで正反対の結果になる、という点がポイントです。
※彩度とは、原色のようなパキッとした鮮やかな色(高彩度)か、グレーがかったくすんだ色(低彩度)かを表す指標です。
なぜ補色という考え方が必要なのか
「なんとなく目立つ色」を感覚だけで探すのではなく、色相環という根拠に基づけば、確実に目を引く組み合わせを選べるようになります。この関係を意識的にデザインへ応用したものが、補色配色という配色方法です。
実際の使い方としては、注目してほしいボタンやCTA(Call To Action。「今すぐ購入」「無料体験はこちら」のように、Webサイトで一番押してほしい行動を促すボタンのこと)の色を、背景色の補色にすることで強く目立たせる、スポーツやセール告知など活発でエネルギッシュな印象を出したい場面で補色の組み合わせを使う、といった例があります。
左のように同じくらいの面積で強い色同士をぶつけると衝突して見づらくなりますが、右のように背景を落ち着いた色にして、目立たせたい部分だけを小さく補色にすると、うまく強調できます。
ただし補色をそのまま同じ面積で使うと主張が強すぎることが多いため、片方の色を少ない面積に抑えて使うのが一般的です。
実践のポイント
補色を使うときに陥りやすい失敗と、よくある疑問をまとめます。
注意点・よくある間違い
- 補色同士を同じくらいの面積・鮮やかさで使うと、色同士がぶつかり合い、境界がチカチカして見える「ハレーション」という現象が起き、文字や要素がかえって読みにくくなることがあります。
例えば、赤地に緑の文字を乗せると、境目が残像のように揺れて見えづらくなります。
対策としては、面積比を「ベース7〜8割・補色(アクセント)1〜2割」程度に絞る、または片方の彩度(鮮やかさ)を落とす(例: 鮮やかな赤×緑ではなく、ワインレッド×オリーブグリーンにする、片方をパステル調にする)といった調整が有効です。より詳しい配色比率の考え方は色の黄金比の記事も参考にしてください。 - 「目立たせたい」という理由だけで安易に補色を選んでしまうと、サービスのブランドカラー(企業やサービスを象徴する色として一貫して使う色)や伝えたい印象と合わないことがあります。目立たせる目的と、伝えたい世界観が矛盾していないか確認しましょう。
補色の早見表
「この色の補色は何色?」と迷いやすい組み合わせを、一覧にまとめました。
| 色 | 補色 | 補足 |
|---|---|---|
| 赤 | 緑 | 最も定番の補色ペア |
| 青 | オレンジ | CTAボタンなどでよく使われる組み合わせ |
| 黄色 | 紫 | |
| 茶色 | 青系 | 茶色は彩度を抑えた暖色寄りの色のため、目安として紹介されることが多い |
よくある質問
- Q. 補色を調べる簡単な方法は?
A. 無料で使える「Adobe Color」というWebツールが代表的です。
カラーホイール上で基準の色を選び、配色ルールから「補色(Complementary)」を選択すると、反対側の補色を自動で表示してくれます。 - Q. 補色配色と何が違うの?
A. 補色は「関係性」を指す言葉で、補色配色はその関係を実際に活かした配色テクニックのことです。
例えるなら、補色は「ライバル関係にある2色」、補色配色は「そのライバル関係を活かして目立たせる配色の組み方」というイメージです。
実務ではほぼ同じ意味で使われることも多いため、最初から厳密に区別できなくても問題ありません。 - Q. 補色と反対色は同じもの?
A. PCCS(日本の配色体系)では、色相環上の位置関係を「同一色相」「隣接色相」「類似色相」「中差色相」「対照色相」「隣接補色色相」「補色色相」という段階で細かく分類しています。
このうち色相環上でちょうど真裏にあたる関係だけを、厳密には「補色色相」と呼びます。
その少し手前(隣接補色色相・対照色相)も日常会話では「反対色」とまとめて呼ばれることが多いため、言葉としては同じように使われがちですが、厳密には範囲が少し異なります。
まとめ
補色とは、色相環(色みを順番通りに円形に並べた図)上で正反対の位置にある色同士の関係のことです。お互いを強調し合う性質があるため、目立たせたい要素の色として活用できます。
ただし同じ面積・鮮やかさで使うと、境目がチカチカして見える「ハレーション」が起きやすくなります。
面積比を7:3程度に抑えるか、片方の彩度を落として調整することが大切です。
あわせて、目立たせたい目的とブランドの印象が矛盾していないかも確認しましょう。
まずは、手元のデザインやすでに公開しているWebサイトの中に、補色の組み合わせが使われていないか探してみましょう。
見つけたら、どちらの色がメインになっているか、面積のバランスをどう取っているかを観察してみると、実践のヒントになります。
