落ち着いたWEBサイトを作る配色｜彩度を抑えて単調に見せないコツ

落ち着いたWEBサイトを目指して色の鮮やかさを抑えたら、画面全体が似たような色になり、見出しや申込みボタンまで目立たなくなることがあります。必要なのは鮮やかな色を増やすことではなく、色の明るさや使う場所に差を付けることです。地域の読書会の参加申込みページを例に、穏やかさを保ちながら単調に見せない配色を紹介します。

彩度をそろえすぎず、明るさと色みで変化を付ける

彩度は色の鮮やかさ、明度は明るさ、色相は青や赤などの色みの違いを表します。彩度を抑える場合でも、すべてを同じ明るさのグレーに寄せる必要はありません。広い背景は明るく、文字は濃く、情報をまとめる面には少しずつ異なる色みを使うと、色数を増やしすぎずに役割を分けられます。

例えばイベントの概要には青みのある淡いグレー、日程には黄みのある淡いベージュを使います。寒色寄りと暖色寄りの違いは控えめでも、見出し・余白・段落と組み合わせれば内容の切替を示せます。最も重要な参加申込みボタンだけは濃い色にし、周囲の装飾と競合させません。

ただし、色の印象は面積や写真、利用する画面によって変わります。色の違いだけでセクションを識別させず、見出しや余白でも整理しましょう。

読書会の参加申込みページを例にした配色

架空の地域読書会で、イベントの概要、日程、参加申込みフォームを一つのページに載せる場合を考えます。HEX（ヘックス）は赤・緑・青の成分を16進数で示す色コードです。次の配色は実在する団体の指定色ではなく、用途に応じた提案です。

見出し・本文文字■#303A45とページ背景■#F7F6F3のコントラスト比は約10.70:1です。同じ文字色を青みのある概要エリア■#E4E8EDに置くと約9.39:1、ベージュの日程エリア■#EFE6DBでは約9.36:1となります。本文より控えめな補足文字■#56616Bでも、概要エリアと約5.14:1、日程エリアと約5.13:1、白いカード■#FFFFFFと約6.33:1を確保します。

参加申込みボタンの背景■#6B4D65と白文字■#FFFFFFは約7.31:1です。ボタン背景と周囲のベージュ■#EFE6DBの比も約5.92:1となり、濃い色を小さな操作部分に集められます。これらは指定した不透明な2色の計算値です。

単調さを防ぎつつ、文字と操作を確認する

WCAG（WEBコンテンツを利用しやすくするための指針）では、通常サイズの文字は原則4.5:1以上、大きな文字は3:1以上のコントラスト比が求められます。必要な入力欄の輪郭やアイコンなどの視覚情報は、隣接色と原則3:1以上で確認します。今回の入力欄の輪郭■#687783と白い入力面■#FFFFFFは約4.61:1、ページ背景■#F7F6F3とは約4.27:1です。

一方、装飾用の線■#C1A38Bとページ背景■#F7F6F3の比は約2.19:1です。意味を伝えない飾りとして使い、入力欄の境界や重要な図形には流用しません。淡い背景の差が見えにくい場合は、色を強くする前に見出しの配置や余白を調整します。

スマートフォンでは案内面が長く続かないか確認し、ボタンのホバー（ポインターを重ねた状態）やフォーカス（キーボード操作などで対象になった状態）も別に検証します。落ち着きと変化は両立できます。低彩度の色を土台に、明度差と必要な操作の強調を組み合わせることがポイントです。