配色センスないと思っている人必見!配色で失敗しない方法7選

デザイン




デザインをする際、

何色が合うのか分からない…

なんかダサい色合いになっちゃった…

という経験はありませんか?

配色もデザインの一つですが、レイアウトやフォント選びよりも難しいという方は意外と多いのではないでしょうか?

この記事では、そんな色選びで迷った経験のある方配色で失敗しないおすすめの方法をお伝えします!

 

配色で失敗しない方法7選

  1. 色が与える印象で選ぶ
  2. おしゃれなデザインの配色を真似する
  3. 配色サイトを使う
  4. 同系色を使う・トーンを合わせる
  5. グレーを使う
  6. 最大4色を守る
  7. 写真に注意する

では、それぞれ解説してきます。

 

①色が与える印象で選ぶ

色にはそれぞれ見た人に与える印象があります。

例えば「赤」。

赤は色から「血」「火」「太陽」のイメージが湧きます。

これらは「エネルギー」「生命力」を表しているものなので、「行動力」「活動的」な印象を与えます。

また、愛の色(バラの赤)というイメージもあるので「情熱的」という意味もあります。

このように色ごとに与える印象がたくさんあるので、デザインのターゲットや与えたい印象とマッチする色を選んであげましょう。

赤の場合であれば、エネルギーあふれるデザインや情熱的な印象を出したいデザインなどで多く使われています。

abc

ただ、多くの色を入れればたくさんの印象を与えられるかと言うとそうではありません。

むしろたくさんの色を入れすぎると、何を印象づけたいのか分かりにくくなってしまいます。

ですので、本当に印象づけたい必要な色だけをピックアップして使いましょう。

 

色が与える印象・意味について知るには『色の心理学』という本がおすすめです。

雑誌を読んでいるような感覚で、簡単に色の心理について知ることができます。

 

②おしゃれなデザインの配色を真似する

これでおすすめなのが『ピンタレスト』

ピンタレストでおしゃれなデザインを探し、その中から配色のみを真似してみてください。

丸パクリはNGですが、配色だけ真似するならアリです。

どのように真似するかというと、

【例:メインカラーで青を使いたいデザインの場合】

ピンタレストで『青 デザイン』と検索する

 

青と合う色・青に目立つ色は何色が多いのか観察する

観察していると、青には黄色が目立つことが分かる。

 

観察して分かった目立つ色・合う色を使用する

見つけたデザインのカラーコードを知りたいときはColorZillaという拡張機能がおすすめです。

ColorZillaの使い方はこちらの記事で紹介しています。

デザインの色はどう決める?

 

③配色サイトを使う

おすすめの配色サイトで合う色を見つけるのも一つの手段として持っておくと便利です。

私がよく使うサイトは以下の4つです。

Color Hant

4色の組み合わせパレットを、トレンドや人気ごとにカテゴリ分けされています。

カラーコードもコピーできるので、同じ組み合わせをデザインに使用することができます。

 

Paletton

指定したカラーコードを入れると、その色の同系色・補色などを知ることができます。

このサイトもカラーコードをコピーできます

 

Pigment

2色の組み合わせパレットがたくさん載っているサイトです。

メインカラーが決まっているときに、その色に合う色や目立つ色を探したいときにおすすめです。

 

Fresh Background Gradients

こちらは綺麗なグラデーションのカラーコードが分かるサイトです。

 

④同系色を使う・トーンを合わせる

同系色を使うとまとまりが出やすいです。

同系色とは、色相環の隣同士の色のことです。

 

また、同系色でなくても色のトーンを合わせるとまとまりが出ます。

トーンを合わせるというのは、色の明度・彩度を合わせるということです。

色は異なっていても、トーンを合わせるだけでまとまりを出すことが可能です。

色相環を同じトーン別で分けた図

 

トーンが別の色を選んでしまうと、そこだけ浮いたようなデザインになってしまうので気をつけましょう。

(ただ、あえてトーンを変えたという理由があれば問題はありません。)

 

⑤グレーを使う

グレー自体、色の幅が広いのでとても使いやすいです。

迷ったらグレーにしてしまっても大丈夫なくらい。

合わせる色によって、薄いor濃いグレーを決めるのがコツです。

写真に文字を重ねるデザインなどの場合も、黒だときつすぎることがあるのでグレーがおすすめです。

それについては以下の記事でも紹介しているので、合わせて読んでみてください。

デザイン初心者でもレイアウトで迷わなくなる4つのコツ

 

⑥最大4色を守る

基本、黒・白を除いた色の使用は、最大4色までにしましょう。

4色と言ってもも、1:1:1の割合で使用するのではなく、

[メインカラー]5:[サブカラー①]3:[サブカラー②]2

のような割合で使うと、コントラストが出て伝わりやすいデザインになります。

色を使いすぎると、結局何が重要なのか伝わりにくいデザインになってしまうので注意です。

 

⑦写真に注意する

写真の色によって合う色が変わってきます。

その写真に多く使われている色をデザインにも入れてあげるとまとまりが出やすくなります。

abc

このデザインの場合は、写真の写っている女性の服の色を全体のデザインにも使用しています

 

写真の色をPhotoshopのスポイトツールや、②でおすすめした拡張機能を使って採り、そのカラーコードをPalettonに入れて合う色・目立つ色を探すという方法もおすすめです。

 

配色で失敗しない方法7選まとめ

今回は、色を選択する際のおすすめ方法を7つお伝えしました。

この方法はどれも簡単にできるので、配色で迷っていた人はぜひやってみてください。

  1. 色が与える印象で選ぶ
  2. おしゃれなデザインの配色を真似する
  3. 配色サイトを使う
  4. 同系色を使う・トーンを合わせる
  5. グレーを使う
  6. 最大4色を守る
  7. 写真に注意する

 

色だけでなく、フォントやレイアウトで迷った経験がある方はこちらの記事もどうぞ。

デザイン初心者でもレイアウトで迷わなくなる4つのコツ

デザイン初心者向け!!これをやるだけで見やすくなる文字サイズを決める4つのコツ

プロのデザイナーが教える!初心者におすすめフォント選びの3ステップ