写真の色とブランドカラーを合わせる方法｜WEBサイトに統一感を出す配色

Webサイトに写真を入れると、ブランドカラーと写真の色がばらばらに見えることがあります。ブランドカラーとは、サイトやサービスの印象を支える中心的な色です。写真の色をブランドカラーと完全に一致させる必要はありません。この記事では、写真の中にある色の方向を見ながら、背景・文字・ボタンの色を固定し、ページ全体に統一感を出す方法を紹介します。

写真そのものを加工する前に、写真選びと周辺UIの色をそろえる

例として、ブランドカラーを落ち着いたブルー ■#315C83 とします。写真の空や影にブルーグレー ■#7C94A3 のような近い色が含まれている場合は、その色が見える構図を選ぶとブランドカラーとのつながりを作りやすくなります。ここで重要なのは、写真全体をブランド色へ変えることではなく、写真の中にある色相（赤・黄・緑・青などの色み）の方向と、周囲のUI（ユーザーインターフェース、画面上の操作要素）の色を意識してそろえることです。

一方、写真がベージュ ■#C6A47E のような暖色中心でも、無理に青へ寄せる必要はありません。ページ背景をウォームオフホワイト ■#F7F4EE、本文をチャコール ■#25282B、主要操作をブランドブルー ■#315C83 に固定すれば、写真の色が違ってもUI側のルールを保てます。

写真とブランドカラーをつなぐ3つの方法

1. 写真にブランドカラーと近い色がある場合は、その部分を見せる

ブルー系のブランドなら、写真内の青空、ガラス、影、衣服などにブルーグレー ■#7C94A3 のような近い色が含まれている写真を選ぶ方法があります。背景をウォームオフホワイト ■#F7F4EE、本文をチャコール ■#25282B にすると、本文と背景のコントラスト比（前景色と背景色の相対的な明るさの差を示す数値）は約13.50:1です。ブランドブルー ■#315C83 を見出しやリンクに使う場合も、同じ背景との比率は約6.40:1です。

2. 写真が暖色でも、周囲の色を固定してブランド感を保つ

料理、木材、人物の肌など、写真の中心がベージュ ■#C6A47E のような暖色でも、ブランドカラーまで暖色へ変える必要はありません。写真の周囲をウォームオフホワイト ■#F7F4EE にし、主要ボタンをブランドブルー ■#315C83、ボタン文字を白 ■#FFFFFF にすると、ボタン内のコントラスト比は約7.03:1です。写真ごとにUI色を変えず、同じ場所に同じブランド色を繰り返すことでページ間のルールを保てます。

3. 写真から拾った落ち着いた色を補助色にする

写真に植物や自然物があり、落ち着いたセージ ■#5B6D56 が目立つ場合は、その色を補助ボタンや短いラベルなど限定した役割に使う方法もあります。白 ■#FFFFFF をセージ背景に置く場合のコントラスト比は約5.58:1、セージをウォームオフホワイト ■#F7F4EE 上の文字として使う場合は約5.08:1です。ブランドブルーを主要色のまま残し、写真由来の色は補助色に限定すると、写真が変わっても主役の色がぶれにくくなります。

写真ごとにUI色を増やさず、文字を写真へ直接重ねる場合は慎重に確認する

写真から色を拾うたびにボタンや見出しの色を変えると、ページごとにルールが増えて統一感を保ちにくくなります。まずブランドカラー、本文色、背景色を固定し、写真由来の色を追加するなら1色程度の補助役に絞ると管理しやすくなります。また、写真の上へ文字を直接置く場合は、背景が1色ではないため、1つのHEX値だけでコントラストを判断できません。文字の直下にある実際の写真部分ごとに明るさが変わるからです。

読みやすさを安定させたい場合は、文字を写真の外へ置くか、写真の上に不透明なブランド色のラベル面を置きます。たとえばブランドブルー ■#315C83 の不透明な面に白 ■#FFFFFF を置けば約7.03:1です。WCAG（Web Content Accessibility Guidelines、Webアクセシビリティのガイドライン）2.2では、通常サイズの文字に4.5:1以上のコントラスト比が求められます。HueRollでは6桁のHEXを入力して関連色・配色候補や選択色と白・黒とのコントラストを確認できますが、任意の2色同士の比較や写真上の各位置の判定、WCAGのAA・AAA自動判定には対応していません。