企業サイトのリニューアルでは、ほぼ必ずブランドカラーの話題が上がります。よくある意見の相違は、「ブランド感を出すためにページ全体をブランドカラーにしたい」という声と、「色が多すぎると読みにくくなる」という懸念です。より実践的な判断方法は、まずブランドカラーがページ上でどんな役割を担うかを明確にし、それから配置する場所を決めることです。
簡単に言うと、ブランドカラーには2つの使い方があります。1つは認識を担うもの（ナビゲーション、メインボタン、セクション見出しなど）、もう1つは雰囲気を担うもの（ヘッダーの色面、フッター背景、イラストやアイコンなど）です。認識を担う場所は安定させ、雰囲気を担う場所は控えめにします。以下、ページを上から下へ順に、各場所の適切な扱い方と判断基準を説明します。
ナビゲーションとヘッダー：階層を区別できる色使いを、文字を圧迫しないように
ヘッダーは訪問者がサイトに入って最初にブランドカラーを見るエリアです。一般的な方法は2つあります。1つはナビゲーションバー全体をブランドカラーの背景にすること、もう1つは白または薄いグレーの背景にして、ロゴ、現在のカテゴリのハイライト、メインボタンだけにブランドカラーを使うことです。
ナビゲーションバーをブランドカラーの背景にする場合、まず文字とアイコンが背景色の上で明確に見えるか確認する必要があります。濃いブランドカラーの背景に白文字、薄いブランドカラーの背景に濃い文字、という組み合わせが比較的安全です。ナビゲーションに第1階層と第2階層のカテゴリが同時に存在する場合、「現在いるカテゴリ」だけをブランドカラーまたは明確なハイライトスタイルにし、他のカテゴリは同じ色に保つことをお勧めします。ナビゲーションバー全体がカラフルになるのを避けるためです。
判断基準はとてもシンプルです。ヘッダーのスクリーンショットをスマートフォンの画面幅まで縮小し、ロゴ、カテゴリ、ボタンが一目で区別できるか確認します。縮小したときに色の塊のようになってしまうなら、ブランドカラーの面積が大きすぎるか、階層が十分に分かれていないということです。
本文の見出しとリンク：ブランドカラーに「クリック可能」のサインを担わせる
本文エリアは読書が行われる場所であり、ここでのブランドカラーの役割は装飾ではなくヒントであるべきです。一般的な配分は、第1・第2見出しは濃いグレーまたはほぼ黒、本文は濃いグレー、リンクやクリック可能なテキストはブランドカラーです。
このようにする理由は、読者が「この色はクリックできる」という期待を徐々に形成するからです。本文のあちこちにブランドカラーがあると、リンクのヒントとしての役割が失われます。仮に1つのページでブランドカラーが同時に見出し、本文の太字、リンク、引用ボックスに使われていると、読者はどのコンテンツがさらにクリックできるのか判断しにくくなります。
ブランドカラー自体が薄い場合（黄色や薄い緑など）、白背景の文字では十分に明確でないことがあります。その場合はリンクに下線を加えるか、同系色のより濃いバージョンを文字色にし、薄い色はボタンの背景に残します。
ボタンとフォーム：メインボタンはメインカラー、サブボタンは存在感を抑える
ボタンはブランドカラーの使用で最も抑制が必要な場所です。1つのページで通常、ブランドカラーを使うメイン操作ボタンは1つだけにします（例：「相談を送信」「今すぐ問い合わせ」「資料をダウンロード」）。副次的な操作（「戻る」「キャンセル」「もっと見る」など）は、枠線ボタンやグレーのテキストボタンにできます。
フォームエリアも同様です。入力欄の枠線、必須項目のヒント、フォーカス状態にはブランドカラーを使えますが、入力欄の背景は白または薄いグレーに保ち、ユーザーが入力内容を読みにくくならないようにします。
確認方法は、ページを縮小するか目を細めて見て、メインボタンが依然として最も目立つ要素の1つかどうかです。近くに同じくらい鮮やかな色の塊が複数あると、メインボタンの誘導効果は弱まります。
フッター、色面、画像：ブランドカラーは雰囲気作りに適するが、面積は抑える
フッター、カテゴリのヘッダー画像、データ表示エリア、区切りの色面などは、ブランドカラーで全体的な雰囲気を作るのに適しています。ここでの色の面積は本文エリアより大きくできますが、2点に注意します。1つは色面の上の文字が依然として明確であること、もう1つは同じページ内で明度の異なるブランドカラーを多く出しすぎないことです。そうしないと雑然として見えます。
企業に完全なブランドガイドラインがあれば、通常はメインカラー、サブカラー、ニュートラルカラーの区別があります。サイトに落とし込む際は、次のように配分できます。メインカラーはナビゲーションのハイライト、メインボタン、重要な見出しに。サブカラーはアイコン、タグ、カテゴリの色面に。ニュートラルカラーは本文、背景、区切り線に。完全なガイドラインがない場合も、まずこの考え方で簡単なルールを決め、ページごとに適用していけばよいです。
ページ間の一貫性：単一ページの見た目より重要
ブランドカラーで最も問題が起きやすいのは、特定のページではなく、ページ間の不一致です。例えば、トップページのボタンは濃い青なのに、製品ページのボタンは薄い青になる。事例一覧のタグ色とニュース一覧のタグ色が全く異なる。訪問者が複数のページを行き来すると、同じブランドのサイトには見えなくなります。
運用段階では、定期的に簡単な確認を行えます。トップページ、カテゴリページ、詳細ページ、フォームページ、フッターを開き、メインボタンの色、リンク色、見出し色、選択状態が一致しているか確認します。複数の編集者がいる場合、ブランドカラーの色値と用途を短い説明書にまとめ、管理画面や共有ドキュメントに置き、新しいページを作成する際にそのまま参照するとよいです。
また、ブランドカラーはサイトの管理画面とフロントエンドで、ディスプレイ、ブラウザ、画像圧縮の影響を受けることがあります。公開前に、普段使うPCとスマートフォンでそれぞれ確認し、色に明らかなずれがないか、背景色のせいで文字が読みにくくなっていないかを確認するとよいです。
実行可能な配分の順序
最初から悩みたくない場合は、次の順序で段階的に決めていけます。
- まずニュートラルカラーを決める：本文、背景、枠線にそれぞれどのグレーを使うか、読書の快適さを確保する。
- 次にメインカラーの使用位置を決める：ナビゲーションの現在項目、メインボタン、リンク、重点見出し。
- そしてサブカラーの使用位置を決める：アイコン、タグ、カテゴリ、装飾的な色面。
- 最後にコントラストを確認する：ブランドカラーを使う各位置のスクリーンショットを撮り、文字とアイコンが明確に判別できるか確認する。
- 公開後はページごとに一貫性を確認し、ルールを記録して今後の更新に活用する。
ブランドカラーをどこに置くのが適切かは、本質的には美的センスの問題ではなく、ページ上の役割分担の問題です。認識を担う場所は安定させ、雰囲気を担う場所は面積を抑え、本文エリアでは色を読書に譲る。そうすることで、サイトは見やすくなり、長期的な保守でも統一を保ちやすくなります。次のステップとして、既存のサイトを開き、ヘッダー、本文、ボタン、フッターの4種類の位置からそれぞれ1ページを選び、上記の判断基準に照らして一度確認してみてください。
