旅行サイトの配色はどう決める？写真とCTAを両立する方法
旅行サイトでは、海や森、街並みの写真を見ながらプランを選ぶことが多くあります。一方で、写真ばかりが目立つと「詳細を見る」「空き状況を確認する」といった次の操作を見失うことがあります。CTA（Call To Action）は、利用者に次の行動を促すボタンや案内のことです。ここでは架空の日帰り旅行プラン検索ページを例に、写真の見比べやすさとCTAの見つけやすさを両立する方法を説明します。
写真とCTAの役割を分け、カードの中で配置をそろえる
まず「海辺の散策」「森の散歩」「街歩き」という3つの架空のプランを並べるとします。写真の内容は異なっても、カードの幅や写真の比率、見出しと説明、CTAの位置をそろえます。プラン名と特徴を写真の下に文字で書き、写真の色や雰囲気だけで行き先を識別させないことが大切です。
海の青、木々の緑、街の建物の色は、写真そのものに含まれています。その周囲まで強い色で塗るより、カードの背景を控えめにし、説明文の文字色を共通にすると比較しやすくなります。詳しい行程を確認する通常のリンクは下線付きにし、次の操作を促すCTAは別の場所にまとめます。
写真の上に白文字のボタンを重ねると、空や白い建物など明るい部分では読みにくくなります。CTAは写真の外にある不透明な面に置き、カード内の同じ位置にそろえる方法をまず検討しましょう。写真を大きく使いたい場合でも、操作を見失わないための余白を確保します。
旅行プラン一覧で写真とボタンを両立する配色例
架空の旅行サイトでは、ヘッダーを濃い青緑 #173C52、文字を白 #FFFFFF にすると、コントラスト比は約11.64:1です。コントラスト比は2色の相対的な明るさの差を表します。HEXは、#に6桁の英数字を続けるWEBの色指定です。ページ背景を薄い青灰色 #F5F8FA、3枚のプランカードを白 #FFFFFF にして、写真を引き立てる土台を作ります。
- プラン名と説明：カードの見出し・本文に濃い青灰色 #243746 を使うと、白いカード #FFFFFF との比は約12.28:1です。写真の補足説明は灰青色 #475569 と白 #FFFFFF で約7.58:1になります。「海辺」「森林」「街」という種類とプラン名を文字でも示します。
- 通常の詳細リンク：濃い青 #175C75 と白いカード #FFFFFF の比率は約7.44:1です。「行程の詳細を見る」と下線を付け、塗りつぶしのCTAとは形でも区別します。
- CTAの修正前：明るいオレンジ #FFBB66 をボタン背景にして白文字 #FFFFFF を載せると、比率は約1.67:1しかありません。写真と区別できても、白い文字の読みやすさには問題が残ります。
- CTAの修正後：「空き状況を確認する」のボタン背景を濃い赤橙色 #A64424 にし、文字を白 #FFFFFF にすると約6.05:1です。ボタンと隣接する白いカード #FFFFFF との比率も約6.05:1です。外側の淡い背景 #F5F8FA に対するボタンの比率も約5.67:1です。同じ操作なら3枚のカードで色・文言・配置をそろえます。
プランの条件を短く記載する欄には淡い青灰色 #E6F2F4 を使い、文字を濃い青緑 #205465 にすると約7.30:1です。ただし、出発日・料金・空席数などを実際に表示するときは、提供元で確認できた情報を使い、「満席」などの状態も言葉で示します。この例は配色の説明であり、旅行プランの実在やリアルタイムの空き状況を示すものではありません。
画面幅・操作状態・写真の差し替え後まで確認する
白いカード #FFFFFF と外側の背景 #F5F8FA の比率は約1.07:1で、色の差は小さめです。カードの輪郭が必要なら灰青色 #718291 の枠線を加えると、白いカード #FFFFFF に対して約3.96:1、外側の背景 #F5F8FA に対して約3.71:1です。
CTAにマウスを重ねたときのホバー色として、さらに濃い赤橙色 #843419 を使う場合、白文字 #FFFFFF との比は約8.45:1です。キーボード操作時は別にフォーカス表示を用意します。例えば青 #1D4ED8 の輪郭は白いカード #FFFFFF に対して約6.70:1です。線をボタンから少し離す場合も、実際に隣接する背景との組み合わせを確認してください。
スマートフォンでは写真の切り抜きによって行き先の特徴が隠れないか、説明文の長さが異なってもCTAの位置が迷いにくいかを確かめます。予約を確定するボタンと、空き状況を調べるボタンを同じ文言にせず、実際の処理に合わせて表示します。写真や色だけで選択中・満席などの状態を伝えないことも重要です。
WCAG 2.2（WEBコンテンツの利用しやすさに関するガイドライン）のAA水準では、通常サイズの文字は背景と原則4.5:1以上、識別に必要な操作部品の非テキスト表示は隣接色と原則3:1以上のコントラストが基準です。HueRollでは配色候補や、選んだ色と白・黒のコントラストを確認できます。ただし任意の2色の比較やWCAGのAA・AAA自動判定はできないため、実際の文字・ボタン・枠線の組み合わせは別途確認しましょう。