The Mobile Frontier at HTML5 Conference 2013/11/30

1. 5C-モバイルフロンティア
フロントエンドエンジニアと
デザイナーのための
モバイルユーザーエクスペリエンス
安藤幸央・佐藤伸哉・清水かほる・野澤紘子・羽山祥樹・脇阪善則

3. 1章
いかりを上げる
Casting Off Anchors
モバイルフロンティアを探索するための準備
Preparing to Explore the Mobile Frontier
Nov 30 2013 Kaoru Shimizu @HTML5 Conference

6. 過去との決別
デスクトップコンピューティングからモバイルへ

7. • 普遍的なパラダイム
• 共通化されたUI規則
• 標準化された入力手法
• デザイン理論
• 学術的研究結果

8. • 普遍的なパラダイム
?
• 共通化されたUI規則
• 標準化された入力手法
• デザイン理論
• 学術的研究結果

11. 2章
モバイルNUIパラダイムの登場
The Emergent Mobile NUI Paradigm
GUIとNUIの境界を越えて
Traversing the GUI/NUI Chasm
Nov 30 2013 Kaoru Shimizu @HTML5 Conference

12. ユーザーインターフェースの進化
Past
Future

13. コマンドラインインターフェース
CLI (Command Line Interface)
ユーザがコマンドを覚え、
テキストベースのインターフェースに打ち込む。

14. グラフィカルユーザーインターフェース
GUI (Graphical User Interface)
WYSIWYG(What You See Is What You Get)
ユーザーにコマンドを見せて選ばせる。
フォルダやゴミ箱といったオフィスを模したメタファーを利用。

15. ナチュラルユーザーインターフェース
NUI (Natural User Interface)
WYDIWYG(What You Do Is What You Get)
ユーザの状況に応じて、表示される情報が変化。
より直感的に、速い操作が可能。

16. ユーザーインターフェースの進化
Past
Future

17. ユーザーインターフェースの進化
Now
Past
Future

18. 日本のスマートフォン普及率
Our Mobile Planet
http://www.thinkwithgoogle.com/mobileplanet/

19. CHAPTER

20. 3
デンバーのピーナッツバター
Demystifying the Elusive
Mobile Context
Nov 30 2013 Yoshinori Wakizaka @HTML5 Conference

21. スマホの特徴
小さな画面＆タッチ操作
いつでもどこからでもインターネットにアクセスできる
独自のI/F（タッチパネル、カメラ、GPS、加速度センサー）
PCとは利用体験が異なる

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

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

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

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

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

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

28. 1. モバイルならではの体験
音声入力：その場で流れている音楽から楽曲検索
Shazam

29. 1. モバイルならではの体験
カメラ：撮ったその場でWebにアップ、共有
Instagram

30. 1. モバイルならではの体験
位置情報：現在地の検索、現在地からの経路検索
google map

31. 1. モバイルならではの体験
プッシュ通知：サービス側からイベント通知
Calendar
(c) rosenfeldmedia

32. 1. モバイルならではの体験
入力 I/F：テキスト、画像、音声
Google search

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

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

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

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

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

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

39. 4章
形態の変化
Shapeshifting
コンバージェンスとマルチデバイス体験
Convergence and Multi device Experiences
Nov 30 2013 Yoshiki Hayama @Mobile Frontier Workshop

40. 4章を、ひとことで言うと
「ユーザーは、つながりのなかにいる」

41. P.119 ブライアン・リーガー氏 インタビュー より
「自分の仕事を『ウェブページをデザインする』と考えることを止
め、代わりに複数のコンテクストで表示されるコンテンツをデザイ
ンすることだと考える」
P.115 より
「もはやPC上の体験を考慮するだけでは足りず、さらに言うなら
ば、モバイル体験だけを考慮するだけでは足りません」
「モバイル端末はより大きなデバイスエコシステムの一部である」

42. コンバージェンス
あなたのウェブサイトを利用するために、
ユーザーがしたいことの途中に、あなたの
ユーザーはウェブサイトに合わせていた。
ウェブサイトがある、だけなのだ。

43. コンバージェンス
テクノロジー
メディア
アクティビティ（行為）

44. エコシステム
ユーザーも、ソフトウェアも、サービス
ユーザーも、ソフトウェアも、サービス
も、デバイスも、それひとつだけで、存在
も、デバイスも、それを支える色々なもの
しているわけではない。
も、つながって価値が生まれる。

45. 想像してみてください。楽しいですか？
フォローもフォロワーも、1人もいないTwitter。
フレンドが1人もいないFacebook。
アプリも、App StoreもないiPad。
接続できないインターネット。

46. エコシステム
タッチポイント
ビジネスプロセスと
技術環境
人々

47. 参加型デザイン
P.98∼101 より
環境
小道具
刺激
「つながり」を理解するには「参加型デザイン」がよい。
「環境」「小道具」「刺激」を用意し、ユーザーに演技をしてもらおう。
ユーザー調査
しましょう

48. 4章 見どころ
• コンバージェンス（融合）
•
デバイスからデバイスへシームレスに
•
テクノロジー、メディア、アクティビティ（行為）
• エコシステム
•
タッチポイント、人々、プロセスと環境
• 参加型デザイン
• 状況的行為
• マルチスクリーン戦略
• ネイティブアプリ、ウェブアプリ、モバイル向けウェブサイト

49. 5章
モバイルUXパターン
Mobile UX Patterns
モビリティのためにデザインする
Designing for Mobility
Nov 30 2013 Hiroko Nozawa @HTML5 Conference

50. モバイルのパタンランゲージとは？
1. クラウドとアプリがモバイルUXの構成単位となる
2. 優れたモバイルエクスペリエンスは徐々にその本質を
明らかにする
3. コンテンツがインターフェイスになる
4. モバイルにふさわしい入力方法を使う
5. タスクを終わらせることよ、さようなら

51. モバイルは小さいPCではない！
•
PCのデザインパターンは積むこと。
•
モバイルのデザインパターンは、広げること。直感。

52. モバイルUXのためのパターン
マトリョーシカ
ハブ＆スポークス

53. コンテンツがインタフェースになる
•
物理的なUIから相互につながった情報のUIへ
•
NUI（ジェスチャーとスーパーリアル）

54. モバイルならではの入力方法を使う

55. タスクを終わらせることよ、さようなら
1.使い続けることで価値が増える
2.いじりたくなる
３.察する

56. 6章
モバイルプロトタイピング
Mobile Prototyping
モバイルエクスペリエンスをデザインするためのツールと手法
Tools and Methods for Designing Mobile
Nov 30 2013 Nob Sato @HTML5 Conference

57. モバイルUXのためのデザインプロセス
なぜプロトタイピングか？
モバイルプロトタイピングの種類
戦術的プロトタイピング
体験的プロトタイピング
プロトタイピング、3つの公理

58. モバイルUXのためのデザインプロセス
典型的なダブルダイアモンド型のデザインプロセス
発見
定義
開発
納品
デザインの決定
時間
アイデアが広がる
フェーズ
開始
アイデアを
実現するフェーズ
終了

59. なぜプロトタイピングなのか？
• デザインアイデアやエクスペリエンスの伝達（共有）
• ユーザーのフィードバックの収集できる
• 未知の探求ができる
• アイデアの微調整を行える

60. モバイルプロトタイピングの種類
• 戦術的プロトタイピング
Tactical Prototyping
• 体験的プロトタイピング
Experimental Prototyping

61. 戦術的プロトタイピング
1. スケッチ
2. ペーパープロトタイピング
3. 実機上でのインタラクティブなプロトタイプ

62. 体験的プロトタイピング
1. ストーリーボーディング
2. ボディーストーミング（アクティングアウト）
3. スピード・デート法
4. コンセプトビデオ

63. プロトタイピング、3つの公理
• 適度な忠実度で行う、完璧主義者にならない。
• 失敗を受け入れ、勇気をもって次のアイデアに進む。
• プロトタイピングは万能薬ではない。
「完璧は最適の敵」
フランスの有名な詩人
ヴォルデール

64. 7章
モーションとアニメーション
Motion and Animation
新しいモバイルUXのためのデザイン要素
A New Mobile UX Design Material
Nov 30 2013 Yukio Andoh @Mobile Frontier Workshop

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

66. ディズニーアニメーション 生命を吹き込む魔法

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

70. Meaningful Transitions

71. アニメーションの原則を生かす方法
1■ 良いアプリをたくさん探し、使い込む。事例の引き出し
2■ 良いものが、なぜ良いのか、要素を分析・分解する
(ハイスピードカメラ）
3■ 常用アプリが更新したら、どこが変わったのか比較する
4■ 必要なのは「意味のある」動きだけ。操作の前後の動き重要
5■ コンテンツが王様。直接操作。UIは本来無くていいもの
6■ 指が触れて操作する瞬間は画面が見えてないことを考慮
7■ 情報の密度を落とす。動きで着目すべきところを演出する
(速さ）
8■ 中断、途中から始まることが前提。時間の流れを考慮する

72. 8章
感覚の目覚め
Awakening the Senses
タッチ、ジェスチャー、音声とサウンド
Touch, Gesture, Voice, and Sound
Nov 30 2013 Yoshiki Hayama @Mobile Frontier Workshop

73. 8章を、ひとことで言うと
「視覚以外の感覚も、ある」

74. P.231 より
「人間は実際に見なくても、どこで何が起こっているかをとても
正しく把握することができます。消防車の音、ゴミの臭い、地震の
揺れ。私たちは感覚を使って本能的に身のまわりの状況を把握して
います」
P.232より
「モバイルUXをデザインする際に考慮すべき、十分に活用されて
いない3つの感覚をとりあげます。それは、タッチ、ジェス
チャー、音声とサウンドです」

75. タッチインターフェース
タッチターゲット
18mm
15mm
タッチジェスチャーの配置
コンテンツにつなげる
姿勢と、操作しやすい配置
UIを意識しない
10mm
押しやすい大きさ

76. ジェスチャー
なじみのジェスチャー
付加的な感覚の
+ 新しいジェスチャー
フィードバック
知っている操作をもとにする
操作した感じがする
根気と創造力
ユーザーに使ってもらう

77. 音声によるインターフェース

78. HTML 5 : alt属性
HTML5仕様書 （Editor's Draft 27 November 2013）
4.8.1.1 Requirements for providing text to act as an alternative for images
alt属性の書きかた
すごい充実した解説

79. どのくらい
充実しているか
というと・・・

93. まだまだ続くよ！

105. じつに充実

106. HTML 5 : alt属性の書きかた
例：フォームのステップナビゲーション
入力
alt= 入力
確認
alt= 確認
完了
alt= 完了

107. HTML 5 : alt属性の書きかた [例]
例：フォームのステップナビゲーション
alt= お問い合わせ完了まで全部で3ステップです
入力
alt= ステップ1の
入力は完了してい
ます
確認
alt= 現在はス
テップ2の確認で
す
完了
alt= 最後はス
テップ3の完了で
す

108. 8章 見どころ
• 人間の感覚は、視覚だけでなく、触覚、身体の動き、聴覚
• タッチインターフェース
•
タッチターゲット、タッチジェスチャーの配置、コンテンツと一体化
• ジェスチャー
•
なじみのジェスチャー+新しいジェスチャー、付加的な感覚のフィードバック、根気と創造力
• 音声によるインターフェース

109. 9章
新しいモバイルのかたち
New Mobile Forms
モバイルフロンティアの開拓者
Pioneering the Mobile Frontier
Nov 30 2013 Yukio Andoh @HTML5 Conference

110. デジタルデバイスの新しいかたち
■コンピュータと身体との境界の遷移
■コンピュータと環境との境界の遷移
■モバイルと新興市場

111. デジタルデバイスの新しいかたち

112. ファッションとして身体として

113. 世の中にあふれるID

114. 携帯電話が銀行の代わりに（M-PESA）

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

116. モバイルフロンティアの開拓
(CC) by Woody H1