2015年2月9日「Web担当者向けセミナー：マルチデバイス時代のWebアクセシビリティ」 セッション2 講演資料

1. 「マシンリーダビリティ」が
ユーザー体験を加速する
～未来に向けて今、何ができるのか～
株式会社ビジネス･アーキテクツ
太田 良典

2. 自己紹介
今、未来へ向けたアプローチ
マシンリーダビリティが変えた過去と未来
コンテンツはどう対応すれば良いのか?
まとめ
お知らせ
2
今日の話

3. 自己紹介
3

4. 4

5. Business
Architects
5

6. コミュニケーションを
デザインしています
6
何をしているの?

7.  Webサイト
 アプリケーション
 映像
 SNSコミュニケーション
 紙もの、リアル店舗
 etc.…
7
具体的には?

8. ウェブアクセシビリティ基盤委員会(WAIC)
8

9. 今、未来へ向けたアプローチ
9

10. 新しいデバイスが
どんどん出てくる
これは未来の話?
10
未来?

11. 11
情報通信機器の世帯保有状況
(総務省 平成25年通信利用動向調査より)
9.7%
29.3%
49.5%
62.6%
0.0%
10.0%
20.0%
30.0%
40.0%
50.0%
60.0%
70.0%
80.0%
90.0%
100.0%
2 0 1 0 年 2 0 1 1 年 2 0 1 2 年 2 0 1 3 年
パソコン 携帯電話 スマートフォン タブレット

12. 今この瞬間も
変わり続けている
12
Webは変わりつつある

13. Webかアプリか問題
13

14. 14
スマホアプリ利用状況調査
(ニールセン 2014年10月1日)

15. Webにするか?
アプリにするか?
15
最近よくある問題

16. あるアプリの例
16

17. 世界中の日産グループのニュースを
アプリで提供
17
NISSAN GLOBAL App

18. 18
スマートフォン版

19.  各社Webサイト
► Atom / RSSで配信されているもの
 Facebook
 Twitter
 YouTube
19
ニュースソース

20. Web
Web
Web
サーバー
20
変換
収集

21. Webとアプリとで同じ情報を提供
コンテンツ製作者は
アプリを意識する必要がない
他のサイトのコンテンツを
加工して利用する
いわゆる「マッシュアップ」の手法
21
ソースはWeb

22. Webコンテンツの活用
22

23.  外部からアクセスすることが容易
 コンテンツを読み取ることが容易
 コンテンツを変換することが容易
23
Webコンテンツの性質

24. Webに情報があれば
さまざまなことに
応用できる
24

25. 25
マッシュアップの例

26.  アプリで提供
 紙で提供
 音声で提供
 触覚で提供
26
違うデバイスで提供

27.  文字の大きさを変える
 色合いを変える
 拡大する
 縮小する
27
カスタマイズ

28. 自由にアクセスできて
自由に加工できる
無限の可能性
28
Webは変幻自在

29. なぜWebは変幻自在なのか
29

30. ものを直接
見ているのではなく
ブラウザが処理した
結果を見ている
30
Webと他のメディアの違い

31. 31
表示
取得
Web

32. Web
Web
Web
サーバー
32
変換
収集

33. Webがブラウザで表示されるには、
プログラムで読み取って解釈し、
加工して表示する必要がある
プログラムで読んで処理できることが
前提になっている
33
Webの暗黙の前提

34. Webの利用はブラウザに限らない
さまざまなユーザーエージェントが
アクセス可能
 サーチエンジンのクローラー
 マッシュアップ
 その他
34
Webとユーザーエージェント

35. マシンリーダビリティ
= 機械可読性
35
Webはマシンリーダブル

36. 余談
36

37. Webの画像を
ダウンロードしたり
複製したりすることを
禁止したい
37
良くある相談

38. ブラウザで
表示された時点で
既にダウンロードされ
複製されている
38
時既に遅し

39. マシンリーダビリティが
変えた過去と未来
39

40. 未来に何が起きるのかは分からない
しかし、過去の歴史を見て
未来を予想することはできる
私たちは過去に「Webの未来」
を経験していたのではないか?
40
未来が来ると何が起きるのか?

41. 41
iPhoneの登場

42. 42
PCサイトが
普通に
見られる!

43. 43
でも
見られない
サイトもある

44. iPhoneでは
Flashが動作しない
44
Flash問題

45. Flash技術者視点での考察
Flashアプリが
タッチ動作を想定した
作りになっていない
45

46. 過去の多くのFlashコンテンツは、
マウスポインタを前提としていた
 「ロールオーバー」でメニュー
 マウスポインタの位置で動きが変化
仮にFlashが動いたとしても、
操作不可能になってしまう
46
Flashとタッチデバイス

47. 応用がきかないこともある
 マシンリーダビリティが低い
► そもそも機械で処理できない
 デバイスに依存している
► 機械で処理しても加工に限界がある
47
変換できないのか?

48. コンテンツは
どう対応すれば良いのか?
48

49. 49
Flashの
サイトは
見られない……

50. iPhoneではアクセスできないことが
わかり、対応が必要になった
 FlashをやめてJavaScriptで実装
 スマートフォン用サイトを用意
50
Flash問題対応

51. 51
Flashなのに
見られる
サイトがある!

52. iPhoneでも問題なくアクセスでき、
特に対応の必要がなかった
事前に対応していたのか?
52
Flash問題対応の別パターン

53. Flash無効環境を
考慮していた
53
何をしていたのか?

54. 54
Flash有効時の表示

55. 55
無効時の表示

56. Flash非対応の環境、
Flash無効環境は
以前から存在していた
56
なぜこんな対応を?

57. アクセシブルにしていたので
新デバイスでもアクセスできた
 アクセシビリティへの配慮
=マシンリーダビリティの確保
 これが、未来のデバイスでも
アクセスできることにつながった
57
アクセシビリティのため!

58.  PC用サイト
 フィーチャーフォン対応
 スマートフォン対応
 タブレット対応
新デバイスが出るたびに急ぎ対応?
いくつのサイトを管理するのか?
58
求められるスピード

59. 事前にアクセシブルに
しておけば
未来のデバイスでも
アクセスできる
59
コンテンツ側にできること

60. 新デバイス登場の瞬間
もう対応コンテンツが
公開されている!
60
すなわち

61. まとめ
61

62. Webにコンテンツが
あるだけで
さまざまな利用が
可能になる
62
とりあえずWeb

63.  コンテンツがマシンリーダブルなら
さまざまな利用が可能になる
 予想だにしない新しいデバイスが
登場してもすばやく対応可能
 逆に、デバイスに依存すると
未来に対応できない
63
マシンリーダビリティ

64. アクセシビリティを確保すること!
 現在ある環境を意識するだけでも、
未来に向けた土台になる
 コンテンツがしっかりしていれば、
未来のデバイスのほうが
対応してくれる
64
どうすればいい?

65. アクセシビリティの向上が
ユーザー体験を加速する
新デバイス登場と同時に、
そのデバイスでアクセスできる
Webコンテンツがもうできている!
65
結論

66. お知らせ
66

67. 話は分かりました
でも実際に
私たちは
どうすればいいの?
67
よくある声

68. 制作プロセスに
アクセシビリティの考え方を
取り込むことが必要
でも具体的にどうすればいいのか
わからない……
68
制作プロセスに取り込む

69. 69
本が出るかもしれません

70. デザイニングWebアクセシビリティ
- アクセシブルな設計とコンテンツ制作の実践アプローチ
 B5正寸版 320ページ 3000円(予価)
 著者：伊原力也・太田良典
（ビジネス・アーキテクツ）
 2015年2月発売?
70
本を書いています

71. どんな内容?
制作プロセスごとに
何をするのか
取り組みを紹介
よくある問題と
その解決アプローチ
を説明
実装の話題は少なめ
1章:ウェブサイトを作る前に
2章:戦略の策定
3章:要件定義
4章:ナビゲーション設計
5章:インタラクション設計
6章:システム設計
7章:コンテンツ設計
8章:ビジュアルデザイン
9章:実装
付録
71

72. 72
Apps For All

73. コーディングWebアクセシビリティ
- WAI-ARIAで実現するマルチデバイス環境のWebアプリケーション
 A5正寸版 208ページ 2300円(予価)
 SMASHINING MAGAZINE BOOKS
Apps For All - Coding Accessible Web Applications
の日本語訳版。
 翻訳監修：伊原力也・太田良典
（ビジネス・アーキテクツ）
 2015年3月発売
73
同時発売

74. ありがとうございました
74

75.  総務省 平成25年通信利用動向調査
http://www.soumu.go.jp/johotsusintokei/statistics/data/140627_1.pdf
 スマホ利用は27個のアプリで利用時間の72%を占める – ニールセン スマホアプリ利用状況を発表
http://www.netratings.co.jp/news_release/2014/10/Newsrelease20141001.html
 NISSAN GLOBAL App
http://www.nissan-global.com/JP/SITE_INFO/MOBILE/
 カーリル
http://calil.jp/
 なぜiPhoneはFlashをサポートしないのか? - Flash技術者視点での考察
http://news.mynavi.jp/news/2010/02/24/014/
 西村あさひ法律事務所
http://www.jurists.co.jp
 デザイニングWebアクセシビリティ - アクセシブルな設計とコンテンツ制作の実践アプローチ
http://www.amazon.co.jp/dp/4862462650/
 Apps For All: Coding Accessible Web Applications
http://www.amazon.com/dp/B00N9UPI32/
75
参考URL