スクエア配色をWEBデザインで使う方法｜4色を整理して見せるコツ
スクエア配色とは、色相環で90度ずつ離れた4つの色みを組み合わせる方法です。色の種類が豊富になる反面、4色すべてを大きな面積に使うと、見出しやボタンが競い合って見えることがあります。この記事では、4色をどこに配置するかを決め、情報を見やすく整理する方法を紹介します。
スクエア配色は4色を同じ量で使う必要はない
色相環は、赤・黄・青などの色みを円に並べたものです。スクエア配色では、円を4等分した位置の色を候補にします。例えばHSL（色相・彩度・明るさで色を表す方法）の色相を20度、110度、200度、290度にすると、オレンジ系#773E22、緑系#307722、青系#225B77、紫系#692277という組み合わせを作れます。HEXはWEBで色を指定する16進数のコードです。これらは同じ彩度・明るさで作った例で、HEXへの換算時に端数を丸めています。
重要なのは、この4色を背景の4分の1ずつに塗り分けないことです。例えば青をサイト全体の基準色とし、オレンジ・緑・紫は分類を示す小さな表示に使います。本文やカードの土台には白やグレーを使っても構いません。4色は「使える色相の組み合わせ」であり、画面上の面積配分を指定する規則ではありません。
また、色相が90度ずつ離れていても、文字が読みやすくなるとは限りません。背景と文字の明暗差や色を置く場所は、別に確認する必要があります。
科学館の週末講座ページで4色を整理する配色例
週末講座の一覧に、工作・自然観察・科学実験・宇宙の4つの分類があるWEBページを想定します。4つの色は分類ラベルに使い、申込み操作は1色に統一します。
- ページ全体：ほぼ白の背景#F7F7F5に濃いグレー#27333Bで本文を表示します。文字と背景のコントラスト比は約12.06:1です。
- ヘッダーと申込み案内：青#225B77の背景に白#FFFFFFの文字を置きます。コントラスト比は約7.42:1です。4色のうち青を広い面に使う主役とします。
- 「工作」ラベル：オレンジ系#773E22の背景に白#FFFFFFの文字を合わせます。コントラスト比は約8.41:1です。
- 「自然観察」ラベル：緑系#307722の背景に白#FFFFFFの文字を合わせます。コントラスト比は約5.54:1です。
- 「科学実験」ラベル：青系#225B77の背景に白#FFFFFFの文字を合わせます。コントラスト比は約7.42:1です。
- 「宇宙」ラベル：紫系#692277の背景に白#FFFFFFの文字を合わせます。コントラスト比は約10.02:1です。
- 講座カード：白#FFFFFFに濃いグレー#27333Bで講座名や日時を表示します。文字は約12.94:1です。白#FFFFFFとページ背景#F7F7F5の差は約1.07:1と小さいため、グレー#748087の枠線も付けます。枠線と白#FFFFFFの差は約4.05:1です。
- 持ち物の案内：薄いグレー#ECEFEBに濃いグレー#27333Bで文章を載せます。文字は約11.16:1です。案内欄にグレー#748087の枠線を使うと、背景#ECEFEBとの比率は約3.50:1です。
- 「申込みへ進む」ボタン：青#225B77を背景に白#FFFFFFで表示します。文字は約7.42:1、ボタンと周囲のほぼ白#F7F7F5の差は約6.92:1です。青いヘッダー内では同色のボタンが埋もれるため、この組み合わせは明るい本文エリアで使います。
分類ラベルには必ず「工作」などの文字を入れ、色だけで内容を識別させないようにします。青のヘッダー、4色の小さな分類表示、明るい講座カードの順に役割を分けると、4色があっても視線を整理できます。
4色がうるさく感じられるときの調整と注意点
最初に色を減らすのではなく、色の付いた面積を確認します。4つの分類ごとにカード全体を塗るより、ラベルだけを色付きにして、カードの背景は共通にすると統一しやすくなります。彩度（色の鮮やかさ）や明るさを変えた場合は、同じ色相関係でもコントラスト比が変わるため再計算してください。
WCAG 2.2（WEBコンテンツのアクセシビリティ指針）のレベルAAでは、通常サイズの文字と背景に4.5:1以上、大きな文字に3:1以上のコントラスト比が求められます。入力欄の輪郭など、操作上必要な非テキスト情報には隣接色と3:1以上が基準です。分類や受付状況はラベルの文言でも伝え、色だけに依存させないようにします。
スマートフォンでは4つのラベルを並べたときの余白や、日時・申込みボタンの位置も確認します。HueRollでは配色候補を確認できますが、コントラストの比較は選択色と白・黒に限られ、任意の2色の比較やAA・AAAの自動判定には対応していません。ここで示した色同士の比率は別途計算しています。