大人っぽいWEBデザインを作る配色｜深い色を重く見せないコツ

大人っぽいWEBデザインを作ろうとして、黒に近い色を画面全体に敷くと、写真や文章まで暗く感じられることがあります。深い色は使う面積を絞り、明るい背景や余白と組み合わせると、落ち着きを目指しながら情報も整理できます。今回は家具工房の相談予約ページを例に、濃い色を重く見せない配色を考えます。

深い色は一部分に使い、明るい面を残す

大人っぽい印象を狙うときは、暗い色の数を増やすより、色に役割を持たせることが大切です。たとえば、最初の見出し帯だけを濃くし、その下の説明や申込み内容は明るい背景に載せます。これなら深い色が目印になり、長い文章まで暗い面で囲う必要がありません。

色選びでは、明度（色の明るさ）と彩度（色の鮮やかさ）を分けて考えます。濃くても鮮やかすぎない色は落ち着いた組み合わせの候補になりますが、効果は面積や写真によって変わります。文字には背景との明暗差を確保し、アクセントは主要な操作など少数の場所に絞りましょう。

背景の白さを少し和らげる、カードには別の明るい面を使う、装飾線を細くするなど、濃色以外の部分を整えることも重要です。黒や金色を必ず加える必要はありません。

家具工房の相談予約ページで考える配色例

架空の家具工房が、オーダー家具の相談を受け付けるページを想定します。HEX（ヘックス）は赤・緑・青の成分を16進数で表すカラーコードです。濃い紫がかったグレーと、明るいアイボリーを組み合わせます。

見出し帯の文字■#F8F5EFと濃い背景■#393A45のコントラスト比は約10.35:1、本文文字■#363B43とページ背景■#F7F3EEは約10.20:1、白いカード■#FFFFFF上の本文は約11.27:1です。補足文字■#5E646Cと白いカードは約5.97:1となります。

予約ボタンの白文字■#FFFFFFと深い赤紫■#684757は約7.99:1、ボタンと周囲のアイボリー■#F7F3EEとの比は約7.23:1です。装飾用の細い線■#C5A58Eは背景との比が約2.08:1なので、重要な境界線には使わず、飾りに限定します。これらは指定した不透明な2色で計算した値です。

濃色の範囲と操作部分を実画面で調整する

WCAG（WEBコンテンツを利用しやすくするための指針）では、通常サイズの文字は原則4.5:1以上、大きな文字は3:1以上が基準です。入力欄の位置を見分けるために必要な輪郭などは、隣接色と原則3:1以上の非テキストのコントラストも確認します。この例の入力欄の輪郭■#7B6C5Eと白い入力面■#FFFFFFは約5.06:1です。

実装前には、濃い見出し帯がスマートフォンで長く続いていないか、写真の上に文字を置く場合に背景が部分的に変わらないかを確かめます。予約ボタンはホバー（ポインターを重ねた状態）やフォーカス（キーボード操作などで選ばれた状態）でも見つけられるようにし、輪郭や文言も併用します。

大人っぽさは暗い色を広げるだけでは決まりません。濃色で視線の起点を作り、明るい面に説明を置き、必要な部分だけを強調することで、落ち着きと使いやすさの両立を目指せます。