1色だけでWEBデザインは作れる？濃淡を使った配色の組み立て方

WEBデザインは、1つの基準色から濃淡を広げるだけでも組み立てられます。ただし、まったく同じ1つのHEXコードだけを背景・文字・ボタンに使うと、同じ色同士のコントラスト比は1:1になり、情報を読み分けられません。この記事でいう「1色だけ」は、1つの色相を基準にして明度を変えた同系色を使う方法です。ここでは色相165度・彩度60%を固定し、緑寄りの青緑1系統だけでページを作ります。

1色だけで作るなら、同じ色相の明度を段階に分ける

同じ色相165度・彩度60%のまま明度を変えると、濃い青緑 ■#0C3128、中濃度の青緑 ■#196653、基準色 ■#2EB895、淡い青緑 ■#D6F5ED、ごく淡い青緑 ■#EBFAF6 のような段階を作れます。色相を増やさなくても、暗い色は文字、明るい色は背景、中間の色は操作というように役割を分けられます。

この方法では「新しい色を追加する」のではなく、同じ基準色の明るさを変えて情報の階層を作ります。色数を抑えたいブランドサイトや、落ち着いたUIを作りたいときに使いやすい考え方です。

背景・本文・見出し・CTAを同じ色相で組み立てる

サービス紹介ページなら、全体背景を ■#EBFAF6、カード背景を ■#D6F5ED、本文を最も濃い ■#0C3128、見出しを ■#12493C にします。本文と全体背景のコントラスト比（前景と背景の相対的な明るさの差を示す数値）は約13.15:1、見出しと背景は約9.56:1です。

CTA（Call to Action、問い合わせや申込みなど次の行動へ進むための主要ボタン）は ■#196653 を背景にし、文字を最も淡い ■#EBFAF6 にすると約6.37:1です。WCAG（Web Content Accessibility Guidelines、Webアクセシビリティのガイドライン）で通常サイズの文字に求められる4.5:1以上を満たします。カード内でも本文 ■#0C3128 と背景 ■#D6F5ED は約12.21:1あり、1つの色相だけでも本文・背景・主要操作を分けられます。

濃淡だけで足りない役割は、形・線・文字でも区別する

1色系の配色では、隣り合う濃淡が近すぎると、選択状態やボタンの優先順位が分かりにくくなることがあります。重要な操作は最も濃い色に近づけ、補助要素は淡くするだけでなく、ボタンの大きさ、枠線、余白、太字、アイコン、ラベルなども併用します。色だけで「選択中」「エラー」「重要」などの意味を伝えないことも大切です。

また、HSLの明度を変えただけで文字のコントラストが十分になるとは限りません。実際に隣接する2色でコントラスト比を確認します。HueRollでは選択色のHSL、ティント・シェード、各種配色候補、選択色と白・黒とのコントラストを確認できます。ただし、任意の2色同士の比較やWCAGのAA・AAA自動判定には対応していないため、1色系パレットを作った後も、本文・背景・CTAなどの実際の組み合わせは別途確認してください。