Download to read offline
噴水企画Web講習会
- 1. 噴水企画Web講習会 ～近年のWebデザイン～ 芸術情報設計学科二年 森島 律子（森内建太） http://goo.gl/Bqz6Rm
- 2.
- 3. 記述形式として HTML(HyperTextMarkup Language) を使う。 HTML は文書の形式で大きな特徴としてハイパーリンクという機 能がある。 W3C(World Wide Web Consortium) が標準化しており、最新バー ジョンは HTML5（まだ一部未対応）。 Webサイトの 基本
- 4. HTML は入れ子構造。 HTMLの基本 <!DOCTYPEhtml> <html> <head> …… </head> <body> …… </body> </html> ←DTD宣言文。この書き方だとHTML5を表す。 ←見た目にあんまり影響しない内容を記述。 ←目に見えるコンテンツはここに記述。 HTMLではあくまで構造を記述する。 T先生みたいに <br /> を埋め込んでスペースを空けない！！ 見た目を格好良くしたいなら CSS を埋め込む。 動かしたいなら JavaScript を埋め込む。
- 5. CSS はHTML の見た目をデザインする。 背景黒にしたい background-color: black; 半透明にしたい CSSの基本 Opacity: 0.5; 最新バージョンは CSS3（これまた一部未対応）。 外部ファイルにして埋め込むのが一般的。 <head> <link rel="stylesheet" type="text/css" href="hoge.css" /> </head>
- 6. JavaScript は動的にHTML の中身を変更するプログラミング言語。 Webデザイナー向けに使いやすくした jQuery というライブラリ を使うのが最近の主流。 http://jquery.com/ JavaScriptの 基本 日本語リファレンスもあるけど情報が古い。 http://semooh.jp/jquery/
- 7. まずドットインストールというサービスで基本を理解しよう！ http://dotinstall.com/ どうやって 勉強したらい いの？ わからないことがあったらグーグル先生に聞こう！ それでもわからなかったら自分にリプを！（暇だったら応える） https://twitter.com/printf_moriken
- 8.
- 9. Webサイトはもはやパソコンのブラウザで見るものではなく なった。 モバイル ファースト モバイルファーストとはスマートフォン用のWebサイトを先 に作るべきだという考え方。 スマートフォン用の HTML と パソコン用の HTML をどう切り 替えるかが問題。
- 10. UserAgent を使って振り分ける。 例 http://www.nhk.or.jp/bijutsu/bijutune/ 別々にHTML を作る方法
- 11. レスポンシブデザイン CSSでwindow の横幅によってデザインを変更する 例 http://usagee.co.jp/ 同じHTMLを 使う方法
- 12. 使いやすい、わかりやすいWebサイトになってるか。 UserInterface を考慮しているか。 Webサイトのデータ構造はわかりやすくなっているか。 その他 Webデザイン の重要事項 文字の大きさは適切か。 スマートフォンだと小さすぎて見難い可能性がある。 重要度の高いコンテンツに注目できるようになっているか。 フォントにもこだわる。 すべてのデザインに根拠があるか。 なんでこれはこうしたのという問いに答えられるようになろう。 他のWebサイトからヒントを得てもいいが、そのサイトにももちろん そのデザインにした根拠があるはず！
- 13. Retina ディスプレイに対応。 meta タグを使う。 おまけ OGP をちゃんと設定する（Facebookなどのリンクに使われる）。 ～細部にこだわろう～ favicon, webclip などを用意しておく。 テキストファイルの minify をする。 できれば GZIP 化も。