単色配色と3色配色はどう違う？WEBサイトで比較
WEBサイトを少ない色でまとめたいとき、単色配色と3色配色のどちらを選べばよいのでしょうか。単色配色は一つの色みを濃淡で展開し、3色配色は異なる色みに役割を分ける考え方です。ここでは陶芸体験教室の申込みページを同じ構成のまま2通りに配色し、写真・案内・申込みボタンの見え方と選び方を比べます。
単色はまとまりを作りやすく、3色は役割を区別しやすい
単色配色とは、一つの色相（緑・青などの色みの種類）を基準に、明るい色や暗い色を組み合わせる方法です。「単色」はHEXコードを一つしか使えないという意味ではありません。基準の緑に白を混ぜた淡い色や、黒を混ぜた深い色を使っても、色みをそろえた配色として考えられます。
一方、この記事でいう3色配色は、主な色みを3系統選び、見出し・補助案内・重要な操作などに仕事を分ける方法です。白に近い背景や濃いグレーの本文文字は、両案に共通する下地の色として扱います。3色を同じ面積にしたり、ページ内のすべての色コードを3個に制限したりする必要はありません。
商品写真や説明を主役にしたいなら、単色の濃淡だけでも情報を整理できます。案内リンクと申込み操作を異なる色で区別したい場合には3色配色が候補になります。ただし色を増やすだけで使いやすくなるわけではなく、ラベルや配置による区別も必要です。
陶芸体験教室のページを2通りに配色する
両案とも、作品写真、体験時間、料金、申込みボタンの配置は同じとします。共通のページ背景は温かみのある白#FFFBF5、本文文字は濃いグレー#292524で、コントラスト比は約14.71:1です。HEXとは、先頭の「#」に続く6桁の数字・英字で色を指定するWEB用の書き方です。
- 単色配色案：緑#166534を基準にし、見出しは暗い緑#0F4724、案内カードは淡い緑#DCE8E1にします。カード上の本文は濃いグレー#292524で約12.04:1、見出しの暗い緑#0F4724とページ背景#FFFBF5は約10.46:1です。明るい本文エリアに置く「体験を予約する」ボタンは緑#166534、文字は白#FFFFFFで約7.13:1。写真を引き立てながら、緑の濃淡で情報の段階を示す構成です。
- 3色配色案：見出しは緑#166534、予約ボタンは赤橙#C2410C、日程へのリンクは青#1D4ED8と役割を分けます。共通背景#FFFBF5に対して見出しは約6.92:1、青いリンクは約6.50:1です。赤橙のボタン#C2410Cには白文字#FFFFFFを載せ、約5.18:1を確保します。説明カードには淡いベージュ#F4EEE7を使い、本文の濃いグレー#292524との比は約13.17:1です。青いリンクには下線も付け、色だけに頼らず区別します。
単色案では濃淡が統一感を支え、3色案では予約ボタンを見出しやリンクと別の色にできます。ただし後者で3色すべてを大きな帯やボタンに使うと、どこが一番重要なのか分かりにくくなる場合があります。赤橙は主要な申込み操作に絞る、といった配置のルールが必要です。
色数より、隣接色の差と操作の伝わり方を確認する
単色案のカード背景#DCE8E1とページ背景#FFFBF5の差は約1.22:1で、色面だけでは境界が弱い組み合わせです。操作できるカードとして使うなら、緑#166534の枠線を付けるとカード背景#DCE8E1に対して約5.66:1になります。3色案でも淡いベージュ#F4EEE7とページ背景#FFFBF5の差は約1.12:1なので、必要に応じて枠線や十分な余白を加えます。
WCAG 2.2（WEBコンテンツのアクセシビリティに関する指針）のレベルAAでは、通常サイズの文字と背景のコントラスト比に4.5:1以上、規定の大きな文字に3:1以上が求められます。文字が基準を満たしても画面全体の適合が保証されるわけではありません。リンクには下線、ボタンには「予約する」という文言を付け、スマートフォンでも操作の優先順位を確認しましょう。
HueRollでは基準色から明るい色・暗い色や配色候補を探し、選択色と白・黒とのコントラストを確認できます。ただし任意の2色比較やAA・AAAの自動判定はできません。この記事の白・黒以外の組み合わせは別途計算しています。まず単色で役割を置いてみて、区別したい操作が残る場合にだけ別の色みを追加する、という進め方も有効です。