デザインでの配色のコツ5選|NG行為とともにデザインテイスト別のアイディアもご紹介

デザインの基礎
デザインする時いつも配色に悩む。
自分の感覚で色を選ぶとなんかダサくなってしまう…。
配色のコツや注意することがあれば知りたい。

今回はデザインする際の配色のコツを解説します。

初心者の方でも取り入れられるよう具体例や図を使って解説しています。

デザインでの配色のコツ

まず初めに、どんなテイストのデザインにする場合でも共通する配色のコツを解説します。

  • 原色は使わない
  • 3色以内に抑える
  • 配色見本を使う
  • ターゲットに合わせる
  • 伝わりやすさを意識

ひとつず解説していきます。

※カラーと配色の基本的知識についてはこちらの記事をご覧ください。

【ノンデザイナー/デザイン初心者向け】色と配色の基本についてわかりやすく図解します

原色は使わない

大見出し1
 
赤、青、黄色の原色は使わないようにします。

アーティストやデザイナーでもない限り、使うと一気にダサさや素人感がでてしまいます。
しかも目がチカチカして見づらいというデメリットもあります。

特別な事情がない限り避けたい色です。

赤、青、黄色を使いたい場合

それでも赤、青、黄色を使いたいこともあると思います。

そういう場合は明るさと鮮やかさを少し落として使うといいですよ。
 
大見出し1
 
少し落ち着いた雰囲気がでますよね。

3色以内に抑える

大見出し1
 
配色は使う色を3色までに抑えるとデザインにまとまりがでます。

特に初心者やノンデザイナーの場合は「3色」を意識して色を選んだ方がいいです。

色が増えるほど伝えたいことが伝わらなくなってしまいますからね。

3色の選び方

大見出し1
 
ベースカラー、メインカラー、アクセントカラーの3色をこの割合で選ぶことをおすすめします。

美しく見える比率と言われています。

一番最初にメインカラーを決めて次に反対色のアクセントカラー、最後にベースカラーがいいと思います。
 
大見出し1
 

3色以内で構成されたデザイン例

そうは言っても3色だけだと本当にデザインとして成立するのか不安かもしれません。

でも「こんなにおしゃれなのに3色なの?」という配色デザインはたくさんあるんです。
 
大見出し1
 
大見出し1
 
大見出し1
 
(画像はAmazonさんより引用)
センスに自信のない人でも「たった3色」でおしゃれに決まる配色アイデアを教えてくれます。
 

見てわかる、迷わず決まる配色アイデア 3色だけでセンスのいい色

 
イラスト、ハンドメイド、ネイルなどだけでなくチラシやプレゼン資料に使える配色がたくさん掲載されてるので色に悩むことがなくなりますよ。

配色見本を使う

色を選ぶ際は自分の好きな色だけを選んだり、感覚で決めるのではなく、必ず配色見本を参考にして選びます。

配色見本なら明るさや鮮やかさをきちんと計算して調和された配色を提案してくれます。

なんとなくで選んでしまうとだいたい失敗するのでセンスの良い配色にはまずなりません。

配色サイト①『coolors』


(引用:https://coolors.co/5c6f68-8aa39b-95d9c3-a4f9c8-a7fff6)

『coolors』はスペースキーを押すたびに5色のカラーパレットがランダムで表示されます。

もし5色のうち気に入った1色があれば、その色だけをロックして別の4色のパターンを表示することが出来ます。
大見出し1
 

配色サイト②『palettable』


(引用:https://www.palettable.io)

出てきた色を「スキ:like」か「キライ:Dislike」で判断していくと自分好みの配色が完成します。

5色の組み合わせまで選べます。

直観で操作できるの使いやすいサイトです。

ターゲットに合わせる

配色は美しく見えるかどうかだけでなく、ターゲットに合わせた色を使う必要があります。

デザインを見せたい相手(ターゲット)によって効果的な色が変わってくるからです。

  • 男性なのか女性向けなのか
  • 若者なのかシニア向けなのか
  • 安さアピールなのか高級感重視なのか

あなたのデザインを誰に見てほしいのか考えてみましょう。

色のイメージ

色によって人に与えるイメージは違います。
 
大見出し1
 

  • 清潔
  • 純粋
  • シンプル

大見出し1
 

  • 高級感
  • 重厚感
  • 力強さ

大見出し1
 

  • さわやか
  • 冷静
  • 清潔

大見出し1
 

  • 情熱
  • エネルギー
  • 興奮

大見出し1
 

  • 自然
  • 健康
  • 平和

色そのものがもってるイメージを利用して選んでみるのもいいですね。

伝わりやすさを意識

見た目の美しさだけでなく「情報が伝わるか」という視点で配色を考えることも重要です。

色の組み合わせによっては読めない、誤解してしまう、などの問題も起きてしまうからです。

そもそもデザインは伝えることが目的なので、見やすさはきちんと意識したいですね。

明度差をつける

大見出し1
 
背景の色と文字の色に差がないと文字を認識しづらいですよね。

明度差をつけるとメリハリがでて伝わりやすくなります。

暖色系で注目させる

大見出し1
 
暖色系の色の方が人の目を引きます。

寒色系や彩度の低い色は目立ちにくいので、暖色系を使うことで注目させたい部分をコントロールできます。

デザインのテイスト別配色のコツ

ここからはデザインの雰囲気ごとに合った配色のコツをいくつかあげてみます。

まとまりをだしたい

デザイン全体にまとまりをだしてなじみの良い配色にしたい場合、色相またはトーンを揃えます。

色相を揃える

大見出し1
 
同じような色合いで配色することです。

同一の色味を使うので失敗することがなく初心者にも使いやすい配色です。

トーンを揃える

大見出し1
 
同じトーン(明度×彩度で表現したもの)で配色すると色合いが変わっても違和感が起きにくいです。

カテゴリ分類のような多色を同等に扱いたい場合に役立ちます。

おだやかな雰囲気をだしたい

繊細でおだやかな雰囲気をだいたい場合、「色相・明度・彩度」の差を少なくします。
 
大見出し1
 
インパクトはないですが感情に訴えかけてくれるメリットがあります。

華やかにしたい

華やかな雰囲気をだしたい場合はグラデーションが有効です。
 
大見出し1
 
色が連続して変化するので多数の色を無理なく使うことができます。

ひきしめたい

デザイン全体をひきしめたい時は「アクセントカラー」と「セパレーションカラー」を使います。

アクセントカラー

大見出し1
 
アクセントカラーは強調色なので、反対の色を使います。

少量でも全体に配置するとデザインが引き締まり動きがでます。

面積の大きいベースカラー:7割
メインカラー:2割
アクセントカラー:1割

厳密にこの比率を守る必要はないですが意識してみましょう。

セパレーションカラー

大見出し1
 
セパレーションカラーとは隣り合う色同士があいまいである場合に差し込む色のことです。

主に白・黒・グレーなどの無彩色が中心です。

境界を明確に分けるための手段ですね。

多い色数でまとめたい

配色は基本的に3色以内が好ましいですが、どうしてもたくさんの色を使わなければいけない場面もあるかと思います。

そういった場合にはすべての色の赤みと青みを揃えてみましょう。
大見出し1
 

一見すると違いがわかりにくいかもしれませんが、デザイン全体で見るとまとまりがでます。

まとめ

以上デザインでの配色のコツについて解説でした。

  • 原色は使わない
  • 3色以内に抑える
  • 配色見本を使う
  • ターゲットに合わせる
  • 伝わりやすさを意識

見た目の美しさだけでなく伝わりやすさも意識することが大事ですね。

配色見本を使いながらさっそくご自身のデザインの配色を決めてみましょう。