2015年2月9日、ヤフー株式会社 ミッドタウン・タワー 11Fセミナールームで開催されたイベント「Web担当者向けセミナー：マルチデバイス時代のWebアクセシビリティ」での講演資料です。

1. 「10年後のWeb」のために、
今すべきこと
株式会社ミツエーリンクス
木達 一仁
2015年2月9日
Web担当者向けセミナー：マルチデバイス時代のWebアクセシビリティ

2. アジェンダ
• 自己紹介
• 2005年の Web デザイン
• 2015年の Web デザイン
• 2025年の Web はどうなっているか？
• Web デザインはどう変わるべきか？

3. 自己紹介

4. 木達 一仁
• 株式会社ミツエーリンクス
取締役CTO 兼 第二本部長
• 主にマークアップやスタイルシー
トの設計、関連ガイドラインの
策定・運用に従事
• ウェブアクセシビリティ基盤委
員会（WAIC）副委員長

5. 2005年の Web デザイン

6. 2005年の主な国内ニュース
• 郵政解散後、自民党が歴史的大勝
• JR福知山線脱線事故
• マンションなどで耐震強度偽装が相次ぎ発覚
• ライブドアとフジテレビでニッポン放送の株争奪戦
• 日本人の人口、初の減少

7. 2005年の Web 業界トレンド
• ブログブーム
• ポッドキャストの普及
• Web 2.0
• 第二次ブラウザ戦争
• ヤフーが検索エンジンをロボット型主体に変更
• アクア風ボタン etc.

8. 2005年のブラウザーシェア
Safari
2%
Firefox
8%
IE
87%
IE
Firefox
Safari
Netscape
Mozilla
Opera
その他
出典： FirefoxがIEからシェアを奪う傾向
∼米NetApplications調査

9. 2005年2月9日のYahoo! JAPAN トップページ
https://web.archive.org/web/20050209160553/http://www.yahoo.co.jp/

10. 2015年2月9日のYahoo! JAPAN トップページ
http://www.yahoo.co.jp/

11. 2015年の Web デザイン

12. Nigel Goldsmith www.nigelgoldsmith.co.uk/

13. https://www.flickr.com/photos/taedc/9467125459/

14. Moto 360 by Motorola
https://moto360.motorola.com/

15. マルチデバイスの時代
• デスクトップ PC だけでなく、スマートフォンやタブ
レット端末でも Web を使う時
• 同じサイトやサービスを複数のデバイスで使うのは
当たり前
• PC を使わない世代の台頭
• ウェアラブルデバイスの胎動
• メガネ型、リストウォッチ型 etc.

16. Mobile First
http://www.lukew.com/ff/entry.asp?933

17. Responsive Web Design
http://alistapart.com/article/responsive-web-design

18. ミツエーリンクス
http://www.mitsue.co.jp/

19. ライブ タイル - Windows app development
https://msdn.microsoft.com/library/windows/apps/dn468032.aspx

20. iOS Human Interface Guidelines: Designing for iOS
https://developer.apple.com/library/ios/documentation/UserExperience/Conceptual/MobileHIG/index.html

21. Introduction - Material design - Google design guidelines
http://www.google.com/design/spec/material-design/introduction.html

22. 10年前に現在をどれだけ
予測できただろうか？
• スマートフォン / タブレット型デバイス
• モバイルファースト
• レスポンシブ Web デザイン
• フラットデザイン etc.

23. http://bradfrostweb.com/blog/post/this-is-the-web/

24. 2025年の Web は
どうなっているか？

25. 起こりうる変化
• より便利に、より安く
• あらゆるデバイスの小型化、高性能化、低価格化
• あらゆるネットワークの高品質化、低価格化
• Internet of Things / Web of Things：Web 技術であらゆるモ
ノがネットワーク化
• ハードウェアのモジュール化、オープンソース化
• ストレージのコスト低下とクラウドサービスの普及に伴
うビッグデータ解析の進化

26. Productivity FutureVision (2009)
https://www.youtube.com/watch?v=t5X2PxtvMsU

27. A Day Made of Glass... Made possible by Corning. (2011)
https://www.youtube.com/watch?v=6Cf7IL_eZ38

28. A Day Made of Glass 2: Same Day. Expanded CorningVision (2012)
https://www.youtube.com/watch?v=jZkHpNnXLB0

29. 入出力デバイスの変化
• 「身近な何か」が入力 / 出力デバイスに
• キーボード、マウスからタッチ、ジェスチャーへ
• Siri や Cortana にみられる音声認識技術の進化でス
クリーンが無くても入力可能に
• Brain Machine Interface（BMI）の進歩
• いずれ『攻殻機動隊』で描かれた世界が現実に？
• ますます「Web」と「Web 以外」の境界がゆらぐ

30. https://secure.flickr.com/photos/jurvetson/3349608248/

31. Pattie Maes + Pranav Mistry: Meet the SixthSense interaction
http://www.ted.com/talks/pattie_maes_demos_the_sixth_sense

32. Web デザインは
どう変わるべきか？

33. Web コンテンツの
消費スタイルの変化
• ユーザー、デバイス、コンテキストすべてが加速度的
に多様化していく
• Web コンテンツの消費に使われるのは視覚、聴
覚、触覚、そして……？
• もし脳で直接 Web にアクセスするようになった
ら、Web デザインはどうあるべきなのか？

34. Web コンテンツを
空気や水のように
流通させる必要性
• スクリーンは多様化している（大きさ、解像度、形状）
• スクリーンを持たないデバイスからの Web アクセスを
考える必要もある
• 既に「見た目だけ」の発想では対応できない！

35. Web は「見られればいい」
という時代の終焉
• Webは紙媒体とは違う、と言われ続けて幾年月
• いまだに根強い印刷物的な発想・捉え方
• 今後は「Webらしさ」という名の柔軟性が必要不可欠
• その土台を担うのがマークアップによる情報伝達
• マシンリーダビリティ アクセシビリティが重要

36. 来たるべき変化に備える
• Webデザインは常に「動く的を射る」が如し
• Web 標準技術、デバイスの仕様、ブラウザーのサポー
ト状況、支援技術、ユーザーのリテラシーのバランス
• アクセシビリティという「品質」に目を向けよう
• アクセシビリティを高め、相互運用性を最大化するこ
とが Web の、そしてビジネスの価値を最大化する
• いつでも、どこでも、誰でも、どんなデバイスでも使え
る Web サイトの実現へ

37. ご清聴ありがとうございました