デザインをする上で大切な配色テクニック

2021.02.16Design

目次

デザインをする上で大切な配色テクニック

デザインをしていて難しいのが配色だと思います。今回はデザイナーをしてきて見つけた色を選ぶ際に使えるテクニックを紹介しようと思います。

なぜ配色が難しいのか?

そもそもなぜ配色が難しいのかを考えてみると、色によって相手に与える印象が大きく変わるのもそうですが、数えきれない種類の色の中から選択する上に、使う色同士の関係にも注意をしなければならないからだと思います。

レイアウトと配色を分けて考える

まずデザインをする上でのテクニックなのですが、レイアウトと配色を分けて考えることが大切です。すべてを同時にすると、選択肢が多くなるため迷いやすく悩む原因になることが多いため、まずはモノクロでレイアウトをして情報の強弱や配置を先に決めてから配色をしていくとスムーズにデザインすることが出来るかと思います。

配色する時のテクニック

色の与える印象を理解する

例えば赤色だと、情熱やエネルギッシュなイメージがあったり、信号機などでは赤色は注意や警告を表す色として使われます。他の色も同様で色ごとに相手に与えるイメージや、どういう場所でよく使われる事が多いかなどを理解することが大切です。作りたいイメージから、使うべき色を選択する判断基準を持っておく必要があります。

使用する色数を考える

配色には70:25:5の法則という法則があります。 基本となる色を70%、メインの色を25%、アクセントとなる色を5%の割合で使用するとまとまったデザインになるということです。
また、使用する色の数を減らした方がまとまりのあるデザインになりやすいですが、カラフルなデザインを作りたいや色数を増やしたい場合は下記を意識するとまとまったデザインになるかと思います。

・同系色でまとめる
同じ色でも明度と彩度を変えることにより、単調なイメージを変えることが出来ます。また同系色を使うことで色を選ぶときも比較的簡単に選択する事が可能です。

・トーン(明度と彩度)を揃える
逆にカラフルな色を使いたい場合に、明度と彩度を揃えておくとまとまりやすいデザインになります。

色は大きく色相・明度・彩度の3つの要素で出来ています。いろんな色を使いたい場合はどれかを揃えておくとまとまりのあるデザインになるかと思います。

アクセントカラーを決める

アクセントカラーとはデザインにワンポイトで使うと効果的な要素で、部分的に目立たせたりするときに使用します。アクセントカラーは小面積で使用し、お問い合わせなどの目立たせたい部分に使用するとよりユーザーに訴求できる配色ができると思います。

ルールを決める

例えばお問い合わせはこの色、このカテゴリーはこの色と色を使う場所のルールを決めるとでユーザーにとってもわかりやすく迷わずに配色が出来るようになります。

まとめ

デザインをする上で配色って難しい所ですが、色を選ぶ上でもどういうサイトにしたいかという目的をしっかりと認識していないと難しいと思います。デザインには一つ一つ意味があると言いますが、一番最初のベースの部分をしっかりと固めることが配色をする上でも大切なのではないでしょうか?