デザイン向上委員会

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

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

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

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

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

具体的な色の持つイメージは、こういった感じです。(上の画像参照)
イメージに適した色選びをするように心がけましょう。

 

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

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

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

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

補色同士の組み合わせは色同士が喧嘩しあって、目がチカチカしてドギツイ印象になります。
くっつけて配色はしない、あいだに落ち着いた色(無彩色など)を挟む、
などのデザイン上の気配りが必要です。
しかし使い方次第で、目立たせたい部分を強調できたり、インパクトのあるデザインにすることができます。

 

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

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

 

メインカラー

メインカラーはブランドイメージなど一番見せたいカラーのことです。
メインカラーは文字に使用されることも多いので、
「明度の低い色」が扱いやすいとされています。

「明度の高い色」だと可視性、可読性の観点から、文字が読みづらくなってしまいます。

 

ベースカラー

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

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

 

アクセントカラー

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

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

しかし、あまり色を使いすぎるとゴチャゴチャして見づらくなるので、
注意して色を選ぶ必要があります。

 

まとめ

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

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

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

こちらは、私が配色の際に参考にしている本です。


配色デザイン見本帳 配色の基礎と考え方が学べるガイドブック



スポンサーリンク