補色・類似色・トライアド｜正直、そのまま使ったことはない
:::note ※配色ルールを知りたい人向けの「理論＋実務判断」記事です :::
結論（私の判断基準）
正直、補色ルールをそのまま使ったことはほとんどない。
理論通りに180°反対から色を取ると、明度が近くなってコントラストが取れない。結局、手動で調整する。
配色理論は「出発点」。そのまま使うと事故る。
🚀 配色を作る → Color Palette Generator
私が配色理論を「信じていない」理由
理由1：コントラストが取れない
補色（180°反対）を取ると、彩度と明度が近い色が出てくる。明度が近いとコントラストが足りない。
結局、明度を手動で調整する。「補色」の意味がなくなる。
理由2：UIは3色で十分
補色やトライアドは「バランスの良い5色」を作る理論。でもUIは、ベース・テキスト・アクセントの3色で十分。
5色作っても、使う場所がない。
理由3：「安全な配色」は理論なしでできる
グレー系のベースに、青のアクセント。これで失敗することはほぼない。理論を知らなくても、事故らない配色は作れる。
それでも知っておくべき6つのルール
理論を信じていなくても、知識としては必要。クライアントが「補色で」と言ってきたときに対応できる。
補色（Complementary）
色相環で180°反対。最も強いコントラスト。
青 ↔ オレンジ
赤 ↔ シアン
私の使い方：CTAボタンだけ補色。面積は10%以下に抑える。全面に使うと目がチカチカする。
類似色（Analogous）
色相環で隣り合う色（±30°程度）。自然で調和しやすい。
青 - 青緑 - 緑
私の使い方：一番使う。ただし明度差を必ずつける。同じ明度だと区別がつかない。
トライアド（Triadic）
色相環で120°間隔。3色でバランスが取れる。
私の使い方：ほぼ使わない。UIに3色も主張の強い色は要らない。キッズ向けサイトでたまに使う程度。
スプリット補色（Split-Complementary）
補色の両隣を使う。補色より柔らかい。
私の使い方：補色より扱いやすい。でも結局、1色しか使わないことが多い。
テトラード（Tetradic）
90°間隔で4色。表現は豊かだが難しい。
私の使い方：使わない。UIには多すぎる。
モノクロマティック（Monochromatic）
同じ色相で明度・彩度だけ変える。
私の使い方：これが一番使う。失敗しにくい。迷ったらこれ。
私の配色の決め方
- ベースはグレー系（白、薄いグレー）
- テキストは濃いグレー（#1F2937 あたり）
- アクセントは青（迷ったら青。青で失敗することはほぼない）
これで十分。理論に従う必要はない。
迷ったときの判断
| 迷い | 私の判断 |
|---|---|
| どのルールを使うか | モノクロマティックか類似色 |
| 補色を使うか | CTAだけ。面積10%以下 |
| トライアドを使うか | ほぼ使わない |
| 理論通りにするか | しない。明度を手動で調整 |
この記事で解決しない場合
- コントラスト比を確認したい → コントラスト比とWCAG基準
- 配色の思想を知りたい → Web配色は「事故を減らす設計」
配色理論は知識として持っておく。でも信じすぎない。実務では「グレー＋青」で十分。