2013年新卒向けに実施したUX研修の資料です。 1. UX/UIとは？ 2. UXデザインワークショップ 3. 事例紹介 4. まとめ

2. アジェンダ
UX/UIとは？：30min
UXデザインワークショップ：120min
（途中休憩）
事例紹介：15min
まとめ・Q&A：15min

3. 自己紹介
高橋真理
2008年新卒でメンバーズに入社
デザイナーとして社会人スタート
コーポレートサイトとか作ってました
2011年 子会社コネクトスターに参画して自社サー
ビス開発担当に
toCのサービス開発に携わる中でUXから実装まで
今はAS8でアジャイル開発やってます

4. UX/UIとは？
なんか、最近よく聞くよね

5. http://www.slideshare.net/SaoriBaba/ux-14752690
■UXデザインとは

6. わたしたちが提供するサイトの中心は間違いなくユーザ。
彼ら彼女らを理解し、満足させるサイトにしないと価値がない。
why UX?
http://www.naharnet.com/stories/en/77439

7. UXから考えてる 開発から考えてる
天気予報アプリの例
http://www.atmarkit.co.jp/ait/articles/1303/25/news013_5.html
■もし新人女子営業が『UXデザイン入門』を読んだら

8. UX/UI？

9. UserExperience
UserInterface
→ユーザ体験
→ユーザと情報をやりとりする
インターフェイス

10. UX
UI
■J. J. Garrett氏の考えるUX
http://www.atmarkit.co.jp/ait/articles/1008/31/news096.html

11. Good UI ≠ Good UX
■1分でわかるUIとUXをわかりやすく説明する写真とお話
http://www.persistent.org/me/?p=389

12. もう一度、UXとは
http://www.slideshare.net/SaoriBaba/ux-14752690
■UXデザインとは

13. とはいってもねー
ちょっと概念的でわかりづらいですよね
UXとは極めてあいまいな概念なのです
このあとのワークショップで「UXから考え
るとは何か」を体験してもらえたらなと
思います

14. なにはともあれ、全ては
ユーザを知ることから始めよう！

15. では、ワークショップに参ります

16. ワークショップのゴール
ユーザ中心のサイトまたはアプリを
1つ考えてみたいと思います
※このプロセスを「UXデザイン」と
呼んだりします

17. やること
1. ユーザを知る
2. ユーザに対して何が提供できるか
考えてみる
3. ちょっと形にしてみる
4. 発表

18. 大学の授業ってつまんないよね
寝ちゃうよね
突然ですが

19. どうすれば大学の授業が
楽しくなるか？
お題
大学の授業が楽しくなるサイト
またはアプリについて考えていきましょう！

20. まずはユーザを知ろう

21. インタビュー
ユーザがなぜ授業が楽しくないと
思っているのか/どうしたら楽しいと
思うのかを聞き出してください
まず、10分間で質問リストを作って
みます（5、6個）
その後二人一組でインタビューを
してみます

22. 質問/インタビューの注意点
Do Don’t
- たくさんのメモをとる
- 自由形式の回答を促す
質問
- 背景にある物語を聞く（な
ぜXXですか？どうXXだったの
ですか？）
- 事実を聞く
- 黙ってよく耳を傾ける
- 笑顔でいる
- 未来の行動について
質問する
- yes/noで終わる質問
（yes, and?）
- 誘導尋問をする
- しゃべりすぎる

23. 質問リスト作成（10分）

24. インタビュータイム
10分×2

25. 終了！

26. インタビュー内容を整理しましょう
行動 ニーズ/課題
高橋真理さんの・・・
-就職決まったし単位も
ヨユーだし、遊びで
学校に来てる
-授業はつまらないので
ノート上で友達と
喋ってる
-誰も知ってる友達が
いない時は寝てる
-友達と楽しく過ごしたい
-大学では友達に会いた
い（友達に会えるから大
学に来る）
-友達がいないとガッカリ
するけど、いちいちメール
で聞くのもめんどくさい

27. インタビュー内容整理10分

28. 終了！

29. おつかれさまでした
休憩10分

30. どんなサイト/アプリが
考えられる？
ワークショップ第2部

31. どんなサイト/アプリ？
インタビューした同期が「大学の授業
めっちゃ楽しい！」ってなるためには
どんなサイト/アプリが考えられるで
しょうか？
インタビューで聞いたニーズ/課題を
元に考えてみましょう

32. こんな感じでまとめてみよう
[XXXXX]したい○○○○くん向けのこのサービスは
[XXXXXXXX]ができることで、
○○○○くんは大学の授業がメッチャ楽しくなる

33. まとめタイム15分
※1枚に書く

34. 終了！

35. 最後です
ちょっとだけ形にしてみましょう

36. 手書きでサイト/アプリの
プロトタイプ（※試作品）を
つくってみよう
超超ーラフな、こんな感じでOKです

37. 手書きプロトタイプづくり
20分
※1枚あたり1ページで
※このあと発表です

38. 終了！

39. おつかれさまでした
休憩10分

40. 発表タイム
※1人3分以内くらいで
さっき書いてもらった1文と、
主要機能を紹介してください。

41. ではちょっとだけ、
事例紹介します

42. 大塚製薬様の「ヘルシー大豆レシピ」
（iPhoneアプリ）構築事例をシェアします
ダウンロード
してね！
レビューも書いてほしい・・な
https://itunes.apple.com/jp/
app/id628311086?mt=8
「大豆レシピ」で検索

43. やったことです
1.ファクト収集
2.ファクト整理
3.仮説づくり
4.プロトタイプ作成

44. （普通ですが）競合調査
レシピサイト・アプリ 20個くらい

45. 大豆×料理で仮説づくりの
ブレストをしました
大豆=健康イメージある
健康な料理って淡白であまりバリエーションない
いつも同じ料理作ってて、レシピにバリエーションを求めてる

46. 社員インタビューと観察
1.事前に用意した質問項目で、
普段の料理に関する行動や
レシピとの接し方を聞き出し
ます。
2.同時に普段のようにスマホで
レシピを探してもらいその時の
行動（どうやって検索するか）を
観察します。

47. 質問項目＆シナリオ
1.普段料理していますか？
2.料理しているときにレシピを見ますか？
3.食方面での健康に対して気をつけてること
がありますか？（大豆というテーマだったため）
4.いつものようにレシピを探してもらう
1.スマホ使っているか？
2.複数メディアを見ているか？
3.どういう気持ちで見ているか？

48. インタビューメモ
※とにかくメモをとりまくります
こんなんがA410枚くらいに渡ってあります。

49. 集めたファクトを整理します
まずはばーっと事実を書きだして、
徐々にグループにまとめます。
最後に箇条書きで多くみられた意見を書き出します

50. 集めたファクトの最大公約数をペルソナとして落とします。
※イメージ写真出典： http://www.slideshare.net/clevergirl/tokyo-1-day-9327971

51. ペルソナがとると思われる行動のシナリオを
ファクトを元に策定します。
行動シナリオがあることで、ユーザが具体的にどのシーンで
どんな機能が必要なのかが見えてきます。
※このように、本来は「どうすればユーザニーズを満たせるか」については
インタビューで聞くのではなく、集めたファクトを元にプランニングします

52. 行動シナリオで出てきた必要機能を元に
紙に手書きでプロトタイプ（ペーパープロトタイプといいます）
を作成します。ツールを使用し、手書き段階で動かして
アプリの全体観を確認します。
紙を写真に撮るだけで動きをつけて簡易プ
ロトタイプを作れる無料iPhoneアプリ
「POP」を使用しました。
http://popapp.in/

53. その後実装の中でブラッシュを
繰り返し、リリースバージョン完成です

54. まとめ
という感じでユーザを知ることで、どんな機能が
必要か、どんな見た目がいいのかをより確実に
考えることができます。だからUXの考え方は大事
です。
ついお客さんの視点とか要望起点になってしまい
がちですが常に「ユーザ視点」を持ってユーザに
きちんと使われるサイトなりアプリを作りましょう。
でも、ユーザの気持ちをきちんと理解して、それに
きちんと答える機能を作るのって思った以上に難
しいです。
だから、（特にtoCのサービスでは）変化につよいア
ジャイル開発が有効なのです。＜次の研修に続く＞

55. Q&A

56. ありがとうございました！
https://www.facebook.com/mari.takahashi.211