Webサイトをデザインしていると配色に悩むことってありませんか？僕はいつも悩んでいます。
配色の面積や場所、隣り合ったり重なり合ったりする色のバランスなど試行錯誤しながらデザインしています。
色々なWebサイトをデザインしてきましたが、いまだに配色で悩むことは多いです。そんな中でも、自分なりに配色で心掛けていることがあるのでご紹介します。
まずはグレースケールでデザインする
Webサイトをデザインする際は、配色以外でも考えないといけないことがたくさんあります。画像やパーツの配置、バナーのデザイン、タイポグラフィなどなど、多くのことを考えながらデザインしていると思います。
場合によっては、原稿だけ渡されワイヤーフレームから考えることもあるかもしれません。
そんな中で最初から配色も考えようとすると、考えることが多すぎて頭の中がパンク気味になってしまいます。
また、デザインを進めていくうちに、最初の方に配色したパーツとバランスが悪くなり、配色を大幅にやり直すということもあります。このようなことを繰り返すと、作業時間がどんどん長くなっていきます。
僕の場合は、基本的に最初はグレースケールでデザインすることにしています。イラストで例えるとラフ画を描くイメージです。
デザインの全体像が見えるようになるので、バランスよく配色しやすくなります。
たまに配色を含めたデザインが浮かぶことがあるので、その時は配色しながらデザインすることもあります。絶対にグレースケールにこだわる必要はなく、「ココはこの色！」と思ったら色を付けていきます。
使う色を決める（多くても3色くらいまで）
グレースケールでデザインしたら、次は使う色を決めます。使う色は多くても3色くらいまでがいいと思います。
もちろん3色以上の色を使うのもアリです。ただし、色数が増えると配色の難易度も上がるので注意してください。
メインで使う色は、会社のロゴやイメージカラーから決めることが多いです。残りの色は、メインカラーの類似色やアクセントになる色などから選びます。
なかなか使う色を決めれない場合は、配色のギャラリーサイトを参考にしてもいいと思います。
ギャラリーサイトの配色をそのまま使う必要はないので、イメージに近い配色を見つけたら自分なりにカスタマイズして使う色を決めましょう。
グレースケールのデザインに色を付けていく
使う色を決めたら後はデザインに色を付けていくだけです。
しかし、この作業が意外と難しかったりします。色を付ける面積、場所などバランスよく配色していかないと、色がうるさいデザインになる場合があります。
洗礼されたデザインは色を使う面積や場所が絶妙です。自分の感覚だけでは上手くいかない場合は、配色が上手なサイトを参考にしましょう。
僕はWebデザインのギャラリーサイトで参考にするサイトを探します。
配色が上手なサイトを見て、自分で試行錯誤して経験を積んでいくしか上達の道は無いと思います。
Webデザインの配色のコツまとめ
まずはグレースケールでざっくりとデザインします。そうすることで、全体を見てバランスよく配色しやすくなります。
次にデザインで使う色を決めます。多くても3色くらいにした方がいいです。
なかなか使う色が決まらない場合は、配色のギャラリーサイトを参考にしてみましょう。
最後にグレースケールのデザインに色を付けていきます。
配色が上手くいかない場合は、Webデザインのギャラリーサイトで配色が上手なサイトを見つけて参考にしましょう。
Webデザインの配色は奥が深いです。配色ひとつでデザインの雰囲気がガラッと変わります。
配色は難しいですが、いい感じの配色が出来た時は「キタな、コレっ！」って感じになります。
これからも試行錯誤しながら、配色を楽しんでいこうと思います。