「マシンリーダビリティ」が
ユーザー体験を加速する
~未来に向けて今、何ができるのか~
株式会社ビジネス・アーキテクツ
太田 良典
自己紹介
今、未来へ向けたアプローチ
マシンリーダビリティが変えた過去と未来
コンテンツはどう対応すれば良いのか?
まとめ
お知らせ
2
今日の話
自己紹介
3
4
Business
Architects
5
コミュニケーションを
デザインしています
6
何をしているの?
 Webサイト
 アプリケーション
 映像
 SNSコミュニケーション
 紙もの、リアル店舗
 etc.…
7
具体的には?
ウェブアクセシビリティ基盤委員会(WAIC)
8
今、未来へ向けたアプローチ
9
新しいデバイスが
どんどん出てくる
これは未来の話?
10
未来?
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
Webは変わりつつある
Webかアプリか問題
13
14
スマホアプリ利用状況調査
(ニールセン 2014年10月1日)
Webにするか?
アプリにするか?
15
最近よくある問題
あるアプリの例
16
世界中の日産グループのニュースを
アプリで提供
17
NISSAN GLOBAL App
18
スマートフォン版
 各社Webサイト
► Atom / RSSで配信されているもの
 Facebook
 Twitter
 YouTube
19
ニュースソース
Web
Web
Web
サーバー
20
変換
収集
Webとアプリとで同じ情報を提供
コンテンツ製作者は
アプリを意識する必要がない
他のサイトのコンテンツを
加工して利用する
いわゆる「マッシュアップ」の手法
21
ソースはWeb
Webコンテンツの活用
22
 外部からアクセスすることが容易
 コンテンツを読み取ることが容易
 コンテンツを変換することが容易
23
Webコンテンツの性質
Webに情報があれば
さまざまなことに
応用できる
24
25
マッシュアップの例
 アプリで提供
 紙で提供
 音声で提供
 触覚で提供
26
違うデバイスで提供
 文字の大きさを変える
 色合いを変える
 拡大する
 縮小する
27
カスタマイズ
自由にアクセスできて
自由に加工できる
無限の可能性
28
Webは変幻自在
なぜWebは変幻自在なのか
29
ものを直接
見ているのではなく
ブラウザが処理した
結果を見ている
30
Webと他のメディアの違い
31
表示
取得
Web
Web
Web
Web
サーバー
32
変換
収集
Webがブラウザで表示されるには、
プログラムで読み取って解釈し、
加工して表示する必要がある
プログラムで読んで処理できることが
前提になっている
33
Webの暗黙の前提
Webの利用はブラウザに限らない
さまざまなユーザーエージェントが
アクセス可能
 サーチエンジンのクローラー
 マッシュアップ
 その他
34
Webとユーザーエージェント
マシンリーダビリティ
= 機械可読性
35
Webはマシンリーダブル
余談
36
Webの画像を
ダウンロードしたり
複製したりすることを
禁止したい
37
良くある相談
ブラウザで
表示された時点で
既にダウンロードされ
複製されている
38
時既に遅し
マシンリーダビリティが
変えた過去と未来
39
未来に何が起きるのかは分からない
しかし、過去の歴史を見て
未来を予想することはできる
私たちは過去に「Webの未来」
を経験していたのではないか?
40
未来が来ると何が起きるのか?
41
iPhoneの登場
42
PCサイトが
普通に
見られる!
43
でも
見られない
サイトもある
iPhoneでは
Flashが動作しない
44
Flash問題
Flash技術者視点での考察
Flashアプリが
タッチ動作を想定した
作りになっていない
45
過去の多くのFlashコンテンツは、
マウスポインタを前提としていた
 「ロールオーバー」でメニュー
 マウスポインタの位置で動きが変化
仮にFlashが動いたとしても、
操作不可能になってしまう
46
Flashとタッチデバイス
応用がきかないこともある
 マシンリーダビリティが低い
► そもそも機械で処理できない
 デバイスに依存している
► 機械で処理しても加工に限界がある
47
変換できないのか?
コンテンツは
どう対応すれば良いのか?
48
49
Flashの
サイトは
見られない……
iPhoneではアクセスできないことが
わかり、対応が必要になった
 FlashをやめてJavaScriptで実装
 スマートフォン用サイトを用意
50
Flash問題対応
51
Flashなのに
見られる
サイトがある!
iPhoneでも問題なくアクセスでき、
特に対応の必要がなかった
事前に対応していたのか?
52
Flash問題対応の別パターン
Flash無効環境を
考慮していた
53
何をしていたのか?
54
Flash有効時の表示
55
無効時の表示
Flash非対応の環境、
Flash無効環境は
以前から存在していた
56
なぜこんな対応を?
アクセシブルにしていたので
新デバイスでもアクセスできた
 アクセシビリティへの配慮
=マシンリーダビリティの確保
 これが、未来のデバイスでも
アクセスできることにつながった
57
アクセシビリティのため!
 PC用サイト
 フィーチャーフォン対応
 スマートフォン対応
 タブレット対応
新デバイスが出るたびに急ぎ対応?
いくつのサイトを管理するのか?
58
求められるスピード
事前にアクセシブルに
しておけば
未来のデバイスでも
アクセスできる
59
コンテンツ側にできること
新デバイス登場の瞬間
もう対応コンテンツが
公開されている!
60
すなわち
まとめ
61
Webにコンテンツが
あるだけで
さまざまな利用が
可能になる
62
とりあえずWeb
 コンテンツがマシンリーダブルなら
さまざまな利用が可能になる
 予想だにしない新しいデバイスが
登場してもすばやく対応可能
 逆に、デバイスに依存すると
未来に対応できない
63
マシンリーダビリティ
アクセシビリティを確保すること!
 現在ある環境を意識するだけでも、
未来に向けた土台になる
 コンテンツがしっかりしていれば、
未来のデバイスのほうが
対応してくれる
64
どうすればいい?
アクセシビリティの向上が
ユーザー体験を加速する
新デバイス登場と同時に、
そのデバイスでアクセスできる
Webコンテンツがもうできている!
65
結論
お知らせ
66
話は分かりました
でも実際に
私たちは
どうすればいいの?
67
よくある声
制作プロセスに
アクセシビリティの考え方を
取り込むことが必要
でも具体的にどうすればいいのか
わからない……
68
制作プロセスに取り込む
69
本が出るかもしれません
デザイニングWebアクセシビリティ
- アクセシブルな設計とコンテンツ制作の実践アプローチ
 B5正寸版 320ページ 3000円(予価)
 著者:伊原力也・太田良典
(ビジネス・アーキテクツ)
 2015年2月発売?
70
本を書いています
どんな内容?
制作プロセスごとに
何をするのか
取り組みを紹介
よくある問題と
その解決アプローチ
を説明
実装の話題は少なめ
1章:ウェブサイトを作る前に
2章:戦略の策定
3章:要件定義
4章:ナビゲーション設計
5章:インタラクション設計
6章:システム設計
7章:コンテンツ設計
8章:ビジュアルデザイン
9章:実装
付録
71
72
Apps For All
コーディングWebアクセシビリティ
- WAI-ARIAで実現するマルチデバイス環境のWebアプリケーション
 A5正寸版 208ページ 2300円(予価)
 SMASHINING MAGAZINE BOOKS
Apps For All - Coding Accessible Web Applications
の日本語訳版。
 翻訳監修:伊原力也・太田良典
(ビジネス・アーキテクツ)
 2015年3月発売
73
同時発売
ありがとうございました
74
 総務省 平成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

「マシンリーダビリティ」がユーザー体験を加速する