【LESSON15】素人デザインから抜け出す色の使い方

前回はデザインの役割やゴールについてのお話をしました。

今回は、デザインでも大事な「色」についてのお話をします。

 

WEBデザインをするにあたって、ついついPhotoshopのことばかりが気になりがちですが、重要なのは、色、素材(写真やイラストなど)、文字、レイアウトです。

Photoshopの本を買おうとする人がいますが、Photoshopは、Photoshopの本であって、WEBデザインの本ではない。ですからね。

今日の色についてですが、結構、色遣いによって素人っぽく見えたり、プロっぽく見えたりします。

 

皆さんよくやりがちなのが、原色を使うことです。

例えば、赤なら真っ赤とか、青なら真っ青とかです。

服に例えたらわかると思うんですが、真っ赤な服や真っ青な服って着ませんよね?

それと同じで、バナーでもLPでもあまり使うことはありません。

赤でもちょっと淡くしたり、薄くしたりして使います。

昔のホームページは、表現できる色が決まっていました。

 

そのため、原色だけで表現するしかなかったのですが、今は、そういった制限は全くないので、原色の多いサイトを見ると古い感じがしてしまいます。

あと、色にはトーンがあります。

このトーンを合わせると、色に統一感が出て綺麗に見えます。

例えば、原色に近いような色と淡い色が混ざっていると何だかおかしく見えます。

淡い紫、淡い茶色のように、同じようなトーンに合わせると統一感が出て、デザインも違和感がなくなります。

とってもわかりやすい図があったので、貼っておきますね。

引用元:https://www.acky.info/tips/web/00009.html

原色を使いたくなる原因は、ほとんどの人が「目立たせたい」とか、「この色でいいや」みたいに選んでしまうのが理由です。

目立たせ方を知っていれば、この問題は回避できます。

 

色相環といって、下記の図のようなものがあります。

この図はとってもお勧めなんですが、色の意味も書いてあるので、デザイン初心者さんは、イメージに近い色を使うとよいです。

引用元:https://www.acky.info/tips/web/00009.html

目たせる方法ですが、わかりやすく言えば、サラダです。

緑の中に、プチトマトが入っているとそこだけ目立ちますよね。

 

マグロのお刺身とか入っても目立ちますよね。

色相環の反対色を使うと目立ちます。

青緑の中に赤を入れるといった感じで使います。

 

こういった配色のルールがあるので、これを知っておくだけでも、色の使い方が上手になり、素人っぽいデザインから抜け出せます。

ちなみに全然関係のない話ですが、私たちは「素人っぽいデザイン」のことを「イモ」って呼んでます(笑)

イケてないことをイモ臭いとかいいますよね?

そのイモの意味で使ってます。

 

もし私にイモって言われたらそれは、素人っぽいデザインだと思ってください(笑)

このトーンの表とか、色相環というお話をしましたが、正直なところ、スクールではあまり深く教えてはいません。

もっと簡単で、いちいちこの表を見たり覚えなくてもよい方法を教えています。

 

今回の図は、考え方としてはとってもわかりやすくて参考になると思ったのでご紹介させていただきました。

次のレッスンもデザインについてですが、これもとっても大事な文字のデザインについてです!

続きのレッスンは、こちらからご覧ください。