Webサイトの配色は、見た目の印象だけでなく、内容の読みやすさや問い合わせのしやすさまで左右します。とはいえ「どの色を選べばよいか」「何色まで使ってよいか」で迷い、感覚だけで決めてしまう場面は少なくありません。結論から言えば、配色は3つの役割（ベース・メイン・アクセント）に分け、おおよそ70対25対5の比率で組み立てると破綻しにくくなります。この記事では、色が与える印象の整理から、決め方の具体的な手順、避けたい失敗までを、発注側の担当者が判断できる形で解説します。
Webサイトの配色は「3色・70対25対5」で考えると失敗しにくい
Webサイトの配色は、使う色を3つの役割に絞り、面積比を70対25対5で配分するのが基本です。色数を増やすほど視線が分散し、伝えたい情報や行動（問い合わせ・購入など）が埋もれます。まず土台となる背景色、次にサイトの印象を決める主役の色、最後に注目させたい箇所だけに使う差し色、という順で考えると整理しやすくなります。
この記事の要点
- 配色はベース・メイン・アクセントの3つの役割に分けて考える
- 面積比の目安は70対25対5。差し色は絞るほど効く
- 色を決める前に「誰に・どんな印象を」を先に言語化する
- 最後は文字と背景のコントラストを必ず確認する
配色とは｜Webサイトにおける色の3つの役割
配色とは、複数の色を目的に沿って組み合わせることです。Webサイトでは、各色に役割を持たせると全体がまとまります。役割と面積比の目安は次のとおりです。
役割 | 使う場所の例 | 面積比の目安 |
|---|---|---|
ベースカラー | 背景・余白など最も広い面 | 約70% |
メインカラー | 見出し・ヘッダー・主要な要素 | 約25% |
アクセントカラー | ボタン・リンク・強調したい箇所 | 約5% |
メインカラーは企業の印象を担うため、ロゴやブランドの色と合わせると一貫性が出ます。アクセントカラーは面積を小さく保つことで、問い合わせボタンなど「押してほしい場所」を目立たせられます。
色が与える印象を整理する
色にはそれぞれ一般的に結び付きやすい印象があります。ターゲットや伝えたいイメージに合う色を選ぶ出発点として、代表的な傾向を整理します。あくまで目安であり、業種や組み合わせ、彩度・明度によって印象は変わります。
色 | 結び付きやすい印象 | 相性の良い場面の例 |
|---|---|---|
青（ネイビー含む） | 信頼・誠実・清潔 | 企業サイト・金融・医療 |
緑 | 安心・自然・健康 | 環境・食・福祉 |
赤・オレンジ | 活気・情熱・食欲 | 飲食・セール・スポーツ |
黄 | 明るさ・親しみ | 子ども向け・カジュアル |
黒・グレー | 高級・洗練・落ち着き | ブランド・BtoB・士業 |
色の意味は文化や文脈で受け取られ方が変わります。海外向けサイトでは、国内と印象が異なる場合がある点に注意してください。
Webサイトの配色を決める5つの手順
配色は次の順で決めると、感覚に頼らず判断できます。上流の目的整理を飛ばして色から選ぶと、後で全体がちぐはぐになりやすいため、順番を守るのが重要です。
- 目的とターゲットを言語化する：誰に向けたサイトで、どんな印象を持ってほしいか、達成したい行動は何かを1〜2文にする。ここが色選びの基準になります。読み手の理解を深めたい場合はUI/UXデザインの基本もあわせて整理すると設計がぶれにくくなります。
- ベースカラーを決める：最も広い面を占める背景色を選ぶ。多くのサイトは白や淡いグレーなど、情報を邪魔しない明るい色が基本です。
- メインカラーを決める：サイトの印象を担う主役の色を1色決める。ロゴやブランドの色があれば、それを起点にすると一貫性が生まれます。ブランドの色そのものを整理したい場合はブランディングの進め方が参考になります。
- アクセントカラーを決める：ボタンやリンクなど、注目させたい箇所だけに使う差し色を1色選ぶ。メインカラーと明確に差がつき、かつ調和する色にします。
- コントラストを確認する：文字と背景の明暗差が十分かを最後に必ず確認する。見た目の好みだけで決めると、読みにくいサイトになりがちです。
配色でよくある失敗と注意点
配色の失敗は、色選びのセンスよりもルールの欠如から起きることがほとんどです。代表的なものを挙げます。
- 色数が多すぎる：役割を決めずに色を足すと、視線が散って重要な要素が埋もれます。基本の3色から始め、必要な場合のみ濃淡（トーン違い）で増やします。
- コントラスト不足で読みにくい：薄い色の文字や、背景と近い色のボタンは可読性を下げます。文字色は背景と十分な明暗差を確保します。
- トレンドを優先しすぎる：流行の配色でも、ターゲットやブランドに合わなければ逆効果です。目的との整合を先に確認します。
- ブランドと一致していない：名刺・パンフレット・SNSなど他媒体と色が違うと、印象が分散します。オンラインとオフラインで色を揃えます。
文字と背景のコントラストは、可読性とアクセシビリティの両面で重要です。判断基準はFAQと次のまとめでも触れます。配慮すべき項目はWebアクセシビリティの配慮項目で確認できます。
まとめ｜迷ったら役割と比率から決める
Webサイトの配色は、次の順で考えると迷いにくくなります。
- 使う色は原則3つの役割（ベース・メイン・アクセント）に絞る
- 面積比は70対25対5を目安にし、差し色は絞って効かせる
- 色を選ぶ前に、ターゲットと与えたい印象・促したい行動を言語化する
- メインカラーはブランドの色と合わせ、他媒体とも統一する
- 最後に文字と背景のコントラストを必ず確認する
配色は「センス」ではなく、役割分担とルールで一定の質まで整えられます。自社だけで判断が難しい場合や、ブランド全体で一貫した見せ方を整えたい場合は、デザインの専門家に相談するのも選択肢です。具体的な進め方はCataly Designのサービス一覧もあわせてご覧ください。
