とても簡単!デザイン配色の絶対ルールを解説

あなた
色の使い方が良くわからない。どの色をどのように組み合わせればオシャレに決まるのか、その理由を知りたい。
あなた
プロのデザインを見ると配色が見事に決まっていて目を奪われる。しっかりと配色のルールを知りたい。

デザインでよく悩むのが「配色」。

しかし、配色にも一定のルールが存在します。そのルールさえ知っていれば、配色で悩むことはなくなります。

 

ハタ
Webのカラージェネレーターで配色を作ってもらうのも感覚を養う上で大切ですが、まず大前提となることをしっかりと理解した上でカラージェネレーターを使うことをオススメします。

その方がより良い配色ができるようになります。

この記事は、配色のルールをきちんと知り、自分の中で基準を作って配色を判断したい人に向けて書きます。
そしてこの記事を読めば、素人っぽい色使いから、プロっぽく見せる配色ルールが理解できるようになります。

「プロ感」を出すための配色ルール

色の使い方に一貫性を持たせることが絶対的なルールです。

 

整理されている=迷わせない=安心感

 

とつながり、マイナス要素のない状態を作ることがオシャレ感へ繋がっていきます。

自分の好きな色や、その時々のノリで使いたい色をどんどん使うと印象がバラバラになって、ごちゃごちゃしたオシャレ感のない配色になってしまいます。

配色で最も大切なことは、

 

「一貫性を持たせる」

 

です。

一貫性を作るため、しっかりと以下のことを意識しましょう。

1.配色したものに意味を持たせる

これは、以下のように考えると楽です。

 

  • 1つの色には一つの意味だけを持たせる
  • イメージにあった色を使う

(クリックで拡大)色にルール

それぞれ左の×の例のように、

色に複数の意味を持たせたり、イメージと違う色を使うと、見る人は混乱します。

そのため、それぞれ右の◯のように表現すると混乱せずに自然と受け入れられます。

2.落ち着いた配色を意識する

パッと見で、高い彩度の色は斬新な感じを受けるので使っていきたいところですが、最初は少し落ち着いた色から配色するのがベターです。

(クリックで拡大)

トーンを抑える

比べればわかると思いますが、高い彩度の標準色を使うよりトーン(彩度・明度)を抑えた色の方が受け入れやすいと思います。

彩度の高い標準色を選ぶと、

 

  • 安易に色を選んでいる
  • 目に優しくない

 

という印象を与えてしまいデメリットが多いので、基本的には避けた方が良いでしょう。

 

ただ、派手に演出したい場合のデザインや、効果的に使う場合には、イメージを印象付ける良い味方にもなります。

たくさん色々なデザインを作り、経験を積んで、どういう場合に効果を発揮するかの判断ができるようになってから使う方が良いです。

 

まずは、トーンを抑えた落ち着いた色で配色するようにしましょう。

3.色数は増やさない

色数は多くても4色までに抑えましょう。

色数が多いと、それだけで見づらくごちゃごちゃした印象になり、オシャレ感からどんどん遠くなっていってしまいます。

色数を減らすためには、

 

  • すでに使っている色と同じ色か同系色を使う
  • 灰色(無彩色)を使う

 

の2つの方法があります。

色数が多いものから同系色や灰色に変えた例を見てみましょう。

(クリックで拡大)

色数減らす

このように、違う色を使わずに同系色や灰色を使うと、色数が多い印象になりませんので見やすくなります。

灰色は無彩色で色数が増えた印象を与えないので、もし同系色を使って色数を減らしてもまだ派手な印象が残る時は、灰色を上手に使ってみましょう。

まとめ

まとめ

オシャレ感を出すためのルール。

何だか覚えるのが大変そう、と思えても、実はシンプルなことがルールであるということがお分かりいただけましたか?

まず大前提として、配色で最も大切なことは

 

「一貫性を持たせる」

 

という意識をきちんと持つことです。

その一貫性とは以下のようなことをルールとして持つことです。

 

1.色に意味を持たせる

  • 1つの色には一つの意味だけを持たせる
  • イメージにあった色を使う

 

2.落ち着いた色を使う

  • 高彩度である標準色を避ける
  • 目に優しいトーン(彩度と明度)に調整する

 

3.色数は増やさない

  • すでに使っている色と同じ色か同系色を使う
  • 灰色(無彩色)を使う

 

この3つのルールを守るだけで、十分にオシャレな配色となり、全体のビジュアルも整います。

ぜひこのルールに沿って配色を考えてみてください。

 

今回は以上です。

最新情報をチェックしよう!