デザイン案が出てきたときに、社内で最も意見が割れるのが色です。「もう少し明るく」「この青は違う気がする」「うちのロゴの色を使ってほしい」。
色は誰でも意見を言える領域なので、議論が長引きやすい。しかも「好き嫌い」と「機能するかどうか」が混ざりやすく、収拾がつかなくなります。
この記事では、Webサイトの配色がどういう手順で決まるのかを、発注する側が理解しておくと判断しやすくなる形で整理します。
前提：色は「面積」で決まる
配色の話をするときに最初に共有しておきたいのが、同じ色でも使う面積が変われば印象がまったく変わるということです。
デザインの世界では、配色を3つの役割に分けて考えます。
| 役割 | 目安の面積 | 担うもの |
|---|---|---|
| ベースカラー | 約70% | 背景。白やごく薄いグレーが多い |
| メインカラー | 約25% | サイトの印象を決める色。ブランドカラーが入ることが多い |
| アクセントカラー | 約5% | ボタンや強調。目を引かせたい場所 |
「うちのコーポレートカラーは赤だから、サイトも赤くしてほしい」という要望は非常によくいただきます。ここで重要なのは、赤を70%使うのか、5%使うのかで、まったく別のサイトになるということです。
赤を背景に敷き詰めると、強く、騒がしく、安さを感じさせる方向に振れます。一方、白基調のなかでボタンとロゴだけに赤を使うと、同じ赤でも上品で意志のある印象になります。「コーポレートカラーを使う」という要望は満たしつつ、印象は正反対にできる。
議論が割れたときは、「この色を使うか」ではなく「この色をどれくらいの面積で使うか」に論点を移すと、まとまりやすくなります。
手順1：ブランドカラーを確定する
すでにロゴや名刺、看板に使っている色があるなら、それが出発点です。ただし、そのまま使えないことがあります。
印刷用の色は、そのままWebで使えないことがある
名刺やパンフレットの色はCMYKやDIC番号で管理されていることが多く、Web用のRGBに変換すると印象が変わります。特に鮮やかな緑や紺は、画面で見ると沈んで見えたり、逆にギラついたりします。
制作会社に色を伝えるときは、可能であれば カラーコード（#1A3A6B のような6桁） で渡してください。分からない場合はロゴのデータ（AI形式やPDF）を渡せば、こちらで拾えます。「ロゴの画像ファイル（JPG）しかない」という場合も、そこから抽出はできますが、圧縮の影響で数値がずれることがあります。
コントラストが足りない色は、そのままボタンに使えない
Webにはアクセシビリティの基準があり、背景色と文字色の明度差が一定以上必要とされています。淡い黄色やパステルカラーをブランドカラーにしている場合、白背景に置くと文字が読めません。
この場合は「ブランドカラーは背景の面や装飾に使い、ボタンには濃度を上げた別の色を使う」といった調整をします。ブランドカラーを捨てるのではなく、役割を分けるということです。
手順2：ブランドカラーがない場合はトーンから決める
「うちには決まった色がない」という会社も少なくありません。この場合、いきなり色を選ぶとうまくいきません。先に、与えたい印象を言葉で決めます。
私たちが打ち合わせで使うのは、次のような言葉です。
- 信頼感／堅実
- 上品／高級
- 親しみ／やさしい
- 明るい／元気
- 先進的／スマート
- 温かみ／手仕事
このうち2つを選んでもらいます。3つ以上選ぶと方向が定まりません。「信頼感」と「親しみ」なら青系に暖色のアクセント、「上品」と「温かみ」ならベージュ系に深い色のアクセント、というように、言葉が決まれば色の候補は自然と絞られます。
順番が大事です。色から入ると好みの話になり、印象から入ると目的の話になります。
手順3：使う色数を絞る
初めてサイトを作る会社で最も多い失敗が、色を使いすぎることです。
サービスが5つあるから5色に塗り分ける、といった設計はよく提案されますし、一見わかりやすく思えます。しかし色数が増えると、どこを見ればいいのかが分からなくなり、結果として何も目立たなくなります。
原則は、ベース＋メイン＋アクセントの3色まで。加えてグレーの濃淡を数段階。これで十分に成立します。
情報の区別が必要な場合は、色ではなく別の手段を使います。アイコン、線の太さ、余白の量、写真の有無。色に頼らない区別のほうが、結果的に読みやすくなります。
例外は、警告や成功を伝える場面です。エラーは赤、完了は緑、といった色は世の中の慣習として定着しているので、これはアクセントカラーとは別枠で使います。
手順4：ボタンの色を最後に決める
配色設計で最後に決めるのが、行動してほしいボタンの色です。ここは印象ではなく、機能で決めます。
判断の基準はひとつ。そのページの中で、そのボタンがいちばん目立っているか。
よくあるのが、ブランドカラーが青で、ボタンも青にするケースです。ヘッダーもフッターも見出しも青いサイトの中で、ボタンだけを目立たせるのは難しくなります。この場合、ボタンにはブランドカラーの補色寄りの色（オレンジなど）を使うか、青のまま彩度と明度を大きく変えるか、どちらかの手を打ちます。
「ブランドカラー以外の色は使いたくない」という方針の会社もあります。その場合は、色ではなく面積と余白でボタンを目立たせます。ボタンの周囲を大きく空け、幅を広く取り、他の要素を近づけない。色を増やさずに視線を集める方法はあります。
業種ごとの傾向と、その理由
TEHON に掲載しているサイトを分類別に見ていくと、業種ごとの傾向がはっきり出ます。ただし、傾向をなぞることが目的ではありません。なぜその傾向になっているのかを理解して、自社が乗るか外すかを判断するために使ってください。
医療・ヘルスケア：青や緑の寒色系が多い。清潔感と冷静さを連想させるためです。ただし小児科や産科では、暖色やピンクが選ばれます。来訪者が不安を抱えているか、日常的な安心を求めているかで方向が変わります。
士業・金融：紺、濃いグレー、深緑。彩度を落とした重い色が中心です。軽さや親しみより、間違いのなさを優先する業種だからです。
飲食：写真が主役になるため、UI側の色はむしろ抑えられます。料理の写真より背景が目立ってはいけません。
美容・エステ：くすみ系のピンクやベージュ、白。肌の色に近い色域を使い、写真と画面が地続きに見える設計が多く見られます。
建設・住宅：木やコンクリートの質感に合わせた、ベージュ・チャコール・深緑。素材そのものの色を画面に持ち込む発想です。
いずれも「その業種だから」ではなく、扱っている商材の見え方と、来訪者の心理状態から逆算した結果です。同じ業種でも、狙う客層が違えば外して正解になることもあります。
社内で配色を決めるときの進め方
最後に、社内の合意形成の話をします。配色は意見が割れやすいので、進め方を決めておくと揉めません。
1. 決める人を先に決める
多数決で色を決めると、たいてい無難な案が残ります。最終決定者を1人決めておいてください。
2. 「好き嫌い」と「目的に合うか」を分けて話す
「私はこの色が好き」は情報として有効ですが、判断基準にはなりません。「この色だと、狙っている40代女性に伝わりにくいのでは」という形に言い換えると、議論が前に進みます。
3. 画面で確認する
紙に印刷して確認すると、色が変わります。必ずモニタとスマートフォンの実機で見てください。特にスマートフォンは機種によって発色がかなり違います。
4. 面積で見る
色見本の四角を見比べても判断できません。実際のデザイン案の中で、その面積で使われた状態を見て決めてください。
TEHON で配色を比較する
TEHON では、掲載サイトを配色の軸で分類しています。自社と同じ業種で絞り込んでから配色を見比べると、その業種で何が定番になっているかが分かります。そのうえで、あえて外している事例を探すと、差別化の手がかりが見つかります。
各サイトの詳細ページでは、配色のほかにトーンや構成も併記しています。色だけを切り離して見るのではなく、構成とセットで見るのがおすすめです。参考デザインギャラリーからご覧ください。
まとめ
- 色は「どの色か」より「どれくらいの面積か」で印象が決まる
- ブランドカラーはカラーコードで渡す。印刷用の色はそのまま使えないことがある
- 決まった色がないなら、印象を表す言葉を2つ選ぶところから始める
- 使う色は3色まで。情報の区別は色以外の手段で行う
- ボタンの色だけは印象ではなく機能で決める
- 業種の傾向は、なぞるためではなく、乗るか外すかを判断するために使う
配色は感覚の領域に見えて、実際にはかなりの部分が理屈で説明できます。理屈の部分を先に片付けておくと、残った感覚の議論も短く済みます。
マザーハンズでは、広島・東京を拠点にWebサイトのデザインとマーケティング支援を行っています。配色やブランディングでお悩みの際はお問い合わせよりご相談ください。