大学生です。
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で質問しましょう!
似たような質問が見つかりました
- HTML・CSS お金をあまりかけずにプログラミングを勉強する方法を教えてください。 こんにちは。 Webデザイン系の 3 2022/08/05 03:22
- Web・クリエイティブ 独学でwebデザイナーを目指すには 2 2022/09/17 16:27
- HTML・CSS WEBサイトの構築。表示データとWEBデザインを分離する考え方を専門用語・業界用語では何と言うか? 8 2022/09/27 09:16
- Web・クリエイティブ 未経験からのWebデザインとプログラマーについて。 4 2022/10/12 00:00
- Web・クリエイティブ 趣味でグラフィックデザインをして見たいと最近考えてるのですが、質問で、平面構成のデザインとはなんです 1 2022/08/21 19:32
- Web・クリエイティブ Webデザイナー(フリーランス)の需要について 1 2023/04/29 20:30
- 就職 業界未経験でWebデザイナーの面接を受けるのですが、なぜWebデザイナーになろうと思うのか?といった 4 2022/12/11 15:30
- その他(言語学・言語) ハワイ語を勉強するためのおすすめの教材について 1 2022/11/23 18:51
- 新卒・第二新卒 会社を辞めます。これからの人生について質問させてください。 7 2022/06/26 00:04
- Web・クリエイティブ 今本当に悩んでいます。将来グラフィックデザイナーを目指し専門学校に通ってるのですが、正直グラフィック 1 2022/09/10 17:58
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
Excel デザインモードが起動し...
-
2025年万博ロゴのデザインは誰...
-
海上自衛隊 護衛艦 おおすみ...
-
パワーポイントのデフォルトの...
-
今のDIORショッパーのデザイン...
-
この肘のタトゥーはなんていう...
-
24歳女です。完全在宅もしくは...
-
篆刻の、持ち手のデザインをウ...
-
デザイン初心者なのですが、一...
-
未成年の入れ墨
-
特定のtiff画像だけが真っ黒に...
-
教えてください。 エクセルマ...
-
「amazon」とはどんなロゴで書...
-
エクセル関数で画像を呼び出す...
-
警察官
-
自分、年が16何ですが刺青い...
-
「デスクトップの背景として設...
-
和彫り
-
陶芸家の名前
-
IME2007 祥南行書体 江戸勘亭...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
Excel デザインモードが起動し...
-
今のDIORショッパーのデザイン...
-
イスラム模様の描き方
-
篆刻の、持ち手のデザインをウ...
-
金属やプラスチックなど、固い...
-
この肘のタトゥーはなんていう...
-
犬のデザインの、オーナーグッ...
-
この柄の名前を教えてください
-
昔買った同じぬいぐるみをさが...
-
こーゆーTシャツの縫い目が見え...
-
クラスTシャツのデザイン作成に...
-
通園バッグにしようと思うので...
-
クロスステッチでひらがなを刺...
-
相談です
-
オリジナルデザイン、何に使っ...
-
デザイン系(美術系)専門学校...
-
工学デザインとは文系?理系?
-
服のデザイナー
-
グラフィックデザイナーを目指...
-
クロスステッチ図案中のイニシ...
おすすめ情報