webカラー講座のまとめ

県主催の講座で、webカラーのものをやっていたので行ってきました。講師の方は大阪の坂本邦夫先生。ホームページはこちら http://www.webcolordesign.com/

その講座に出て感じたこと書いて行きます。

デザインや色使いなんかは、よく「いやー、私は色のセンスがなくって、、駄目なんですよね。」という声を聞いたりしますが、当講座では最初から、色彩はセンスではない、と始まりました。ちゃんとした理屈に基づいた色の決め方があって、その理屈をしっかりと考えていけば、大きく外すような色使いのサイトはできないという話。

理屈っていうと、難しく考えてしまうけれど、あらかじめサイトで売りにしたいものを決めて、あとは、その売りを伝える色を表から選んでいけばいい。表はこちらhttp://www.webcolordesign.com/color_check/word_image.html

■やってはいけないこと
見えない、読みにくい文字にすること。
コレ見えますか？
このあたりは、実際に自分の作ったサイトを見てみれば良し。普通の感覚で分かると思います。ただ、ディスプレイによって色は全く違って見えるんですね。そのあたりは頭の片隅に入れておくべし

読みにくい、読みやすいってのは、背景色と文字色の明度差によって決まるもの。明度っていうのは、色の明るさって考えてもらってOK。背景が白色で、文字が黄色が見えにくいのは、白と黄色では明度差があまりないから。一方背景が黒色で文字色が黄色なら、はっきり見えますよね。これは黒と黄色は明度差が大きいからなんです。

■配色を考えるときには、面積比が大変重要
ウェブ上に様々なカラーバリエーションを紹介するサービスってありますよね。でもあの色の通りに色を使ってみても、どうもきれいなサイトにならない。なんでなんでしょう。

その理由は、使う色は合っているのですが、使う色の面積比が間違っているからなんですね。例えば、投資系のサイトを作ったとしてみましょう。投資系のサイトだから、イメージは何でしょうか。知的な、静かな、落ち着いたといったイメージだと私は考えました。上記の表から見ると、青系を選ぶことにしましょう。メインとなるカラーは青色です。

この青色をメインにして、サブカラーを決めます。サブカラーを決める時にはまた理屈がいるんですが、簡単な方法では、メインカラーを明るくしたり、暗くしたりすることで、同系色を作るのがオススメです。他には、ロゴカラーをサブカラーにしたり、青の冷静なイメージの中に、燃える思いが欲しいときは、赤系統を選ぶなど様々です。

そして、最後にアクセントカラーを選びます。これは眼を引くといった役割で、メインカラーやサブカラーに関連づけた色でなくてもOK。ただ目立つだけの理由で選んでもOK。以上が決まった上で、それぞれの面積比は、

メイン：サブ：アクセント＝75:20:5

になるようにするのです。サイトを考えるときは、サイトを白と黒の2色であると考えて、そこから塗り絵をしていくような感覚でいくといいのではないでしょうか。色を塗る面積の合計を100として、上記面積比に従って色をつけていきます。

■重要なところを目立たせる
サイトで見て欲しいところはどこか？を考えてください。その場所にアクセントカラーを使用しましょう。強くて目立つ色ほど、先に眼が行きます。もしも色がきつくなりすぎるようでしたら、その色の面積を小さく使うようにしてみてください。すっきりするはずです。

サイトを作る前に、簡単なデッサンを行うといいかもしれませんね。この場所にコレを置くといったイメージをチラシの裏にでも書いておいて（最近は裏が白いチラシってないですよねぇ）重要度の高いものから、数字を割り振って行くといった風に。

色とは違うかもしれませんが、白が背景だった場合、余白を生かしてサイトをデザインする方法があります。余白を大きめに取ることで、罫線を引かなくても部分のかたまりができて、すっきりと見えるという手法です。

以上講座で感じたことでした。
細かなテクニックなどは、坂本先生のサイトに行けば分かりますし、実際に上手いデザインをしているサイトを見ることで勉強することができます。色の基本なんかは、書籍で学べますが、実際に使うにはどうしたらいいのってことまでは、分からないことが多いでしょう。やっぱり実践しているサイトを多くみて、上手い方法が合ったら真似ていく。それの繰り返しではないでしょうか。