大学生です。
Webデザイナーに興味があり、IllustratorでWebサイトのデザインを作成したり、作成したものをHTMLとCSSでコーディングしたりしています。
質問なのですが、皆さんはWebデザインをどのように勉強しているのでしょうか?
私は理論から入ろうと思ってドナルド・ノーマン『誰のためのデザイン?』『エモーショナル・デザイン』
やユーザビリティの本を読むことから始めたのですが、理論を学んでもデザインに活かすのが難しく、断念した覚えがあります。
それ以降は好きなWebサイトのデザインをIllustratorで再現してみたり、思いついたデザインを紙に描いて試行錯誤した後、Illustratorで作成するといった工程を経ています。
デザインというのはただでさえ学ぶのが難しい領域ですが、体系的な勉強方法はあるのでしょうか。
A 回答 (1件)
- 最新から表示
- 回答順に表示
No.1
- 回答日時:
デザイン---これはもう本人のセンスと才能による部分が大きくて何ともアドバイスしにくいですね。
どんなに説明してもできない人もいるし、ラフ図を示しただけで・・Illastratorから入られた方の一番の難点は、カタログやパンフレットのデザインから抜け出せないことです。Webのデザインは、それらとはまったく異なる物だと指摘します。--そんなに異なるわけではないけど、そのくらい言わないと理解してもらえないくらいです。
ウェブは、その誕生や普及の最大の理由は、
【引用】____________ここから
HTML文書が、ブラウザやプラットフォームの違いを超えてうまく働くべきであるということは、多くが認めるところである。 相互運用性の達成は、コンテンツプロバイダのコストを低下させる。なぜならただ1種類の文書しか作る必要がなくなるからだ。 もし【相互運用性確保の】努力が成されなければ、Webは互換性のないフォーマット毎に分け隔てられた世界に分割され、すべての関係者にとっての商業的可能性が減少することとなるであろう、大きなリスクを負うこととなる。
・・・【中略】・・・
HTMLは、どんな環境からもWebの情報を利用できるようにすべきだという方針の下に開発されている。例えば、様々な解像度や色深度のグラフィックディスプレイを持つPCや、携帯電話、モバイル機器、音声入出力機器、帯域が広いコンピュータや狭いコンピュータ、等の環境である。
 ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ここまで[Introduction to HTML 4 (ja)( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )]より
優れたデザインとは、このウェブやHTMLの理念に沿っているか否かをまず第一位に考えて、その上で表現力が問われること。特にWAI(ウェブコンテンツ・アクセシビリティ・ガイドライン ( http://www.zspc.com/documents/wcag10/ ))は忘れてはならないでしょう。
>理論を学んでもデザインに活かすのが難しく、断念した
これは、「あなたが考えているデザイン」と「ウェブでのデザイン」が違ったためにぶつかった壁だと思います。
また、現在忘れてはならないのが文書構造が正しくマークアップされているかも重要な要素になります。Googleのウェブマスターガイドラインを読まれていると思いますが。
★ウェブマスター向けガイドライン - ウェブマスター ツール ヘルプ ( http://support.google.com/webmasters/bin/answer. … )
→デザインとコンテンツに関するガイドライン ( http://support.google.com/webmasters/bin/answer. … )
とページ内のリンクをすべて理解しておくこと
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から始めたらダメ)が理解できますかね。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
おすすめ情報
- ・漫画をレンタルでお得に読める!
- ・人生のプチ美学を教えてください!!
- ・10秒目をつむったら…
- ・あなたの習慣について教えてください!!
- ・牛、豚、鶏、どれか一つ食べられなくなるとしたら?
- ・【大喜利】【投稿~9/18】 おとぎ話『桃太郎』の知られざるエピソード
- ・街中で見かけて「グッときた人」の思い出
- ・「一気に最後まで読んだ」本、教えて下さい!
- ・幼稚園時代「何組」でしたか?
- ・激凹みから立ち直る方法
- ・1つだけ過去を変えられるとしたら?
- ・【あるあるbot連動企画】あるあるbotに投稿したけど採用されなかったあるある募集
- ・【あるあるbot連動企画】フォロワー20万人のアカウントであなたのあるあるを披露してみませんか?
- ・映画のエンドロール観る派?観ない派?
- ・海外旅行から帰ってきたら、まず何を食べる?
- ・誕生日にもらった意外なもの
- ・天使と悪魔選手権
- ・ちょっと先の未来クイズ第2問
- ・【大喜利】【投稿~9/7】 ロボットの住む世界で流行ってる罰ゲームとは?
- ・推しミネラルウォーターはありますか?
- ・都道府県穴埋めゲーム
- ・この人頭いいなと思ったエピソード
- ・準・究極の選択
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
何となくですが、 アルファード...
-
デザイン関係の専門に行ってい...
-
Excel デザインモードが起動し...
-
今のDIORショッパーのデザイン...
-
ヤングオイスターのコップです...
-
篆刻の、持ち手のデザインをウ...
-
この柄の名前を教えてください
-
ANAとANH
-
この肘のタトゥーはなんていう...
-
印刷物 増刷注文時にのデザイ...
-
こーゆーTシャツの縫い目が見え...
-
男子中学生が指輪付けてたら引...
-
無料の日記サイトでいい所あり...
-
筆王で来年の巳年のデザインが...
-
新鮮なデザイン・色とは?
-
オリジナルアクセサリーをデザ...
-
岩田一恵さんの押花教室
-
非常口マークのデザイン
-
平面デザインの勉強
-
地下鉄の入り口のマークについて
おすすめ情報