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

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

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

デザインでの配色のコツ

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

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

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

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

2021年9月24日

原色は使わない

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

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

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

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

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

そういう場合は明るさと鮮やかさを少し落として使うといいですよ。
 

 
少し落ち着いた雰囲気がでますよね。

3色以内に抑える

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

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

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

3色の選び方

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

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

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

 

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

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

でも「こんなにおしゃれなのに3色なの？」という配色デザインはたくさんあるんです。
 

 

 

 
（画像はAmazonさんより引用）
センスに自信のない人でも「たった3色」でおしゃれに決まる配色アイデアを教えてくれます。
 

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

配色見本を使う

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

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

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

配色サイト①『coolors』

（引用：https://coolors.co/5c6f68-8aa39b-95d9c3-a4f9c8-a7fff6）

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

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

 

配色サイト②『palettable』

（引用：https://www.palettable.io）

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

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

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

ターゲットに合わせる

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

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

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

色のイメージ

色によって人に与えるイメージは違います。
 

 

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

伝わりやすさを意識

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

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

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

明度差をつける

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

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

暖色系で注目させる

 
暖色系の色の方が人の目を引きます。

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

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

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

まとまりをだしたい

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

色相を揃える

 
同じような色合いで配色することです。

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

トーンを揃える

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

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

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

繊細でおだやかな雰囲気をだいたい場合、「色相・明度・彩度」の差を少なくします。
 

 
インパクトはないですが感情に訴えかけてくれるメリットがあります。

華やかにしたい

華やかな雰囲気をだしたい場合はグラデーションが有効です。
 

 
色が連続して変化するので多数の色を無理なく使うことができます。

ひきしめたい

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

アクセントカラー

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

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

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

セパレーションカラー

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

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

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

多い色数でまとめたい

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

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

 

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

まとめ

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

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

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