ホテルのWEBサイトに合う配色は？写真を引き立てる背景色
ホテルのWEBサイトでは、客室・ラウンジ・朝食などの写真が、滞在先を選ぶときの大切な手掛かりになります。写真に写る木目や照明、料理の色はそれぞれ異なるため、周囲の背景を強い色でそろえると、写真そのものを比べにくくなることがあります。ここでは架空の小規模ホテルの施設紹介ページを例に、写真を加工せず、背景・写真の説明・予約への案内を整える方法を紹介します。
写真の色を統一するより、写真を載せる面を統一する
最初に、客室・ラウンジ・朝食の写真を同じ大きさのカードに並べ、背景と余白をそろえて確認しましょう。客室では寝具や窓辺、ラウンジでは家具、朝食では器や料理など、見てもらいたい対象が変わります。写真の色を無理に一色へ寄せず、「客室」「ラウンジ」「朝食」と説明文で種類を示すと、色に頼らず施設の特徴を追えます。
写真をページの冒頭に大きく置く場合も、文字を写真の上へ必ず重ねる必要はありません。明るい窓と暗い家具が一枚に写っていれば、同じ白文字でも置く位置でコントラストが変わります。ホテル名や案内文を不透明な単色の面へ分けると、写真の明るさが変化しても文字色を管理しやすくなります。写真の色味や設備の情報は実際の施設に合わせて確認してください。
客室・ラウンジ・朝食を並べるホテルページの配色例
修正前の例では、写真一覧の広い背景を赤茶色 #A25647 とし、写真の木材や朝食の暖色と周囲の色が重なって、どこを見るべきか迷う場合を考えます。赤茶色 #A25647 と白 #FFFFFF のコントラスト比は約5.31:1ですが、数値が大きいことと写真が引き立つことは別の判断です。コントラスト比とは2色の相対的な明るさの差で、HEXとは「#」と6桁の英数字でWEBの色を指定する形式です。
修正後はページの背景を温かみのあるオフホワイト #F5F3EE、写真を載せるカードを白 #FFFFFF に変えます。この2色の比は約1.11:1と小さいため、カードの輪郭が必要な場所には青灰色 #72818C の線を使います。線と白いカード #FFFFFF は約4.01:1、外側のオフホワイト #F5F3EE とは約3.62:1です。
- 写真の見出し：「客室」「ラウンジ」「朝食」には濃い青灰色 #29343A を使い、白いカード #FFFFFF との比を約12.75:1にします。カードの下に写真の種類と説明を置き、写真の上に小さな文字を重ねません。
- 設備の説明：通常の文章を灰青色 #37474F にすると、白いカード #FFFFFF と約9.65:1です。補足を淡い灰色 #AFAFA9 にすると白 #FFFFFF に対して約2.20:1しかないため、濃い灰青色 #50616A に変更し、約6.44:1を確保します。
- 館内案内：朝食の提供有無や設備の案内を載せる場合、淡い緑灰色 #E9F2ED の面に濃い緑 #345343 の文字を使うと約7.46:1です。サービスの有無、時間、条件は実際のホテルの情報で確認し、背景色だけで提供状況を表さないようにします。
- 空室検索への案内：「宿泊日を選ぶ」のボタンは濃い青緑 #205D63 と白文字 #FFFFFF で約7.48:1です。オフホワイトの背景 #F5F3EE に対しても約6.75:1あり、写真そのものより操作を強調したい場所を限定できます。
ホテルのヘッダーには深い青緑 #214B54、メニューの文字には白 #FFFFFF を合わせると約9.55:1です。広い写真一覧とは面を分けることで、施設の目印と写真の閲覧を同時に考えられます。
写真を差し替えたときと、予約へ進むときを確認する
季節や時間帯の違う写真に変更したら、同じ背景がすべての写真に合うか見直します。特に暗い客室写真は周囲との境界が分かりにくいことがあるため、必要なら余白や線を調整します。スマートフォンでは写真の端が切り取られ、ベッドの広さや窓など大切な部分が隠れていないか確認してください。写真には内容を説明する代替テキストも用意します。
キーボードでボタンに移動したときは、現在の操作位置を示すフォーカス表示を付けます。例えば背景から離した濃い青 #2459A6 の輪郭線は、オフホワイト #F5F3EE に対して約6.20:1、白 #FFFFFF に対して約6.87:1です。実装後はボタンや周囲の色との接し方も確認します。
WCAG 2.2（WEBコンテンツの利用しやすさに関するガイドライン）のAA水準では、通常サイズの文字は背景と原則4.5:1以上、識別に必要な操作部品の非テキスト表示は隣接色と原則3:1以上が基準です。HueRollでは配色候補や選んだ色と白・黒のコントラストを確認できますが、任意の2色の比較やWCAGのAA・AAA自動判定には対応していません。この記事の色の比率は不透明な単色同士で別途計算したものであり、完成した写真や画面全体の評価ではありません。