実践的なUXデザインとインタラクションデザインの考え方

1. 実践的なUXデザインとインタラクションデザインの考え方
〜UI軸に議論するのはもうやめよう〜

2. Takahiro Ishiyama
株式会社シロク 取締役/CCO
視覚化厨
(サービスデザインやデータ可視化を主軸に組織や顧客の問題解決をおこなっています)

3. 3
[社外]
・第9回マニフェスト大賞「ASK TOKYO」
・クラウドを利用した3DCGデータ利活用実験「ARK」
(CG・VFX産業クラウド活用・高連携実証事業)
・Yahoo!クリエイティブアワード よるパネ部門「おやすみひつじ」
[社内]
・写真共有サービス「My365」
・Pipul アバターエンジン
・ユーザ行動分析サービス「Growth Replay」
・プッシュ通知配信/解析サービスSDK「Growth Push」

4. 勉強会を水曜19:30~(不定期)

6. ■会社名 ：株式会社シロク
■所在地 ：東京都渋谷区円山町28-3 渋谷YTビル 4F
■設⽴立立 ：2011年年12⽉月1⽇日
■資本⾦金金 ：5000万円
■株主 ：株式会社サイバーエージェント 他
会社概要
沿⾰革
2011年10月： 個人プロジェクトとして、『My365』の運営を開始
2011年12月： サイバーエージェント子会社として株式会社シロクを設立
2012年03月： 『My365』が100万ダウンロード突破
2013年08月： 『Growth Push』の運営を開始
2013年09月： 『Growth Push』の導入が200アプリ突破
2014年01月： 『Growth Hack』『Growth Development』を開始
2014年04月： 『Growth Ad』を開始
2014年12月： 『Growth Push』の配信デバイスが1億を突破

7. 7
6400を超えるスマホアプリケーションに導入

8. 本日のゴール
・UXデザインプロセスの理解
・インタラクションデザインの理解

9. 9
実践的なUXデザインの考え方

10. 10
このUIデザインが機能していると思いますか？

11. 11
UIだけでは
誰の何の問題を解決しているか
わからない！

12. 12
実践的なUXデザインの考え方

13. 13
戦
略
立
案
市
場
調
査
情
報
設
計
実
行
体
制
構
築
集
客
方
針
確
定
ウ
ェ
ブ
デ
ザ
イ
ン
・
文
章
作
成
・
素
材
収
集
シ
ス
テ
ム
構
築
・
制
作
リ
ニ
ュ
丨
ア
ル
・
公
開
デ
丨
タ
・
ア
ク
セ
ス
ロ
グ
解
析
効
果
測
定
・
成
果
検
証
戦
略
改
善
・
新
規
コ
ン
テ
ン
ツ
企
画
ア
ク
セ
ス
解
析
ツ
｜
ル
導
入
ビジネス促進のための戦略立案・企画立案
集客率向上のためのデータ・ログ解析、及び戦略改善商品・サービス販売に直結するアプリ構造の最適化
サービス運用における継続的な改善
今日のお話はだいたいこの辺り
ウェブサービスの開発からローンチまでのプロセス

14. 14
“正解”はなく、
あるのは”事実”だけです

15. 15
ユーザが 自分に合わせたもの を手に入れやすい時代
顧客中心時代の到来
∼1960 Age of Manufacturing
∼1990 Age of Distribution
∼2010 Age of Information
製造
流通
情報
2010∼ Age of Customer 顧客
背景

16. 16
少ない経営資源でも戦える時代
User Experience
小型
Product
アクションカメラ GoPro
機能で差別化する戦い方から脱却 背景

17. 17
UXデザインの必要性
商品が成功する為の要因
‒ 97%の企業がUXが重要と考えている
‒ 28%の企業がUXは最も重要なファクター
‒ 75%がUXを通して差別化を計ろうとしている
現在
背景
ハードウェア
+
ソフトウェア
+
マーケティング
キャンペーン
過去

18. 18
サービスに価値を感じてハマる仕組みを設計する必要
UXを考える上で必要な要件
第一の要件は、
混乱や面倒なしで顧客の的確なニーズを満たす事。
第二の要件は、
所有する・使用する楽しさを生み出すこと。
Donald Arthur Norman
背景

19. 19
ユーザの意見が多い UXが低い
製品レビューに現れるUX
・製品やサービスを通した体験をユーザ⾃自⾝身が分析した結果。
背景

20. 20
サービス開発あるある 背景
フィードバックへの洞察力が欠落
http://www.yasuhisa.com/could/article/design-process-cycle/デザインプロセスに共通する4つの段階と必要とされる能力

21. 21
顧客の
問題を知る
UXの策定プロセス
問題→解決の
手段を構築
妥当性を
検証する
整理する
背景UXデザインにおける４つのプロセス

22. 22
背景
UXの策定プロセス
Design Methods for Everyone
１本の線で表すと

23. 23
顧客の
問題を知る
UXの策定プロセス
問題→解決の
手段を構築
妥当性を
検証する
整理する

24. 24
サービスサファリ
インタビュー
問題を知る問題発見ツール
時間軸や目的にあわせてツールを組み合わせる
シャドーイング
顕在的/過去
定量分析
潜在的/未来
レビュー調査

25. 25
カスタマーレビュー調査 問題を知る
何に価値を感じているかを把握する

26. 26
エキスパートレビュー 問題を知る
仮説の観点を定性的に発見する

27. 27
ローンチコミュニティとインタビュー 問題を知る
想定ユーザーの問題解決ができているか検証する

28. 28
時間軸や目的にあわせて、ツール選定することが大事
問題を知る

29. 29
顧客の
問題を知る
UXの策定プロセス
問題→解決の
手段を構築
妥当性を
検証する
整理する

30. 30
ユーザーがサービスに価値を感じ続けることが重要
ユーザエクスペリエンスの4段階と
サービスにハマるストーリーの構築
UX White Paper
予期的UX
思い出写真を
共有したい
一時的UX
カレンダーに
蓄積された
エピソード的UX
あの写真にいいねや
コメントがついた
累積的UX
あの時の思い出を
振り返りたい
問題→解決
TIMELINE

31. 写真共有アプリMy365
2014/12 400万DL

32. 32
解決策
思い出を表現する1枚の写真を
毎日蓄積するストック型の写真共有サービス
instagramの利用問題
たくさんの写真で、
思い出が流れてしまう問題
問題→解決

33. ユーザーサイクルの設計
起動する
撮影する
共有する
人気
いいね
コメント
あ
帰ってくる
対象となるユーザーが、
何の行動を経て問題を解決して、
楽しさを感じるかをあらわした最低限の図
カレンダーに
蓄積される
問題→解決

34. 34
起動 商品投稿 共有出品者
起動 商品検索購入者 商品詳細 購入
商品を探せる。
ウォッチ、コメントできる。
購入通知
ウォッチ,コメント通知
スクリーンビュー数をキリ番で通知
商品近況を通知
購入者
すぐに商品投稿できる。
購入者からリアクションがある。
出品者
レビュー通知や、翌日/⑦日後プッシュ通知
フリマアプリのユーザサイクルと
プッシュ通知のコミュニケーション設計
問題→解決

35. 35
hooked フレームワーク
グロースハック的な観点でのストーリー設計 問題→解決

36. 36
ユーザーがサービスに価値を感じ続ける仕組みが大事
問題→解決

37. 37
顧客の
問題を知る
UXの策定プロセス
問題→解決の
手段を構築
妥当性を
検証する
整理する

38. UXデザインを検証するメリット
企画 開発制作
企画
TIMEリリース/検証
検証 TIME企画 検証 開発制作
撤退
従来型
サービスデザイン型
事業判断
事業判断
検証
事実が積み上がる、判断が早くなる。

39. 39
考えたものは全て仮説である
前提条件 検証

40. 40
起動する
撮影する
共有する
人気
いいね
コメント
あ
帰ってくる
カレンダーに
蓄積される
検証
・ワイヤフレーム
・プロトタイピング
・デプスインタビュー
・UIFlow
・モック
など...

41. 41
起動する
撮影する
共有する
人気
いいね
コメント
あ
帰ってくる
カレンダーに
蓄積される
検証
・ワイヤフレーム
・プロトタイピング
・デプスインタビュー
・UIFlow
・モック
など...
ユーザーサイクルの有効性を、事実として明らかにする
これらを活用して、 検証

42. 42
ユーザーの接点を分解して、情報設計する
ストーリーボードやジャーニーマップ KJ法
ワイヤフレーミング 検証

43. 43
プロトタイピングとデプスインタビュー
プロトタイピングサービス Prott
ビジュアルを通じて細かい反応を得る
検証

44. 44
考えたものは全て仮説という姿勢が大事

45. 45
顧客の
問題を知る
UXの策定プロセス
問題→解決の
手段を構築
妥当性を
検証する
整理する

46. 46
得られた結果や想定とのギャップを整理して、
価値を提供できていなければプロセスを繰り返す
顧客の
問題を知る
問題→解決の
手段を構築
妥当性を
検証する
整理する

47. 47
時間軸や目的にあわせて、ツール選定すること
ユーザーがサービスに価値を感じ続ける仕掛け
実践的なUXデザインの考え方
考えたものは全て仮説という姿勢
問題→解決出来なければプロセスを繰り返す(可能な限り)

48. 48
実践的なインタラクションデザインの考え方
48

49. 49
インタラクションデザインって何 背景
人工物やシステムのユーザーへの反応を振る舞いとして定義。
インタラクションデザインは通常ユーザーを調査することから
始まり、形状だけでなく振る舞いを強調したデザインを行い、
そのデザインはユーザビリティや情緒的観点で評価される。
マイクロインタラクションと呼ばれる領域
wikipedia

50. 50
注目されている理由 背景
デバイスの制限 アプリケーションの複雑化

51. 51
目的
インタラクションデザイン
振る舞い 問題

52. 52
目的
インタラクションデザイン
振る舞い 問題

53. 53
インタラクションデザインの目的と効果
・ユーザーの習熟を短縮
・ユーザーの不満の改善
・ユーザーの生産性の向上
目的を明確にして取り組むのが大切

54. 54
目的
インタラクションデザイン
振る舞い 問題

55. 55
トリガー
ルール
フィードバック
ループとモード
インタラクションデザインの4つの構成要素

56. 56
トリガー インタラクションを開始するためのきっかけ
手動 システムトリガー

57. 57
ルール どのように動作するのかという取り決め
ONの場合電気がつき続けているという状態

58. 58
フィードバック
ルールに関するユーザーの理解を助ける
視覚的、聴覚的、触覚的などの要素
ルールは一緒でも視覚的に理解出来ない可能性がある

59. 59
ループとモード ルールが二股以上になった状態
未読のプッシュ通知の件数に応じて、
アプリケーションにバッジがつく
なにかひとつ操作を行うとモードが
終了するもの

60. 60
トリガー
ルール
フィードバック
ループとモード
インタラクションデザインの4つの構成要素
ユーザーを忘れずに振るまいを定義すること

61. 61
目的
インタラクションデザイン
振る舞い 問題

62. 62
テストハードルが高い

63. 63
マイクロインタラクションのテスト法
・出来るだけ忠実度の高いプロトタイプでテスト
・定性調査ではなく定量調査を用いる(フロー・構造)

64. デザイナー「⚪⚪みたくシュインとした感じでお願いします」
エンジニア「 」
技術者間の連携で苦労
他にもハードウェア制約などの課題がある

65. どのツールを活用していいか判らない
swf→iPhone cocos2Dx 連携 数字綺麗
as1.1 ゲーム以外 データ変換
good
bad

66. AEアプローチの魅力
ーAfterEffectsはデータが綺麗
ー動画なのでインタラクションチェックがしやすい
ーデザイナー/エンジニアが創造的なところに集中できる
動きの数値化が効率よくできるツールを選択

68. いけたらDEMO

69. 実践的なインタラクションデザインの考え方
テストは定性調査ではなく定量調査を用いる
動きの数値化が効率よくできるツールを選択
目的を定義

70. さいごに宣伝

71. [参考文献]
実践的なUXデザインと
インタラクションデザインの考え方
∼UI軸に議論するのはもうやめよう∼
2011 Service Design Network Global Conference
UX White Paper
THIS IS SERVICE DESIGN THINKING. Basics - Tools - Cases ー 領域横断的アプローチによるビジネスモデルの設計
意味論的転回―デザインの新しい基礎理論
UXの本質について http://www.underconcept.com/blog/archives/959
【やっぱりよくわからない】デザイン思考ってなに？ http://blog.btrax.com/jp/2013/06/02/d-thinking/