カラフルなロゴに合うWEBサイトの配色｜背景色をシンプルにする方法

カラフルなロゴは、それ自体に複数の色が入っているため、WEBサイトの背景まで鮮やかにすると色同士が競合しやすくなります。基本は、背景を白やごく淡い無彩色に寄せ、ロゴの色をページ内のアクセントとして再利用することです。ここでは3色ロゴを例に、背景をシンプルに保ちながらWEBサイト全体をまとめる方法を考えます。

カラフルなロゴには、色味を抑えた背景を合わせる

たとえば、青 ■#2563EB、オレンジ ■#F59E0B、緑 ■#22C55E を含むロゴを想定します。この3色だけで色相（赤・青・緑などの色みの違い）が十分にあるため、大面積の背景には白 ■#FFFFFF や、わずかにグレーを含むオフホワイト ■#F6F7F8 のような低彩度の色を使うと整理しやすくなります。彩度とは色の鮮やかさの度合いです。

背景にさらに紫や赤などの強い色を足すより、ロゴの3色を必要な場所だけに使う方が、どの色がブランド由来なのかを保ちやすくなります。背景色を複数使う場合も、白 ■#FFFFFF とオフホワイト ■#F6F7F8 のように明るさが近い中立色を中心にすると、ロゴを主役にしながらセクションを分けられます。

CTAにはロゴの1色だけを選び、本文は中立色で支える

サービス紹介サイトなら、ヘッダーと主要コンテンツは白 ■#FFFFFF、補助セクションはオフホワイト ■#F6F7F8、本文は濃いチャコール ■#1F2933 とすると、背景色を増やさずに情報を整理できます。チャコール ■#1F2933 は白 ■#FFFFFF に対して約14.76:1、オフホワイト ■#F6F7F8 に対して約13.76:1のコントラスト比です。

CTA（Call to Action、申込みや問い合わせなど次の行動へ進むための主要ボタン）は、ロゴの青をそのまま使うのではなく、白文字と十分な差が取れる少し濃い青 ■#1D4ED8 を使う例があります。白文字 ■#FFFFFF とのコントラスト比は約6.70:1です。WCAG（Web Content Accessibility Guidelines）では通常サイズの文字に4.5:1以上が求められるため、この組み合わせはその基準を上回ります。ロゴのオレンジや緑は、装飾や小さな区分表示など、CTAと競合しない場所へ限定すると役割を分けやすくなります。

写真や濃い背景では、ロゴの全色が見えるかを個別に確認する

カラフルなロゴは、一部の色だけが背景に近づくことがあります。たとえば青い写真の上では青の部分だけが埋もれ、白い背景では淡い色の部分だけ輪郭が弱くなる場合があります。ロゴやブランド名はWCAGの文字コントラスト要件の例外ですが、実際の識別性とは別の話です。ブランドガイドラインに白抜き版・単色版・背景付き版が用意されているなら、背景に応じて承認済みのバリエーションを使います。

背景写真を使う場合は、画像全体の平均的な色ではなく、ロゴ直下の部分を確認します。ロゴの背面に白 ■#FFFFFF の固定領域を設ける方法も有効です。また、ロゴの色をすべてUIへ展開する必要はありません。本文、ボタン、リンク、状態色までロゴの全色を配ると役割が曖昧になりやすいため、操作色は1色に絞り、残りはブランドを感じさせる補助色として扱うと整理できます。

HueRollでは候補色のHEX（#で始まるWEBカラーコード）を入力し、選択色と白・黒とのコントラストを確認できます。任意の2色同士の比較やWCAGのAA・AAA自動判定には対応していないため、本文やボタンの実際の組み合わせは別途確認してください。