デザイン学習【初心者】

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

こんにちは、emikiです。

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

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

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

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

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

色には様々なイメージが存在します。
色の選択次第で、紙面(画面)のイメージがまったく変わるのです。

なので、色のイメージを理解したうえでの色選びはとても大切です。

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

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

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

 

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

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

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

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

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

 

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

 

《補色同士で配色する場合》
補色同士の組み合わせは色同士が喧嘩しあって、目がチカチカしてドギツイ印象になります。

くっつけて配色はしない、あいだに落ち着いた色(無彩色など)を挟む、などのデザイン上の気配りが必要になってきます。

しかし、捕食同士の配色は使い方次第で、目立たせたい部分を強調できたり、インパクトのあるデザインにすることも可能になります。

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



スポンサーリンク

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

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

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

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

各3色は、名目上では以下のような使い方に分けられます。

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

各カラーの使い方について具体的に説明していきます。

メインカラー(25%)

メインカラーは、ブランドのイメージカラーなど、核となるカラーのことです。
メインカラーはロゴ・キャッチ(文字)などに使用されることが多いので、「明度の低い色」が扱いやすいとされています。

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

 width=
画像左側の黄色→明度が高い色
画像右側の紺色→明度が低い色(※こちらの方がメインカラーに適しています)

 

ベースカラー(70%)

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

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

明度を上げた色
上の画像を例にとると、紺色は明度が低いので、ベースカラー(背景カラー)としては適切ではありません。
一方で、紺色の明度を上げた薄い色合いが、ベースカラーとして適切になります。

 

アクセントカラー(5%)

アクセントカラーとは、文字通り画面全体にアクセントをつけていくカラーのことです。
この時、メインカラーから離れた色(補色や反対色)にすると、メリハリのあるデザインになります。

しかし、補色同士の色の組み合わせ方をミスると、読みにくかったり、ドギツいイメージになるので注意しながら配色する必要があります。

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

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

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

 

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

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

 

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

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

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

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

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

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

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

また、配色に関しての書籍もたくさん出版されています。
ぜひ参考にしてみてください。

▽ちなみに私の愛読書はこちら▽

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


グラフィック・Webデザイナー向けの転職サイト8選はコレ!
グラフィックデザイナー・Webデザイナー向けのおすすめ転職サイト・転職エージェントを比較しながら詳しく解説しています!

記事本編はこちらから

 

 


学び方〜仕事の探し方まで!未経験からデザイナーになるための完全ガイド
デザインまったくの未経験者が、プロのデザイナーになるまでのステップを詳しく丁寧に徹底解説しています。

記事本編はこちらから

 

 


長時間労働?人間関係?みんながデザイナーを辞めたくなる3つの理由
「デザイナー辞めたい!」一度は考えたことありませんか?
そんなデザイナーの不平・不満を調査してみました。
デザイナーのみなさんならこの苦労を分かち合えるはずです!

記事本編はこちらから

 

 


Webデザインを安く勉強できるオンラインスクール厳選
Webデザインを勉強したい方に向けて、価格や授業内容を比較しながら、おすすめできるオンラインスクールをまとめてご紹介しています。

記事本編はこちらから

こちらの記事も人気です