近い色だけでWEBサイトを作る方法｜まとまりと変化を両立する配色

近い色だけでWEBサイトを作ると、全体を同じ雰囲気にまとめやすい一方、色の差が小さすぎると見出し・カード・ボタンの役割まで似て見えることがあります。ポイントは、色相（赤・青・緑などの色みの違い）を大きく離さず、明度や彩度、使う面積で変化を付けることです。ここでは青 ■#2563EB を基準に、青緑と青紫へ少し広げる例で考えます。

色相を近く保ち、明度と彩度で役割を分ける

HueRollの類似色の例では、青 ■#2563EB に対して、シアン寄りの ■#25C6EB や青紫寄りの ■#4A25EB のような候補があります。こうした近い色は連続感を作りやすいため、ページ全体の主要な色相をそろえたいときに使えます。

ただし、3色を同じ鮮やかさ・同じ面積で並べると差が弱くなります。大面積には淡い青 ■#EFF6FF、補助セクションには淡いシアン ■#ECFEFF、別の区切りには淡い青紫 ■#F5F3FF のように、近い色相を保ったまま明るくすると、まとまりを崩さず面を分けられます。

ページ全体では、背景・本文・CTAの差を明確にする

サービス紹介ページなら、主要背景を淡い青 ■#EFF6FF、事例セクションを淡いシアン ■#ECFEFF、料金セクションを淡い青紫 ■#F5F3FF とします。本文は濃いネイビー ■#172033 に固定すると、それぞれの背景に対するコントラスト比は約14.95:1、15.64:1、14.83:1です。

CTA（Call to Action、問い合わせや申込みなど次の行動へ進むための主要ボタン）は、青紫 ■#4A25EB に白文字 ■#FFFFFF を組み合わせると約7.62:1です。WCAG（Web Content Accessibility Guidelines、Webアクセシビリティのガイドライン）で通常サイズの文字に求められる4.5:1以上を確保できます。近い色だけで構成しても、明暗差を大きくすれば主要操作をはっきり分けられます。

状態や重要度は、色相の違いだけで伝えない

近い色同士は統一感を作りやすい反面、選択中と未選択、成功と失敗、リンクと本文などを小さな色相差だけで区別する用途には向きません。重要な違いには、明度差、太さ、枠線、形、アイコン、ラベルなどを加えます。たとえばタブの選択状態なら、色を青から青紫へ変えるだけでなく、下線や太字も併用すると状態を伝えやすくなります。

色数を増やしたくなったときも、まず新しい色相を足すのではなく、既存色の明るい背景用・濃い文字用・操作用という役割を整理します。近い色だけの配色では、色の種類よりも「どの面積で、どの明るさを使うか」が変化を作る鍵になります。

HueRollでは類似色や配色候補を確認できます。選択色と白・黒とのコントラスト比も表示しますが、任意の2色同士の比較やWCAGのAA・AAA自動判定には対応していないため、本文やCTAの実際の組み合わせは別途確認してください。