補色の組み合わせ方と失敗しない使い方（類似色・トライアド）

「この色に何を合わせればいいの？」で毎回止まっていませんか？

合う色は感覚で探さなくて大丈夫です。色相環のどこから選ぶかを決めれば、組み合わせは自動的に決まります。
このレッスンでは、使用頻度の高い3つの型を扱います。補色（真向かい）・類似色（隣どうし）・トライアド（3等分）です。あわせて、補色の組み合わせで起きやすい失敗と、その直し方も紹介します。
最後はトライアドでパレットを1つ作る課題です。作ったパレットは、そのまま次の制作で使えます。

カラーホイールで色の位置を見る

カラーホイールは、色相を輪の形に並べたものです。日本語では色相環と呼びます。赤 → 橙 → 黄 → 緑 → 青 → 紫 → 赤、と一周してもとに戻ります。

配色の型は、この輪の上で「どこを選ぶか」という話でしかありません。輪の上での距離が近いほど馴染み、遠いほど差がつきます。ここだけ押さえれば、型の名前は覚えなくても選べます。

型	輪の上での位置	できあがる印象
類似色	隣り合う2〜3色（30度前後）	まとまる・穏やか・失敗しにくい
トライアド	輪を3等分した3色（120度ずつ）	にぎやか・バランスが取れる
補色	真向かいの2色（180度）	目立つ・強い・主張し合う

ツールは無料のもので足ります。Canvaの色選択画面やAdobe Colorのカラーホイールを開けば、1色決めるだけで残りを自動で出してくれます。自分で角度を測る作業は要りません💡

補色：真向かいの2色を組み合わせる

補色は、カラーホイールで正反対に位置する2色です。赤と緑、青と橙、黄と紫。この3組が代表例です。

補色を並べると、お互いの色が強く見えます。赤の隣に緑を置くと、赤はいつもより赤く見えます。
だから補色は「目立たせたい1か所」に使います。セール価格、申し込みボタン、締め切り。ここぞという場所に補色を持ってくると、視線が集まります。
IKEAの看板がこの形です。青と黄色は輪の上で遠い2色なので、遠くからでも目に入ります。

面積を対等にしない

補色の組み合わせで最初にやりがちな失敗が、2色を半分ずつ使うことです。どちらも同じ強さで主張するので、主役が決まりません。

直し方は面積の差をつけることです。片方を広く、もう片方を狭く。目安は9対1くらいまで振り切って構いません。
広いほうが背景、狭いほうがボタンや価格。この配分にすると、補色の強さが1か所に集中します。

ハレーションを避ける

彩度の高い補色どうしを隣り合わせると、境目がチカチカして見えます。これをハレーションと呼びます。真っ赤な背景に真っ青な文字を置くと起きます。目が疲れて、内容が読めません。

対策は3つあります。効果が高い順です。

1つ目の「無彩色をはさむ」は覚えておいてください。白・黒・グレーは、どの色とも組み合わせが成立します。困ったときの逃げ道になります。

ミニ確認（1分）
コンビニでよく見る商品パッケージを1つ思い出してみてください。オレンジの背景に青い文字、緑の背景に赤いロゴ。補色は目に留まる必要がある場所でよく使われています。ただし、必ずどちらかの面積が小さいはずです。

類似色：隣どうしでまとめる

類似色は、カラーホイールで隣り合う2〜3色です。青と青緑と緑、橙と黄と黄緑、といった組み合わせになります。

いちばん失敗しない型です。色みが近いので、何も考えなくてもまとまります。落ち着いた雰囲気を作りたいとき、企業サイトや資料の配色に向きます。
デジタル庁のサイトがこの型です。青と水色を中心にまとめて、国のサービスに求められる落ち着きを作っています。

弱点は、メリハリが出ないことです。どれも似た強さに見えるので、どこを見ればいいか分かりにくくなります。
解決策は2つ。明度差をしっかりつけるか、アクセントの5%だけ補色を1か所に置くかです。明度差をつけるときは、背景をぐっと白に寄せて、文字を濃くします。
後者は「スプリットコンプリメンタリ」（補色の両隣から色を借りる型）に近い考え方で、まとまりと目立ちを両立できます。

トライアド：3等分の3色でバランスを取る

トライアドは、カラーホイールを3等分した位置の3色です。赤・黄・青、橙・緑・紫といった組み合わせになります。

3色とも輪の上で等しく離れているので、どれか1色だけが浮きません。にぎやかなのにバランスが取れます。子ども向け、イベント、フェス告知のように、楽しさを出したいときに向きます。

ただし、3色をそのまま同じ量ずつ使うと、原色のおもちゃのようになります。使い方のコツは2つです。

• 配分を70対25対5にする：3色を等分せず、ベース・メイン・アクセントに役割を振ります
• トーンを揃える：3色とも彩度を1〜2段下げると、まとまりが出ます。全部ビビッドのままにしません

トライアドは、この2つを守れば実務でも使えます。守らないと途端に子ども向けの見た目になるので、対象読者と合うかどうかを先に決めてください。

どの型を選ぶかの決め方

型は先に決めます。色を置きながら決めると、あとで全部やり直しになります。判断の順番はこうです。

迷ったら類似色を選んでください。地味に振れても事故にはなりません。派手に振れた失敗は目立ちます◎

ミニ実践：トライアド配色でパレットを1つ作る

型は作ってみないと身につきません。トライアドでパレットを1つ作ります。所要時間は15分ほど、無料のAdobe ColorとCanvaで足ります。

1. お題を1つ決めます。「夏の子ども向けワークショップ告知」など、具体的なほうが判断しやすいです
2. Adobe Colorのカラーホイールを開いて、配色ルールから「トライアド」を選びます
3. 1色目を決めます。お題のイメージに近い色相を選んでください。残り2色は自動で決まります
4. 3色とも彩度を1〜2段下げます。ホイール上の点を中心寄りに動かすと下がります
5. 3色に役割を振ります。いちばん薄い色をベース（70%）、次をメイン（25%）、残りをアクセント（5%）に決めます
6. Canvaで正方形のバナーを1枚作り、この配分どおりに色を置きます。要素は見出し・説明文・ボタンの3つで構いません
7. できたら、アクセント色を使った場所が1か所だけか確認します。2か所以上あれば減らします
8. HEX（#から始まる6桁の色の番号）を3つメモに残します。次の制作でそのまま使えます

4番の彩度を下げる工程を飛ばさないでください。ここを飛ばすと、トライアドは原色の3色になります。
作ったパレットは1つ持っておくと、次から色選びの時間がゼロになります。

仕上がりを次のチェックリストで確認してください。

よくある質問

補色同士を混ぜるとどうなりますか？

絵の具のように混ぜると、彩度が打ち消し合って灰色や茶色に近づきます。鮮やかさが消えるので、混色で使う場面は限られます。
光の場合は逆で、混ぜると白に近づきます。パソコンの画面は光なので、こちらの性質です。
ただしデザインで補色を使うときは、混ぜずに並べて使います。並べるとお互いを強め合い、混ぜると打ち消し合う。反対の結果になるので混同しないでください。

補色を組み合わせると、どんな効果がありますか？

お互いの色が実際より鮮やかに見えます。結果として、その場所が目立ちます。
使いどころは、視線を1か所に集めたいときです。ボタン、価格、締め切り。逆に、落ち着いた雰囲気を作りたいページ全体には向きません。
効果が強いぶん、面積を対等にすると全体が騒がしくなります。片方を狭くして使ってください。

やってはいけない色の組み合わせはありますか？

絶対にダメな組み合わせはありませんが、事故になりやすい3つがあります。
1つ目は、彩度の高い補色を隣り合わせること。境目がチカチカして読めません。あいだに白か黒をはさめば直ります。
2つ目は、明度が近い2色で文字と背景を作ること。色みが違っても読めません。白黒表示にして確かめてください。
3つ目は、赤と緑だけで違いを表すこと。この2色の区別がつきにくい人がいます。色に加えて、形や文字でも区別をつけてください。

組み合わせがいい3色は何ですか？

決まった3色があるわけではなく、選び方に型があります。落ち着かせたいなら類似色（隣り合う3色）、にぎやかにしたいならトライアド（3等分の3色）です。
どちらを選んでも、配分は70対25対5にします。3色を等分すると、どの型でもまとまりません。
まず1色をお題から決めて、残り2色はカラーホイールに出してもらう。この手順なら、色の知識がなくても外しません。

次に学ぶこと

このレッスンの要点です。

• 合う色は、カラーホイールの位置で決める
• 類似色（隣どうし）はまとまる。迷ったらこれ
• 補色（真向かい）は目立つ。面積を対等にせず、1か所に絞る
• ハレーションは、白か黒をはさむと消える
• トライアド（3等分）はにぎやか。彩度を下げて70対25対5で使う

型で色が選べるようになったら、次は作品全体の雰囲気を揃える話です。トンマナで、色・フォント・あしらいをまとめて1つのルールにする方法を扱います。
三属性やトーンがあいまいなら、配色の基本に戻って確認してください。決めた色をツールで指定する方法はカラーコードの仕組みにあります。

ほかのレッスンはデザインの基本コース目次から選べます。