涼しげなWEBデザインを作る配色｜寒色を冷たく見せすぎないコツ

涼しげなWEBサイトを作りたいとき、青や水色で画面を埋めると、すっきりした一方で冷たい印象に偏ることがあります。寒色を使う範囲を決め、生成りや砂色の背景を組み合わせると、軽やかさを目指しながら親しみやすい雰囲気も残せます。海辺の朝市で行う料理体験の予約ページを例に、背景・文字・ボタンの配色を考えます。

寒色は案内面に使い、生成りと砂色で変化を付ける

寒色は青や青緑など、一般に涼しさを連想させる色のまとまりです。ただし色の印象は人や用途、面積によって異なります。青系の背景を全面に使う代わりに、ページ全体は明るい生成りにし、イベントの紹介エリアだけ淡い青緑にする方法があります。

日程や集合場所の案内には黄みのある砂色を使うと、寒色だけが続く状態を避けられます。色相（青や赤などの色みの違い）に小さな変化を付け、明度（色の明るさ）は高めにそろえる考え方です。寒色の量を増やすより、見出しや写真、余白と合わせて情報の区切りを作りましょう。

重要なのは温かい色を大量に足すことではありません。暖色寄りの面を補助として使い、予約ボタンには濃い色を割り当てると、操作の優先順位も整理できます。

海辺の朝市の料理体験ページで使う配色例

架空の海辺の朝市で、出店者紹介・集合時間・料理体験の予約を案内するページを想定します。HEX（ヘックス）は赤・緑・青の成分を16進数で表すカラーコードです。次の色は実在する施設の指定ではなく、役割を示す配色案です。

見出し文字■#263D45と生成りのページ背景■#F8F6EFのコントラスト比は約10.58:1です。本文文字■#344B50と淡い青緑■#E5F2F2は約8.07:1、補足文字■#52636Aと砂色■#F2E8DBは約5.17:1、白いカード■#FFFFFF上では約6.27:1です。

予約ボタンの白文字■#FFFFFFと濃い青緑■#195C70は約7.48:1、ボタンと周囲の淡い青緑■#E5F2F2の差は約6.53:1です。文字とボタンの明暗差を保ちながら、涼しげな色を案内面に使えます。これらは指定した不透明な2色の計算値です。

淡い水色の文字と操作部品を確認する

明るい水色■#8FCAD2のボタンに白文字■#FFFFFFを重ねると、コントラスト比は約1.82:1で、通常サイズの文字に求められる4.5:1に届きません。そこで予約には濃いボタン色を使います。WCAG（WEBコンテンツを利用しやすくするための指針）では、通常サイズの文字は原則4.5:1以上、大きな文字は3:1以上が基準です。

入力欄を見分けるために必要な枠などの視覚情報は、隣接色と原則3:1以上のコントラストを確認します。今回の輪郭色■#687D85は白い入力面■#FFFFFFと約4.32:1、生成りのページ背景■#F8F6EFと約4.00:1です。一方、赤茶の装飾ライン■#C18466と生成り背景との比は約2.87:1なので、意味のある境界線には流用せず飾りとして使います。

写真の上に文字を置く場合は写真の明暗も調べ、スマートフォンでは淡い面の切替が続きすぎないか確認します。ボタンのホバー（ポインターを重ねた状態）とフォーカス（キーボードなどで操作対象になった状態）は別途設計し、色だけで状態を伝えないようにしましょう。涼しさを表す寒色と、温かみを添える背景の役割を分けることがポイントです。