Webサイトの配色の決め方｜ブランドカラーから展開する方法

Webサイトの配色は、好みで決めると必ず後で崩れます。ページが増えるたびに新しい色が足され、担当者が変わるとまた別の色が入り、気づけばサイト全体で十数色が使われている。これは中小企業のサイトで頻繁に起こる状態です。

配色設計の目的は、美しい組み合わせを作ることではありません。「どの色をどこに使うか」のルールを決めて、誰が更新しても崩れない状態を作ることです。そしてルールの起点は、ブランドカラーです。

この記事では、ブランドカラーから配色を展開する手順、比率の考え方、CVボタンの色の決め方、そしてコントラスト比の確認方法までを解説します。

結論：色は「好み」ではなく「役割」で決める

使う色を減らし、それぞれに役割を与えます。基本は3系統です。

比率は厳密なものではなく、「アクセントカラーを使いすぎない」ための目安と考えてください。アクセントが画面のあちこちに出ると、どれが重要か分からなくなります。

ブランドカラーから展開する手順

1. ブランドカラーを1色決める：ロゴの主要色、または企業として使い続ける色
2. 明度違いを3〜5段階作る：濃い順に、見出し・囲み背景・境界線・淡い背景として使う
3. ベースカラーを決める：白、またはブランドカラーをごく淡くした色
4. アクセントカラーを1色決める：CTA専用。他の用途では使わない
5. グレースケールを3段階決める：本文、補足テキスト、境界線
6. 状態色を決める：エラー（赤系）、成功（緑系）、警告（黄系）

2番目の「明度違いを作る」が実務では効きます。新しい色を足すのではなく、同じ色の濃淡でバリエーションを作ると、色数を増やさずに表現の幅を確保できます。

使用色の一覧を作る

決めた色は一覧にして、名前と用途を明記します。これがないと、制作者や更新担当者が変わるたびに色が増えます。

この一覧をデザインルールとして共有しておくと、外注時にも品質が安定します。「なんとなくこの青」という指定をなくすことが目的です。

CVボタンの色をどう決めるか

「目立つ色」ではなく「使われていない色」を選ぶ

「CVボタンは赤やオレンジが良い」という説明を見かけますが、色そのものに普遍的な効果はありません。重要なのは、そのページの中でその色が他に使われていないことです。

赤を基調としたサイトで赤いボタンを置いても目立ちません。逆に、青系のサイトでオレンジのボタンは目立ちます。判断基準は色名ではなく、周囲との差です。

色より効くのは余白と位置

ボタンを目立たせる方法として、色の変更より効果が大きいのは次の2つです。

• ボタンの周囲に十分な余白を取る（周囲に要素が詰まっていると色を変えても埋もれる）
• ファーストビュー内に1つ配置する（下部にしかないと、検討済みの人を取りこぼす）

余白の設計についてはWebデザインにおける余白の効果で解説しています。

ボタンの色は1種類に統一する

「資料請求はオレンジ、問い合わせは緑、電話は青」と分けると、どれが主要な行動か伝わりません。主CTAは1色に統一し、補助的な行動は枠線のみのボタンなどで差をつけてください。

可読性を担保するコントラスト比

配色の見た目が良くても、文字が読めなければ意味がありません。文字色と背景色のコントラスト比には国際的な基準（WCAG）があり、次が目安になります。

実務でよく問題になるのが次の3つです。

• 薄いグレーの注釈文字（コントラストが足りず読めない）
• 白背景に淡い色の文字（ブランドカラーが淡い場合に起こりやすい）
• 画像の上に載せた白文字（画像の明るい部分で読めなくなる）

3番目は、画像に半透明の暗い層を重ねるか、文字部分だけ背景を敷くことで解決します。コントラスト比はブラウザの検証ツールや無料のチェックツールで数値として確認できるため、感覚で判断せず測ってください。

業種による傾向と、その限界

「医療は青、飲食は暖色」といった傾向は確かに存在します。ただし、これはその業界で選ばれやすいというだけで、選ぶべき色ではありません。同業他社と同じ色にすると、差別化されず記憶にも残りません。

判断の順序としては、次のようになります。

1. 自社のブランドコンセプトから、伝えたい印象を言語化する
2. 同商圏の競合が使っている色を確認する
3. 伝えたい印象を満たしつつ、競合と差がある色を選ぶ
4. コントラスト比を満たすか確認する

2番目を飛ばすと、地域内で同じような見た目のサイトが並ぶことになります。ブランドコンセプトの決め方はブランディングとは？価格競争から抜け出す進め方と効果の測り方で解説しています。

配色が崩れる原因と対策

よくある質問

Q. 使う色は何色までが適切ですか？

ブランドカラーの濃淡3〜5段階、アクセント1色、グレースケール3段階、状態色3色程度が実務的な範囲です。重要なのは数より、それぞれに役割が決まっていることです。

Q. ロゴの色をそのままサイトで使うべきですか？

基本はそうしますが、ロゴの色が濃すぎる・淡すぎる場合、Webでは可読性の問題が出ます。その場合はロゴの色を基準に、Web用の明度違いを作ってください。ロゴ自体の色は変えず、Web上の使用色として展開します。

Q. ダークモードには対応すべきですか？

対応の優先度は事業によります。まず通常表示のコントラスト比と配色ルールを整えてから検討してください。ルールが決まっていない状態でダークモードに着手すると、管理すべき色が倍になります。

Q. CVボタンの色をA/Bテストすべきですか？

月のコンバージョン数が十分にある場合は有効ですが、10件未満の規模では有意差を判断できません。その段階では、色より先に「周囲の余白」と「ファーストビュー内への配置」を確認してください。影響が大きいのはそちらです。

まとめ

配色設計の目的は、美しい組み合わせを作ることではなく、誰が更新しても崩れないルールを作ることです。ベース・メイン・アクセントの3系統に役割を分け、使用色の一覧をドキュメント化してください。

色を増やしたくなったら、新色を足すのではなくブランドカラーの明度違いで対応します。これだけで色数を抑えたまま表現の幅を確保できます。

CVボタンの色は「目立つ色」ではなく「そのページで他に使われていない色」で選んでください。そして色より効果が大きいのは、周囲の余白とファーストビュー内への配置です。最後に、文字と背景のコントラスト比は感覚ではなく数値で確認してください。

「サイト全体で色がばらついている」「CVボタンが埋もれる」「更新するたびに新しい色が増える」といった状態にある場合は、個別の色の変更ではなく、使用色のルール整備から着手する価値があります。

当社ではデザイン制作からWeb制作、計測設計までを横断して支援しています。資料ではデザインルールの整え方をまとめていますので、自社の課題を整理したい方はぜひダウンロードしてご活用ください。