Embed Size (px)
Citation preview
「10年後のWeb」のために、今すべきこと
株式会社ミツエーリンクス木達 一仁
2015年2月9日
Web担当者向けセミナー：マルチデバイス時代のWebアクセシビリティ
アジェンダ
• 自己紹介• 2005年の Web デザイン
• 2015年の Web デザイン
• 2025年の Web はどうなっているか？
• Web デザインはどう変わるべきか？
自己紹介
木達 一仁• 株式会社ミツエーリンクス取締役CTO 兼 第二本部長
• 主にマークアップやスタイルシートの設計、関連ガイドラインの策定・運用に従事
• ウェブアクセシビリティ基盤委員会（WAIC）副委員長
2005年の Web デザイン
2005年の主な国内ニュース
• 郵政解散後、自民党が歴史的大勝• JR福知山線脱線事故
• マンションなどで耐震強度偽装が相次ぎ発覚• ライブドアとフジテレビでニッポン放送の株争奪戦• 日本人の人口、初の減少
2005年の Web 業界トレンド• ブログブーム• ポッドキャストの普及• Web 2.0
• 第二次ブラウザ戦争• ヤフーが検索エンジンをロボット型主体に変更• アクア風ボタン etc.
2005年のブラウザーシェアSafari 2%
Firefox 8%
IE 87%
IEFirefoxSafariNetscapeMozillaOperaその他
出典： FirefoxがIEからシェアを奪う傾向～米NetApplications調査
2005年2月9日の Yahoo! JAPAN トップページhttps://web.archive.org/web/20050209160553/http://www.yahoo.co.jp/
2015年2月9日の Yahoo! JAPAN トップページhttp://www.yahoo.co.jp/
2015年の Web デザイン
Moto 360 by Motorolahttps://moto360.motorola.com/
マルチデバイスの時代• デスクトップ PC だけでなく、スマートフォンやタブレット端末でも Web を使う時
• 同じサイトやサービスを複数のデバイスで使うのは当たり前
• PC を使わない世代の台頭
• ウェアラブルデバイスの胎動• メガネ型、リストウォッチ型 etc.
Mobile Firsthttp://www.lukew.com/ff/entry.asp?933
Responsive Web Designhttp://alistapart.com/article/responsive-web-design
ミツエーリンクス
http://www.mitsue.co.jp/
ライブ タイル - Windows app developmenthttps://msdn.microsoft.com/library/windows/apps/dn468032.aspx
iOS Human Interface Guidelines: Designing for iOShttps://developer.apple.com/library/ios/documentation/UserExperience/Conceptual/MobileHIG/index.html
Introduction - Material design - Google design guidelineshttp://www.google.com/design/spec/material-design/introduction.html
10年前に現在をどれだけ予測できただろうか？
• スマートフォン / タブレット型デバイス
• モバイルファースト• レスポンシブ Web デザイン
• フラットデザイン etc.
http://bradfrostweb.com/blog/post/this-is-the-web/
2025年の Web はどうなっているか？
起こりうる変化• より便利に、より安く
• あらゆるデバイスの小型化、高性能化、低価格化• あらゆるネットワークの高品質化、低価格化
• Internet of Things / Web of Things：Web 技術であらゆるモノがネットワーク化
• ハードウェアのモジュール化、オープンソース化• ストレージのコスト低下とクラウドサービスの普及に伴うビッグデータ解析の進化
Productivity Future Vision (2009)https://www.youtube.com/watch?v=t5X2PxtvMsU
A Day Made of Glass... Made possible by Corning. (2011)https://www.youtube.com/watch?v=6Cf7IL_eZ38
A Day Made of Glass 2: Same Day. Expanded Corning Vision (2012)https://www.youtube.com/watch?v=jZkHpNnXLB0
入出力デバイスの変化• 「身近な何か」が入力 / 出力デバイスに
• キーボード、マウスからタッチ、ジェスチャーへ• Siri や Cortana にみられる音声認識技術の進化でスクリーンが無くても入力可能に
• Brain Machine Interface（BMI）の進歩
• いずれ『攻殻機動隊』で描かれた世界が現実に？• ますます「Web」と「Web 以外」の境界がゆらぐ
https://secure.flickr.com/photos/jurvetson/3349608248/
Pattie Maes + Pranav Mistry: Meet the SixthSense interactionhttp://www.ted.com/talks/pattie_maes_demos_the_sixth_sense
Web デザインはどう変わるべきか？
Web コンテンツの消費スタイルの変化
• ユーザー、デバイス、コンテキストすべてが加速度的に多様化していく
• Web コンテンツの消費に使われるのは視覚、聴覚、触覚、そして……？
• もし脳で直接 Web にアクセスするようになったら、Web デザインはどうあるべきなのか？
Web コンテンツを空気や水のように流通させる必要性
• スクリーンは多様化している（大きさ、解像度、形状）• スクリーンを持たないデバイスからの Web アクセスを考える必要もある
• 既に「見た目だけ」の発想では対応できない！
Web は「見られればいい」という時代の終焉
• Webは紙媒体とは違う、と言われ続けて幾年月
• いまだに根強い印刷物的な発想・捉え方
• 今後は「Webらしさ」という名の柔軟性が必要不可欠
• その土台を担うのがマークアップによる情報伝達• マシンリーダビリティ≒アクセシビリティが重要
来たるべき変化に備える• Webデザインは常に「動く的を射る」が如し
• Web 標準技術、デバイスの仕様、ブラウザーのサポート状況、支援技術、ユーザーのリテラシーのバランス
• アクセシビリティという「品質」に目を向けよう• アクセシビリティを高め、相互運用性を最大化することが Web の、そしてビジネスの価値を最大化する
• いつでも、どこでも、誰でも、どんなデバイスでも使える Web サイトの実現へ
ご清聴ありがとうございました
