結論は、「会社らしさを示す色」と「読む・操作するための色」を分け、実際の一画面で組み合わせを確かめることです。好きな色を否定する必要はありません。ただ、色見本だけで決めず、文章や写真、相談ボタンと並べたときに何が伝わるかまで見ます。
この記事は、ホームページの新規制作やリニューアルを相談する企業・店舗の担当者向けです。美容室でも、士業でも、飲食・製造・建設でも、業種だけで使う色が一つに決まるわけではありません。既存のロゴやお店の空間、普段の仕事の姿勢を材料に、配色案を判断する手順を整理します。
1. 色を選ぶ前に「残すもの」を集める
ロゴ、看板、名刺、パンフレット、店内や製品の写真を並べます。その中に、変更できない色、既に覚えてもらっている色、今回見直せる色があるかを責任者と確認してください。画面のスクリーンショットから拾った色を、正式なブランド指定色だと決め付けないようにします。
色の指定資料があれば、元データと一緒に制作担当へ共有します。指定がなければ、無理に色番号を作る前に「何を残したいか」を言葉にします。印刷物と画面では見え方が異なるため、同じように見えることと、色の設定値が同じことも分けて確認します。
最初の整理メモ
残したいもの：［ロゴ・看板・写真など］
残す理由：［既存のお客様への分かりやすさ、会社の方針など］
見直せるもの：［背景、本文、ボタン、資料の装飾など］
確認する相手：［変更を判断できる責任者］
これは相談用の枠組みです。実在企業のデザイン方針ではなく、既存のロゴや色を自動的に変更する提案でもありません。
2. 色には、四つの役割を割り当てる
ブランド色を全見出し・全背景・全ボタンへ広げると、その色が「会社の印象」なのか「操作できる場所」なのか分かりにくくなることがあります。先に役割を分けると、色数だけの議論から、画面の使い方の議論へ進めます。
| 役割 | 見るポイント |
|---|---|
| 背景 | 長い本文や写真を邪魔しないか。ページを切り替えても、情報のまとまりを追えるか。 |
| 本文・補足 | 小さな文字や注意書きまで読めるか。薄い色にして大切な条件が消えていないか。 |
| 会社の印象 | ロゴ、写真、見出しと合わせたとき、残したい雰囲気と矛盾しないか。 |
| 操作・状態 | リンク、相談ボタン、選択中、入力エラーが区別できるか。色以外でも意味が分かるか。 |
同じ色が複数の役割を持つ場合もあります。その場合は、場所、形、文字の説明などで違いが分かるようにします。「ボタンを赤くすれば相談が増える」といった一律の答えではなく、背景や周囲の情報との関係で判断します。
3. 「何色なら安心か」より、見せたい仕事を言葉にする
「落ち着いた」「自由な」「緻密な」など、会社の印象を表す言葉を挙げたら、その理由になる実際の仕事も一つ添えます。好きな色を選ぶ場合も、どんな写真や文章と組み合わせたいかまで話せると、制作担当が案を比較しやすくなります。
たとえば、素材の質感を見て選んでもらう仕事なら、写真や見本が主役になる画面を検討できます。説明の細かさが大切なサービスなら、長い文章や表の読みやすさから組み立てる考え方もあります。これは制作上の仮の検討例で、その業種は必ずこの色にするという決まりではありません。
同じ写真でも、背景の明るさや余白で印象は変わります。色だけを取り出して話が止まる場合は、写真の役割と準備へ戻り、何を見てほしいページなのかを揃えましょう。
4. 読みやすさは、色の名前ではなく組み合わせで確認する
W3CのWCAG 2.2では、通常の文字と背景のコントラスト比を原則4.5対1以上とする達成基準が示されています。大きな文字などには別条件や例外があります。色名や見た目の印象で合否を決めず、実際の文字色と背景色の組み合わせを制作担当と確認します。
ただし、その数値だけを満たせば、ページ全体の使いやすさが完成するわけではありません。文字の大きさや太さ、写真の上の文字、選択中や入力エラーなども別に確かめます。特に、ロゴで使える色が、そのまま小さな本文に向いているとは限りません。
また、エラーを赤だけ、選択済みを緑だけで示さず、「入力内容を確認してください」「選択中」などの文字や形も組み合わせます。W3Cは、色だけを情報や操作の唯一の手掛かりにしない考え方を示しています。色を使わないという意味ではなく、色が区別しづらい場合にも用事が進められるようにするためです。
5. 配色案は、同じ内容の一画面で比べる
案ごとに写真も文章量も変えると、色による違いが分かりにくくなります。まず同じ見出し、同じ写真、同じ相談ボタンのある一画面を使い、二つの案を並べてみてください。会社の印象、読む順番、押せる場所を、同じ質問で確かめます。
- 最初に何が目に入り、何の事業だと感じるか。
- 本文と注意書きを、拡大せず無理なく追えるか。
- 相談ボタンと、読むためのリンクを見分けられるか。
- 写真の明るい部分や暗い部分でも、重ねた文字が読めるか。
- スマートフォン、文字拡大、キーボードでの移動でも、必要な情報と操作が分かるか。
意見は「Aが好き」で止めず、「本文はAが読みやすいが、写真の雰囲気はBが合う」のように、場所と理由を分けて残します。デザイン案への要望の伝え方も参考にしてください。試した範囲と、まだ確認していない範囲は区別します。
次にすること：制作担当へ渡す六つのメモ
「残したい素材」「変えられる範囲」「伝えたい印象と理由」「ページでしてほしい行動」「読みづらい場所」「最終確認者」を一枚にします。色番号がまだ決まっていなくても、この材料から配色と画面構成を相談できます。色の組み合わせが決まった後の表示確認には、スマホ表示の公開前チェックも使えます。
GRAVIでは、業種ごとの仕事と読み手から、会社らしい言葉・見え方とホームページの使いやすさを一緒に考えます。既存URLと、残したい素材の種類が相談の出発点になります。
一次情報：W3C WCAG 2.2 コントラストの解説、色の使用に関する解説（2026年10月18日確認）。四つの役割と比較メモは制作上の提案です。色の変更による売上・問い合わせ・検索順位の向上を保証するものではありません。