デザイン

デザイン初心者でも簡単にプロの配色をマスターする

デザイン初心者でも簡単にプロの配色をマスターする

デザイン初心者の人が作った、手描きの折り込みチラシは、温かみのあるいい印象を受けることがあります。一方で、デザイン初心者の人が作った、Webサイトのバナー画像やヘッド画像は、いい印象を受けることが少なく感じます。

同じデザイン初心者でも、印象が違ってしまう原因のひとつは「配色」です。

味のある折り込みチラシは、大抵一色か二色ですが、Webのバナー画像やヘッド画像となると、フルカラーになります。配色の知識がないと、途端に素人くささが浮き彫りになってしまうんです。

配色は、感情やイメージを伝えるために大切な要素です。

そこで、たとえデザイン初心者の人でも、簡単にプロに近づく配色ができる方法をご紹介したいと思います。

これは、僕の十数年のデザイナーとしてのキャリアから体得したものなので、一般的ではないかもしれません。(一応、カラーコーディネーターの資格も2級ですが持ってます)

ですが、もしもあなたが「デザイン初心者だけどプロっぽく配色したい!」という要望があれば、ぜひ読んでみてください。

スポンサード リンク

プロの配色に必要な予備知識

プロに近づく配色をするために必要な知識は、ずばり「トーン」と「比率」です。

トーンと比率を説明する前に、まずは予備知識として、色の基本である「色の三大要素」を知ってください。

色の三大要素

色には三大要素(色相・明度・彩度)があります。この3つの要素の組み合わせで、さまざまなイメージを表現できます。

なるべく簡単に配色できるように、難しい概念や理論は説明を省きます。詳しく知りたい場合は、下に載せているリンク先などで学んでみてください。

色相環と明度と彩度の説明

色相環と明度と彩度

色の三大要素について、日本電色工業株式会社さんのHPの説明がわかりやすかったので抜粋します。

色相

赤、黄、緑、青、紫という言葉で区別できる色の性質です。お互いが連続してつながりあって色相の輪をつくります。

明度

色には色相とは別に明るい色、暗い色というように色を比較して区別することができます。明るい色はさわやかで軽快な感じの色に、また、暗い色は重厚で落ち着いた感じの色になります。これを色の”軽重感”といいます。

彩度

色の鮮やかさやくすみの程度を数量的に表したのが彩度です。鮮やかな色ははなやかな目立つ色になりますし、くすんだ色には、おだやかで上品な色が多いようです。これを”派手地味感”といいます。

参照サイト:日本電色工業株式会社

見落としがちですが、色相にも明度が存在しています。色相を白黒にしてみると、黄色は明度が高く、青や紫は明度が低いということがわかると思います。

明度の説明

色相にも明度がある

色が持つイメージ

色の三大要素について知ってもらったところで、色が持つイメージについて、整理しておきたいと思います。この感覚は、デザイナーでなくても、誰もが持っている感覚だと思います。

つぎのようなイメージです。

「色相」のイメージ

  • 赤 ⇒ 太陽・怒り・情熱
  • 青 ⇒ 海・冷たい・冷静
  • 黄 ⇒ 光・明るい・元気
  • 緑 ⇒ 自然・平和・安全

「明度」のイメージ

  • 白 ⇒ 軽い・清潔・潔白
  • 黒 ⇒ 重い・夜・厳粛

「彩度」のイメージ

  • 高い ⇒ 派手・活発
  • 低い ⇒ 地味・おとなしい

プロの配色に近づくための「トーン」とは

予備知識の「色の三大要素」を知ってもらったことで、プロに近づく配色をするために必要な「トーン」がわかりやすくなると思います。

「トーン」とは、明度と彩度の複合概念です。明度と彩度を同時に扱うことで、感情やイメージを表現することができます。全体のトーンを整えることが、簡単に配色するコツです。初心者の配色は、トーンを意識できていないことが多いです。

トーンによるシュチュエーションのイメージは、下の図のとおりです。トーンについては、「色相」は考えなくて大丈夫です。

  • 元気なイメージにしたければ、彩度を高めに・明度もやや高めに
  • 明るくやさしいイメージにしたければ、明度を高めに・彩度はやや低めに
  • 落ち着いたイメージにしたければ、彩度をやや低めに・明度は中間あたりに
  • 重厚感のあるイメージにしたければ、明度を低めに・彩度も低めに
トーンの説明

トーンが持つイメージ

プロの配色に近づくための「比率」とは

「トーン」について知ってもらったら、つぎは配色の「比率」についてお話しします。まずは「配色」についてです。色選びには大きく分けると2パターンの選び方があります。

それは「同系配色」と「反対配色」です。

同系配色

隣り合う色相の色味を2〜3色選びます。落ち着いた印象にしたい時に使います。

同系配色

同系配色

反対配色

近い色相の色味を2色程度と、その色味の反対色を1色程度を選びます。補色よりも少しずれた反対色を選ぶと、バランスの取れた元気のある配色ができます。

反対配色

反対配色

配色のポイント

対角線上の色を「補色」と言い、補色同士を選ぶと激しいイメージになります。

彩度の高い色ばかりを使うと、目が痛くなるケバケバしい配色になってしまうので、彩度を少し抑えた色を使うと初心者っぽさがなくなります。

70:25:5 の法則

バナー画像やヘッド画像の場合、「何を訴えるのか」という主役をつくらなければいけなくなります。そこで、各色の比率を調整することでバランスをとります。

「70:25:5 の法則」とは、配色のバランスを取るための割合を示した法則です。「60:30:10」という比率もありますが、だいたいこれ位の比率で各色を配置するとバランス良くまとまります。

一番目立たせたい色をアクセントカラーにします。アクセントカラーはベースカラーとは反対の色か、明度差をつけるようにして目立たせます。

  • 70% ⇒ ベースカラー
  • 25% ⇒ メインカラー
  • 5% ⇒ アクセントカラー

70:25:5の法則

「トーン」と「比率」を使ってプロの配色をする

配色に必要な「トーン」と「比率」を理解してもらったと思いますので、実際に配色してみましょう。

Step.1 トーンと色相を決める

どんなイメージの配色にしたいのかを、トーンと色相から選びます。

例えば、冷たく暗い配色にしたいなら、トーンは彩度をやや低く、明度を低めにします。つぎは色相を選びます。冷たく暗いイメージの青色や紫色の色相を選びます。

色選びのポイント

色相にも明度が存在するとお話ししたとおり、明るい・暖かいイメージにしたければ、明度の高い黄緑・黄色・オレンジといった暖色を中心に選ぶと自然な配色ができます。

それとは逆に、暗い・冷たいイメージにしたければ、明度の低い青や紫といった寒色を中心に選ぶと自然な配色ができます。

Step.2 イメージに沿って同系配色か反対配色にする

一色のみで明度差をつけた配色にすると、単調で寂しいイメージになります。そのため、単調になりすぎないように、近い色相の色味を加えます。

落ち着いたイメージにしたいなら、近い色相の色味を2、3色選んで同系配色にします。アクセントとして反対色を入れると、バランスの取れた配色になります。

賑やかなイメージにしたいなら、反対色を入れて反対配色にします。

色の選び方の順序

色の選び方の順序

Step.3 配色の比率を決める

トーンと色相を選んだら、配色の比率を決定します。

全体的に明るいイメージにしたいなら、ベースカラーを最も明るく、次いでメインカラーを明るくします。

全体的に暗いイメージにしたいなら、ベースカラーを最も暗く、次いでメインカラーを暗くします。アクセントカラーは、ベースカラーと最も明度差をつけるようにします。

同系配色の場合

同系配色の場合

反対配色の場合

反対配色の場合

また、色相の隣り合う似た色同士(近い色)であれば、それぞれの箇所に色を追加してもバランスが崩れることはありません。

比率には似た色を追加可能

Webサイトのカラー設計の場合、余白に使うベースカラーは白が多いと思いますので、実際はメインカラーとアクセントカラーに色味を入れることになると思います。

その場合はメインカラーとアクセントカラーの領域の部分で、さらに70:25:5を作るイメージで配色させることができます。
webサイト設計時の比率

まとめ

配色で重要なことは、全体の「トーン」と「比率」です。表現したい「感情」や「イメージ」のトーンに合わせて色を選び、比率を決めます。

実際には使う色数はもっと多いこともありますが、全体の「トーン」と「比率」を守れば簡単にプロに近づく配色ができます。

少しでもお役に立ちましたら幸いです。

Pocket

スポンサード リンク

あなたのWebサイトは成績優秀なセールスマンとして働いていますか?

集客できるWebサイトをつくる「チェックリスト」を無料公開中です。

こちらのPDFレポートで診断チェックするだけで、あなたのWebサイトがお客さんを連れてくる方法がわかります。

● 申し込みを生むデザインがわかる
● 信頼を獲得する方法がわかる
● 刺さるコピーライティングがわかる
● Webで利益を生み続ける方法がわかる

さらに、計18,000文字を超える「診断チェックリスト補足解説講座」を読めば、集客できるWebサイトの秘密が詳しくわかります。あなたのWebサイトが優秀なセールスマンに変わる方法です。

プレゼントは突然終了する可能性がありますので、今すぐ診断チェックしてみてください。

診断チェックしてみる