配色とは?意味と3つの役割、身近な例から配色の考え方を初心者向けに解説

配色とは?意味と役割

まずは配色という言葉の意味と、配色がデザインの中でどんな役割を果たしているのかを押さえましょう。

配色とは「色の組み合わせ」と「使い方」を決めること

配色とは、2つ以上の色を組み合わせること、また、その組み合わせた色のことです。

デザインの場面では、ここに「どの色を、どこに、どれくらいの量で使うか」を決めることまで含めて配色と呼ぶのが一般的です。

なぜなら、色は1色だけを見たときと、ほかの色と並べたときとで見え方が変わり、さらに使う場所や面積によっても印象が大きく変わるからです。

下の2つの見本は、どちらもまったく同じ3色を使っています。

同じ緑・アイボリー・サーモンピンクの3色でも、どこにどれだけ使うかで印象が変わる

左の見本はアイボリーを広い背景に使い、緑をヘッダー、サーモンピンクをボタンだけに使っているので、落ち着いた中でボタンに自然と目が向きます。

右の見本はサーモンピンクを背景いっぱいに使っているため、にぎやかで甘い印象になり、ボタンの目立ち方も変わっています。

このように、配色は「何色を選ぶか」だけでなく、「選んだ色をどう配置するか」までを考える作業だと覚えておきましょう。

配色の3つの役割

配色には、大きく分けて次の3つの役割があります。

• 印象・雰囲気を作る:
  「落ち着いている」「元気」「高級そう」といった、見た人が最初に受ける印象を作ります。
• 情報を整理して伝える:
  見出しやボタンなど、大事な部分とそうでない部分を色の強弱で分け、どこを見ればよいかを伝えます。
• 読みやすさ・使いやすさを支える:
  文字と背景の色の差をはっきりさせ、誰にとっても読みやすく、操作しやすい画面にします。

同じレイアウト・同じ文章でも、配色を変えるとこの3つがすべて変わります。

同じ告知カードを、配色だけ変えて並べた見本

Aは紺と白の組み合わせで、まじめで落ち着いた印象になり、見出しとボタンが同じ紺なので情報のまとまりも分かりやすくなっています。

Bはクリーム色の背景にマゼンタの見出しとオレンジのボタンを合わせ、楽しくにぎやかな印象に変わりました。

Cはわざと読みにくくしたNG見本で、文字の色が背景に近すぎて、日時もボタンの文字もほとんど読めません。

Webのアクセシビリティ(年齢や障害の有無、利用環境にかかわらず誰でも使えること)の国際的なガイドラインであるWCAGでは、本文の文字と背景の明るさの差を「コントラスト比」で表し、4.5:1以上を最低限の基準にしています(WCAG 2.2 達成基準 1.4.3 コントラスト(最低限)、WAICによる日本語訳)。

AとBの文字はこの基準を満たしていますが、Cの日時の文字は約2.2:1、ボタンの文字は約1.3:1しかありません。

配色は見た目の好みだけでなく、伝わりやすさと読みやすさまで左右するものだと考えましょう。

コントラスト比の詳しい基準はコントラスト比とは?、色の強弱で情報を整理する方法は情報の優先順位と色とは?で解説しています。

配色はWebデザインだけのものではない

配色はWebデザインに限らず、色を組み合わせるあらゆる場面で使われている考え方です。

服を選ぶときに「このシャツにはどのパンツが合うか」と考えるのも、部屋のカーテンをソファの色に合わせて選ぶのも、立派な配色です。

身近な場面の配色の例(色はイメージ)

4つの見本は使っている色も場面もばらばらですが、どれも「土台になる色を広く使い、伝えたい部分にだけ目立つ色を少し使う」という共通の考え方で組み立てられています。

たとえばプレゼン資料では、ほかの棒をグレーにして伝えたい棒だけをオレンジにすることで、「ここが一番伸びた」というメッセージがひと目で伝わります。

この「土台の色・主役の色・目立たせる色」という役割分担は、Webデザインでもベースカラー・メインカラー・アクセントカラーとして使われていて、ベースカラー・メインカラー・アクセントカラーとは?で詳しく解説しています。

身の回りにある配色の上手な例に気づけるようになると、Webデザインの配色にもそのまま応用できます。

「配色」と「カラースキーム」「カラーパレット」の違い

配色について調べていると、「カラースキーム」や「カラーパレット」という似た言葉もよく目にします。

3つはほぼ同じ意味で使われることもありますが、ざっくり次のように区別しておくと混乱しにくくなります。

言葉	おおまかな意味	使われる場面の例
配色	色を組み合わせること、またその組み合わせ。デザインでは、どこにどれだけ使うかまで含めることが多い	「このサイトの配色を考える」
カラースキーム	英語のcolor schemeで、配色とほぼ同じ意味。Web制作ではライトモード・ダークモードのような表示の色の切り替えを指すこともある	「ダークモード用のカラースキームを用意する」
カラーパレット	デザインで使う色を、カラーコードと一緒に一覧にまとめたもの。どこに使うかまでは含まないことが多い	「ブランドのカラーパレットから色を選ぶ」

カラーパレットという名前は、画家が絵の具を出して混ぜる板の「パレット」から来ていて、「使える色の手持ち」をまとめたものだと考えると分かりやすいでしょう。

一方の配色は、そのパレットの色を、背景・見出し・ボタンといった場所に割り当てるところまでを含む、より広い考え方です。

なお、CSSにはcolor-schemeというプロパティがあり、ページがライト・ダークのどちらの配色に対応しているかをブラウザーに伝えるために使われています(MDN Web Docs「color-scheme」)。

Web制作の現場で「カラースキーム」と言われたら、色の組み合わせの話なのか、ライト・ダークの表示の話なのかを文脈で確かめましょう。

配色を考えるための材料

配色を考えるときは、色をなんとなく選ぶのではなく、「色の三属性」「トーン」「面積と配置」という材料に分けて考えると整理しやすくなります。

ここではそれぞれの意味をざっくり紹介し、詳しい内容は個別の記事に任せます。

色の三属性(色相・明度・彩度)

色の見た目は、色相・明度・彩度という3つの性質の組み合わせで表すことができ、これを「色の三属性」と呼びます。

• 色相(しきそう):
  赤・黄・緑・青といった、色みの種類のことです。
• 明度(めいど):
  色の明るさのことで、白に近いほど高く、黒に近いほど低くなります。
• 彩度(さいど):
  色の鮮やかさのことで、鮮やかなほど高く、グレーに近いくすんだ色ほど低くなります。

色の三属性のうち、1つだけを変えて並べた見本(色はイメージ)

上の段は色相だけを変えたもので、赤から紫まで色みの種類が変わっています。

中の段は同じ青のまま明度だけを、下の段は同じ青のまま彩度だけを変えたもので、色みは同じでも印象がかなり違って見えます。

下の段の右端のように彩度がなくなった白・黒・グレーは「無彩色」、色みのある色は「有彩色」と呼ばれます。

配色を考えるときは、「色相を変えるのか、明度や彩度を変えるのか」を意識するだけで、色の選び方に理由を持てるようになります。

色相の並びは色相環とは?、明度と彩度が印象に与える影響は明るい色・暗い色の印象の違いとは?と鮮やかな色・くすんだ色の印象の違いとは?、無彩色の使い方は有彩色・無彩色とは?で解説しています。

トーン(明度と彩度をまとめた色の調子)

トーンとは、明度と彩度をひとまとめにした「色の調子」のことです。

日本の配色学習で広く使われているPCCS(日本色研配色体系)を開発した日本色彩研究所も、トーンを「明度と彩度を複合した色の調子」と説明しています(一般財団法人日本色彩研究所「PCCS(日本色研配色体系)とは」)。

明度と彩度を別々に考えるより、「淡い」「鮮やか」「暗い」といった調子でまとめて考えたほうが、色のイメージを言葉にしやすいからです。

たとえば「赤・黄・青」のように色相がばらばらでも、全部を淡いトーンにそろえると、やさしくまとまった配色になります。

トーンを使った配色は明度・彩度を使った配色とは?、PCCSの仕組みはPCCSとは?で詳しく解説しています。

面積と配置

配色では、どの色を選ぶかと同じくらい、その色をどれくらいの面積で、どこに置くかが大切です。

最初の「森のパン教室」の見本のように、同じ3色でも面積と配置を入れ替えるだけで、印象も目立つ場所も変わってしまうからです。

また、同じ色でも、広い面積に塗ると小さな色見本で見たときより明るく鮮やかに(暗い色はより暗く)感じられたり、まわりの色によって明るさが違って見えたりします。

面積による見え方の変化は色の面積による見え方とは?、背景による見え方の変化は背景色による色の見え方とは?、面積の目安になる比率は色の割合とは?で解説しています。

配色を決める大まかな流れ

配色はセンスでいきなり色を選ぶものではなく、順番に考えていけば初心者でも組み立てられます。

ここでは全体の流れだけを短く紹介し、各ステップの詳しいやり方は関連記事に任せます。

目的から確認までの5ステップ

配色は、次の5つのステップで考えると迷いにくくなります。

1. 目的を決める:
   そのデザインで何を伝えたいのか、見た人にどう行動してほしいのかを言葉にします。
2. 届けたい相手を考える:
   年代や好み、利用する場面など、誰に向けたデザインなのかを考えます。
3. 基準の色を1つ決める:
   ブランドカラーやロゴの色があればそれを、なければ目的と相手に合う色を1つ選びます。
4. 組み合わせる色と役割を決める:
   基準の色に合う色を選び、背景・見出し・ボタンなど、どの色をどこにどれだけ使うかを決めます。
5. 確認する:
   文字が読みやすいか、目的どおりの印象になっているかを確かめ、必要なら調整します。

ステップ1と2で「何のために、誰に向けて」を先に決めておくと、ステップ3以降で色を選ぶときの判断の基準になります。

ただし、「青は誠実」「赤は元気」のような色の印象は、よく見られる一般的な傾向であって、決まりではありません。

同じ色でもトーンや組み合わせる色、見る人の年代や文化によって受け取られ方は変わるので、ステップ5で実際に人に見てもらい、意図どおりに伝わるかを確かめることが大切です。

各ステップの考え方は、目的はデザインの目的と配色とは?、相手はターゲットに合わせた色選びとは?、商品やサービスの特徴は商品・サービスに合わせた色選びとは?で解説しています。

配色のルールとツールは「配色の基本」の記事へ

ステップ4で「どの色を組み合わせればまとまるのか」を判断するには、配色の基本ルールを知っておくと近道です。

色相環の位置関係で選ぶ、トーンをそろえる、色に役割を与えて面積に差をつける、といった具体的なルールと、色の組み合わせを自動で提案してくれる配色ジェネレーターの使い方は、配色の基本とは?5つのルールと配色ジェネレーターの使い方でまとめて解説しています。

色について何から順番に学べばよいか知りたいときは、デザイン初心者のためのカラー学習ロードマップも参考にしてください。

配色を考えるときのポイント

配色を考え始めたばかりのころに陥りやすい間違いと、よくある疑問をまとめます。

注意点・よくある間違い

• 自分の好きな色から決めてしまうことがあります。
  配色は見る人に伝えるためのものなので、まず目的と届けたい相手を決めてから色を選びましょう。
• 色をたくさん使えば華やかになると考えてしまうことがあります。
  色が増えるほど、どこが大事なのかが伝わりにくくなるので、まずは3色程度から始めるのがおすすめです(色数を増やしすぎない考え方とは?)。
• 大事な情報を色だけで伝えてしまうことがあります。
  色の見え方は人によって違うため、エラーを赤い色だけで示すのではなく、アイコンや文字も添えましょう(色だけに頼らないデザインとは?)。

よくある質問

• Q. 配色はセンスがないと上手にできない?
  A. センスだけで決まるものではありません。
  色の三属性や役割分担といった考え方を知り、うまくいっているデザインの色を観察して理由を言葉にする練習を重ねれば、少しずつ上達します。
  観察の練習方法は実際のデザイン分析とは?で紹介しています。
• Q. 配色は英語で何と言う?
  A. 英語ではcolor scheme(カラースキーム)や、color combination(カラーコンビネーション)などと表されることが多いです。
  海外の配色ツールや資料を探すときは、これらの言葉で検索すると見つけやすくなります。
• Q. Webデザインの配色と、印刷物の配色は同じ考え方でいい?
  A. 色を組み合わせる考え方は同じです。
  ただし、画面は光で色を表し(RGB)、印刷はインクで色を表す(CMYK)ため、同じ色を指定しても見え方が変わることがあります。
  違いはRGBとCMYKの違いとは?で解説しています。

まとめ

配色とは、2つ以上の色を組み合わせることで、デザインでは「どの色を、どこに、どれくらい使うか」までを決めることを指します。

配色には、印象を作る、情報を整理する、読みやすさを支えるという3つの役割があり、Webだけでなく服やインテリア、資料づくりなど身近な場面でも使われています。

考えるときは、色の三属性・トーン・面積と配置という材料に分け、目的と相手から順番に決めていくと迷いにくくなります。

まずは今日着ている服や、よく見るWebサイトを1つ選び、使われている色を3つ書き出して、どの色が一番広い面積に使われているかを観察してみましょう。