Webデザイン勉強会Vol.1まとめ

2010/7/10に開催しましたWebデザイン勉強会の内容を文章化したまとめとなります。

この勉強会の趣旨

「Webデザイナーと肩書きはついているが、Webデザインができない、または苦手としているコーダーやプログラマーにもWebデザインができるようみんなで考え、解決していこう」という内容に基づいています。

現在Webコーダーに求められているスキルは多岐にわたり、即戦力でもかなりのスキルレベルを要求されるようになりました。相対して、対価が下がるというきわめて厳しい状況です。今後この業界の進み方によっては、コーダーが必要なくなるかも知れません。

では、自分たちの価値を上げるためにも「デザイン」を覚えておけば、より強力な武器になると思いませんか？　ただ、Webにしろデザインは一朝一夕で身につけられるものではありません。

そこで、デザインが苦手と思っている人たちがデザインを学ぶには？　ということを考えてみました。

Webデザイナーに求められるモノ

Webデザイナーに求められる資質やスキルは、画像やレイアウトなどのDTP寄りなもので、プログラムのように答えが無く、時代に合わせた感覚が重要です。
ただ、一番大切なのは、まずやってみることだと思います。やったら良し悪しどちらかの結果が必ず出ます。やらなければそのままです。

Webデザインを制作するソフトはFireworks、Photoshop、Illustratorでそれぞれ一長一短があります。どれを使うかは会社や納品の仕様により決まるケースが多いです。ソフトに投資ができない方であれば、最近ではフリーのソフトもありますので、それを使うのも一つの手です。

WebデザインはHTMLが普及するにつれその制作条件が緩和され、単なる文章がワープロの様な出来になり、様々なものが作られました。その時々で流行したデザインを取り入れたものが良いデザインとして使用される傾向にあります。
最近の良いとされるWebデザインのサイトを見ていて増えてきているのは、基本配置をあっさり目に、コンテンツ内を重く置いて導線の確保、直線的で余白を多く取ったものです。

Webサイトを制作する際のレイアウトについては、最近だと世界で普及している1024pxモニタをベースに、960pxグリッドシステムと黄金比などを使う形です。掲載される情報も固まりつつあり、他サイトや企業と比べ、それらをどのようにして魅力あるものとして見せていくかがデザイナーの腕の見せ所となっています。

また、Webデザインで躓きやすい箇所は大きく4つあると考えています。
１．各パーツの装飾方法
２．Webサイトの配置（レイアウト）方法
３．レイアウトにおける配色や文字など各パーツのバランス
４．Webサイト全体を構築する際の情報整理
上記については今後詰めていきたいと思います。

その他たくさんの学ぶべき事がありますが、多すぎるのでパスします。

実践編～ボタンを作ってみよう～

○ボタンをより魅力的に作る方法を考えてみましょう
よく使われるボタン（グローバルナビゲーションを含む）の傾向として以下が挙げられます。
・緩いグラデーション
・高さが短い（グローバルナビゲーション）
・日本語と英語を組み合わせる

○立体感を付けるには
文字組が横の場合、左上が原点となりますので、左上を光源としてボタンの左と上に明るい線を入れます。反対に右と下に暗い線を入れると立体感がでます。このとき、ボタンの1px内側に入れると寄り効果的です。

文字にはドロップシャドウを使う、色の違う縁を入れた文字を入れると可読性が上がります。

○グローバルナビゲーションを作ってみる
グローバルナビゲーションはCSS Spriteを使うことを前提にボタンを作ると作業効率が上がります。Illustratorなら文字の段組を使うと幅の決まったボタンが簡単に作れます。

最後に

今回は初心者向けにざっと流す程度を想定していましたが、参加された方の意見を伺うと、もっとつっこんだ内容でも良さそうと感じました。次回は大きく時間を割き、概念的なところから始められたらと考えています。開催は9月を予定しています。日程が決まったら告知いたします。