デザインのお勉強: 配色編

ウェブサービスを作っていると、プログラム以外にもいろんな知識が必要になってきます。
サーバやDBまわりの知識はもちろんですが、UI/UXが何より大事。どんなにいいサービスでも使いにくければユーザは増えません。

ところが往々にして、プログラマは機能に積極的な割にUI/UXに無頓着だったりします。配色のセンスとかもちょっとおかしい人がいたり。デザイナー並とまでいかなくても、それなりに見やすいデザインにしたいものです。

…はい、自己紹介おわり。

今日は、QiNeelを作るにあたって勉強した配色理論の資料を紹介します。

まずは基本

色選びの基本から。

 

ノンデザイナーのための配色理論 from tsukasa obara

スライド8枚目みたいな配色をやったことある人、挙手ﾉｼ

色をRGBで考えること自体が失敗のもとだそうです。
「赤くてわりと鮮やかでちょっと暗め」といった具合に考えてやればよさそう。

Sassを使える人は、hsl関数で指定できます。
CSS3でも使えますが、IE8とかでは使えないらしいです。このへんを切り捨てたくない人はSassを使いましょう。

配色の割合について

続いて色の決め方とか配分とかのお勉強。

色彩センスのいらない配色講座 from Mariko Yamaguchi

なんかタイトルからして理系向きの内容っぽい。センスいらないんですって。

前半は最初のスライドと重複しているところもありますが、後半から色の配分とか決め方を実際のロゴを例にしてわかりやすく説明してくれます。

おわりに

この2つのスライドをしっかり読めば、それなりに見やすい配色を作れるはず。多分。
QiNeelの配色もこれを参考にしました。

こんなことまでネットで学べてしまういい時代になりました…

もちろんデザインに必要なのは配色だけではありませんし、ウェブサービスにはプログラミングやUI/UX以外にも経営的なセンスも必要になってきます。そのあたりはまた後日。