温かみのあるWEBデザインを作る配色｜暖色を自然に使う方法

WEBサイトに温かみを出したいとき、オレンジや赤茶を広い背景やボタンに次々と使うと、かえって色が強く感じられることがあります。暖色を自然に取り入れるには、薄い色を土台にし、濃い色を文字や操作に使い分ける方法があります。秋の陶器市の来場予約ページを例に、暖色の分量と組み合わせを考えます。

暖色は広い面で薄く使い、濃い色に役割を持たせる

暖色は、赤・橙・黄など、一般に温かさを連想させる色です。ただし印象は用途や周りの色、見る人によって変わります。すべてを橙にせず、ページ全体は生成り、作品紹介には淡い土色を使うと、落ち着いた温かさを目指せます。

暖色の面が続きすぎるときは、日時や会場などの実用情報に、少し緑みのある淡いグレーを組み合わせます。色相（赤や緑などの色み）を少し変えることで、同じ明るさの背景でも用途を区別しやすくなります。ただし、色だけで情報を分けず、見出しと余白を併用します。

強いテラコッタ色は短い飾り線などに限定し、来場予約ボタンにはより濃い赤茶を使います。色を置く位置と明暗差を先に決めることが、暖色を増やしすぎないコツです。

秋の陶器市の来場予約ページで考える配色例

架空の陶器市で、出展作品の紹介、日時・会場、来場予約フォームを載せる場面を想定します。HEX（ヘックス）は赤・緑・青の成分を16進数で指定するカラーコードです。以下は実在の催しの指定色ではなく、役割を整理した配色案です。

見出し文字■#333A38と淡い土色■#F3E6DBのコントラスト比は約9.51:1、本文文字■#39443Eと生成り■#FAF7F1は約9.49:1です。同じ本文文字と淡い緑灰■#E9EFEAでも約8.69:1になります。補足文字■#5A625Dは土色の面で約5.14:1、白い作品カード■#FFFFFFで約6.29:1です。

来場予約ボタンの濃い赤茶■#88462Eと白文字■#FFFFFFの比は約7.09:1です。ボタンと生成りのページ背景■#FAF7F1にも約6.63:1の差があるため、作品の写真や飾りより主要操作を見つけやすくする設計です。いずれも指定した不透明な2色の計算値です。

飾りの暖色と予約ボタンを同じ色にしない

装飾用の明るい土色■#D38B61に白文字■#FFFFFFを載せると、コントラスト比は約2.75:1で、通常サイズの文字の基準4.5:1に届きません。見た目が温かくても、その色を白文字の予約ボタンへ流用しないようにします。

WCAG（WEBコンテンツを利用しやすくするための指針）では、通常サイズの文字は原則4.5:1以上、大きな文字は3:1以上が基準です。入力欄を見分けるために必要な輪郭など、重要な非テキストの視覚情報は、隣接色と原則3:1以上で確認します。フォームの輪郭■#748179は白い入力面■#FFFFFFと約4.07:1、生成り背景■#FAF7F1と約3.81:1です。

一方、装飾ライン■#D38B61と生成り背景■#FAF7F1の比は約2.57:1なので、操作に必要な境界としては使いません。写真の上の文字は写真の明暗に応じて再確認し、スマートフォンでは暖色の面が長く続かないかも点検します。予約ボタンのホバー（ポインターを重ねた状態）やフォーカス（キーボードなどで操作対象になった状態）は別途設計しましょう。暖色を自然に見せるには、色の数より役割と面積のバランスが大切です。