WEBデザインのメインカラーとは？サイトの印象を決める色の選び方
WEBデザインのメインカラーは、サイトの見出しや案内などに繰り返し使い、全体の見た目をつなぐ中心的な色です。目立つ色を一つ選ぶだけでは、使う場所によって文字が読みにくくなったり、申込みボタンと競合したりします。訪問型ピアノ調律サービスのWEBサイトを例に、候補の比較から配置、濃淡の調整まで考えます。
メインカラーは背景色や強調色との役割の違いから決める
ベースカラーは本文の背景など広い面を支える色、アクセントカラーは予約や相談など特に目立たせたい操作の色です。一方、メインカラーは見出し、案内帯、ナビゲーションの選択中表示などに共通して使い、サイトの印象を整える役割を持ちます。最も広い面積に使う色とも、必ず一番鮮やかな色とも限りません。
候補を探すときは、まずロゴがあるか、写真にどのような色が多いか、どんな情報を繰り返し案内するかを確認します。色の印象は周囲の写真や面積でも変わるため、「青なら必ず信頼感が出る」といった決め方は避けます。見出しや案内帯に実際の文章を置き、読みやすさと統一感を見ながら比較しましょう。
ピアノ調律サイトでメインカラーを選ぶ具体例
「調律の流れ」「料金案内」「訪問日程の確認」を並べるページを想定します。HEXは、WEBの色を16進数で示すカラーコードです。コントラスト比は、文字と背景など2色の相対的な明るさの差を表す数値です。
1．青灰と茶色の候補を実際の背景で比べる
広い背景は温かみのあるオフホワイト ■#F7F5F0、本文は濃いグレー ■#28333Dにします。本文と背景の比率は約11.82:1です。メインカラーの候補として、落ち着いた青灰 ■#2E5871と深い茶色 ■#77513Dを試します。オフホワイト背景 ■#F7F5F0に対する文字のコントラスト比は、それぞれ約7.01:1と約6.36:1です。
木目を主役にした写真が多ければ茶系でつなぐ案もあります。一方、金属部品や鍵盤の写真を中心に、案内の見出しをすっきり区別したい場合は青灰も候補です。ここでは後者の青灰を選びます。どちらが優れるという結論ではなく、素材写真と情報の見せ方に合わせた選択です。
2．選んだ青灰を見出し・案内帯・選択状態に繰り返す
メインの青灰 ■#2E5871を「調律の流れ」などの見出しに使うと、オフホワイト背景 ■#F7F5F0に対して約7.01:1です。工程を説明する案内帯では、この青灰を背景にして白文字 ■#FFFFFFを置きます。文字と青灰の比率は約7.63:1です。背景と文字の関係を逆にしても、見出しと案内帯が同じ色でつながります。
訪問日を選ぶ欄は淡い青灰 ■#E7EEF1にし、説明文には濃いグレー ■#28333Dを使います。文字と案内欄の比率は約10.97:1です。日程を白いカード ■#FFFFFFに並べると、案内欄 ■#E7EEF1との差は約1.17:1しかありません。カード全体が選べる部品なら、メインの青灰 ■#2E5871で枠線を付けると、白いカード ■#FFFFFFに対して約7.63:1、案内欄 ■#E7EEF1に対して約6.51:1です。選択中は枠線だけでなく「選択中」の文字も添えます。
3．予約ボタンはメインとは別の役割にする
「訪問調律を予約する」ボタンには赤みのある茶色 ■#A34A28を使い、白文字 ■#FFFFFFを合わせます。文字とボタンの比率は約5.89:1、ボタンとオフホワイト背景 ■#F7F5F0は約5.40:1です。メインカラーの青灰を見出し・案内帯に繰り返し、予約操作だけ別の色で区別する構成です。
ただし、予約ボタンの茶色 ■#A34A28を青灰の案内帯 ■#2E5871に直接載せると、面同士の比率は約1.30:1しかありません。この位置ではボタンを明るい面へ移すなど、周囲の背景を調整します。
濃淡の使い分けと操作状態を確認する
メインカラーを薄くした水色 ■#9BB7C6を見出しに使うと、オフホワイト背景 ■#F7F5F0との比率は約1.93:1で、通常サイズの文字には不足します。淡い色は背景の補助に回し、読ませる見出しやラベルには十分な明るさの差を持つ色を選びます。料金や申込み条件など小さな文字は、濃いグレー ■#53616Aにすれば背景 ■#F7F5F0と約5.87:1です。
ホバー（マウスを重ねた状態）で案内帯の青灰を濃い青灰 ■#234456に変える場合、白文字 ■#FFFFFFとの比率は約10.33:1です。フォーカス（キーボードなどで操作対象になった状態）には、ボタンから少し離した濃い青 ■#255276の輪郭を付ける方法があります。オフホワイト背景 ■#F7F5F0と約7.57:1、淡い青灰の案内欄 ■#E7EEF1とは約7.03:1です。
WCAG 2.2（Web Content Accessibility Guidelines：WEBコンテンツのアクセシビリティ指針）のAA水準では、通常サイズの文字と背景に原則4.5:1以上、大きな文字には3:1以上のコントラスト比が必要です。また、操作部品の識別や状態表示に必要な非テキスト情報には隣接色との3:1以上が求められます。メインカラーを決めただけでは適合を保証できません。写真・スマートフォン表示・選択状態を含めて確認しましょう。