WEBライターとしてブログのデザインをいじったり、アイキャッチ画像を作ったりしていると、「なんだか色がパッとしないな…」と悩むことってありませんか？私も最初の頃は、自分の好きな色ばかり使ってしまって、画面全体がぼんやりしたり、逆に見づらくなってしまったりと失敗の連続でした。
そんな時に役立つのが「補色」の知識です。補色を理論的に使いこなせるようになると、WEBデザインだけでなく、ファッションのコーディネートや部屋のインテリアまで、ぐっと垢抜けた印象に変えることが期待できます。今回は、日本色彩研究所が提唱し、日本のデザイン教育や色彩検定でも広く使われている色彩体系「PCCS」に基づいた補色組み合わせ一覧の表や、センス良く見せるための具体的な比率テクニックについて、私の経験も交えながら詳しくまとめてみました。
- PCCSに基づいた正確な補色の組み合わせ表ですぐに色を確認できる
- Webデザインやイラスト制作で失敗しない配色のコツ
- ファッションやインテリアに取り入れる際の具体的な比率
- 色相環の仕組みを理解して自分だけのおしゃれな配色
PCCSの補色の組み合わせ一覧と基本をチェック
色彩理論には「マンセル表色系」などいくつかの種類がありますが、日本でデザインやファッションの実務・学習に使われることが多いのが、PCCS（日本色研配色体系）です。PCCSは、色相（Hue）とトーン（Tone）の2軸で色を整理し、「人間が直感的に美しいと感じる色の調和」を考えやすくするために作られた体系です。
まずは、基本となる補色の関係を一覧表で確認していきましょう。
補色色相環の表で見やすく解説
補色とは、色相環（色の輪）において、正反対（180度）の位置にある色の組み合わせのことを指します。この2色はお互いの色を最も強く引き立て合う性質を持っており、メリハリのある配色を作りたいときに非常に強力なツールになります。
PCCSの24色相環において、補色は「色相番号の差が12になる組み合わせ」と定義されています。以下に、WEB制作やデザインですぐに使えるよう、主要な補色ペアとHEXコード（Webカラーコード）をまとめました。
| 色相番号 | 色名（和名） | HEX例 | 補色番号 | 補色名（和名） | 補色HEX例 | イメージ |
|---|---|---|---|---|---|---|
| 2:R | 赤 | #EA5550 | 14:BG | 青緑 | #009E9F | クリスマス、和風 |
| 5:O | 橙 | #F39800 | 17:B | 青 | #0068B7 | スポーティ、信頼 |
| 8:Y | 黄 | #FFD900 | 20:V | 青紫 | #601986 | 注意喚起、高貴 |
| 10:YG | 黄緑 | #B8D200 | 22:P | 紫 | #920783 | 自然、ミステリアス |
| 12:G | 緑 | #009944 | 24:RP | 赤紫 | #C50068 | 安らぎ、華やか |
※表の補色ペアは、PCCS24色相環に基づく代表的な組み合わせです。HEX例はWeb上で扱いやすい近似色の一例であり、PCCSの公式色票そのものではありません。
PCCSについて
PCCSは一般財団法人日本色彩研究所によって開発された色彩体系で、色彩調和や配色分類を体系的に考えるのに適しています。色相環は24色相から成り、主要4色（赤・黄・緑・青）とその心理補色を対向位置に配置することで、補色関係や配色パターンをつかみやすくなっています。
（出典：一般財団法人日本色彩研究所『PCCS（日本色研配色体系）』）
赤や緑などおしゃれな配色例
「赤」と「緑」の組み合わせは、補色の中で最もポピュラーなペアですね。西洋ではクリスマスカラーとして親しまれていますが、実は扱いが少し難しい組み合わせでもあります。
ハレーション（目がチカチカする現象）に注意
彩度（鮮やかさ）が高い赤と緑をそのまま隣り合わせると、境界線がギラギラと振動して見える「ハレーション」という現象が起きてしまいます。これは視認性を下げ、ユーザーに不快感を与える原因になります。
おしゃれに使いこなすためには、以下のテクニックを使ってみてください。
- トーンを変える（和の配色）：
真っ赤と真緑ではなく、「朱色（少し黄みのある赤）」と「青磁色（くすんだ青緑）」のようにトーンを落とすと、日本の伝統的な着物のような、落ち着いた和モダンな配色になります。 - セパレーション（分離）を入れる：
赤と緑の間に「白」や「金」のラインを一本挟むだけで、ハレーションが収まり、それぞれの色が美しく際立ちます。クリスマスの装飾に金のリボンが使われるのは、理にかなっているんですね。
黄と紫の補色関係とイメージ
「黄色」と「青紫」は、PCCSなどの色彩体系で有彩色の中でも明度差（明るさの差）が特に大きい組み合わせとして扱われます。黄色は有彩色の中で最も明度が高く、青紫は最も明度が低い色として設定されているため、遠くからでもはっきりと識別しやすい配色になります。
シーンによる使い分け
この配色は、トーンの選び方次第で全く異なる印象を与えることができます。
- ビビッドトーンの場合（注意喚起）：
工事現場の看板や踏切などでよく見られる「黄と黒」など、明度差が大きい配色と同じように、強い警戒心や注意を引く効果があります。PCCS上では「黄色」と「青紫」の組み合わせが、有彩色の中でも特に明度差が大きい補色の一例で、「目立たせる」という点では非常に強力な組み合わせです。 - ダークトーン・ペールトーンの場合（エレガント）：
彩度を抑えた「マスタードイエロー」と深い「バイオレット」、あるいは淡い「クリームイエロー」と「ラベンダー」の組み合わせは、補色特有のキツさが消え、洗練された大人の女性のようなエレガントな印象になります。コスメのパッケージデザインなどでよく見かける配色ですね。
青とオレンジの対照的な魅力
私がWEBデザインやバナー作成で個人的に一番重宝しているのが、「青」と「オレンジ」の組み合わせです。このペアは「暖色（オレンジ）」と「寒色（青）」の対比が明確で、見ていて非常に気持ちの良いバランスを生み出します。
ティール＆オレンジ（Teal and Orange）の効果
映画や映像制作の世界では、「ティール＆オレンジ」というカラーグレーディングの手法が定番になっています。これは、人間の肌の色に近いオレンジ色を強調し、背景の影部分に補色であるティール（青緑）を乗せることで、人物を立体的に浮き上がらせるテクニックです。
ビジネスシーンでの活用
企業のコーポレートサイトでもよく使われます。「青」で信頼感や誠実さをベースにしつつ、お問い合わせボタンや重要なメッセージに「オレンジ」を使って親しみやすさと活力をプラスする。この配色は、コンバージョン（成果）に繋がりやすいと言われており、UI/UXの分野でもよく推奨される組み合わせです。
3色の補色配色テクニック
「2色の補色だとコントラストが強すぎて、画面がキツくなる…」という場合は、3色を使った配色技法「スプリット・コンプリメンタリー（分裂補色）」を試してみてください。
これは、ある色の「真向かいの補色」をそのまま使うのではなく、補色の「両隣の色」を使うテクニックです。
具体的な色の選び方
例えば、メインカラーを「青（17:B）」にする場合を考えてみましょう。
- 青の真向かいにある補色は「橙（5:O）」です。
- この橙を使わずに、その両隣にある「赤みの橙（4:rO）」と「黄みの橙（6:yO）」を選びます。
- 結果、「青・赤みの橙・黄みの橙」の3色配色となります。
メリット
完全な対立（180度）ではなく、少し角度をずらす（Y字型になる）ことで、補色のインパクトを残しつつ、視覚的な緊張感を和らげることができます。デザインにリズムや複雑さが生まれ、プロっぽい仕上がりになりますよ。
補色の組み合わせ一覧を活用した実践術
理論がわかったところで、ここからは実際の生活や制作活動でどう活かしていくか、具体的なシーン別に実践テクニックを深掘りしていきましょう。
服のコーデで映える差し色効果
ファッションにおいて、補色を「50:50」の割合で着てしまうと、ピエロの衣装のように派手になりすぎてしまいます。おしゃれに見せるためのキーワードは「アクセントカラー（差し色）」としての活用です。
面積比率の黄金ルール
補色を取り入れる際は、全体の10%〜20%程度に抑えるのが鉄則です。
- バッグや靴で取り入れる（初心者向け）：
全身をネイビー（青系）のワントーンでまとめ、バッグだけ鮮やかなイエローにする。これだけで、地味になりがちなネイビーコーデが一気に華やぎます。 - レイヤードでチラ見せ（中級者向け）：
ロングコートの下に、補色のニットを着込む方法です。例えば、グレー（無彩色）やブラウン（暗い橙）のコートの中に、鮮やかなロイヤルブルーのニットを合わせるなど。動いた時にチラッと見える補色が、センスの良さを感じさせます。
また、「素材感」を変えるのも重要なポイントです。ツルッとした素材同士だと色が喧嘩しやすいですが、ふんわりしたニットや、ザラッとしたリネンなど、質感の違う素材で補色を合わせると、色が馴染みやすくなります。
ブレスレットやミサンガなどの小物で補色を取り入れたい場合は、ミサンガの色の組み合わせと意味も参考になります。色の意味と配色パターンを詳しく解説しているので、差し色選びのヒントになりますよ。
インテリアで心地よい空間作り
お部屋のインテリアは、毎日過ごす場所だからこそ、心理的な影響を大きく受けます。補色は空間にメリハリを与えますが、使い方を間違えるとリラックスできない部屋になってしまいます。
60-30-10の法則でバランスを整える
インテリアコーディネートには、実務や雑誌・Webメディアなどでよく紹介される黄金比率があります。
| 比率 | 役割 | 色の選び方 |
|---|---|---|
| 60% | ベースカラー | 壁、床、天井など。白、アイボリー、ベージュなどの無彩色や淡い色。 |
| 30% | メインカラー | ソファ、カーテン、ラグ、キャビネットなど。部屋の主役となる色。 |
| 10% | アクセントカラー | クッション、アート、花瓶など。ここにメインカラーの「補色」を使う！ |
例えば、北欧風の部屋でソファが「ブルーグレー」なら、クッションに「テラコッタオレンジ」や「マスタードイエロー」を置いてみてください。たった10%の補色が入るだけで、空間全体が引き締まり、雑誌に出てくるようなおしゃれな部屋になります。
デザインでの黄金比率と配色
ブログのデザインやバナー作成、WebサイトのUIデザインでも、インテリアと同様の比率（Webでは70:25:5などの比率が提案されることもあります）が目安になります。
CVR（成果）を上げるための配色
特に重要なのが、「コンバージョンボタン（CTA）」の色です。
サイト全体が青系のデザインの場合、「購入する」や「登録する」といった重要なボタンには、補色である「オレンジ」や「黄色」を使うのがセオリーです。補色は「誘目性（人の目を引きつける性質）」が高いため、ユーザーが迷わずにボタンを見つけることができ、結果としてクリック率の向上が期待できます。
注意点：可読性の確保
文字色と背景色に補色を使うのはNGです（例：青い背景にオレンジの文字）。これは「リーダビリティ（読みやすさ）」を著しく低下させます。文字には白や黒、濃いグレーを使い、補色はあくまで「背景色」や「装飾」として使うようにしましょう。
イラスト作成で役立つ配色技法
デジタルイラストを描く方にとって、補色は「影色」の表現で非常に役立ちます。これを覚えると、絵のクオリティが一段階アップしますよ。
補色混色でリッチな影を作る
影を描くとき、元の色に単に「黒」を混ぜて暗くしていませんか？実は、これだと色が濁ってしまい、汚く見えてしまうことがあります。
透明感のある美しい影を作りたいときは、その物体の固有色の「補色」を少し混ぜる（乗算する）のがプロのテクニックです。
- 肌の影：肌色（薄いオレンジ）の影には、少し青や青紫系の色を乗せる。
- 植物の影：葉っぱ（緑）の影には、少し赤紫系の色を混ぜる。
こうすることで、空気感を含んだような、深みのある自然な影を表現できます。印象派の画家たちも、黒ではなく補色を活かした影色の表現を多用していたと言われています。
お子さんのファーストアートやハンドメイド作品で実際に配色を試してみたい場合は、ファーストアート絵の具組み合わせのコツ！おしゃれな配色の記事もチェックしてみてください。具体的な色の組み合わせ例や、失敗しにくい色選びのコツがまとまっています。
補色の組み合わせ一覧でセンス向上
ここまで、PCCSに基づいた補色組み合わせ一覧とその活用術について、詳しく解説してきました。補色は、使い方を間違えると派手になりすぎますが、面積やトーンを調整すれば、誰でもおしゃれな配色を作れる強力な武器になります。
最後に、今回のポイントをまとめておきます。
- 基本ルール：PCCSの色相環では、番号差「12」の色が補色。
- 鉄板の組み合わせ：Webデザインでは「青とオレンジ」が信頼と親しみを両立させる最強ペア。
- 面積比が命：ファッションやインテリアでは、アクセントとして全体の10%〜20%に抑えるのが成功の鍵。
- ハレーション対策：明度差をつけたり、セパレーションカラー（白や黒の境界線）を挟んで見やすくする。
「センスがないから…」と諦める必要はありません。色は理論です。まずは今回ご紹介した一覧表を参考に、スマホの待ち受け画面や、ちょっとした小物の色選びから、補色を取り入れてみてください。「あ、この組み合わせいいかも！」という発見が、あなたのデザインライフをきっと楽しくしてくれるはずです。
