同系色でWEBサイトを作る方法｜単調に見せない配色のポイント
同系色でWEBサイトをまとめると、色が増えすぎず統一感を作りやすくなります。しかし、背景・文字・ボタンまで似た明るさの色を並べると、全体が単調で重要な情報も埋もれがちです。この記事では青から青緑へ少し色相をずらした配色を例に、同じ系統の色でも役割と明暗差を付けて見せる方法を紹介します。色を示すHEXは、WEBで使う16進数のカラーコードです。
同系色は「近い色み」と「異なる明るさ」を組み合わせる
ここでいう同系色は、青と青緑のように色相（青・緑など色みの種類）が近い色の組み合わせです。まったく同じ色を薄くしたり濃くしたりするだけでなく、色みを少しずらして使う方法も含めます。ただし、近い色を何色も追加しても、明度（色の明るさ）が似ていれば画面に強弱は付きません。
まず、広い背景には淡い色、見出しや文字には暗い色、主要な操作には背景から見分けられる濃い色を割り当てます。例えばページ上部を深いブルー#1C506Bにして、その下の本文をほぼ白#F7FAFBへ切り替えれば、同系色のまとまりを残しながら読む場所を明確にできます。
色を変える以外にも、見出しの大きさ、余白、カードの線を使って情報の優先順位を作ります。濃い色は大切な案内に集中させ、似た薄い色同士を背景に使う場合は、色差だけで区切ろうとしないことがポイントです。
プラネタリウムのイベント申込みページで使う配色例
星空の写真、上映日時、対象年齢、観覧料、座席予約を掲載するサイトを想定します。青と青緑の近い色みを中心に、写真を見せる部分と申込み情報を読む部分を分けます。
- 最初の案内エリア：深いブルー#1C506Bを背景に、白#FFFFFFでイベント名と短い説明を表示します。文字と背景のコントラスト比は約8.72:1です。星空の写真には直接文字を重ねず、文字を載せる場所は単色の面にします。
- 上部の「上映内容を見る」ボタン：淡い青緑#C9E7EAを背景に、濃いスレート#273741の文字を置きます。文字とボタンの比率は約9.42:1、ボタンと周囲の深いブルー#1C506Bは約6.68:1です。
- 日時・料金の本文：青みの少ないオフホワイト#F7FAFBにスレート#273741を合わせ、文字と背景の比率を約11.72:1にします。長い案内は暗い背景から切り離します。
- 上映プログラムのカード：白#FFFFFFの面にスレート#273741で説明すると、約12.29:1です。ただし、白#FFFFFFと周囲のオフホワイト#F7FAFBの差は約1.05:1のため、枠線と余白を併用します。
- 集合時間・注意事項の案内欄：淡い青緑#DDEFF0を背景に、スレート#273741で文字を載せます。比率は約10.34:1です。ページ背景#F7FAFBとの差は約1.13:1なので、見出しや区切り線も付けます。
- カード・入力欄の境界線：グレイッシュブルー#6D8490なら、白#FFFFFFに対して約3.92:1、淡い青緑#DDEFF0に対して約3.30:1です。入力欄の輪郭が必要な場所に使います。
- 詳細エリアの「座席を予約する」ボタン：深い青緑#175A6Cに白#FFFFFFの文字を組み合わせます。文字は約7.73:1、ボタンとオフホワイト#F7FAFBの周囲は約7.37:1です。
- 補助的な装飾：やや明るい青緑#3D8590は、白#FFFFFFに対して約4.24:1です。装飾線には使えますが、通常サイズの重要な文字には4.5:1を下回るため、文字色として使い回さないようにします。
濃いブルーと青緑は色相が近いため、強い反対色を足さなくても全体に関連性を持たせられます。そのうえで、淡い面・文字色・操作色を使い分けることで、色の種類よりも情報の役割が先に伝わる構成にします。
単調さを防ぐには、近い色同士の境界と状態を確認する
同系色の背景を交互に置くだけでは変化が小さい場合があります。白#FFFFFFのカードとオフホワイト#F7FAFBの背景、淡い青緑#DDEFF0の案内欄は、それぞれの明暗差が小さいためです。区切り線・見出し・余白を優先し、装飾色を無理に増やさないようにしましょう。
WCAG 2.2（WEBコンテンツのアクセシビリティ指針）のレベルAAでは、通常サイズの文字と背景に4.5:1以上、大きな文字には3:1以上のコントラスト比が求められます。入力欄の輪郭など、操作や状態の識別に必要な非テキスト情報は隣接色と3:1以上が基準です。「満席」「受付中」などは同系色の濃淡だけに頼らず、文字でも示します。
最後にスマートフォンでも、上映日時の小さな文字、写真と案内欄の境界、予約ボタンの位置を確認します。HueRollでは選択色と白・黒とのコントラストを確認できますが、任意の2色の比較やAA・AAAの自動判定には対応していません。今回のような色同士の比率は別途計算し、実際の画面で確かめましょう。