ホワイトラベル型サービスのテーマカラーを設計する方法

ホワイトラベル型サービスとは、同じ仕組みのサービスを複数の企業がそれぞれのブランド名で提供できる形です。ロゴに合わせて色を変えても、ボタンやフォームが見づらくなっては困ります。色の「役割」を共通化し、切り替える部分を限定する設計を紹介します。

共通部分とブランドごとの変更部分を決める

最初に、色を「企業ごとに変える色」と「全企業で共通にする色」に分けます。前者は主要ボタン、選択中のタブ、ブランドを示す見出しなど。後者は本文文字、カードの背景、入力欄の境界線、エラー表示などです。警告やエラーまでブランド色に置き換えると、画面内での意味が分かりにくくなる場合があります。

役割ごとに名前を付けて管理すると、企業が増えても配置をそろえやすくなります。例えば「主要ボタンの背景」「ボタンの文字」「ページ背景」という分類です。CSS（Webページの見た目を指定する仕組み）の変数を使う場合も、ブランド色だけではなく、その上に置く文字色をセットで設定します。ロゴの色をボタンにそのまま流用するのではなく、実際の組み合わせを確認することが重要です。

2社のテーマカラーを具体的に組み立てる

複数の店舗運営会社が使う予約管理画面を例にします。共通部分を変えず、企業Aは青、企業Bは緑でブランドらしさを出します。以下の「#」から始まる6桁の値は、色を指定するHEXカラーコードです。

共通のページ背景は■#F8FAFC、カードは■#FFFFFF。本文は■#1F2937を■#FFFFFFのカード上で使い、入力欄には■#64748Bの境界線を付けます。境界線と白のコントラスト比は約4.76:1で、フォームの位置も確認しやすくなります。

企業Aの主要ボタンは青の■#1D4ED8を背景に、■#FFFFFFの文字を配置します。コントラスト比は約6.70:1です。企業Bでは背景を緑の■#166534に切り替え、文字は■#FFFFFFのままにします。こちらは約7.13:1です。両方とも同じ形・大きさのボタンを使い、ブランド差を背景色で表します。

エラーの文字色は両社共通で■#B42318、背景は■#FFFFFFとします。コントラスト比は約6.57:1です。色だけで伝えず、「入力内容を確認してください」などの説明も添えます。これらは特定の画面を想定した配色例であり、ロゴやほかの背景色との組み合わせは別途確認が必要です。

切り替え後の画面で必ず確認すること

通常サイズの文字ではコントラスト比4.5:1以上、大きな文字では3:1以上がWCAG（Webコンテンツのアクセシビリティ指針）のAA基準です。操作に必要な入力枠や状態アイコンなどにも、隣接色に対して原則3:1以上が求められます。数値は色の組み合わせごとに判断し、見た目だけで合格としないようにします。

主要ボタンだけでなく、リンク、ホバー時の色、キーボード操作で表示されるフォーカス枠、選択中のタブ、スマートフォン表示まで確認します。淡いブランド色を受け取った場合は、その色を大きな背景や装飾に回し、文字を載せるボタンには濃い色を別に用意する方法もあります。

企業ごとの設定画面には、使用できる色の役割とプレビューを用意すると、運用中の変更を確かめやすくなります。新しい企業を追加するたびに、共通ルールを保てているかと、実画面の文字・操作部品が判別できるかを確認しましょう。