美容室のWEBサイトに合う配色は？写真となじむ色の選び方
美容室のWEBサイトでは、髪型やヘアカラーの写真が施術内容を知る手掛かりになります。しかし、写真の周囲まで強い色で飾ると、黒髪の輪郭やブラウンの細かな色合いを比べにくくなることがあります。写真そのものを同じ色に加工するより、掲載する背景や説明文を整える方法があります。ここでは架空の美容室の施術事例ページを例に、写真と配色の関係、予約操作まで考えます。
髪色の違う写真は、同じ背景と条件で見比べる
まず「黒髪のショート」「暖かみのあるブラウン」「明るいベージュ系」という架空の3枚の仕上がり写真を同じ幅で並べます。背景や余白を共通にすると、写真ごとに周囲の色が変わる影響を抑えて比較できます。写真の近くには髪型や施術の説明を文章で置き、見た目の色だけでメニューを判断させないようにします。
たとえば写真の周囲に鮮やかなピンクを広く敷くと、暖色の髪色や肌の色と競合する場合があります。最初は白や低彩度（鮮やかさを抑えた）の背景を候補にし、暗い髪の輪郭と明るい毛先の両方が見やすいか確かめましょう。ただし、撮影時の照明やホワイトバランス（光の色による偏りの補正）、画像の加工、表示端末によって髪色の見え方は変わります。WEB配色を整えただけで実際の仕上がり色を正確に再現できるとは限りません。
また「施術例を見る」は写真を探すための案内、「予約可能日時を確認する」は操作です。写真の上に操作ボタンを重ねるより、写真の下に説明とボタンを分けて置くと、写真の明るさが変わっても文字色を管理しやすくなります。
施術写真の背景・説明文・予約ボタンを整える例
架空のページでは、写真一覧の周囲に淡いローズ #F0D1D9 を大きく使っていた状態を修正前とします。この色と白 #FFFFFF のコントラスト比は約1.42:1です。数値だけで写真の相性は決まりませんが、髪色を比較するための周囲の色としては主張が強いと感じる場合があります。コントラスト比とは2色の相対的な明るさの差で、HEXとは「#」と6桁の英数字でWEBの色を指定する形式です。
修正後はページ背景を温かいオフホワイト #F5F3EF、写真を載せるカードを白 #FFFFFF にします。この2色は約1.11:1と近いため、写真カードの境界が必要ならグレー #76858B の線を付けます。線は白 #FFFFFF と約3.82:1、周囲のオフホワイト #F5F3EF と約3.45:1です。写真の中身は変えず、どこまでが一つの施術例かを区切ります。
- 見出しと本文：カードの見出しは濃い青灰色 #2C3739、本文は灰緑色 #3E4F52 にします。白 #FFFFFF 上でそれぞれ約12.26:1、約8.59:1です。本文をオフホワイト #F5F3EF に載せる場合も約7.75:1です。
- 施術写真の補足：薄いグレー #ADB1AE を白いカード #FFFFFF 上に置くと約2.17:1しかありません。「仕上がり例」など読んでほしい文字は濃い灰緑色 #526360 に変更し、白との比を約6.34:1にします。
- 施術カテゴリの案内：淡い青緑 #E7F1EC の面に濃い緑 #34574F で「カット」「カラー」などと書けば約6.94:1です。カテゴリ名は色だけに任せず、文字として表示します。
- 予約ボタン：淡いローズ #EAAAB6 に白文字 #FFFFFF を載せた修正前の比率は約1.92:1です。ボタン背景を深いローズ #87435B に変え、白文字 #FFFFFF で「予約可能日時を確認する」と表示すると約7.04:1になります。ボタンと白いカード #FFFFFF の差も約7.04:1、オフホワイト #F5F3EF の背景では約6.35:1です。
ヘッダーは濃い青灰色 #24343A に白いメニュー文字 #FFFFFF を組み合わせ、約12.90:1にします。施術メニューを読む通常のリンクには濃い青 #1E5673 を使い、白 #FFFFFF に対して約7.97:1の明暗差と下線を確保します。予約ボタンとは役割だけでなく形でも区別します。
写真の差し替え・端末表示・予約の状態を確認する
ヘアカラーの施術例を入れ替えるときは、撮影条件が大きく異なる写真を同じ色見本として扱わず、「仕上がり例」であることや、色の見え方が撮影・画面環境で異なることを明示します。お客様の写真を掲載する場合は、掲載について許可を確認してください。写真に意味がある場合は髪型や施術例の内容が伝わる代替テキストも用意します。
マウスを載せた予約ボタンのホバー色として深い赤紫 #683449 を使う場合、白文字 #FFFFFF との比は約9.65:1です。キーボードで操作する位置を示すフォーカスには濃い青 #1E5673 の輪郭を用意し、白いカード #FFFFFF と約7.97:1、オフホワイト #F5F3EF と約7.19:1です。ボタンとの間隔を取った場合も、実際に隣接する色を確かめます。予約の「受付終了」や「選択中」は、色だけでなく文字でも伝えます。
WCAG 2.2（WEBコンテンツの利用しやすさに関するガイドライン）のAA水準では、通常サイズの文字は背景と原則4.5:1以上、識別に必要な操作部品の非テキスト表示は隣接色と原則3:1以上が基準です。HueRollでは配色候補と選択色の白・黒に対するコントラストを確認できますが、任意の2色の比較やAA・AAAの自動判定はできません。ここで示した比率は不透明な単色同士を別途計算したもので、写真そのものやページ全体の合否を保証するものではありません。