1. 2013 © Concent, Inc.
ユーザエクスペリエンス・デザイン・ガイド
JTF 2013: July Tech Festa
2013.07.14
坂田 一倫（@sprmari0）
株式会社コンセント

2. 2013 © Concent, Inc.
PAGE: 1
自己紹介
sprmari0 kazumichisakata kazumichi.sakata[at]…
インタビュー記事：
【UX設計の失敗学】今年、「最高のユーザー体験」を作りたいと考えるディベロッパーが知るべき
3つのこと
坂田 一倫（さかた・かずみち）
株式会社コンセント ユーザエクスペリエンスアーキテクト
HCD-Net 認定 人間中心設計専門家／Certified Scrum Product Owner
前職：某インターネットメディア企業にてUXデザイナーとして新規事業の
立ち上げや20サービス以上の大規模サイトリニューアルプロジェクトを担当。
ユーザエクスペリエンス設計業務を担当する人が集うコミュニティ
「ShibuyaUX」主宰、「Lean Startup Machine Tokyo」共同オーガナイザ。

3. 2013 © Concent, Inc.
PAGE: 2
世界で一番売れているカメラは？

4. 2013 © Concent, Inc.
PAGE: 3

5. 2013 © Concent, Inc.
PAGE: 4
カメラを
セットする
シャッターを
押す
撮影した写真
を確認する
？？？
これまでの提供価値

6. 2013 © Concent, Inc.
PAGE: 5
カメラを
セットする
シャッターを
押す
撮影した写真
を確認する
カメラを運ぶ
写真を
加工する
写真を
記録・共有
する
新しい提供価値

7. 2013 © Concent, Inc.
PAGE: 6
© Ursus Wherli
「モノ」から「コト」の デザインへ

8. 2013 © Concent, Inc.
PAGE: 7
「問題発見」から「問題解決」へ

9. 2013 © Concent, Inc.
PAGE: 8
「製品中心」から「顧客中心」へ

10. 2013 © Concent, Inc.
PAGE: 9
ユーザエクスペリエンス（UX）

11. 2013 © Concent, Inc.
PAGE: 10
″ユーザと「会社、会社のサービス、商品」の相互作用の
全ての側面を含む。第一の要件は、混乱や面倒なしで顧客の
的確なニーズを満たす事。第二の要件は、所有する楽しさ、
使用する楽しさを生み出す「簡潔さと優雅さ」である。″
– ドナルド・ノーマン

12. 2013 © Concent, Inc.
PAGE: 11
© Google Glass
メディア、デバイス…の多重化

13. 2013 © Concent, Inc.
PAGE: 12
ハイコンテキストなライフスタイル

14. 2013 © Concent, Inc.
PAGE: 13
NFL Mobile Commercial

15. 2013 © Concent, Inc.
PAGE: 14
コンテンツ
やサービス
モバイル
アプリ
タブレット
紙
メール
ブログ
SNS
ウェブ
サイト
© “Adapting Ourselves to Adaptive Content,” Karen McGrane
様々な利用シーンの想定と設計

16. 2013 © Concent, Inc.
PAGE: 15
© “User Requirements in the 21st Century,” William Hudson
誰が、いつ、どこで、どのように、なぜ？

17. 2013 © Concent, Inc.
PAGE: 16
人間中心設計（HCD）

18. 2013 © Concent, Inc.
PAGE: 17
2010年：ISO 92401-210の制定
UXの用語が定義され、HCDによる設計が達成すべき目標とし
て位置づけられる。

19. 2013 © Concent, Inc.
PAGE: 18
利用と状況の把握と明示
（ユーザの要求を知る）
人間中心設計の
必要性の特定
システムが特定のユーザ及び組織の
要求事項を満足
ユーザと組織の要求事項の明示
（ユーザ要求をシステム要求に変換する）
設計による解決策の作成
（デザインや設計案を作り込む）
要求事項に対する設計の評価
（デザインや設計案の妥当性を評価する）
© ISO 9241-210
人間中心設計プロセス

20. 2013 © Concent, Inc.
PAGE: 19
人間中心設計プロセス

21. 2013 © Concent, Inc.
PAGE: 20
© “User Experience Journey Map,” Kazumichi Sakata
シナリオのビジュアライゼーション（可視化）

22. 2013 © Concent, Inc.
PAGE: 21
© “User Experience Journey Map,” Kazumichi Sakata
When（いつ？）
Where（どこで？）
How（どのように？）
What（なにが？）
Why（なぜ？）
問題解決の糸口

23. 2013 © Concent, Inc.
PAGE: 22
提供価値の定義
Who(誰) needs What(何を)
because Why(なぜ)

24. 2013 © Concent, Inc.
PAGE: 23
人間中心設計手法の導入

25. 2013 © Concent, Inc.
PAGE: 24
ユーザ調査

26. 2013 © Concent, Inc.
PAGE: 25
ユーザ調査：
ユーザの行動や心理を把握する調査

27. 2013 © Concent, Inc.
PAGE: 26
© “Persona,” Jason Travis
ペルソナ

28. 2013 © Concent, Inc.
PAGE: 27
ペルソナ：
調査を基に生成された架空の顧客像
名前と写真
どんな表情をしていますか？名前は？
特徴
他人と区別される対象ペルソナの特徴は？
欲求と不満
何を求めていますか？何を不満と感じますか？

29. 2013 © Concent, Inc.
PAGE: 28
© “Lean ways to test your new business idea,” David Travis
ストーリーボード

30. 2013 © Concent, Inc.
PAGE: 29
ストーリーボード：
ペルソナの利用文脈の可視化
時間
いつ、サービスやプロダクトを利用していますか？
場所
どこでサービスやプロダクトを利用していますか？
ステークホルダー
ストーリーの中で誰が関係してきますか？

31. 2013 © Concent, Inc.
PAGE: 30
ユーザビリティテスト

32. 2013 © Concent, Inc.
PAGE: 31
ユーザビリティテスト：
使いやすさを評価するテスト
シナリオの評価
想定したシナリオの妥当性
サイト構造の評価
導線の有効度合い、コンテンツニーズの評価
画面構成の評価
レイアウトやラベル、リンク位置の評価

33. 2013 © Concent, Inc.
PAGE: 32
開発プロセスへの導入

34. 2013 © Concent, Inc.
PAGE: 33
ユーザビリティテスト ユーザビリティテスト
ビジュアル・デザイン、HTML制作
アプリケーション開発Better
Best
ビジュアル・デザイン、HTML制作
アプリケーション開発
ユーザビリティテスト ユーザビリティテスト
ユーザ定義
利用文脈定義
開発プロセスへの導入：
ユーザビリティ向上のための視点を取り入れる
フィード
バック
フィード
バック

35. 2013 © Concent, Inc.
PAGE: 34
まとめ

36. 2013 © Concent, Inc.
PAGE: 35
ユーザ
ウェブ・
デザイン
エンジニア
PR
営業
マーケティ
ング
部署A
広告
部署C
部署B
プロデュー
サー
物流
組織・領域横断的なユーザ中心アプローチ

37. 2013 © Concent, Inc.
PAGE: 36
どうやって、つくるか？
なにを、つくるか？
なぜ、つくるか？
誰のために、つくるか？
HCDの思考回路：
Design for Meaning, Design for User

38. 2013 © Concent, Inc.
PAGE: 37
提供価値の定義
Who(誰) needs What(何を)
because Why(なぜ)

39. 2013 © Concent, Inc.
PAGE: 38