1. 第６回 スマホデザイン会議「UI/UX最前線」
モバイルが切り拓く
マルチデバイスエクスペリエンスの未来
The mobile frontier : Designing mobile experience
Mar 19 2013 Yukio Ando, Yoshinori Wakizaka (UX TOKYO)

2. なぜモバイルなのか？

3. モバイル≒スマホ

4. スマートフォン国内契約者数予測（2012.03）
(c)MM総研2012 http://www.m2ri.jp/data/news/image/20120313/1331622492-2.jpg
契約者の５割がスマートフォン

5. スマートフォン国内出荷台数予測（2012.03）
(c)MM総研2012 http://www.m2ri.jp/data/news/image/20120313/1331622492-1.jpg
出荷台数の７割がスマートフォン

6. 国内モバイルトラフィックの変遷
(c)総務省2012 http://itpro.nikkeibp.co.jp/article/NEWS/20120319/387162/?SS=imgview&FD=1400632865&ST=network

7. 世界のモバイルトラフィック予測 (c)cisco
地域別にみた推移
http://www.cisco.com/web/JP/solution/isp/ipngn/literature/images/white_paper_c11-520862-03.jpg
デバイス別にみた推移
http://www.cisco.com/web/JP/solution/isp/ipngn/literature/images/white_paper_c11-520862-04.jpg

8. メディアの進化
(c)copperval marketing
http://www.copperval.com/index.html
印刷物からWebへ

9. メディアの進化
(c)copperval marketing
http://www.copperval.com/index.html
PCメディアの進化

10. メディアの進化
(c) yahoo!
(c) google
PCからモバイルへ

11. メディアの進化
(c) nhn (c) path
スマホ発のサービス

12. メディアの進化
印刷メディア PC モバイル（スマホ）
企業
ブローシャ
オンライン
メディア
モバイル
コミュニケーション

13. スマホの特徴
いつでもどこからでもインターネットに接続できる
インターネットサービスの新しい利用端末になった
独自のI/F（タッチパネル、カメラ、GPS、加速度センサー）
新しいサービス体験

14. モバイルのためのデザイン

15. モバイルデザインのノウハウ
Web、アプリデザインに関する良書、ガイドライン
コンセプト 設計手法

16. モバイルUXデザインの可能性を探る

17. モバイルフロンティア（Mobile Frontier）
2013年4月刊行予定

18. モバイルUXのコンテクスト

19. モバイルのコンテクスト
モバイル＝「いつでも、どこからでも」使える
(c) rosenfeldmedia

20. モバイルのコンテクスト
チャレンジングな状況でも気にしない
(c) rosenfeldmedia

21. モバイルコンテクストの原則
いつでも、どこからでも な状況にのためのデザイン
1. モバイルならではの体験を作ることにフォーカスする
2. 注意散漫、行動が遮られることを前提にデザインする
3. 認知的負荷や機会費用を減らす

22. モバイルコンテクストの原則
どこでも な状況に対処するために
1. モバイルならではの体験を作ることにフォーカスする
2. 注意散漫、行動が遮られることを前提にデザインする
3. 認知的負荷や機会費用を減らす

23. 1. モバイルならではの体験
PCとモバイルでの利用状況の違い
スクリーンサイズ 大きい 小さい
利用状況 限定的 ばらばら
注意のレベル 高い 断片的
ネットワークへのアクセス 快適 限定的
(c) rosenfeldmedia

24. 1. モバイルならではの体験
モバイルならではのユニークな体験
既存のメディア（PC）の延長線上にあるeMail モバイルでの新しい体験を提供しているShazam
(c) rosenfeldmedia

25. 1. モバイルならではの体験
モバイルにおける３つの制約
デバイスの制約 人間の制約
スモールフォームファクター 無くしやすい
T9/QWERTY英数入力 言語やメタファが適切ではない
カメラ/ビデオ 認知に集中を要する
バッテリー駆動 文字入力が難しい
無線通信、Wi-Fi、Bluetoothでのネットアクセス 文字やイメージが小さくて読みにくい場合がある
マイク、スピーカー、ヘッドフォン コンテクストによっては聞き取りにくい場合がある
加速度センサ 作業記憶を多分に要する場合がある
環境の制約
ほぼどこでも使える、どこにでも仕舞える
明るい太陽光の下ではスクリーンのグレアが発生する
壊れやすい（水没、埃など）
ある状況では利用が禁止されている
ネットワーク圏外では使えない
電源が手に入らない状況がある
料金プランによる制約がある（ローミング、データ通信）

26. モバイルコンテクストの原則
いつでも、どこからでも な状況に対処するために
1. モバイルならではの体験を作ることにフォーカスする
2. 注意散漫、行動が遮られることを前提にデザインする
3. 認知的負荷や機会費用を減らす

27. 2. 注意散漫・行動が遮られる
行動や制約に関する差異
スキューバーダイビング（連続的＝視界良好、酸素もいっぱい） シュノーケリング（限定的＝狭い視界、息継ぎが必要）
(c) rosenfeldmedia

28. 2. 注意散漫・行動が遮られる
誰もに覚えがある「マルチタスク」
(c) rosenfeldmedia

29. 2. 注意散漫・行動が遮られる
電話がかかってくる、バスが到着する、、
マルチタスク
頻繁にタスクを切り替える
常にネットワークに繋がっている

30. 2. 注意散漫・行動が遮られる
デバイスの機能や外部環境から常に遮られている状態
マルチタスキング
継続的注意力断片化
頻繁にタスクを切り替える
（Continuous Partial Attention：CPA）
常にネットワークに繋がっている

31. 2. 注意散漫・行動が遮られる
継続的注意力断片化とは？
第一のキーワード、Wikipediaにも項目がある「Continuous Partial Attention」（以下、CPA）
は、かつてアップルに、そしてマイクロソフトの研究部門に在籍していた Linda Stoneが考案した用
語です。多種多様なメディアやコミュニケーションチャネルの動向に対して常に注意を払わずにはい
られない状態を意味し、「継続的注意力断片化」などと訳されることもあります。
(c) IA Spectrum 2009
マルチタスク→継続的注意力断片化
能動的 受動的

32. 2. 注意散漫・行動が遮られる
継続的注意力断片化に対する対処方法
• 中断してもすぐに再開できるようにする
• メニューを深くしない
• すべてのコンテンツをみせない

33. モバイルコンテクストの原則
どこでも な状況に対処するために
1. モバイルならではの体験を作ることにフォーカスする
2. 注意散漫、行動が遮られることを前提にデザインする
3. 認知的負荷や機会費用を減らす

34. 3. 認知的負荷や機会費用を減らす
Contextual Design により負荷や費用を減らす
認知的負荷
ワーキングメモリをコントロールするための負荷
機会費用
ある行動を選択することで失われる、他の選択肢を選んだ時に得られる利益

35. 3. 認知的負荷や機会費用を減らす
コンテクストが変われば、代替案を選ぶ費用も変わる
ニーズ: 近所のショッピングセンターでお買い物するために電車に乗りたい
モチベーション/緊急性: 低い
利用環境: 自宅
代替手段: PCを使ってオンラインスケジュールを確認、車で運転して買い物に行く、駅まで行って駅
員に電車の時刻を聞く、友だちに電話する
平常時
緊急時
ニーズ: 土地勘がない場所での検索
モチベーション/緊急性: 非常に高い
利用環境: ストリート、混雑した駅
代替手段: BART（地下鉄の名称）の駅にある地図、駅で乗務員や乗客に尋ねる、友だちに電話する

36. モバイルUXの足がかり
モバイルの特性は時空間的な情報とダイナミクス
Shazam：今、目の前にある音楽とユーザーの関係性を活用している。
IntroNow：ShazamのTV番組版。TVの音声を使って番組を検索し、ソーシャルでシェアできる。
(c) rosenfeldmedia

37. コンテクストがトリガになる
マップのエクスペリエンス
PCでは現在地を自分で入力しなければいけない
モバイルでは、現在地の情報を自然と利用することができる
(c) rosenfeldmedia

38. メディアコンバージェンス

39. デバイスエコシステム
PC中心のエコシステムに変化が起きた
モバイルを含めたマルチデバイス環境が構築され、UXデザインのルールが変化している

40. デバイスエコシステム
モバイルを含めたエコシステムが構築されている
エコシステムの代表的なデザインパターン＝モバイルデバイスの使い方
一貫性の保持 状態の保持 デバイス間の移動
(c)mobile frontier

41. デバイスエコシステム
一貫性の保持
各タッチポイントのUX（デザイン、コンテンツ、インタラクション）に一貫性を持たせること
(c)mobile frontier

42. デバイスエコシステム
(c)evernote

43. デバイスエコシステム
状態の保持
どのタッチポイントでサービスを利用しても、同じ状態を保っていること
(c)mobile frontier

44. デバイスエコシステム
(c)amazon

45. デバイスエコシステム
デバイス間の移動
同じエコシステム内にあるデバイス間で情報をやり取りできること
(c)mobile frontier

46. デバイスエコシステム
デバイス間の移動
あるデバイスで利用しているコンテンツを他のデバイスでも利用できること
(c)Apple

47. モバイルUXのデザインパターン

48. モバイルUXのデザインパターン
UXの定義、UI設計の参考にになるデザインパターン
UX UI 入力 I/F
モバイルで提供すべきUXの考え方 モバイルの画面設計についての考え方 モバイル特有の機能を生かす

49. モバイルUXのデザインパターン
クラウドとアプリを基本単位としてデザインする

50. モバイルUXのデザインパターン
クラウドにあるデータをモバイル端末で利用する
コンテンツを観る データを操作する 日記、メモを共有する ニュースを共有する

51. モバイルUXのデザインパターン
スマホの画面は狭い＆通信環境が良くない場合がある

52. モバイルUXのデザインパターン
マトリョーシカパターン
Hub＆Spokeパターン Bento Boxパターン

53. モバイルUXのデザインパターン
いろいろな入力メソッドを活用する
(c) flickr

54. モバイルUXのデザインパターン
デバイスの機能 入力インターフェース候補
タッチ入力 音声入力 画像入力 位置情報・GPS

55. UI / IxDの作り込み

56. アニメーションの法則
multitasking woman

57. ディズニーのアニメーションの12原則
■スクオッシュ（潰し）とストレッチ（伸ばし）
■アンチシペーション（予備動作）
■ステージング（舞台演出）
■ストレート・アヘッド・アクション（逐次描き）とポーズ・
トゥ・ポーズ（原画による設計）
■フォロー・スルーとオーバーラッピング・アクション（あと
追いの工夫）
■スロー・インとスロー・アウト（両端づめ）
■アーク（運動曲線）
■副次アクション
■タイミング
■誇張
■実質感のある絵

58. ディズニーのアニメーションの12原則
http://www.youtube.com/watch?v=xqGL1ZLk3n8

59. アニメーションの原則を生かす手法
1■ 良いアプリをたくさん自分で使い込む。たくさん探す。
2■ 良いものが、なぜ良いのか、自分の中で分析・分解する。
3■ 常用アプリが更新したら、どこが変わったのか比較する。
4■ 必要なのは「意味のある」動きだけ。単一画面内での動き。
5■ コンテンツが王様。直接操作。UIは本来無くていいもの。
6■ インタフェースは媒介物、人々のインタラクションを考慮。
7■ 指が触れて操作する瞬間は画面が見えないことを考慮。
8■ 使っている人を観察する。5人の試用で85%の問題は解明。
9■ 情報の密度を落とす。着目すべきところを演出する。
10■ 中断されることが前提。途中から始まることが前提。
11■ iPhone と Android と同じにする必要無し。一人１台。
12■ 外に出て使う。ストレスフルな状況下で使う。速度重要。

60. 間違いなくモバイルの時代

61. 2013年4月刊行予定