補色とは何か（What）
色相環上で 180°向かい合う 2色の組み合わせを 補色（コンプリメンタリー）といいます。赤と青緑、黄と紫などが代表例です。
触ってみる — 色相環
示す: 色相環上の位置関係と、補色・類似色・三角配色の目安
示さない: 6色だけが存在する世界（環は連続した色相の地図です）
ヘッダーのテーマ色とは連動しません（レッスン内だけの操作です）。
下の6色は Colorism の学習パレットです。押すと環上の対応位置に移り、その色を基準に補色・類似色などを表示します（ヘッダーのテーマ色とは別です）。
なぜ補色が目を引くか（Why）
補色を隣に置くと、互いを より鮮やかに感じさせる 効果（補色対比）があります。だからポスターやスポーツデザインで「赤と緑」「黄と紫」のような組み合わせが目を引くのです。
一方、同じ面積・同じ彩度 で並べると、振動するような不快感や可読性低下を招きやすいです。補色は 強いスパイス — 少量で効かせるイメージです。
どう使うか（How）
| 使い方 | 効果 | 注意 |
|---|---|---|
| 小面積のアクセント | 主色を際立たせる | 面積を抑える |
| 文字と背景 | 視認性を上げる | 彩度を上げすぎると疲れる |
| 全面に補色のみ | 非常に刺激的 | UI 本文には不向きなことが多い |
Web / UI のたとえ
- 主ボタンはブランド色、エラーは補色系の赤など、役割で色を分ける
- ホバー色は同じ色相で 明度だけ 変える（補色に飛ばさない）
ポスター・スポーツのたとえ
チームカラーと対戦相手のコントラストで、スタジアムの看板が遠くからでも識別しやすくなる — 補色は 注意を引く 用途に向きます。
ミニクイズ
補色配色で UI 全体をデザインするとき、最も避けたいのはどれですか？