ブランドガイドラインからWEB配色を作る方法｜色の役割を決める手順

ブランドガイドラインがあるのに、WEBサイトの背景やボタンの色を決められないことがあります。ブランドガイドラインとは、ロゴや色の指定、使用上の決まりなどをまとめた資料です。ロゴ用の色が決まっていても、文字や入力欄に使う色まで書かれているとは限りません。資料の指定を守りながら、画面に必要な色の役割を補う手順を紹介します。

ガイドラインの「指定」と「未指定」を分けて読む

まず最新版のガイドラインから、基準色、補助色、ロゴの背景、使用禁止の組み合わせを抜き出します。どの色を変更できないか、どの色は用途に応じた調整が認められているかも確認しましょう。印刷物向けの指定だけがある場合、WEBでの正確な色コードは担当者への確認が必要です。

次に、画面側で必要になる役割を挙げます。広い背景、見出し・本文、リンク、主要ボタン、入力欄、エラー表示などです。ガイドラインに値がない役割は、勝手に公式カラーとして扱わず「WEB用の提案色」として区別します。

同じブランドカラーでも、ロゴに使う場合と小さな文字に使う場合では条件が異なります。指定された色を無理に全部の部品へ当てはめず、まず役割の一覧を作ることが大切です。

指定色からWEB用の役割表を作る具体例

架空の工芸工房の見学予約ページを考えます。仮のガイドラインには、ロゴ色の赤茶■#C45D4Dと背景用の生成り■#F8F2E9が指定され、本文文字や予約ボタンの色は未指定とします。HEX（ヘックス）は色を16進数で示すコードです。次のように、資料で決まっている色と追加提案を分けます。

追加する文字色■#2F343Aと生成り背景■#F8F2E9のコントラスト比は約11.28:1です。白い文字■#FFFFFFと濃い赤茶のボタン背景■#783C35は約8.41:1、ボタン背景と生成りの周囲との差は約7.56:1になります。いずれも指定した不透明な2色を計算した値です。

一方、元のロゴ色■#C45D4Dに白文字■#FFFFFFを載せた場合は約4.18:1で、WCAG（WEBコンテンツを利用しやすくするための指針）が通常サイズの文字に求める4.5:1に届きません。ロゴの色は維持し、ボタン用には濃い候補を別に設ける方法が考えられます。ただし、濃い候補を正式に追加するにはブランド管理者の承認が必要です。

追加色の承認と画面ごとの検証を行う

役割表には、ガイドラインの参照箇所、各色の利用場所、追加する理由、承認状況を記録します。新しい濃淡を採用してよいかは、ブランドを管理する担当者に確認します。ロゴ自体の色変更を提案色と混同しないようにしましょう。

承認後も、一覧画面・予約フォーム・確認画面で文字やボタンを同じ条件で検証します。通常時だけでなく、ホバー（ポインターを重ねた状態）、フォーカス（キーボード操作などで選ばれた状態）、エラー表示も確認します。色だけで状態を伝えず、ラベルや枠の形も併用してください。

最後に「ガイドラインで指定された色」「WEB用として承認された色」「まだ検討中の色」を分けた表を共有します。ブランドのルールを守ることと、WEBで使いやすい配色に整えることを同時に進められます。