Webデザインの配色の決め方｜企業サイトの基本

01はじめに｜この記事でわかること

要点：この記事は、制作会社から配色案を見せられて判断に迷う発注側の方に向けた記事です。色彩理論の解説ではなく、企業サイトで実際に使える決め方と、社内で合意を取る手順をまとめます。制作全体の進み方はホームページ制作の流れもあわせてご覧ください。

「A案とB案、どちらの色がよろしいでしょうか」。デザインの提案を受けると、この質問が来ます。ここで多くの会社が止まります。

配色の記事は、たいてい色相環や補色の説明から始まります。知識としては役に立ちます。ただ、発注側が実際に困るのはそこではありません。好みで選んでいいのか、選んだ理由を社内にどう説明するのかが分からない。ここです。

この記事では、2000年創業のWeb制作会社ZenWeb Japanが、案件で発注側と配色を決めてきた経験をもとに整理します。理論より、決め方と手順の話が中心です。

本題に入る前に、Webデザインの配色の考え方を短時間でつかめる動画をご紹介します。

02企業サイトの配色は「好み」で決めてはいけない

要点：企業サイトの色は、社長の好みでも担当者の好みでもなく、会社がすでに持っている色から決めます。名刺、看板、封筒、ロゴ。この4つに使われている色をそろえるだけで、初めて訪れた人にも同じ会社だと伝わります。

「私は青が好きなので青で」。この決め方だと、あとで必ずやり直しが出ます。担当者が代わったとき、次の人の好みで振り出しに戻るからです。

配色の根拠は、社外に説明できるものにしてください。いちばん強い根拠は、会社がすでに使っている色です。

まず、次の4つを机に並べてみてください。

• ロゴ。会社の色の出発点です。ロゴに使われている色が、そのままメインカラーの候補になります。
• 名刺。お客様がいちばん長く手元に置く印刷物です。名刺の色とサイトの色が違うと、別会社に見えます。
• 看板や社用車。地域のお客様が実際に目にしている色です。ここを外すと現実の印象とずれます。
• パンフレットや封筒。営業で渡している資料の色。サイトとそろえると、提案全体に一体感が出ます。

この4つで色が食い違っている会社も珍しくありません。その場合はサイト制作が、色を整理し直す良い機会になります。ホームページ制作を依頼している会社にも、早い段階で現物を見せてください。

03色は3つでいい｜70対25対5の割合

要点：Webデザインの配色は3色に絞ります。背景などのベースカラーが約70％、会社を表すメインカラーが約25％、ボタンなどのアクセントカラーが約5％。この割合を守れば、色数が少なくても地味には見えません。

色を増やすほど良くなる、ということはありません。むしろ逆です。色が多いページは、どこを見ればいいのか分からなくなります。

企業サイトで使う色は、次の3つで足ります。

• ベースカラー（約70％）。背景に使う色です。白、または白に近い薄いグレーがほとんどです。面積が最も広いので、目立たない色を選びます。
• メインカラー（約25％）。見出し、帯、アイコンに使う会社の色です。ロゴから取るのが基本です。
• アクセントカラー（約5％）。お問い合わせボタンなど、押してほしい場所だけに使います。使う場所を絞るほど効きます。

この割合は、ページを印刷して離れた場所から眺めると確認できます。全体がほぼ白で、会社の色が要所に入り、目を引く色が1〜2か所。そう見えていれば合っています。

アクセントカラーを増やしたくなったら、それは色ではなくワイヤーフレームの問題かもしれません。押してほしいボタンが多すぎるサインです。

04業種別・企業サイトで選ばれやすい色

要点：業種ごとに選ばれやすい色には傾向があります。製造業や士業は青系、医療は青緑や白、飲食は暖色。ただし傾向に合わせるほど同業と似ます。あえて外す判断もありますので、ページ構成を決めるサイト構成図の作り方と並行して考えてください。

「うちの業種だと何色が正解ですか」。よくいただく質問です。案件で実際に採用されたメインカラーを業種別に並べます。

ここで大事なのは、表に合わせにいかないことです。同じ地域の同業3社を実際に見てから決めてください。3社とも紺色なら、あえて別の色にする価値があります。

05配色を決める5つの手順

要点：手順は5つです。ロゴから色を取り出し、メインカラーを1色決め、明暗の濃淡をつくり、アクセントカラーを1色足し、最後にコントラストを確認する。原稿づくりと同じで、順番を決めておくと迷いません。あわせてホームページの原稿の書き方もご覧ください。

実際の進め方を、上から順に並べます。

企業サイトの配色を決める手順

1. ロゴから色を取り出します。ロゴのデータを制作会社に渡すと、正確な色の値が分かります。データが手元になければ、印刷物からでも近い色を割り出せます。
2. メインカラーを1色に決めます。ロゴに複数の色があっても、サイトの主役は1色です。面積の広い色か、会社を象徴する色を選んでください。
3. 同じ色で濃淡を3段階つくります。濃い・標準・薄いの3つがあると、見出しや背景の帯に使い分けられます。色数を増やさずに変化が出せます。
4. アクセントカラーを1色だけ足します。メインカラーと離れた色を選びます。青がメインなら橙や赤。ボタンだけに使ってください。
5. 文字と背景のコントラストを確認します。薄い色の上に白文字を置いていないか。スマホの画面で、屋外の明るさを想定して見てください。

この5つは、デザイン案が出てくる前に社内で決めておくと進行が速くなります。あとから色を変えると、写真やボタンの調整までやり直しになります。

06公開前に配色をやり直した理由

要点：配色のやり直しでいちばん多いのは、文字が読みにくいという指摘です。次に多いのが色数の使いすぎ。デザインの好き嫌いより、読めるかどうかで戻ることのほうが多いのが実情です。

デザイン案が固まったあとでも、配色は戻ります。その理由の内訳を見てみましょう。

上位2つで半分以上です。どちらも好みの問題ではなく、決めごとを守れば防げる問題です。3色に絞り、コントラストを測る。それだけで大半は起きません。

写真との調和は、写真の色みが案件ごとに違うため最後に出てきます。撮影の段階で背景の色をそろえておくと減らせます。詳しくはホームページ写真の撮り方をご覧ください。

07配色でやりがちな失敗

要点：失敗の形は決まっています。色を足しすぎる、真っ黒と真っ白を使う、薄い色に白文字を置く、赤と緑だけで区別する。どれも一度知っておけば避けられます。文字まわりはWebフォントの選び方とあわせて確認してください。

案件で実際に見かける失敗を並べます。

• 色を足して解決しようとする。そっけないと感じたときに色を増やすと、まとまりが崩れます。色ではなく余白と文字の大きさで調整してください。
• 真っ黒と真っ白を使う。黒（#000000）と白の組み合わせは、画面ではまぶしく感じます。少しグレーを混ぜた黒のほうが読みやすくなります。
• 薄い色の上に白文字を置く。デザイン案の画面では見えても、屋外のスマホでは消えます。淡い色が好きな業種ほど起きやすい失敗です。
• 赤と緑だけで意味を分ける。色の見え方には個人差があります。丸とバツ、文字も添えてください。
• ボタンをメインカラーと同じ色にする。ページになじんでしまい、押す場所だと気づかれません。

どれも直すのは簡単です。ただし公開後だと、直す範囲がページ全体に広がります。ワイヤーフレームの段階で気づくのが理想です。

08色の組み合わせ別・読みやすさの目安

要点：文字と背景の明るさの差は、コントラスト比という数値で表せます。本文なら4.5対1以上、大きな見出しなら3対1以上が目安です。数値で確認すれば、好みの議論をせずに判断できます。

よくある組み合わせを、読みやすさの目安とあわせて並べます。

基準の考え方は、ウェブアクセシビリティ基盤委員会が公開するWCAG 2.1の日本語訳で確認できます。数値は無料の判定ツールでもすぐ測れますので、デザイン案の段階で一度確認してください。

09問い合わせボタンの色をどう決めるか

要点：ボタンの色に絶対の正解はありません。大事なのは色そのものではなく、周りとどれだけ違うかです。ページで他に使っていない色を選び、サイト全体で同じ色に統一してください。

「ボタンは何色がいちばん押されますか」。この質問には、色名では答えられません。同じ橙色でも、橙が多いページでは目立たないからです。

判断の基準は3つです。

• 周りで使っていない色を選ぶ。これがすべてです。メインカラーが青なら、ボタンは橙や赤。逆に暖色の多いページなら、ボタンは青系が効きます。
• サイト全体で同じ色にそろえる。ページごとにボタンの色が違うと、押す場所を毎回探すことになります。
• 押せると分かる形にする。色だけに頼らず、角を丸くする、余白を広く取る、矢印を添える。形でも伝えてください。

ボタンの数も関係します。1ページに押してほしい場所が5か所あると、どれも目立ちません。導線の整理はサイト構成図を見ながら進めてください。

10写真や素材と色を合わせる

要点：配色が決まっていても、写真の色みがばらばらだと全体が散らかって見えます。撮影のときに背景の色をそろえ、素材を選ぶときも色の傾向を合わせてください。素材の条件はフリー素材の商用利用もあわせてご確認ください。

ページの印象は、配色だけでは決まりません。面積で言えば、写真のほうが広いこともあります。

そろえ方は難しくありません。

• 背景の色をそろえて撮る。商品写真は白い紙や布を敷くだけで、並べたときの統一感が出ます。
• 素材サイトでは色で絞り込む。多くのサイトに色での絞り込み機能があります。メインカラーに近い写真を選べば、自然になじみます。
• 明るさの傾向をそろえる。明るい写真と暗い写真が交互に並ぶと落ち着きません。どちらかに寄せてください。
• 写真の上に文字を置くなら、帯を敷く。半透明の帯を1枚挟むだけで、写真がどう変わっても文字が読めます。

自社で撮る写真については、ホームページ写真の撮り方に撮影時の注意点をまとめています。

11配色を決めるまでの週別スケジュール

要点：配色が固まるまでは4週間ほどが目安です。実作業は合計7時間ほどで、残りは社内で合意を取る時間です。全体の工程はホームページ制作の流れと重ねて考えると、無理のない計画になります。

週ごとに、誰が何をするのかを並べます。

合計7時間です。それでも4週かかるのは、3週目の社内合意に時間が要るからです。決裁する方に一度で見てもらえるよう、日程を先に押さえておいてください。

12色の指定を記録に残す｜担当が変わっても困らない仕組み

要点：決めた色は、カラーコードで書き残してください。表計算ソフト1枚に、ベース・メイン・アクセントの3色と使う場所を並べるだけで十分です。公開後の運用はホームページ公開後にやることとあわせて引き継いでください。

色は「濃い青」では伝わりません。人によって思い浮かべる青が違うからです。#1E3A8A のように、6桁の英数字で残してください。

記録に残す項目は5つで足ります。

• 役割。ベース、メイン、アクセントのどれか。
• カラーコード。#から始まる6桁の英数字。
• 使う場所。背景、見出し、ボタンなど。
• 印刷用の指定。名刺やチラシと合わせるための値。制作会社に聞けば分かります。
• 決めた日と決めた人。あとから経緯をたどれます。

この1枚があると、チラシを外注するときも、新しい担当者が入ったときも話が早いです。数年後のリニューアルでも、前のサイトの色をそのまま引き継げます。

13まとめ｜「きれいな色」より「読める色」

要点：Webデザインの配色は、センスの勝負ではありません。ロゴから3色を決め、70対25対5の割合で置き、読めるかどうかを数値で確認する。この3つで十分に通用します。仕上げはホームページ制作を任せている会社に預けてかまいません。

要点を振り返ります。

• 色の根拠はロゴ・名刺・看板・パンフレットです。好みで決めるとやり直しになります。
• 使う色は3つ。ベース70％、メイン25％、アクセント5％の割合で置いてください。
• やり直しの半分以上は、読みにくさと色数の多さが原因です。
• 本文のコントラスト比は4.5対1以上。淡い背景に白文字は避けてください。
• 決めた色はカラーコードで残せば、担当が変わっても引き継げます。

迷ったときの基準は1つです。その画面の文字が、屋外のスマホで読めるか。読めるなら大丈夫です。それだけです。

14よくある質問

要点：Webデザインの配色について、よくいただく質問をまとめました。どのページにどの色を置くかはワイヤーフレームとはで先に決めておくと、判断の回数そのものを減らせます。

1. Webデザインの配色は何色までにすべきですか？

3色が基本です。背景に使うベースカラー、会社を表すメインカラー、ボタンに使うアクセントカラー。この3つで足ります。変化をつけたいときは色を増やさず、同じ色の濃淡を3段階つくってください。

2. 会社のロゴが多色の場合、メインカラーはどう決めますか？

面積の広い色か、会社を象徴する色を1つ選んでください。ロゴの色をすべてサイトに持ち込むと、まとまりません。残りの色は、アイコンなど小さな場所で使う程度にとどめます。

3. 問い合わせボタンは何色にすると押されますか？

色名では決まりません。ページの他の場所で使っていない色を選ぶのが基本です。メインカラーが青なら橙や赤が目立ちます。サイト全体で同じ色にそろえてください。

4. コントラスト比はどうやって確認しますか？

文字色と背景色のカラーコードを入れると比率を出せる無料ツールがあります。本文は4.5対1以上、大きな見出しは3対1以上が目安です。デザイン案の段階で確認してください。

5. 途中で配色を変更することはできますか？

できますが、デザインが固まったあとだと写真やボタンの調整までやり直しになります。ワイヤーフレームやデザイン案の初期段階で決めておくと、費用も日数も抑えられます。