トライアド配色をWEBデザインで使う方法｜3色をバランスよく配置するコツ
トライアド配色は、色相環で120度ずつ離れた3色を組み合わせる方法です。色みの違いを作りやすい一方、3色すべてを背景や大きなボタンに使うと、画面が落ち着かなくなる場合があります。大切なのは3色を均等に配置することではなく、主役・補助・重要な操作という役割を決めることです。植物の定期便サイトを例に具体的に考えます。
トライアド配色は3色の位置を決め、面積には差を付ける
色相環とは、赤や青などの色みを円状に並べたものです。HSL（色相・彩度・明度で色を示す方式）で色相を25度・145度・265度にすると、茶橙#7A4B29、緑#297A4B、紫#4B297Aというトライアドの例を作れます。3色は彩度50％・明度32％でそろえ、HEX（WEBの色を16進数で指定するコード）への変換時に端数を丸めています。
この3色を画面の3分の1ずつに使う必要はありません。緑をサイトの主な案内色、茶橙をキャンペーンの小さなラベル、紫を申込みボタンに割り当てます。本文の広い背景は白に近い色にして、3色が同時に目を引かないようにします。色相が120度ずつ違っても、文字と背景の明るさの差が十分とは限らないため、実際の組み合わせを確認します。
植物の定期便サイトで3色を使い分ける配色例
観葉植物を毎月届けるサービスで、商品写真、料金プラン、お届け周期、初回特典、申込みを掲載するページを想定します。主役となる緑を広い面に使い、残り2色は目的を絞ります。
- ページ冒頭：緑#297A4Bの背景に白#FFFFFFでサービス名と短い説明を表示します。文字と背景のコントラスト比は約5.28:1です。
- 冒頭の「プランを見る」ボタン：白#FFFFFFの面に緑#297A4Bの文字を使います。文字とボタンの差も、ボタンと周囲の緑#297A4Bの差も約5.28:1です。
- 商品説明・料金の背景：オフホワイト#F8F8F5に濃いグレーグリーン#27342Dで本文と数字を載せます。文字と背景の比率は約12.22:1です。
- プランカード：白#FFFFFFのカードにグレーグリーン#27342Dの文字を合わせると約13.00:1です。ただし、白#FFFFFFと周囲のオフホワイト#F8F8F5は約1.06:1しか違いません。枠線にはグレイッシュグリーン#748379を使い、白#FFFFFFに対して約3.99:1の差を付けます。
- 「初回特典」ラベル：茶橙#7A4B29の背景に白#FFFFFFで文字を入れます。比率は約7.33:1です。プランカード全面ではなく、短いラベルに限定します。
- お届け周期の案内欄：淡い緑灰#E8F0EAを背景にグレーグリーン#27342Dで説明すると約11.19:1です。区切りにグレイッシュグリーン#748379の線を使えば、この背景に対して約3.43:1となります。
- 「定期便に申し込む」ボタン：明るい本文エリアでは紫#4B297Aの背景に白#FFFFFFの文字を使います。文字とボタンは約11.07:1、ボタンと周囲のオフホワイト#F8F8F5は約10.40:1です。
緑はサービスの雰囲気、茶橙は特典の識別、紫は申込みの操作に使います。配色の3色とは別に、白やグレーを背景・本文に使うことで、写真や料金表を見比べやすくします。
3色が競い合うときは、背景と状態表示を見直す
茶橙#7A4B29と緑#297A4Bのコントラスト比は約1.39:1です。茶橙の申込みボタンを緑の案内面にそのまま置くと、違う色みでも輪郭が目立つとは限りません。紫のボタンも緑の背景と約2.10:1なので、今回の紫ボタンは明るい本文エリアに限定します。
WCAG 2.2（WEBコンテンツのアクセシビリティ指針）のレベルAAでは、通常サイズの文字と背景に4.5:1以上、大きな文字に3:1以上のコントラスト比が必要です。入力欄の輪郭など、操作に必要な非テキスト情報には隣接色と3:1以上が基準となります。「申込み済み」「受付終了」は色だけでなく言葉でも示しましょう。
スマートフォンでもカードの境界、細い補足文字、申込みボタンの位置を確認します。HueRollではトライアドの配色候補を確認できますが、コントラスト比較は選択色と白・黒に限られ、任意の2色の比較やAA・AAAの自動判定はできません。ここで示した色同士の比率は別途計算しています。