HTML5時代のWebデザイン
- 1. HTML5 時代のWebデザイン HTML5 Conference 2012 こもりまさあき
- 2. 自己紹介を… こもりまさあき http://protean.im 1990年代前半に都内のDTP系デザイン会社にてアルバイトをはじめる。大 学卒業後そのまま正社員となり、入出力業務、デザイン業務、ネットワーク 関連業務に並行して従事。2001年、会社を退職しフリーランスの道へ。 案件ごとに業務内容や立ち位置が異なるため、職域的な肩書きはなし 近著に『レスポンシブ・ウェブデザイン標準ガイド（MdN刊）』『Webデ ザイナーのためのHTML5移行ガイド（共著・インプレスジャパン刊）』、 など HTML5 Conference 2012 特別価格980円 Twitter: @cipher / @proteanbm http://direct.ips.co.jp/html5/ Instagram: @cipher
- 3. これからお話しすること • Webをデザインするって何だろう？ • どんどん変わり続ける世界 • 本当に大事な部分に目を向けてみよう • Webの体験がより豊かになるように
- 6. Webデザインとは？ • Photoshopで画面を作ること？ • 適当にHTMLで書いておけばいい？ • グリグリ動いて、楽しければいい？
- 7. もちろん、一部では必要なこと • 視覚的な表現も情報をうまく伝えるための1要素 • 要素に対しては、適切な意味付けが必要 • アクションに対して、 適切な反応を返すということはもちろん大事
- 8. 「Webデザイン」の捉え方は異なる • Webに関わるそれぞれの立場で 「Webデザイン」の捉え方が微妙に違う • コンテンツホルダー、ディレクター、 エディター、デザイナー、プログラマ、などなど
- 9. これからのWebデザインは… • 局所的なところだけではなく、 もっと大きなところで考えていく • これまで以上に広範な知識が必要になるかも • みんなでWebをデザインしていく、 そんな考え方のほうが良いのでは？
- 10. 世界は変わり始めています
- 11. どんどん変わり続ける世界
- 12. Webを取り巻く環境が変わりはじめた • これからはブロードバンドだ？ • ふと周りを見渡せば、 スマートフォンをはじめとしたデバイス増 • 高速な回線と不安定な回線の混在 • さらにディスプレイは高精細化に磨きが…
- 13. 閲覧デバイスの多様化も着々と進行中 • Androidの端末は種類も豊富 • 今後ますますデバイスが多様化する？ • PC向けのブラウザだって 次から次に新しいものになる （かといって、みんながアップデートしない）
- 14. Android、Android… Android Device Gallery: http://www.android.com/devices/
- 15. 数多くのブラウザに対応するには？ • 過去のバージョンのブラウザの存在 • スマートデバイスのブラウザ • どのように対応していくのが良いか
- 16. ほいそれと切り捨てられない現実
- 20. これからのWebコンテンツ配信は？ • PC向けのままでいい？ スマートフォンに最適化？ レスポンシブな実装でいける？ アプリケーションにしてしまう？ • 最適な配信形態は、 コンテンツの種類や内容、 そして利用シーンで異なってくる
- 22. 何が適しているか、みんなで考える
- 23. ひとつ言えること…
- 25. これまでと状況が違うことを認識しよう • 作ったはいいけど、 見てもらえないのであれば意味はない • 閲覧環境の変化をきちんと理解する • さまざまな閲覧デバイスの存在、 それらの利用シーンを考えること • 新しい技術（たとえばHTML5）の登場
- 26. Webの根本にあることを見直そう • 閲覧環境に左右されず、 情報を取得できることが大事 • Webが本来もっている性格、 そこをあらためて考え直す良い時期
- 29. 今のWebデザインの手法、考え方を疑う • 所狭しと情報を並べることが 果たしていいことなのだろうか？ • 見た目がキレイとか面白いだけで、 表示が遅くていいのか？ • クライアントの望みを 忠実に再現すればいいのか？
- 30. デバイスの多様化で、問題が浮き彫りに • スマートフォンに最適化したら、 PCコンテンツとの相違が問題に… • レスポンシブな実装をやってみたら、 いつまで待っても表示されない… • 特定の機種でうまく動作しない…
- 33. 誰のためにあるWebサイトなのか？ • 読みやすさ、わかりやすさ、使いやすさ、 そして、アクセスのしやすさ • 表層的な部分だけに偏重にならず、 目には見えにくい部分を考えること。 それもデザインのひとつ
- 34. これからの未来に向けてできること
- 35. コンテンツにこれまで以上の価値を • HTML5で拡充されたタグを きちんと使って意味付けを明確に • RDFa、Microdata、Microformatsの利用 • ただのテキスト以上の価値を与える
- 37. 不安定な回線環境に対応する • パフォーマンスを考慮した コンテンツの設計と実装 • CSS3の採用、Webフォント、SVG • .appcacheなどの利用
- 38. 多様なデバイスへの対応手段を覚える • Media Queriesを使った さまざまな環境に適応できる設計と実装 • ピクセルパーフェクトからの卒業 • 旧来のブラウザへの対応（Polyfillなど）
- 40. 必要に応じて、Polyfillの利用 HTML5 Cross Browser Polyfills: https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-Browser-Polyfills
- 47. 今日のまとめ • Webを取り巻く環境が変化している • 回線環境、デバイス環境、利用シーン これらの変化を認識しておこう • Webの持つ本来の性格を見直して、 Webデザインをみんなで考えよう • 少し先の未来を見つめながら素敵なWebを
- 48. 本日はありがとうございました