オルタナティブ・ブログ > UX ~ユーザーエクスペリエンス~ >

ライバルより一歩先を目指す人に送る次世代Webテクニック

プログラマー的デザイン勉強法

»

プログラム言語であればどの言語でも習得出来、どんなOSでも使いこなし、データベースだって勉強すればマニアックに最適化出来るプログラマーですがいざデザインとなると「いやぁセンスないから」って感じだと思います。

プログラムは感性で書く物では無いので(私は感性で書いてますがw)いざ右脳を利用する作業になると途端に受け付けなくなってしまいます。
ですがサイト全体ではなくとも、一部にキラリと光るデザインがあるとお客さんに喜ばれる物です。少し位のバグも許してくれるでしょう(もちろん自己責任でお願いします。)

デザインの主にわけて、構成、色使い、動きに分けられると思いますが、それぞれどのようにしてテクを研くか私の方法を書いてみます。

1.構成
デザインが良いとされているサイトをとにかく沢山見る。沢山見ることによって目が越えてくるのでアイデアも思い浮かびやすくなります。自分の気に入ったデザインを見つけたらプリントアウトして自分のスクラップブックを作って例えばトイレに入ってる時などみ眺めるといいですよ。ただ単にWebサーフィンをしてると目的を失い安いので以下のサイトを利用するのも手です。
http://thebestdesigns.com/
http://www.thefwa.com/

基幹系アプリなどは綺麗なアイコンを使うと喜ばれる事が多いです。そう言うときは間違っても自分で作りに行っては行きません。そんな時間があったらコードを書きましょう。以下のサイトで綺麗なアイコンが無料で手に入るのでどんどん使うのがスマートな選択です。
http://www.iconbuffet.com/
http://www.iconarchive.com/

2.色
よもや自分でサイトの配色を考えたりすると失敗するのが落ちです。そんな事を考えてる時間があればコードのリファクタリングをした方が良いです。配色は以下のツールを利用して、決めましょう。何種類かの方法で10色位集めて、適当なファイルにその色を使った丸を並べてサイトパレットを作っておくと便利です。
http://kuler.adobe.com/
http://www.colourlovers.com/

3.動き
ちょっとした動きがあると、普段つまらない基幹系システムもウキウキした物になります。しかし、ついプログラマーだとフルスクラッチでアニメーションライブラリなど書いてしまいそうですが、そんな時間があればデバッグでもした方がましですね。
以下に多機能で軽いライブラリを挙げておくのでそれらを利用して、ちょこっとしたアニメーションを実装しましょう。
http://demos.mootools.net/
http://interface.eyecon.ro/demos

つまり私のアドバイスは、センスが無いのならば自分の頭を使わずに利用できる物を最大限に利用するということです。0から1にするのは無限の努力が必要ですが、既にある物から自分が綺麗だと思う物を探すのは楽ですし、時間もかかりません。

Comment(1)