カラーからデザインを考えてみよう!配色のコツを画像で解説

カラーからデザインを考えてみよう!配色のコツを画像で解説

こんにちは!
しがない雑食系クリエイターのはまやん(@hama_paz)です!

皆さんはデザインする時にカラーを決める(以降、配色と表記します)のって大変じゃないですか?

せっかくレイアウトバッチリに決まったのに配色がなかなかしっくりこない…って事ありますよね?

実は色にはそれぞれ特徴やイメージがあって、それに沿って配色すればデザインとマッチしやすくなるんです!

そこで今回はデザインを配色のコツをご紹介します!
この記事を読む事で配色を考える作業がスムーズに出来て制作スピードがグンっとアップしますよ!

はまやん
配色を覚えると私生活でも使えますよい!
関連記事

こんにちは! しがない雑食系クリエイターのはまやん(@hama_paz)です! 前回、配色からデザインを考える記事を公開しました。 [sitecard subtitle=関連記事 url=https://hkstudi[…]

デザインの配色に迷っているなら自然から拝借しよう!
スポンサーリンク

カラーのイメージを知ろう

カラーからデザインを考えてみよう!配色のコツを画像で解説1

まずは各カラーが持つイメージを順番に解説していきます!
イメージとは色から連想される印象の事を指します。

実はこの手法ってみなさんが子供の頃に見ていた戦隊モノのキャラ設定でも使われているんですよね!

このイメージを正しく認識してデザインに落とし込んでいく事で、あなたが伝えたい事を視覚的に、本能的に訴えかける事が出来ます!
今回はおおまかにカラーの区分けを以下に分けました。

  • レッド系
  • イエロー系
  • グリーン系
  • ブルー系
  • パープル系
  • ホワイト系
  • ブラック系

レッド系

カラーからデザインを考えてみよう!配色のコツを画像で解説2

レッド系は「情熱・熱い・エネルギッシュ・興奮・暴力的」といったイメージがあります。
全体的にエネルギーが溢れていて快活な印象ですね!

または日本や中国では祝い事や魔除けの色としても好まれて使用されています。
あとは主人公っぽい色ってイメージもあるかなと思います!

逆にネガティブなイメージとしては血を連想しやすいので暴力的だったり政治的にプロパガンダでよく使われるような色です。

朱色のような明るく活発な感じではなく、少し落ち着いたルージュ系だと高級感もイメージできますね!

イエロー系

カラーからデザインを考えてみよう!配色のコツを画像で解説3

イエロー系は「元気・明るい・幸運・純粋」といったイメージがあります。
文字にするとレッド系と似たような感じですが、もっと子供っぽいような印象ですね。
子供っぽいと聞くと、いい印象は無いかと思いますが子供って純粋なので親しみやすい色として使われます!

またお金やラッキーなカラーとしても連想できますよね!

逆にネガティブなイメージとしてはすごく発色が良くて目につきやすいので道路標識などの警戒色としても使用されています。

グリーン系

カラーからデザインを考えてみよう!配色のコツを画像で解説4

グリーン系は「自然・落ち着く・エコ・優しい」といったイメージがあります。
葉っぱとかのイメージがすごく強いですので、部屋に観葉植物を置くとリラックス出来るよってよく聞くまさにソレです!

クリーンな印象を持つ一方、黄緑系だと若々しくフレッシュで深い緑だと富や落ち着いた印象もありますね!

ネガティブな印象はさほど無いですが、優しすぎるグリーンを使うと印象に残りにくくなりやすいですね。

ブルー系

カラーからデザインを考えてみよう!配色のコツを画像で解説5

ブルー系は「透き通った・クール・自由・落ち着き」といったイメージがあります。
青空や海は開放的なので自由な印象がありますよね!
あとはSF系だとサイバーでクールな感じでよく使われてますね!

当ブログはクールさだったり自由なデザインブログを目指しているので青を基調とした配色をしています!
それとPhotoshopが青のイメージだからってのもありますね!

逆にネガティブなイメージだと憂鬱・落ち込みって印象を与えやすいです。
ほら、よく「ブルーな気分だ」て聞くでしょう?

パープル系

カラーからデザインを考えてみよう!配色のコツを画像で解説6

パープル系は「紳士的・妖艶・神秘的・ミステリアス」といったイメージがあります。
落ち着いた色味だと紳士・淑女や高貴なイメージを持ちますね!
またミステリアスな雰囲気を出すのにもちょうどいいカラーです。

逆にネガティブなイメージだとネオンの印象が強いので、夜の街やセクシーを通り越してイヤらしいイメージを与えやすいです。

クラブでパリピがウェーイしてるところを想像するとパープル系が出てきませんか?
ソレですソレ!

ホワイト系

カラーからデザインを考えてみよう!配色のコツを画像で解説7

ホワイト系は「清潔・ベーシック・シンプル」といったイメージがあります。
やはり全てのベースとなる色ですので、親しみやすい印象ですよね!
また「白さ際立つ!」とかの洗剤のキャッチフレーズみたいに清潔さを連想しやすい色でもあります。

逆にネガティブなイメージだと膨張だったりボヤけたり、ベースなので印象に残らない色でもあります。

ブラック系

カラーからデザインを考えてみよう!配色のコツを画像で解説8

ブラック系は「フォーマル・高級感・暗闇・威圧的」といったイメージがあります。
高級感だったり、スーツが黒が多いようにフォーマルな印象がありますね!
例えば高級車のイメージって黒が多くないですか?
それも高級感やラグシュアリーさを演出しているのです!

逆にネガティブなイメージだと威圧的だったり、暗闇で怖さを連想させます。
ほら、フルスモークの黒の車だと怖いでしょう?
または敵のカラーって黒系が多いのもそういったイメージで作られてるんですね。

黒は他にも力強さや落ち着きなど、様々なイメージをもつカラーでもあります。

いかがでしょうか?改めて言葉に表すとなんとなくわかるような感じがありませんか?

次は配色に必要な要素である補色について解説していきます!

補色を知ろう

補色というのは色相環の反対側の色を指します。
色相環てなんぞよ!?て方は以下の画像になります。
カラーからデザインを考えてみよう!配色のコツを画像で解説9

色の反対というのは例えると、日本の反対がブラジルみたいな感覚で考えてもらって大丈夫です!
例えば赤の反対となると水色になるんですね。

それと補色の一つ隣も同様なのでスカイブルーや緑も補色となります。

じゃあ補色はわかったけど、どう使うんだい!?ってなりましたよね?
例えばメインカラーが赤を使った配色をする場合、アクセントカラーとして補色の水色あたりが相性良いんです!

カラーからデザインを考えてみよう!配色のコツを画像で解説10

もちろんデザインによって補色が必ずしも相性が良いってわけでは無いですが、配色をする上で知っておくと吉ですよ!

次は補色と同様に必要な要素である色のトーンを解説していきます!

トーンを知ろう

トーンとは色の明るさや鮮やかさの度合いを指します。

色調(しきちょう)、またはカラートーン(英語 Colour Tone)とは、色の明度と彩度によって分けられる色の系統をいう。

カラーからデザインを考えてみよう!配色のコツを画像で解説12
トーンの調整をすることでデザインのメリハリをつける事も可能です!
例えば淡い色味だと優しい印象を与えますし、濃い色味だと強い・高級な印象を与える事も出来ますね!

デザイン業界ではしばしばトーン上げてとか落としてとか言われますが、大体は明るさとか濃さのニュアンスで言ってる事が多いですね!

同色でまとめたい時はこのトーンを使って配色すると吉ですね!

カラーからデザインを考えてみよう!配色のコツを画像で解説11

次は実際に作りたいイメージに対して、先ほどご紹介した色からセレクトして配色していく方法をご紹介します!

イメージから配色してみよう

それではさっそく作ってみましょう!
今回は「夏・POPさ」をテーマにロゴを作りたいと仮定します!

とりあえずモノクロでこんな感じで作りました!
カラーからデザインを考えてみよう!配色のコツを画像で解説13

夏なんで安直に青をメインカラーにしたいですね!
そして、スッキリとした快晴な感じと若々しいPOPさにもしたいので明るめのトーンの青が良いと思いました!

それで補色を使いたいと思ったので補色部分は「Studio」の文字の部分に入れたいですね!
青の補色は先ほどの色相環で見ると黄色系ですね!

ここで感じる方も多いかと思いますが「空とひまわり」や、「海と砂浜」といった感じで、自然界でも美しいとされる景色や情景にも補色って使われているんですね〜!

そこで最後のロゴは雲の色から白にしちゃいましょう!

色を入れるとこんな感じになります!
カラーからデザインを考えてみよう!配色のコツを画像で解説14

あぁ〜、いかにも夏って感じがする良いロゴが出来ましたね!

ね!?

NGな配色を避ける

次はNGな配色を解説していきます!
特にデザインの初心者さんはどういた配色がNGなのか覚えておくと、言葉は悪いですが素人っぽいデザインに見えにくくなります。

色をたくさん使わない

先ほど紹介した色にはそれぞれ連想されるイメージがあります。
たくさん色を使いすぎると情報量が多すぎて、テーマカラーが見えにくかったり安っぽいデザインになりがちです。

カラーからデザインを考えてみよう!配色のコツを画像で解説15

先ほどのロゴの配色の参考例のようにシンプルに2〜3色でまとめるとそういった事を回避出来るので、
もちろんたくさんの色を使った素晴らしいデザインは世の中にたくさんありますが、配色やレイアウトなどの絶妙なバランスの上で成り立つ高等テクニックなので、感覚がつかめるまでは使用する色の数を制限してシンプルにデザインしましょう!

近いトーンでまとめすぎない

同じようなトーンでまとめてしまうと野暮ったくなったり印象に残りにくかったりしますのでトーンを調整するか色を変えてメリハリをつけましょう!

特に広告系だと業種や商材によって変わりますが印象に残ってナンボなところがあるので、メリハリは大事です!
(やりすぎは注意ですよ!)

カラーからデザインを考えてみよう!配色のコツを画像で解説16

迷ったら配色ツールを利用する

ここまで配色を解説していきましたが、どうしてもつまずく事もありますよね。
ていうか10年以上クリエイター業やってる僕でも全然あります。

そんな時は配色例を紹介しているツールを利用しちゃいましょう!
配色ツールを利用することでバシっとくるのはもちろん、何通りもの配色パターンがあるので
自分の配色のセンスを磨くのにもってこいです!

別にズルしてるとか一切考えなくていいのでドンドン使っていきましょう!

AdobeColor

カラーからデザインを考えてみよう!配色のコツを画像で解説17

Adobeが展開しているカラージェネレーターサイトです。
先ほど紹介した補色以外にも様々な方法で自分の好みのカラーパレットを作成する事ができます!

しかもここで決めたカラーパレットをCCライブラリに保存出来るので、すぐデザインに落とし込む事が可能です!

AdobeColorはこちら

Color Supply

こちらもAdobe Colorと同じカラージェネレーターサイトですが、違いは色相環の下にアイコンのイラストなどがあります。
カラーからデザインを考えてみよう!配色のコツを画像で解説18

選んだカラーをアイコンイラストに落とし込んでくれるので配色した時のイメージを掴みやすいのが特徴です!

僕はシンプルなデザインにする時はこっちをよく使ってますね!

Color Supply — A Color Picking Tool

Use the color wheel to select a style you like. Then pick a…

Photoshopを学べるオススメ書籍

当ブログの管理人がオススメするPhotoshopを学べる書籍をご紹介します!
ポイントをわかりやすく押さえて解説されてますので、すぐに実践したくなりますよ!

ズボラPhotoshop

デザイナーのトミナガハルキさん著書のズボラPhotoshop!
「デザイナーなのにズボラするなんて…どうなの?」と思われるかもしれませんがそれはノンノンです!

「簡単なのにカッコイイ、オシャレ」「作ってて楽しい」を元に手順を出来るだけ簡略化した55のテクニックをご紹介しています!
デザイン初心者さんの悩みの1つである「カッコイイものを作りたいのにどうやって作ればいいかわからない」を解消する事間違いなしですよ!

配色のコツのまとめ

いかがでしたか?
配色のコツを以下にまとめました。

  • カラーには連想するイメージがあるので把握しよう
  • 補色とトーンを知っておこう
  • NGな配色をさけよう
  • イメージから配色をしてみよう
  • 迷ったら配色ツールを利用しよう

ロゴとかデザインの作成ってクライアントから抽象的にイメージだけで依頼が来る事がほとんどなので、そこから連想される配色をすると良いデザインが出来ると思います!

この記事を読んで明日から配色に迷わず素敵なデザインを量産しちゃってください!

はまやん
それでは良いCreativeライフを!
カラーからデザインを考えてみよう!配色のコツを画像で解説
Twitterやってるのでフォローしておくんなまし!