どうも、フリーランスデザイナーのヨシダマサ（@onof_yoshi）です。
配色はデザイン制作において、重要なスキルです。
しかし、プロでも色選びに苦労しているデザイナーは多いと思います。
そんな人に共通しているのは、色や配色の基礎がしっかりと身についていないということ。
・色を基本をしっかり勉強したい
・配色が苦手で色選びに時間がかかる
今回はこんなお悩みにお答えします。
この記事でわかること
- 色もつ効果とその役割を理解できる
- 色の基礎知識が学べる
- トーンについてわかる
- 色が持つイメージが理解できる
- 使いやすい配色パターンがわかる
- 色の視覚効果をデザインに活かせる
本記事の信頼性
・グラフィックデザイナー歴25年
・現役フリーランスとして18年以上
活動しています。
デザインにおける色の役割や基礎、配色の王道パターンまで、初心者にもわかりやすく解説していきます。
この記事を読むことで、色に対する理解度が深まり、配色について迷うことが少なくなります。
気になった人は、ぜひ最後まで読んでみてください。
そして、基礎がしっかりと身につくまで、何度でもこの記事を読み返してください。
はじめに色がもつ効果や役割を理解しよう
配色とは何か？
配色とは、デザインにおける色の組み合わせや配置のことを指します。
単に好きな色を並べるだけではなく、色をどう選び、どう組み合わせるかでデザインの意図やメッセージが大きく変わります。
例えば、Webサイトのボタンの色ひとつとっても、クリック率に大きく影響します。
バランスのとれた配色は、見る人の心を惹きつけ、情報を効果的に伝える力を持っています。
逆に、まとまりのない配色は、内容がどんなに素晴らしくても、見づらく、印象に残らないものになってしいます。
だからこそ、デザインにおいて配色は非常に重要な要素と言えるでしょう。
配色はプロのデザイナーでも悩むほど奥が深いですが、色がもつ効果や役割を正しく理解すれば、他のライバルよりもデザインの幅を広げることができます。
色が持つ「心理的効果」とは？
色には、それぞれ特有の心理的な効果があります。
たとえば、赤は「情熱」や「エネルギー」を感じさせる一方で、青は「冷静さ」や「安心感」を伝えます。
このように、色が持つ心理的な影響を知ることで、デザインに込めるメッセージをコントロールできるようになります。
まずは日常の中で目にする色に注目して、どんな印象を受けるのか考えるクセをつけましょう。
色が持つ心理的効果については、後ほどくわしく解説します。
配色でデザインの「目的」を伝える
デザインには、必ず伝えたい「目的」があります。
商品の魅力を伝えるためだったり、ブランドの信頼性を表現したりと、配色しだいでデザインの目的が効果的に伝わるかどうかが決まります。
例えば、飲食店のメニューで赤やオレンジを使えば、食欲を刺激する効果が期待できます。
一方で、医療関係のサイトでは、信頼感を与えるために青や白がよく選ばれます。
デザインの目的を意識しながら配色を考えることで、見る人に的確にメッセージを伝えられるようになるでしょう。
色の表現方法
みなさんが見ているすべてのものには色があります。
まずは、PCなどのディスプレイや印刷物での色の表現方法という根本的な部分から、配色の基本を学んでいきましょう。
色の表現については、大きく2つの方法があります。
- 光の3原色（RGB）
- 色料の3原色（CMYK）
ではさっそく、解説していきます。
光の3原色（RGB）
私たちが画面やディスプレイで見る色は、「光の3原色」と呼ばれる赤（Red）、緑（Green）、青（Blue）をもとに作られています。
この3つの色を組み合わせると、なんと1677万色を表現できるとのこと。
たとえば、赤と緑を混ぜると黄色に、青と緑を混ぜると水色になります。そして、赤・緑・青をすべて重ねると「白い光」になります。
これを「加法混色」と呼びますが、要するに光が強くなるほど色が明るくなる仕組みです。
RGBはおもにディスプレイやWebデザインで使われる色の仕組みです。
モニターを通じて色を見る場合は、このRGBが基本になりますね。
たとえば、ウェブサイトのバナーを作るときには、この仕組みを理解しておくと、より正確に色を表現できるようになりますよ。
色料の3原色（CMYK）
印刷物では、「色料の3原色」として知られるシアン（Cyan）、マゼンタ（Magenta）、イエロー（Yellow）が基盤になります。
さらに、黒（Key Plate）を加えた「CMYK」という方式で色を作るのが一般的です。
この3色を組み合わせて色を表現し、黒を加えることで色の深みやシャープさを出すことができます。
光の3原色とは異なり、色を重ねるほど暗くなり、すべての色を混ぜると黒に近い色になります。
これを「減法混色」といいます。
印刷物をデザインする際には、このCMYKを理解することが必須です。
たとえば、ポスターや名刺、パンフレットを印刷するときには、このCMYKが使われます。
デザインが画面上では鮮やかだったのに、実際に印刷してみると色がくすんでしまうことがあります。
理由はいくつかありますが、RGBとCMYKという表現方法の違いが一番の原因です。
印刷物を作るときにはこの仕組みを理解して、より正確な色を表現できるようにしていきましょう。
色の3つの属性
全ての色は3つの特性を持っていて、これを下の「色の3属性」といいます。
色の3つの属性は以下のものです。
色の3属性
- 色相
- 明度
- 彩度
「色相」「明度」「彩度」の基本を理解しておけば、初心者でも効果的な配色を作ることができるので、ここで特性をしっかりと押さえておきましょう。
色相
色相とは「色そのものの種類」を指します。
赤、青、黄色など、色が持つそれぞれの性質を表しているのが色相です。
たくさんの色相が円状に並んだ「色相環（しきそうかん）」というものを見たことがある人もいるかもしれません。
色相環を見ると、隣り合う色は似た印象を持ち、反対側に位置する色は対照的な印象を与えるということが分かると思います。
初心者が配色を考えるときには、まずこの色相環を使ってシミュレーションをすることで、色相の関係性の理解度がグッと深まります。
明度
明度は色の「明るさの度合い」を表します。
簡単に言うと、色がどれくらい明るいか、あるいは暗いかということです。
同じ赤色でも、明るい赤もあれば、暗い赤もあります。
これは明度が違うからです。
一番明るい状態を「白」、一番暗い状態を「黒」として、その間に様々な明るさの段階があるというイメージです。
灰色はこの明度の中間色にあたりますね。
デザインにおいて、明度を意識することは非常に重要です。
なぜかというと、明度の差をつけることで、文字を見やすくしたり、デザインに奥行きを出したりすることができるからです。
例えば、背景が明るい色なら文字は暗い色にすると読みやすくなります。
このように明度を理解し、使いこなすことで、デザインのクオリティを高めることができます。
彩度
彩度とは「色の鮮やかさの度合い」です。
色の強さとも言えるかもしれませんね。
彩度が高い色を「純色」といって、混じりけのないビビッドで鮮やか、生き生きとした印象を与えます。
反対に彩度が低い色は、くすんだ落ち着いた印象を与えます。
彩度を調整することで、デザイン全体の統一感を生み出すことができます。
たとえば、背景に低彩度の色を使って、目立たせたい要素に高彩度の色を取り入れると、効果的なアクセントが作れます。
ただし、全体を高彩度でまとめると目が疲れてしまう場合もあるので、バランスが重要です。
彩度のコントロールを練習しながら、作品にメリハリを加えてみましょう。
色の種類について
色選びを上手にするには、色の種類を知ることが大切です。
これから解説する8つの色の種類を押さえておくと、デザインの目的にあった配色をスムーズに選ぶことができるようになります。
8つの色の種類
- 有彩色と無彩色
- 暖色と寒色、中性色
- 類似色、補色、反対色
順番に解説していきます。
有彩色と無彩色
色を大きく分けると「有彩色」と「無彩色」の2種類に分類できます。
有彩色とは、赤、青、黄、緑など、色味のあるものを指します。
無彩色は白・黒・グレーのように色味を持たない色の総称です。
無彩色は落ち着きやシンプルさを表現するのに適しており、有彩色の引き立て役としても活躍します。
デザインにおいては、有彩色と無彩色をうまく組み合わせることで、バランスの取れた仕上がりになります。
まずはこの2つの違いを意識して配色に取り組んでみましょう。
暖色と寒色、中性色
色には「暖色」「寒色」のように温度感があります。
たとえば、赤やオレンジ、黄色のような「暖色系」は、温かさや活力を感じさせます。
また、青や水色といった「寒色」は、寒さや涼しさをイメージさせる色です。
そして、暖色にも寒色にも属さないのが「中性色」で、緑系や紫系などが中性色に含まれます。
中性色は、暖色と寒色の中間的な役割を果たし、他の色との調和を促してくれる色です。
デザインをする際には、それぞれのカテゴリーが持つイメージを意識して、配色を選ぶといいでしょう。
類似色、補色、反対色
色同士の関係を知ることも配色の基本です。
まず「類似色」とは、先ほどご説明した色相環で隣り合う色のこと。
たとえば、「青と水色」や「赤とオレンジ」などですね。
類似色は統一感のあるデザインに適しており、柔らかい印象を与えます。
つぎに「補色」は、色相環で正反対に位置する色同士を指します。
たとえば、「赤と緑」や「青とオレンジ」など。補色を組み合わせるとコントラストが強くなり、目を引くデザインができます。
また、「反対色」という言葉もありますが、これは補色と似た概念で、色相環で離れた位置にある色のことです。
反対色のバランスを工夫すれば、視覚的なインパクトを作り出すことができます。
どの関係性を活用するかで、デザインの雰囲気やメッセージが大きく変わります。
みなさんも、色相環を参考にしながら、ぜひ色の組み合わせを試してみてください。
トーンとは
トーンとは簡単にいうと「色の雰囲気」のことです。
同じ色相でも、鮮やかな赤もあれば、くすんだ赤もあります。
色の印象は「トーン」によって大きく変わります。
トーンが持つイメージを活用すれば、意図するイメージを的確に表現することができます。
トーンと印象
トーン（色調）は、色相（赤や青などの色の種類）、彩度（色の鮮やかさ）、明度（色の明るさ）の3つの要素が組み合わさって作られます。
同じ色相であってもトーンによって色の印象は大きく変わります。
たとえば、図のように明るいトーンはポップな印象を与えたり、暗いトーンは落ち着いた印象を与えたりします。
デザインをする際に、どんな印象を与えたいのかを考えながらトーンを選ぶことで、より意図に沿った表現ができるようになります。
子供向けのイラストを作成するなら、明るく鮮やかなトーンをたくさん使うと良いでしょう。
一方で、高級感のあるブランドのロゴを作成するなら、落ち着いたトーンを使うと、洗練された印象を与えることができます。
このように、トーンを意識するだけで、デザインの幅が大きく広がっていきます。
色が持つイメージ
色には、それぞれ独特の印象を与えたり、感情をコントロールしたりする効果があります。
色が持つイメージを利用して、見る人に意図したメッセージを届けられるデザインを制作していきましょう。
ここでは、色が持つ基本的なイメージを掘り下げいきます。
2つの色の感情
色に対する感情には、「表現感情」と「固有感情」の2つの種類があるんです。
表現感情とは「好き、嫌い」のような主観的な感情、固有感情とは「熱い、寒い」のような客観的な感情のことをいいます。
表現感情は、人によって感じ方が異なるので、共通するイメージを表現するのはむずかしいですが、固有感情は、ある程度共通した普遍的な感情です。
デザイン配色を選ぶ際は、多くの人が共通して持つ固有感情を意識することがポイントです。
色から受けるイメージ
配色でよく使われる色から受ける代表的なイメージをご紹介します。
初心者でも使いやすい配色パターン
配色が苦手な人は「どうやって色を組み合わせればいいのかわからない」と悩むことも多いですよね。でも大丈夫。
初心者でも使いやすい配色パターンを活用すれば、自然でバランスの良いデザインを作ることができます。
ここでは、覚えておくと便利な3つのパターンをご紹介します。
王道の配色3パターン
- 同系色でまとめる配色
- 補色を使った配色
- 定番色の配色
順番に解説していきます。
同系色でまとめる配色
同系色でまとめる配色は、初心者でも失敗しにくい、とても使いやすい配色パターンです。
同系色とは、色相環でとなりあっている色のこと。たとえば、青と水色、黄色とオレンジなどが同系色にあたります。
この同系色を組み合わせることで、統一感のあるまとまった印象のデザインを作ることができます。
同系色で配色するときは、色の明るさや鮮やかさに変化をつけると、単調にならず、より魅力的なデザインになります。
たとえば、薄い水色をベースに、濃い青色をアクセントとして使うと、メリハリがついて、奥行きのある表現ができます。
最初は、2色で同系色の配色を練習して、慣れてきたら、もう1色の数を増やしてみるとよいでしょう。
補色を使った配色
補色とは、色相環で正反対の位置にある色の組み合わせのことです。
たとえば、赤と緑、青と黄色などが補色にあたります。
補色を組み合わせると、お互いの色を引き立て合い、とてもコントラストの強い配色になります。
このコントラストの強さを上手に利用すると、デザインにインパクトや躍動感を与えることができます。
ただし、補色同士をそのまま使うと、色が強く出すぎて、ごちゃごちゃした印象になってしまうこともあります。
補色配色のときは、どちらかの色をメインにして、もう片方の色をアクセントとして使うと、バランスの取れた配色になります。
定番色の配色
世の中にはたくさんの色が溢れていますが、その中でも「定番色」というものがあります。
春のキャンペーンチラシであれば桜をイメージさせる「ピンク系」、サマーキャンペーンであれば海や光をイメージさせる「水色×黄色」。クリスマスシーズンは「赤×緑」など。
「定番色」を使うとプロのデザイナーのように、季節ごとのイベントやシーンのイメージにあった、センスのいい配色を使いこなすことができます。
配色の視覚効果・視認性
色には人にさまざまな影響を与える力があります。
ここでは代表的な色の作用のうち、デザイン制作時に知っておくと便利な3つをご紹介します。
- 進出色と後退色
- 膨張色と収縮色
- 色の視認性
それでは解説していきます。
進出色と後退色
同じ形の色でも、色相が異なると突出して見えたり、へこんで見えたりします。
図のように赤系の中央の部分は、手前に少し飛び出して見えると思います。逆に紺色は、中央部分がへこんで見えませんか？。
このように、赤やオレンジの暖色系の色は「進出色」、青など寒色系の色は「後退色」といわれています。
膨張色と収縮色
膨張色は、実際よりも大きく見える色で、白や明るい色が膨張色の代表です。
一方で、収縮色は小さく引き締まって見える色で、黒や暗い色などが該当します。
この特性をうまく使えば、デザインに動きやバランスを加えられます。
●column
膨張色と収縮色では、重さに対しても感じ方が変わります。
引越し会社の段ボールに白色が多いのは、心理的に重量が軽く感じるからなんです。
色の視認性
視認性とは、どれだけ見やすいか、はっきりと認識できるかを指します。
色選びにおいて視認性を考えることは、文字を読ませるデザインではとくに重要です。
たとえば、背景色と文字色のコントラストが低いと、読みにくくなってしまいますよね。
黒と白の明度差がある色を使うと、文字などが認識しやすくなります。
このようにはっきりと見えることを「視認性が高い」といい、見えにくいことを「視認性が低い」といいます。
地図やグラフにように、小さくても内容をきちんと伝えなければいけない要素については、視認性を意識した配色を心がけましょう。
まとめ
今回は、デザインにおける色の役割や基礎、配色の王道パターンまで、初心者にもわかりやすく解説しました。
あらためて記事のポイントまとめてみます。
- 色もつ効果とその役割
- 色の基礎知識について
- トーンについて
- 色が持つイメージ
- 使いやすい配色パターン
- 色の視覚効果をデザインに活かす
目を惹く配色ができるデザイナーは、みんな色の基礎がしっかり身についています。
配色の基礎をしっかりと固めて、デザインの質を上げていきましょう。
最後まで読んでいただきありがとうございます。
