デザイン向上委員会

デザイナーが色の配色の時に取り入れたいポイントとアドバイス

こんにちは、emikiです。

デザインにおける「色使い」「配色」は、非常に重要な役割を果たします。

デザイナーなら何の気なしに「色」を選ぶ行為は危険。
理論や原理に基づいて、色や配色を選ぶようにしましょう。

まずは、色の選択を間違えないためにも、「各色が持つイメージ」を紹介します。
あわせて、デザインのある法則に基づいた配色を考えるテクニックを紹介します。

デザイン初心者で、色や配色について学びたいという人は、ぜひ参考にしてください。



スポンサーリンク

色の持つイメージを理解する

色には様々なイメージがあります。

色次第で、紙面(画面)のイメージがまったく変わります。
なので、色のイメージを理解したうえでの色選びはとても大切です。

各色が持つイメージは、以下の通りです。

色の持つイメージ一覧
色の持つイメージを理解しながら、デザインに適した色選びをするように心がけましょう。

すでにブランドのイメージカラーがあるものは大丈夫なのですが、イメージカラーがないものをデザインする場合は事前にクライアンとイメージカラーなどの方向性を話し合っておくようにしましょう。

 

色相環と補色の関係から配色を考える

配色を考える場合、「色相環」から複数の色を選ぶという方法があります。

色相環からの「補色」「反対色」の関係

「色相環」とは、色の移り変わりを円状に並べたものです。
デザインに携わる人なら一度は見たことがある図でしょう。

色相環から色同士が近い色のことを「類似色」、真反対にある色を「補色」と言います。
また、補色の周辺の色を「反対色」といいます。

 

類似色同士の色の組み合わせは画面全体に統一感は出ますが、いまいち締まりに欠けるのでアクセントカラーを足すと良いです(アクセントカラーについては後述します)。

 

補色同士の組み合わせは色同士が喧嘩しあって、目がチカチカしてドギツイ印象になります。
くっつけて配色はしない、あいだに落ち着いた色(無彩色など)を挟む、などのデザイン上の気配りが必要です。

しかし使い方次第で、目立たせたい部分を強調できたり、インパクトのあるデザインにすることができます。

補色同士の色の組み合わせ



スポンサーリンク

色の配色比率は 70 : 25 : 5 の法則

配色には「70:25:5の法則」というものがあります。

配色「70:25:5の法則」

結構有名な法則なんですが、基本のカラー数は3色をベースとして、その3色を『70% : 25% : 5 %』の比率に分けるという法則です。

①メインカラー
②ベースカラー
③アクセントカラー

と、3色の色分けを展開していきます。

各カラーについて具体的に説明していきましょう。

 

メインカラー

メインカラーは、ブランドのイメージカラーなど、核となるカラーのことです。
メインカラーはロゴ・キャッチ(文字)などに使用されることも多いので、「明度の低い色」が扱いやすいとされています。
「明度の高い色」だと可視性、可読性の観点から、文字が読みづらくなってしまうからです。

明度の高い色と明度の低い色
画像左側の黄色→明度が高い色
画像右側の紺色→明度が低い色

 

ベースカラー

ベースカラーとは、背景など画面全体の大まかな色のことです。
なので、白や薄い色の方が扱いやすいとされています。

ベースカラーの上に文字やオブジェクトが乗る場合が多いので、無彩色、またはメインカラーの明度をあげた色が使いやすいです。

明度を上げた色
紺色は明度が低いので、ベースカラー(背景カラー)としては適切ではない。
紺色の明度を上げた薄い色合いが適切。

 

アクセントカラー

アクセントカラーとは、文字通り画面全体にアクセントをつけていくカラーのことです。
この時、メインカラーから離れた色(例:補色や反対色)にすると、メリハリのあるデザインになります。
しかし、補色同士の組み合わせ方をミスると、読みにくかったり、ドギツいイメージになるので注意しながら配色する必要があります。

また、アクセントカラーの比率は5%までとされているので、補色や反対色を多用するのも控えた方が良いでしょう。

補色同士の色がメインカラーとアクセントカラーになる

(↑)紺色の補色は、オレンジ色。
メインカラーを紺色にした場合、アクセントカラーはオレンジとなります。

 

このように、メインカラー、ベースカラー、アクセントカラーを「70 : 25 : 5 」で使い分けて配色するという法則ですが、デザインによっては比率を前後させても良いですし、この比率が絶対ということもありません。

また、場合によっては3色以上の色展開になることもありますがあまり色を使いすぎるとゴチャゴチャして見づらくなるので、注意して色を選ぶようにしてください。

 

【最後に】デザイナーにとって色選びはセンスを問われる

色の持つイメージと合わせて、類似色、補色の使い方、70 : 25 : 5の法則など細かいテクニックを紹介しました。

周知の事実だと思いますが、色選びはデザイン全体のイメージを左右する大事な行程です。
イメージを生かすも殺すも「色次第」とも言えるので、配色は慎重に!

また、色選びは、デザイナーのセンスを問われる部分でもあるので、決して手を抜かないようにしましょう。

クライアントの方でしっかりとしたブランドイメージがある場合は、そのイメージを崩さない配色をするようにも心がけましょう。

その他の配色のテクニックは、こちらの記事でも書いているので、あわせてご確認ください!

色の先入観を利用した配色をデザインに取り入れるこんにちは、emikiです。 デザインにおける色の使い方は様々な方法があり、時と場合やブランドイメージなど多種多様な使い分けがあり...

また、配色に関しての書籍もたくさん出版されています。
ぜひ参考にしてみてください。
▽ちなみに私の愛読書はこちら▽

学び方〜仕事の探し方まで!未経験からデザイナーになるための完全ガイドこんにちは、デザイナー歴10年のemikiです。 デザイナーになるには、専門的な技術が必要です。 もし、デザイナーに転職しよ...



スポンサーリンク