社内の中堅デザイナー・ディレクター向けに行ったUX研修の資料#1講義編です。 UXデザインとは何か、用語の定義、最近盛り上がっている背景、UXデザインプロセスの進め方についてまとめています。 ■#2ワークショップ編はこちら http://www.slideshare.net/MariTakahashi/ux-slideshare

1. 社内の中堅デザイナー・ディレクター向けに行ったUX研修の資料#1講義編です。
UXデザインとは何か、用語の定義、最近盛り上がっている背景、UXデザインプロセスの進め方に
ついてまとめています。

2. 高橋 真理
Mari Takahashi
UX Design / Graphic Design
Agile / Planning / Analytics
Project Leader
https://www.facebook.com/mari.takahashi.211
http://www.slideshare.net/MariTakahashi

3. 今回の研修の構成

4. • #1 講義編 本日 10:00-12:00
• #2 実践編 7/11（金）15:00-18:00
ちょっと長いですが、お付き合いください。

5. • デザイナー系：10名
• ディレクター系：10名
参加者

6. • アジャイルで受託開発を行なった経験を通じて、
これからの時代のものづくりに、UXデザインの
考え方は必須。
• メンバーズ全体で、この考え方やプロセスを浸透
させたい。それによって、より価値あるものづくり
にしたい。
研修開催にあたり
業務にぜひとりいれてください！

7. • UXとは
• なぜUXが盛り上がっているのか
• UXデザインのプロセス
• デザイン／開発フェーズのアプローチ
• UXデザインの評価
• 事例紹介
• 質疑応答
本日のお話

8. UXとは

9. UI/UX
ペルソナ
カスタマージャーニーマップ
エスノグラフィー
行動シナリオ
行動観察
システムから得られる体験
人間中心設計
IA
インターフェイスデザイン
画面設計
プロトタイプ インタビュー
コンテクスチュアルインクワイアリー

10. まだまだウェブの領域では混沌としている

11. 「1つの定義でUXを言い表すことはできない」
「UX白書」より

12. User Experience
http://www.slideshare.net/SaoriBaba/ux-14752690

13. User Experience
http://www.atmarkit.co.jp/ait/articles/1008/31/news096.html

14. User Experience
http://www.slideshare.net/SaoriBaba/ux-14752690

15. User Experience
http://blog.btrax.com/jp/2014/01/29/ux-business/

16. User Experience
User Interface

17. UXデザインって？

18. ユーザーの姿や、課題、ニーズを「正しく」
理解して、アウトプットにつなげ、
あるUXを計画的に実現するためのプロセス
UXデザインとは

19. なぜUXが盛り上がっているのか

20. 1. マルチデバイス時代

22. -限られた利用シーン（家 / オフィス）
-限られた利用方法（ブラウジングのみ）
これまで

23. -様々な場所
（お店、電車、街中...）
-様々なタイミング
（写真を撮った、素敵な服を見つけた、チラ
シを受け取った、道に迷った...）
-様々な利用方法
（ブラウジングする、電話、地図を調べる、
投稿する、シェアする）
これから

24. 2. プロダクトから体験開発時代へ
https://flic.kr/p/dqdkVz

25. -価格、機能性
-スペックが競争力
Walkman時代
https://flic.kr/p/8wAS1r

26. -音楽を聴く「体験」そのものが商品へ
iTunes時代
https://flic.kr/p/5XRnQP

27. アメリカでは経営にUXが
http://uxmag.com/articles/ux-its-time-to-define-cxo

28. UXデザインのプロセス

29. UXデザインのプロセス
1.理解
2. 整理
3. 創造
4. 検証

30. 1.理解
•インタビュー
•アンケート調査
•フィールドワーク
•ログからの行動分析
https://flic.kr/p/62B3ZN

31. 2.整理
•カスタマージャーニーマップ
•ペルソナ
•行動シナリオ
https://flic.kr/p/62B3ZN

32. 3.創造
•プロトタイプ
•デザイン
•開発
https://flic.kr/p/8DftGz

33. 4.検証
•GA等ログ分析
•アンケート
•UIScope
•インタビュー
https://flic.kr/p/4EwGsd

34. • 想像ではなく、ファクトにもとづいて行なう
• ユーザーの理解から創造する時に、面白いものに
なるかどうかはアイデアが必要

35. 理解から整理まで

36. 1.理解
• インタビュー
• アンケート調査
• フィールドワーク
• ログからの行動分析
2.整理
• カスタマージャーニーマップ
• ペルソナ
• 行動シナリオ

37. 誰がやるの？

38. プロジェクトメンバー
全員でやろう！ディレクター
阿佐さん
エンジニア
角銅さん
デザイナー
上原くん
ある日のマイ部署のプロジェクトメンバー

39. • UXデザインプロセスのアウトプットは「グラフィッ
クデザイン」や「UI」だけではない。もっと幅広く
課題を検討する必要がある。
• 一人の視点にかたよらない。
• 共有が早い（結果的にスピーディー）。
プロジェクト進行中ずっと共通の理解がもてる。
なぜ全員か

40. デザイン/開発フェーズのアプローチ

41. コラボレーティブデザインをしよう

42. • チームメンバーで共同作業を行いペーパープロト
タイプを作り上げる
• 手書きであることにより、全員でユーザーの課題に
対する解決案を議論する
• 一人が考えるよりはるかに効率的（体感値）

43. • 用意するもの
• 紙、ペン
• やりかた
• 個人で考えるタイム
• 発表タイム
• 出てきたものを議論して、一つの案に落としこむ
• 画面ごとに繰り返す
デザインスタジオ

44. 動かしながらデザインしよう

45. http://www.wix.com/blog/2013/07/introduction-to-flat-design/

46. http://magazine.atokore.com/
%E3%83%95%E3%83%A9%E3%83%83%E3%83%88%E3%83%87%E3%82%B6%E3%82%A4%E3%83%B3%E3%81%AE%E5%8E%9F
%E7%82%B9%E3%80%81%E3%83%90%E3%82%A6%E3%83%8F%E3%82%A6%E3%82%B9%EF%BC%88%EF%BC%91%EF%BC%89/

47. http://www.google.com/design/spec/material-design/introduction.html

48. http://cssnite.jp/lp/lp33/followup/LP33-tsuchiya.pdf

49. http://cssnite.jp/lp/lp33/followup/LP33-tsuchiya.pdf

50. 静止画デザインカンプの限界

51. http://memo.goodpatch.co/2014/02/the-year-of-the-prototype/

56. UXデザインの検証

57. • 評価方法と時期を先に決めておく
• 実装の段階で、計測可能な状態にしておく（パラメー
ターを入れるなど）

58. • GA
• ユーザーアンケート
• UIScope
• mixpanel

59. 明日から何ができるか

60. • A∼Eのチームごとに、プロジェクト・自分の業務
にどのようにUXデザインのプロセスを取り入れる
ことができるのかをディスカッション
ワーク

61. 発表
3min*5=15min

62. 最後に

63. • 提案内容の検討の際に社員にインタビューしてみる。
その結果をペルソナ・行動シナリオとかにまとめて
提案書にいれてみる。（提案にいれることで案件に
いれられる）
• 要件定義フェーズに上記のプロセスを入れる。設計・
クリエイティブ検討フェーズで、チーム全員で議論
する時間をとる（デザインスタジオ）
取り入れ方の案

64. • 提案の場合
• ファクトに基づいたユーザーの課題により、提案に説得力が出て勝ちやすくなるかも
• プロジェクトの場合
• ユーザーファーストの考え方が根付き、ユーザーに価値あるアウトプットに
確率高くたどり着ける
• クライアントを含め、共通のユーザー像をイメージすることで
プロジェクトが円滑に進む（議論しやすい、ひっくり返りづらいかも）
• エンジニアもクリエイティブ検討に入ることで、実現性とセットで議論できる、
手戻りの少ない企画・設計ができる
• ユーザー像と課題が明確になることでメンバーのモチベーションが高まる
UXのプロセスを取り入れるメリット

65. • UXデザインはスキル
• 知識だけじゃなく、実践が大事
• チームの中でどう取り入れていくかを
議論してほしい。

66. UXデザインプロセスから初めることで、
ユーザーファーストなものづくりを

67. 質疑応答