この記事ではカラーの配色（組み合わせ）を考えるにあたって必要な基礎知識や考え方を具体的な配色例を交えながら解説しています。カラーに興味のある方でしたらどなたでも楽しく見ていただけると思います。
できるだけ具体的なものをあげていきますので、実際のプロジェクトでどのようなカラーの使い方ができるか想像しながら読んでみてください。まずは基本的な配色について理解するために、色相環とトーンの概念を解説するところから始めます。
カラーの組み合わせを考える上で知っておくと便利なのが色相環です。色相環とは、色相（色み）を円上に配置したもので、色の関係性を視覚的に把握できるようにしたものです。
色相環はマンセルの色相環やPCCS（日本色研配色体系）、オストワルトの色相環など、さまざまな体系が存在しますが、基本的な考え方はどれも共通していて、色の配置も大きくは変わりません。
いずれの色相環も、色同士の距離感や関係性（類似する色・離れた色・反対の色など）を直感的に理解でき、色の組み合わせを考える際の参考になるものです。この記事では基本的な色相環とPCCSのトーン（後述しますが、色相に彩度や明度を加えた配色の表現図）を参考に解説をしていきます。
色相環を理解することのメリットは、配色を検討する上で
などをスムーズに設計することができるようになることです。それでは具体的に色相環を見ながら配色パターンについていくつか見ていきましょう。
類似色は色相環上で隣接する、もしくは近い位置にある色同士のことを指します。全体的に落ち着いた配色になる傾向にあるので、デザインがしやすい組み合わせです。下図は、類似色の例をいくつか作成したものです。
補色は色相環上で正反対に位置する色同士のことを指します。補色はお互いの色を引き立てあう関係性にあります。目立った色使いをしたい場合に使うことができますが、補色の割合が全体的に多いとコントラストが全体的に強くなり過ぎる場合があるので、補色を使う面積は十分に注意をした方がいいでしょう。
なお、補色と同じような意味合いで使われる言葉で反対色があります。反対色は色相環上でおおよそ反対側に位置する色を指します。つまり補色と補色に隣接する色も含めてざっくり反対側にある色です。（反対色には補色は含まないという考え方もあるみたいです。学術的にどちらが正しいかは私もわかりません。）
スプリット・コンプリメンタリーとは補色（コンプリメンタリー）の片方を分裂（スプリット）させることです。3色以上の有彩色を使う場合、まずは２色を選んだ後、片方の色からもう１色を派生させる方法がありますが、スプリット・コンプリメンタリーもその手法の１つと言えます。２色を選んだ後にもう１色を作成する方法については、この記事でも後述します。
トライアドは色相環を三等分したときの各色の配色を指します。色相環の内側に正三角形をおいて各頂点に対応する色で配色します。トライアドは３色以上の有彩色（グレースケールではない色味のある色）を使う場合で類似色を使わない場合にバランスをとりやすい配色です。一方で彩度が高いままだとややうるさい印象を受けるためポップな配色にするなど意図的にそうする場合を除いて、彩度・明度などトーンの調整が必要になることも多いと思います。
配色方法は他にもありますが、全部見ていくと若干何でもあり感が出てくるので、個人的にはまずはこのくらいに留めておき基本の色使いについての考え方を定着させると良いかなと思います。大切なのは、これはあくまでも配色手法の１つであって、配色を決める際の１つの指針だということです。最終的にはプロジェクトに応じて調整していきますし、配色だけがデザインではないので、他のデザイン要素の影響も考える必要が出てきます。
色味を検討する上で、色相環が役に立つことは分かりましたが、色の印象は色相だけで決まるわけではありません。
彩度・明度の違いによっても、同じ色相であっても受け取る印象は大きく変わります。
次の図は、PCCSにおけるトーンという考え方を表したものです。横軸に彩度、縦軸に明度を置き、それぞれの彩度・明度の組み合わせごとに色相環を配置していきます。色相環が「色味（色相）」に注目して配色を視覚的に検討するためのものだとすると、トーンは彩度と明度を含めた、全体的なカラーバランスを検討するための指標だと言えます。
同じ赤でも、「明るく鮮やかな赤」と「暗くくすんだ赤」では、まったく違う印象になるため、配色を考える際にはトーン（彩度・明度）の視点が欠かせません。
彩度は色の鮮やかさのことで、大きくするとより鮮やかなビビッドな色合いになります。小さくしていくと段々とくすんだ色になっていき、最終的には色味がなくなり無彩色（グレースケール）になります。トーンの図では横軸が彩度です。トーンの右側の色相環は色鮮やかですが、左にいくほどくすんでいき次第に無彩色に近づいていきます。
また言葉として覚えておきたいのは、色味があるものを有彩色、色味がないもの（白・黒・グレー）を無彩色（グレースケール）といいます。
明度は色の明るさの度合いを表す指標です。明度を最大にすると白に近づき、最低にすると黒に近づいていきます。トーンの図では、縦軸が明度を表しています。上側に配置された色相環ほど明るい色になり、下に行くにつれて暗い色へと変化していきます。
トーンの概念を利用して、同一色相や類似色の中で彩度・明度違いで配色を作る方法があります。３色以上の有彩色を使うと２色に比べて難易度が一気にあがりますが、トーン違いの配色を利用すると、まとまりがあって無難なものを簡単につくることができます。
下記は同一色相のトーン違いの例です。明るい色を基調にトーンを変えていく例と、くすんだ色を基調にトーンを変えていく例です。
下記は３色の中で同一色相と類似色を使って、それぞれトーンも調整した例です。
参考までにトーンを再掲しておきます。
３色以上の配色の作り方として、２色を先に決めた後、片方の色からもう１色を作ったり、分裂させたりする手法があります。先述したスプリット・コンプリメンタリーは、まさにその手法で、補色関係にある２色を決めたのち、片方を類似色に分裂させる配色手法でした。またこの章の前で説明したトーン違いの配色でも、１色あるいは２色を決めた後に、そこからトーン違いで色を増やしていました。
先に決めた補色関係にある２色のうち一方の色を類似色に分裂させて３色を作る方法です。
最もシンプルなのが、すでに決めた２色のうち、片方の色相に近い色を追加する方法です。色相環上で隣り合う色を使うため、配色全体に統一感が生まれやすく、破綻しにくいのが特徴です。
すでに決めた２色の方から、彩度・明度違いの色を３色目として作る方法です。バランスがとりやすく簡単につくることができます。
有彩色で３色の配色を作る場合はこのような方法を覚えておくとアイデア出しがずっと楽になります。
無彩色はどの有彩色とも調和します。次の配色例は１つの有彩色に無彩色を加えたものです。
次の配色例は２つの有彩色（補色関係）に無彩色を加えたものです。参考までにトーン違いも作成してみました。
次の配色例は、１つの有彩色に２つの無彩色を加えて３色にしたものです。無彩色同士は調和するので、この３色は比較的簡単に作ることができます。
配色は、ユーザーが無意識に受け取る心理的な印象にも影響します。色によって、「明るい」「落ち着いている」「信頼できそう」「楽しそう」「高級感がある」といった感情に影響を与えます。ただ、これをあまりにも安易に捉えてしまうのも問題だと、個人的には感じています。
例えば、少しトーンの低い濃い青は「信頼」のイメージだとよく言われます。基本的な傾向としては間違いないと思いますが、だからといって青を使えば自動的に信頼感のあるデザインになるかというと、決してそんなことはありません。
理由は大きく2つあります。1つ目は、配色はあくまでデザイン要素の一つであり、それ単体で強い印象や意味を決定づけるものではないという点です。極端な例ですが、濃い青を使っていたとしても、丸みの強いフォントやポップなレイアウトで構成されていれば、「信頼感」とは別の印象を受けるでしょう。
2つ目は、デザイン以前に、ユーザーが「何を見ているのか」というコンテキスト（文脈）が存在するという点です。その前提があって初めて、配色が副次的に心理的な効果を発揮すると私は考えています。
赤いものを見て「辛そう」と感じるのは、それが食品であるというコンテキストがあるからです。ただ同じ赤でも、赤いラーメンは辛そうに見えますが、赤いいちごを見て辛そうだとは感じません。
このように、配色が持つ心理的イメージは、単独で機能するものではなく、コンテキストや他のデザイン要素と組み合わさることで意味を持つものです。色のイメージに頼りすぎず、「誰に」「何を」「どのように伝えたいのか」を起点に配色を考えることが、結果として伝わるデザインにつながります。
例えば、明度・彩度の高い配色は明るくポップな印象を与えますが、これが教材の書影に使われた場合は、「簡単そう」「誰でもできそう」「ビギナー向け」の印象を受けると思います。一方で難しい専門書やアカデミックな書籍は、落ち着いたトーンの配色にすることで、より高度で専門的なイメージ、はたまた権威性を感じることもあります。
各キーワードにマッチする配色例を作りました。また、参考までに、配色例の下に配色方法の説明も入れています。
ポップな印象を与える配色には、複数の色相を組み合わせた多色相配色がよく使われます。多くの色相を使うことで、視覚的な情報量が多くなり、少しがちゃがちゃした賑やかで楽しい印象が生まれます。トライアド（色相環を3等分にした配色）を使えばバランスよく複数の色相を配色することができます。ちなみに、下記の１つ目にある「中差色相」というのは、色相環上でおよそ90度前後離れた色相同士を指します。
レトロな印象を表現するには、くすみのあるトーンで配色することが効果的です。彩度を抑えた色を用いることで、どこか懐かしさや温かみのある雰囲気を演出できます。レトロ配色は、複数の色相を使っても調和しやすく、比較的配色がしやすいと思いますが、黄色みがかった色を加えることで、全体に一気にレトロ感が強まります。
下記の２つ目と３つ目は、スプリット・コンプリメンタリーやトライアド配色をベースにしつつ、トーンを下げてくすみを加えることで、レトロな印象になるよう調整してみました。
お互いの色を引き立て合う反対色（補色やその付近の色相）を使うことでアクティブな配色になり、スポーティーな印象を与えることができます。3色構成にする場合は、そこに無彩色を加えることで、反対色の関係にある2色の効果を損なうことなく、全体を引き締めてまとめることができます。
フェミニンとは、女性的な可愛らしさややわらかさを表す言葉です。フェミニンな配色では、ピンク寄りの色が多く見られますが、必ずしも単一の色相に限定されるわけではなく、パープルやベージュ、淡いグレーなど、比較的幅広い色相を組み合わせることができます。一方でトーンに注目すると、彩度は中程度でややくすみを入れて落ち着きを持たせ、明度は明るめに設定されることが多いのが特徴です。くすみがかったピンクやパープルをベースに考えると配色を作りやすいのではと思います。
高級感やラグジュアリーな印象を与える配色では、彩度・明度ともに低めのネイビーやゴールドを基調に、無彩色を組み合わせることで、落ち着きと重厚感のある表現が可能です。また、使用する色相を1つに限定し、トーンの変化で構成することで、統一感のある洗練された配色に仕上げるケースも多く見られます。色数を抑えることで、派手さを避けつつ、上質さや品のある印象を強調できます。
このほか、赤系の色相をアクセントとして取り入れる方法もあります。特にワインレッドのように、彩度を抑えた深みのある赤は、華やかさを加えながらも落ち着いたラグジュアリー感を演出することができます。
研究機関や教育機関、学術的な文脈で使われることが多いキーワードです。アカデミックな印象を与えるためには、色相は類似色相にとどめ、彩度・明度はいずれも低めに設定することで、落ち着きがあり、安定した印象を作ることができます。
また、これらに無彩色を組み合わせることで、配色全体がシックに引き締まり、情報の整理された印象になります。派手さを抑え、配色としての主張を控えめにすることで、信頼性や知的さ、客観性を感じさせる表現につながります。使われる色相としては、比較的青系が多い印象がありますが、必ずしも青に限定する必要はなく、取り扱う分野やテーマに応じて、最適な色相を選択することが重要です。例えば、環境に関する学術書であれば、緑系の色相を用いることで内容と調和した配色になるでしょう。
渋さやダンディな印象を与える配色では、彩度・明度ともに低めに抑えた色が用いられます。色の主張を抑えることで、落ち着きやどっしりとした重厚感、経験を感じさせる印象が生まれます。色相の観点では、暖色系・寒色系のどちらも使用可能です。暖色系ではブラウンやワインレッド、寒色系ではネイビーやダークグリーンといった色が使われる傾向にあります。暖色系でまとめれば、温かみのある渋さを演出でき、寒色系で構成すれば、冷静さや硬質さを感じさせる渋みになります。
和風の配色では、トーンを落とした暗めの緑や青がよく使われます。これらは松や藍染など、日本の自然や伝統素材を連想させ、落ち着きや品のある印象を与えます。また、神社仏閣や和装、漆器など、日本文化に関連する赤を配色に取り入れることもよくあります。全体的には、彩度・明度が低めなものが多いです。
アースカラーは、地球上に存在する自然物（土・木・岩・植物など）を連想させる色の総称です。基本的には緑系・赤系・黄系でトーンを落としたくすんだ暗めの色を配色に入れることが多く、人工的な印象が少なく、安心感や落ち着きを与える配色です。
同じ配色であっても、柄の有無やその強さによって、受け取られる印象は大きく変わります。
配色を行ったうえで、さらに柄をうっすらと加えることで、その心理的効果をより強めることができる場合があります。ここで紹介する内容は、直接的な配色の話ではありませんが、色の印象を補強する要素としての柄という観点から、いくつか例を挙げてみます。
例えば、ポップな配色にドット柄を入れるとポップさが補強されます。（上は柄なし、下が柄あり）
次の例は、レトロな配色に古紙調の画像を乗算でうっすら合成したものです。
他にも高級・ラグジュアリーな配色に革調パターン、和風配色に和柄パターンを合成すると次のように印象が少し変わります。
Webデザインではロゴやバナーとは異なりベースカラーが無彩色になることがほとんどで、有彩色がベースカラーになることはあまりありません。多くの場合、無彩色をベースにし、要所でアクセントカラーとして有彩色を使うことで、視認性とデザイン性の両立を図ります。
コーポレートサイトやランディングページでは文章を読んでもらう必要があるので、白やグレー背景に黒字のテキストが一般的になることは必然だと思います。無彩色をベースにつくりつつ、有彩色で印象を与えることが重要です。ランディングページはやや有彩色が多く賑やかなものが多い印象もありますが、いずれにせよ制作するWebサイトのコンセプト次第でカラーを決めていきますので、情報を見せるためのものなのか、賑やかしが必要なのか、表現したいブランド観や世界観はどのようなものなのか、配色が与える心理的な影響を加味しながら配色とその割合を考えましょう。
Webデザインでは、ボタンやタブ、トグルスイッチなどにおいて、現在アクティブなのか、非アクティブなのかといった状態を明示する必要があります。例えばボタンなら、通常時とマウスオーバー時、無効の場合などが挙げられますが、次のような色の使い分けはよく見かけると思います。
通常時とマウスオーバー時は逆でも問題ありません。全体の配色バランスを考慮して決めるべきだと思います。全体的に濃い色が多い場合は、上記の例の通常時とマウスオーバー時は逆にした方が良いでしょう。
タブの場合は、選択中か未選択かで色を使い分けます。
通常/マウスオーバーやON/OFFなどの状態変化を示すには、有彩色⇔無彩色で切り替えたり、トーンを大きく変化させることで、状態が異なることを明確に示します。色相を変えずにコントラストだけを切り替えることで、直感的に状態の違いを伝えることができます。
次のボタンは申込みでLINEかフォームを選択できるようになっています。LINE申し込みボタンは、LINEのブランドカラーである緑を使うことで、ユーザーが機能を直感的に理解しやすくなります。
フォーム入力において必須と任意のラベルのコントラスト差を大きくすることで必須項目をひと目でわかるようにします。もっとも任意の方はラベル自体をつけないフォームも多いですが。
以下はユーザーに次のステップを選択させるUIですが、ECサイトや業務ツールなどでよく見かけるデザインです。基本的にはキャンセルボタンには何かを意味するような色を持たせずニュートラルな色を使用します。一方のキャンセルではなく購入など実行を意味するボタンは、基本的な色は決めておきつつも、退会は赤にするなど内容に応じて色を検討すると良いでしょう。
配色にはさまざまなテクニックがありますが、それらはあくまで配色を考えるための手法の一つに過ぎません。実際のデザインでは、それらを参考にしつつ、細かなトーンや色相の調整を行いながら最終的な配色を決めていくことが重要になります。
もっともWebサイトや企業の営業資料、名刺などの商業デザインを制作する場合、コーポレートカラーやブランドカラーがあらかじめ定められているケースも多いでしょう。その際は、それらのガイドラインを前提としながら、全体のバランスや用途に応じて配色を組み立てていくことが求められると思います。
配色は単なる装飾ではなく、伝えたい内容やブランドの印象を支えるための設計要素です。
目的と文脈を意識しながら、適切な配色を作りましょう！
