Life is Really Short, Have Your Life!!

ござ先輩の主に技術的なメモ

WEBデザイン独習メモ

ここ1年ばかし世の中のサイトにインスパイアされつつ、ちょっとしたWEBデザインをやってきますた。

before

業務アプリばっかりやってたんで、CSSが全然わからないし、配色についても全く分からないし、素材も全然作れなかった頃の自分。2009年6月ぐらい。

f:id:aroundthedistance:20100803155606p:image

これはひどい。腹を切って死すべし。

after

今年のGW明けぐらいの自分のWEBデザイン。

f:id:aroundthedistance:20100803155607p:image

f:id:aroundthedistance:20100803155608p:image

弊社商品カタログデザイン。

f:id:aroundthedistance:20100803160103j:image

だいぶマシになりましたね。公開するだけで羞恥のレベルは脱しました。

デザインは素材で決まる

・・・と思う。

CSSXHTMLのコーディングが出来ても配色を勉強しても、素材がある程度のクオリティを保てないと全部ダメです。スケルトンだけ出来てもしょうがない。特にトップのメインでもってくるトップ絵が一番大事で、ここがピシっと決まればこまけぇことはどーにかなるように思います。

なので、CSSXHTMLも大切だけどぶっちゃけ画像加工ソフト(PhotoshopやFireworks)をどんだけ使いこなせて素材を作れるかのほうが、デザインの幅って広がると思う。僕もFireworksをある程度覚えて随分楽になった。もっとFireworksを覚えたい。チュートリアルやんなくちゃ・・・・。

素材は組み合わせ

あんま自信ないんだけど、素材って結構パーツの組み合わせだと思う。ライン+写真+文字、みたいな。絵心のあるかないか、というのではなく、レイヤーをうまく使えばある程度の素材は出来る気がする。バナーっぽいものならどーにかなる。こういう形のシェイプを1個作って並べれば波っぽくなるな~とか。ストロークの塗りをセットすれば縁取りの色を別途指定できるから立体的になるぞ、とか。それよりもペンツールいまだにうまく使いこなせないんで鬱DEATH。

あとテクスチャ。格子状とか斜線とか。そういうのをあるのを知って、それをある程度適用できるようになると幅が広がった。背景素材とか作るのが楽になった。このサイトすごい太っ腹なのでおすすめ。

Fireworks texture gallery

ピンときたデザインは即ブクマ

僕は[webdesign]タグで、自分がいいじゃんこれって思ったサイトのデザインをブクマしてる。

http://b.hatena.ne.jp/gothedistance/webdesign/

上達と真似は切っても切れない。いいなぁと思ったデザインを真似してみる。大丈夫、パクリにはならない。意外と個性は出る。レイアウト関係はFirebugsで解析すれば大抵のことはわかる。へーこんなプロパティ指定できるんだーとか、ほーこうやってマークアップしてるのねーとか。それもノウハウ。

僕は雑貨系のサイトを作るので、インテリア関連の雑誌とかそういうお店のチラシやPOPとかお店の雰囲気とか、そういうのを携帯で取って保存したりもしている。こういう陳列したらいいなーとか、こういう絵がかけたらいいなーとか。

文字もデザイン

あるお客さんにデザイン見せたら「もっと遊び心が欲しいなぁ」といわれたことを思い出す。それ以来フォントも意識した。丸文字、硬い文字、手書き文字、筆記体・・・・。文字が変わると雰囲気変わるんだよね~。メイリオは硬いからあんま好きじゃないのは僕だけか。

↑に書いたのは「はじめの一歩」です

これぐらいでやっとスタートに立てると思っている。

とにかく

思いやりと遊び心をもって、楽しもう~!