バナーやSNS画像、チラシなどのデザインにおいて、配色は完成度を大きく左右する要素のひとつです。同じレイアウト・同じ素材を使っても、配色次第で「安っぽく見える」のか「プロっぽく見える」のかが大きく変わります。
この記事では、デザインにおける配色の基本ルールと、目的やイメージに合わせた配色の考え方、配色決めに役立つ無料サイトを紹介します。デザインを外注する際に「色のイメージ」を正確に伝えるためのポイントもまとめています。
配色の基本｜知っておくべき3つの要素
配色を考えるときに、まず押さえておきたい基本的な考え方を3つ紹介します。
ベースカラー・メインカラー・アクセントカラー
デザインの配色は、大きく3つの役割に分けて考えることができます。
ベースカラーは、デザインの背景や土台となる色です。多くの場合、白・グレー・ベージュなど主張の少ない色が使われ、デザイン全体の70%程度を占めます。
メインカラーは、ブランドやデザインの印象を決める中心的な色です。ロゴカラーやコーポレートカラーが使われることが多く、全体の25%程度を占めます。
アクセントカラーは、ボタンや強調したい要素に使う色です。メインカラーの補色や、目を引く色が選ばれることが多く、全体の5%程度に留めるのが基本です。
色の三属性（色相・彩度・明度）
色は「色相」「彩度」「明度」という3つの属性で表すことができます。
色相は、赤・青・緑といった色そのものの種類を指します。彩度は、色の鮮やかさを指し、彩度が高いほど鮮やかでビビッドな印象に、低いほどグレーに近い落ち着いた印象になります。明度は、色の明るさを指し、明度が高いほど白に近く軽い印象に、低いほど黒に近く重い印象になります。
同じ色相でも、彩度と明度を調整するだけでデザインの印象は大きく変わります。「なんとなく色が合わない」と感じる場合、色相そのものよりも彩度や明度のバランスが原因になっているケースが少なくありません。
配色のバランス比率（70:25:5の法則）
配色の基本として広く知られているのが「70:25:5の法則」です。ベースカラーを70%、メインカラーを25%、アクセントカラーを5%程度の比率で配置すると、バランスの取れたデザインになりやすいとされています。
色数を増やしすぎると統一感が失われやすいため、まずはこの3色構成を基準に考えることをおすすめします。
目的別の配色パターン
色にはそれぞれ与える印象があり、デザインの目的に応じて配色を選ぶことで伝えたいメッセージが伝わりやすくなります。
信頼感・誠実さを伝えたい場合
青系の色は、信頼・誠実・知性といった印象を与える色として広く使われています。金融・医療・IT関連のサービスでは、青を基調とした配色が多く採用されています。彩度を抑えた落ち着いた青を選ぶことで、より誠実な印象を強められます。
親しみやすさ・楽しさを伝えたい場合
オレンジや黄色などの暖色系は、明るく親しみやすい印象を与えます。子ども向けサービスや、カジュアルなブランドイメージを打ち出したい場合に適しています。彩度の高い色を組み合わせることで、活発でポジティブな雰囲気を演出できます。
高級感・上質さを伝えたい場合
黒・ゴールド・深いネイビーなど、明度の低い色を基調とした配色は高級感や上質さを演出します。アクセントに金や銀の色を取り入れることで、より洗練された印象を強められます。色数を絞り、シンプルな配色にすることもポイントです。
安心感・自然さを伝えたい場合
緑やベージュなど自然を感じさせる色は、安心感やナチュラルな印象を与えます。環境・食品・ウェルネス関連のブランドでよく使われる配色で、彩度を抑えることで柔らかく落ち着いた雰囲気を演出できます。
配色を決めるときに使える無料サイト
配色に迷ったときは、配色を支援するツールを活用するのが効率的です。目的別に紹介します。
配色パターンを探せるサイト
Adobe Color Adobeが提供する配色作成ツールです。カラーホイールから配色を作成したり、ほかのユーザーが作成した配色パレットを探したりできます。画像をアップロードして、その画像から配色を抽出する機能も便利です。
Color Hunt トレンドの配色パレットを集めたサイトです。カテゴリやトーンで絞り込みができ、デザインのイメージに近い配色を簡単に見つけられます。
配色をシミュレーションできるサイト
Coolors ランダムに配色を生成し、気に入った色だけを固定して再生成できるツールです。配色のバリエーションを素早く試したい場合に便利で、ロックした色を軸に新しい組み合わせを探せます。
配色の見え方を確認できるサイト
Contrast Checker（Coolors） 文字色と背景色のコントラスト比を確認できるツールです。視認性の確認だけでなく、色弱の方にも配慮したアクセシビリティの観点からも活用できます。バナーや資料で文字が読みにくくなっていないかを事前にチェックする際に役立ちます。
デザイン外注時に配色イメージを伝えるコツ
デザインを外注する際、「青っぽい感じで」「爽やかな雰囲気で」といった曖昧な伝え方では、デザイナーとのイメージのズレが生じやすくなります。配色のイメージを正確に伝えるには、以下の方法が有効です。
カラーコード（HEX）で指定する ブランドカラーがある場合は、「#1E88E5」のようなカラーコードで伝えると、デザイナーが正確に色を再現できます。ロゴデータがある場合は、そこから色を抽出してもらうことも可能です。
参考デザインを共有する 「この配色のイメージに近づけたい」という参考画像を共有することで、言葉では伝わりにくい色の組み合わせやバランスを共有できます。配色サイトで作成したパレットをそのまま共有するのも効果的です。
NGカラーがあれば伝える 「この色は使いたくない」という情報も、配色イメージを伝える上で有効です。競合と似た色を避けたい場合や、企業として避けたい色がある場合は事前に共有しておきましょう。
配色でよくある失敗と回避策
色を使いすぎてしまう
「いろいろな色を使った方が賑やかで良い」と考えてしまいがちですが、色数が増えるほど統一感が失われ、まとまりのない印象になります。ベースカラー・メインカラー・アクセントカラーの3色構成を基準に、使用する色を絞ることが重要です。
コントラストが弱く視認性が低い
おしゃれな配色を意識するあまり、背景色と文字色のコントラストが弱くなり、文字が読みにくくなってしまうケースがあります。特にバナーやチラシなど、瞬時に情報を伝える必要がある制作物では、視認性を最優先に考える必要があります。Contrast Checkerなどのツールで確認する習慣をつけましょう。
ブランドカラーと世界観が合っていない
ロゴやコーポレートカラーは決まっているものの、配色全体としての世界観が一致していないケースもあります。メインカラーだけでなく、ベースカラーやアクセントカラーとの組み合わせまで含めて、ブランド全体の印象を統一することが重要です。
まとめ
配色はデザインの印象を大きく左右する要素であり、感覚だけに頼らず基本的なルールを押さえることで、伝わりやすく洗練されたデザインに近づけます。
- 70:25:5の法則： ベースカラー・メインカラー・アクセントカラーの比率を意識する
- 色相・彩度・明度： 色相だけでなく彩度・明度のバランスも印象に影響する
- 目的別の配色： 伝えたい印象に合わせて色のトーンを選ぶ
- 外注時の伝え方： カラーコードや参考画像で配色イメージを正確に共有する
配色に迷ったときは、紹介した配色サイトを活用しながら、まずはベースとなる3色を決めることから始めてみてください。デザインを外注する際も、配色の基本を押さえておくことで、デザイナーとのコミュニケーションがよりスムーズになります。