Webデザインの勉強の仕方

質問

大学生です。
Webデザイナーに興味があり、IllustratorでWebサイトのデザインを作成したり、作成したものをHTMLとCSSでコーディングしたりしています。

質問なのですが、皆さんはWebデザインをどのように勉強しているのでしょうか？

私は理論から入ろうと思ってドナルド・ノーマン『誰のためのデザイン？』『エモーショナル・デザイン』
やユーザビリティの本を読むことから始めたのですが、理論を学んでもデザインに活かすのが難しく、断念した覚えがあります。
それ以降は好きなWebサイトのデザインをIllustratorで再現してみたり、思いついたデザインを紙に描いて試行錯誤した後、Illustratorで作成するといった工程を経ています。
デザインというのはただでさえ学ぶのが難しい領域ですが、体系的な勉強方法はあるのでしょうか。

回答No.1

ORUKA1951

デザイン---これはもう本人のセンスと才能による部分が大きくて何ともアドバイスしにくいですね。どんなに説明してもできない人もいるし、ラフ図を示しただけで・・

　Illastratorから入られた方の一番の難点は、カタログやパンフレットのデザインから抜け出せないことです。Webのデザインは、それらとはまったく異なる物だと指摘します。--そんなに異なるわけではないけど、そのくらい言わないと理解してもらえないくらいです。
　ウェブは、その誕生や普及の最大の理由は、
【引用】＿＿＿＿＿＿＿＿＿＿＿＿ここから
HTML文書が、ブラウザやプラットフォームの違いを超えてうまく働くべきであるということは、多くが認めるところである。 相互運用性の達成は、コンテンツプロバイダのコストを低下させる。なぜならただ1種類の文書しか作る必要がなくなるからだ。 もし【相互運用性確保の】努力が成されなければ、Webは互換性のないフォーマット毎に分け隔てられた世界に分割され、すべての関係者にとっての商業的可能性が減少することとなるであろう、大きなリスクを負うこととなる。
・・・【中略】・・・
　HTMLは、どんな環境からもWebの情報を利用できるようにすべきだという方針の下に開発されている。例えば、様々な解像度や色深度のグラフィックディスプレイを持つPCや、携帯電話、モバイル機器、音声入出力機器、帯域が広いコンピュータや狭いコンピュータ、等の環境である。
￣￣￣￣￣￣￣￣￣￣￣￣￣ここまで［Introduction to HTML 4 (ja)( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/intro/intro.html#h-2.2.1 )］より

　優れたデザインとは、このウェブやHTMLの理念に沿っているか否かをまず第一位に考えて、その上で表現力が問われること。特にWAI(ウェブコンテンツ・アクセシビリティ・ガイドライン ( http://www.zspc.com/documents/wcag10/ ))は忘れてはならないでしょう。

＞理論を学んでもデザインに活かすのが難しく、断念した
　これは、「あなたが考えているデザイン」と「ウェブでのデザイン」が違ったためにぶつかった壁だと思います。

　また、現在忘れてはならないのが文書構造が正しくマークアップされているかも重要な要素になります。Googleのウェブマスターガイドラインを読まれていると思いますが。
★ウェブマスター向けガイドライン - ウェブマスター ツール ヘルプ ( http://support.google.com/webmasters/bin/answer.py?hl=ja&answer=35769 )
　→デザインとコンテンツに関するガイドライン ( http://support.google.com/webmasters/bin/answer.py?hl=ja&answer=35769#1 )
　とページ内のリンクをすべて理解しておくこと

　HTMLのデザインで最も重要なことは、まず文書構造です。スタイルシートも画像もjavascriptもflashも利用できないブラウザで、そのページに何が書かれているか正確に理解できること。・・・・これが第一歩です。

　その上で、スタイルシートで、パソコン用、携帯端末用、プリンター用、スマートホン用などにデザインしていきます。これら(media別のスタイルシート)を、たとえ用意していなくても、これらで利用できるようにするためには、HTMLの文書構造が必要なのです。

『思いついたデザインを紙に描いて試行錯誤した後、Illustratorで作成するといった工程』は方法としては、逆です。私が指導しているのは
1)まず、一切デザインなしでHTMLをマークアップして来い。
2)それができたら、数種類のデザインを渡してHTMLに一切手を加えることなく、それらのデザインをして来い。
　お分かりのように、(1)ができていないと(2)は不可能です。これを逆に行う「まずデザインを考えてHTMLを作成する」と、じゃ、今度は、このデザインにしろというとできない新人が多いです。

[例]
　たとえば次のようなスタイルシートを見れば、HTMLを見なくてもどのようにデザインされていて、それを2カラムにしたいとき、スタイルシートをどう書き換えれば良いかも想像が付きますよね。
html,body{margin:0;padding:0;}
div.header,div.section,div.footer{width:70%;margin:0 auto;position:relative;}
div.header{min-height:120px;}
div.section div.section{width:auto;margin-left:15%;margi-right:15%;}
div.header div.nav{position:absolute;top:100%;height:30px;line-height:30x;}
div.header div.nav ol,div.header div.nav ol li{display:block;list-style:none;margin:0;padding:0;}
div.header div.nav ol li{width:15%;float:left;}
div.section{margin-top:30px;}
div.section div.contentTable,
div.section div.appendix{psition:absolute;height:100%;top:10px;width:15%;}
div.section div.contentTable{left:0;}
div.section div.appendix{right:0}
なお、HTML5の場合は
html,body{margin:0;padding:0;}
header,section,footer{width:70%;margin:0 auto;position:relative;}
header{min-height:120px;}
section section{width:auto;margin-left:15%;margi-right:15%;}
header nav{position:absolute;top:100%;height:30px;line-height:30x;}
header nav ol,header nav ol li{display:block;list-style:none;margin:0;padding:0;}
header nav ol li{width:15%;float:left;}
section{margin-top:30px;}
section div.contentTable,
section div.appendix{psition:absolute;height:100%;top:10px;width:15%;}
section div.contentTable{left:0;}
section div.appendix{right:0}
ですかね。
　デザインを決めずにHTMLをまずきちんと作成する必要(Illastratorから始めたらダメ)が理解できますかね。