写真が多いWEBサイトの背景色はどう選ぶ？画像を引き立てる配色

写真が多いWEBサイトでは、背景色も写真の一部のように見え方に影響します。写真ごとに鮮やかな色を足すと統一感が弱まり、反対に白一色では画像の明るい縁が背景に溶け込むこともあります。写真を主役にしながら、説明文や操作も読みやすくする背景色の決め方を紹介します。

写真の明るさと余白から背景色を決める

最初に一覧へ並べる写真を複数枚選び、白い部分、暗い部分、色の多さを観察します。色鮮やかな旅行写真が多いなら、ページ背景を低彩度にすると写真同士の色が競合しにくくなります。商品の輪郭を見せたいときは、商品と背景の明るさや色が近すぎないかも確認します。

写真の平均色に合わせることが正解とは限りません。赤い写真の隣に赤い背景を置くと境界が曖昧になる場合があります。背景は画像の色を繰り返すためではなく、写真の輪郭と周囲の説明を分けるために選びます。

まず明るいニュートラルカラー、次に少し暗いグレーや温かみのある淡色を同じ写真一覧で試し、写真の輪郭、ページの一体感、文字の読みやすさを比べます。画像ごとに背景を変えるよりも、基本の背景色を統一した方が更新時にも管理しやすくなります。

写真一覧と作品紹介に使う配色例

例えば、旅行写真を並べるギャラリーでは、やや温かいオフホワイト ■#F7F7F4 をページ背景とし、写真の下の作品名をチャコール ■#27313B にします。この文字と背景のコントラスト比は約12.32:1です。写真が多彩でも背景は控えめなので、海や建物などの写真に視線を集めやすくなります。

写真カードを区切りたい場合は、カードの説明欄を薄いグレー ■#E9ECEF にして、文字は引き続き ■#27313B にします。両者の比は約11.15:1です。ただし、オフホワイト ■#F7F7F4 と薄いグレー ■#E9ECEF の違いだけではカードの境界が弱い場合があります。余白、見出し、必要に応じた枠線も使って区切りましょう。

一方、暗い写真やモノクロ作品を中心に見せるポートフォリオでは、作品説明の見出し帯に深い青灰 ■#324B60 を使い、白文字 ■#FFFFFF を載せる方法があります。コントラスト比は約9.09:1です。すべての写真の周囲を濃色で覆うのではなく、見出し帯など用途を限定すると写真の暗部が沈むのを避けやすくなります。

資料請求などの主要ボタンは、白文字 ■#FFFFFF と落ち着いた赤茶 ■#75534B の組み合わせなら約6.78:1です。ただしボタンとページ背景との境界、周囲の写真との関係は別に確認してください。

写真の切り抜き・文字重ね・スマホ表示を点検

写真が背景と同化する場合は、写真の外に余白を置く、細い枠線を設ける、背景を一段だけ濃くする方法を比較します。枠線が画像や操作対象の識別に必要なら、隣接色とのコントラストも確認します。重要な画像の色味そのものを背景に合わせて加工する必要はありません。

写真の上に文字を直接載せるときは、写真の明るい部分で文字が読みにくくなりがちです。文字の下に不透明な背景を置くか、実際の重なりでコントラストを調べます。WCAG 2.2のAA基準では通常文字は4.5:1以上、規定の大きな文字は3:1以上が目安です。この記事の比率は不透明な単色同士の計算値であり、写真上の文字にはそのまま適用できません。

スマートフォンでは写真が縦に並び、画面内で背景が見える面積や画像の切り取られ方が変わります。作品名、撮影場所、操作ボタンが迷わず見つかるか確認しましょう。HueRollではHEXコード（色を16進数で表す記法）を入力して関連色や白・黒とのコントラストを確かめられますが、任意の2色間の比率は別に測定する必要があります。