複数ブランドを1つのWEBサイトで扱うときの配色ルール

企業グループや商品紹介サイトで複数ブランドを同じページに載せると、ブランドごとの色をどこまで出すべきか迷います。全色を混ぜると情報が散らかり、共通色だけでは違いが伝わりません。サイトの操作に使う色は共通化し、ブランドを紹介する領域にだけ個別の色を割り当てると整理しやすくなります。

サイト共通の色とブランド固有の色を分ける

まず、ヘッダー、検索、パンくずリスト（現在のページ位置を示す案内）、カート、問い合わせフォームなど、ブランドをまたいで使う部分の配色を固定します。こうした操作部品を共通UI（利用者が操作する画面の部品）と呼びます。同じ役割のボタンやリンクがページによって別の色になると、操作の意味を判断しづらくなります。

ブランド固有の色は、ブランド名の見出し、紹介帯、商品カード、そのブランドの詳細へ進むボタンに限定します。各ブランドで「見出し」「背景」「ボタン」の役割を同じにし、色の種類だけを変えれば、並べて紹介しても構成はそろいます。ロゴが多色でも、ロゴ中のすべての色をページ全体に展開する必要はありません。

エラー、売り切れ、必須入力などの状態表示はブランドの装飾色とは分けます。色だけで区別せず、「売り切れ」「入力内容を確認してください」と文字でも示せば、異なるブランドのページに移っても意味を保てます。

2つのブランドを並べた配色例

例として、アウトドア用品ブランドAとキッチン用品ブランドBを扱う共通サイトを考えます。以下のHEXカラーコードは、色を6桁の16進数で表すWEB用の指定値です。

サイト全体の背景は薄いグレーの■#F8FAFC、商品カードは白の■#FFFFFF、本文は濃いグレーの■#1F2937にします。本文と白いカードのコントラスト比は約14.68:1です。共通の案内や検索リンクは■#334155を白の■#FFFFFFに載せ、比は約10.35:1。リンクには下線も付け、色だけに頼らず操作できることを伝えます。

ブランドAの紹介帯は淡い青の■#EFF6FFを背景にし、見出しは青の■#1D4ED8。この組み合わせの比は約6.16:1です。「Aの商品を見る」ボタンは■#1D4ED8の背景に白い■#FFFFFF文字を置き、比は約6.70:1になります。

ブランドBは紹介帯を淡いオレンジの■#FFF7ED、見出しを赤茶の■#9A3412に変えます。この文字と背景の比は約6.88:1です。「Bの商品を見る」ボタンを■#9A3412の背景と■#FFFFFFの文字にすれば、約7.31:1です。ボタンの大きさや配置はAと共通にし、ブランド名を文言でも明示します。

淡い紹介帯同士やサイト背景との明るさの差は小さいため、色の違いだけで領域を区切ろうとせず、余白やカードの境界、見出しの位置もそろえます。ブランドのページへ移動した後も、共通の検索・カートは同じ見た目に保ちます。

ブランドを増やすときの確認と運用

新しいブランド色を追加するときは、「共通」「ブランドA」「ブランドB」のように管理するのではなく、各ブランドに「紹介帯の背景」「見出し」「専用ボタン背景」の値をセットで持たせます。別のブランドを追加しても、どこを変更できるかが明確になります。

WCAG（Web Content Accessibility Guidelines：Webコンテンツのアクセシビリティ指針）のAA基準では、通常の文字と背景のコントラスト比は4.5:1以上、大きな文字は3:1以上が必要です。操作部品や状態を見分けるために必要な図形・輪郭には、隣接色との比が原則3:1以上求められます。紹介帯、ボタン、ホバー・フォーカス時の色はそれぞれの組み合わせで確認しましょう。

スマートフォンでブランドカードが縦に並んでも、ブランド名・商品内容・行き先のボタンが一組として分かるか確認します。共通ナビゲーションまでブランド色に染めず、サイト全体の一貫性と各ブランドの識別を両立させるのが基本です。