HTML5 Conference 2012

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の体験がより豊かになるように

4. Webをデザインするって何だろう？

5. 「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. ほいそれと切り捨てられない現実

17. そこをサポートすることをふまえつつ

18. 少し未来のこともあわせて考えましょう

19. 本当に大事な部分に目を向けてみよう

20. これからのWebコンテンツ配信は？
• PC向けのままでいい？
スマートフォンに最適化？
レスポンシブな実装でいける？
アプリケーションにしてしまう？
• 最適な配信形態は、
コンテンツの種類や内容、
そして利用シーンで異なってくる

21. どっちが良いとか悪いとかの話ではない

22. 何が適しているか、みんなで考える

23. ひとつ言えること…

24. 必ずしもPCに向かっているわけではない

25. これまでと状況が違うことを認識しよう
• 作ったはいいけど、
見てもらえないのであれば意味はない
• 閲覧環境の変化をきちんと理解する
• さまざまな閲覧デバイスの存在、
それらの利用シーンを考えること
• 新しい技術（たとえばHTML5）の登場

26. Webの根本にあることを見直そう
• 閲覧環境に左右されず、
情報を取得できることが大事
• Webが本来もっている性格、
そこをあらためて考え直す良い時期

27. 誰だって、自分の環境でストレスなく見たい

28. Webの体験がより豊かになるように

29. 今のWebデザインの手法、考え方を疑う
• 所狭しと情報を並べることが
果たしていいことなのだろうか？
• 見た目がキレイとか面白いだけで、
表示が遅くていいのか？
• クライアントの望みを
忠実に再現すればいいのか？

30. デバイスの多様化で、問題が浮き彫りに
• スマートフォンに最適化したら、
PCコンテンツとの相違が問題に…
• レスポンシブな実装をやってみたら、
いつまで待っても表示されない…
• 特定の機種でうまく動作しない…

31. ページあたりのデータ量は減りつつある
HTTP Archive: http://httparchive.org/interesting.php

32. 今までと考え方を変えていかないと…、
多様化していく環境に対応することが困難に

33. 誰のためにあるWebサイトなのか？
• 読みやすさ、わかりやすさ、使いやすさ、
そして、アクセスのしやすさ
• 表層的な部分だけに偏重にならず、
目には見えにくい部分を考えること。
それもデザインのひとつ

34. これからの未来に向けてできること

35. コンテンツにこれまで以上の価値を
• HTML5で拡充されたタグを
きちんと使って意味付けを明確に
• RDFa、Microdata、Microformatsの利用
• ただのテキスト以上の価値を与える

36. これまで見えなかった情報もこのように
Googleの検索結果のリスト: Webコンテンツ中にRDFaやMicrodataを埋め込むことでより多くの情報が伝えられる

37. 不安定な回線環境に対応する
• パフォーマンスを考慮した
コンテンツの設計と実装
• CSS3の採用、Webフォント、SVG
• .appcacheなどの利用

38. 多様なデバイスへの対応手段を覚える
• Media Queriesを使った
さまざまな環境に適応できる設計と実装
• ピクセルパーフェクトからの卒業
• 旧来のブラウザへの対応（Polyfillなど）

39. たとえば、Modernizrを使うとか
Modernizr: http://modernizr.com/

40. 必要に応じて、Polyfillの利用
HTML5 Cross Browser Polyfills: https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-Browser-Polyfills

41. 「Webをデザインする」ということ、
そろそろみんなで考え直す時期では？

42. 今まで良しとされてきた、
その価値観を壊すぐらいに

43. 本当に今のままのWebの構造でいいのか

44. この先のWebをもっと豊かにできる可能性、
それを実現する術を知ろうとすることは大事

45. そして、使える時期がきたら使えばいい

46. HTML5の動向に注目しながら
多くの人の役に立つWebサイトを

47. 今日のまとめ
• Webを取り巻く環境が変化している
• 回線環境、デバイス環境、利用シーン
これらの変化を認識しておこう
• Webの持つ本来の性格を見直して、
Webデザインをみんなで考えよう
• 少し先の未来を見つめながら素敵なWebを

48. 本日はありがとうございました