Think User First - Cookpad × Fablic http://connpass.com/event/17492/ ユーザーファーストを大切にするファブリックとクックパッドの二社合同で行われたデザイン勉強会イベントのスライド資料です。 -- 塚由 恵介（つかよし けいすけ) ファッションフリマアプリフリル プロダクトオーナー兼デザイナー @redxiii_

1. UXマップを使ったサービス改善
株式会社Fablic デザイナー
塚由 恵介

2. こんばんは！

3. プロフィール
• 塚由恵介（くれちょん）
• フリーランス→Fablicに入社
• フリルのUX設計、iOSアプリデザイン
を担当
• 外部で発表するの初めてです
• めちゃくちゃ緊張してます！
3

4. お知らせ

5. フリルリニューアルしました！
5

6. ファッションフリマアプリ女性向けのフリマアプリ
6

7. リニューアルの目的
• リブランディング
•価値観の軸足を拡張する or ズラす
•より多くの人に使ってもらいたい
•リデザイン
•インタラクションを最適化する
•よりフリルを楽しんでもらいたい
7
ファッションフリマアプリ

8. リニューアルの目的
• リブランディング
•価値観の軸足を拡張する or 変える
•より多くの人に使ってもらいたい
•リデザイン
•インタラクションを最適化する
•よりフリルを楽しんでもらいたい
8
今回はこちらのお話
ファッションフリマアプリ

9. インタラクションとは？
Twitterを例に紹介

10. Twitterを起動するときのインタラクション

11. インタラクションがうまくデザインされてい
ないと・・・
これはうまくいってる例

12. Twitterを起動するときのインタラクション

13. Twitterを起動するときのインタラクション

14. ユーザー「アプリが使いにくい…。」
ユーザー「だれが使うんだこの機能…。」
デザイナー「うまく使ってくれない…。」
コンテキストに応じたUIデザインができない

15. どうやって改善しよう？

16. 「なぜ使いにくいのか？」を
可視化するためのUXマップを作ろう！

17. Fablic流UXマップ

18. どんなUXマップを作るか？
• 初めての購入者
• 初めての出品者
• リピート購入者
• リピート出品者
18

19. どんなUXマップを作るか？
• 初めての購入者
• 初めての出品者
• リピート購入者
• リピート出品者
19
ユーザーモデルごとのマップを作成
モデル＝「こういうひとはだいたいこういう行動をする」

20. どんなUXマップを作るか？
• 初めての購入者
• 初めての出品者
• リピート購入者
• リピート出品者
20
ユーザーモデルごとのマップを作成
モデル＝「こういうひとはだいたいこういう行動をする」
今回はこちらを紹介

21. Fablic流UXマップの作りかた

22. 目的達成までのインタラクションを並べる

23. アプリとの最初の接点

24. アプリの導入

25. アプリスタート

27. 理想的な感情の動きをプロットする

28. 理想的な感情の動きとは？
• サービスが立てた仮説ベース
• ある程度想像でOK
• こうなればいいね、というものを描く
28

30. 実際にあった感情の動きをプロットする

31. 実際にユーザーに使ってもらう、書いてもらう
31

33. 実際にあったユーザーの声を反映

34. 何回か繰り返してモデル化＆精度をあげる
ちなみにニールセン先生によるとユーザビリティテストは5回繰り返すと
75%の傾向がわかるらしい

39. 離脱

40. •詳しく調査
•わかった問題
•デフォルトでフリル内で人気のブランドを
出していたことが、ユーザーの好みを制限
していた
•男性には特にうまく機能していない
•考えられる解決案
•ブランドを好きに選べたら自分向けのアプ
リだと認識してもらえるのでは？
40
タイムラインで何が起こっていたのか？

42. 理想との乖離

43. 理想でも低い

44. 眺めているだけでも様々な問題が見つかる

45. UXマップを作ってよかったこと
45

46. UXマップを作ってよかったこと
• コンテキストに沿った適切なUI設計をするため
の良い材料になった
46

47. UXマップを作ってよかったこと
• コンテキストに沿った適切なUI設計をするため
の良い材料になった
• 今のインタラクションがどうなっているのかを
可視化できた
47

48. UXマップを作ってよかったこと
• コンテキストに沿った適切なUI設計をするため
の良い材料になった
• 今のインタラクションがどうなっているのかを
可視化できた
• ユーザー調査を繰り返すことで改めて適切な
ユーザーモデルを構築できた
48

49. その中でも一番よかったのが…

50. • チーム全体の意識がユーザーの体験の改善に
向いた

51. • チーム全体の意識がユーザーの体験の改善に
向いた
めっちゃユーザーファースト！

52. 実践編

53. 後編：UXマップを実践しよう
株式会社Fablic デザイナー
塚由 恵介

54. 身近なところでの
UXマップの利用例を出すべく、考えてきました

55. Think User First を Think User First
ここでドヤ顔

56. Think User First を Think User First
• 普段はデザイナーであるみなさんにユーザーを
体験してもらおう！
• 今回のイベントを想定してUXマップを作って
みました
56

57. 「来てよかったと思えるイベントのUXマップ」

58. 「来てよかったと思えるイベントのUXマップ」
• インタラクション：ぼくがパイロットテストで確認
• 理想的UX：ぼくのかんがえたさいきょうのイベント
• 現実的UX：ぼくがいつも思うこと＆ヒアリング
58

61. イベントとの最初の接点

62. イベント中のインタラクション

63. イベント後のインタラクション

65. 理想との乖離

68. どうすればこの乖離を小さくできるか？

69. 話したい人が集まる話しやすい場所づくり
69 カジュアルに話しかけていいスペースをイベント内に設置

71. 理想との乖離

74. 遅れてきても座りやすいように前から座って
もらうようアナウンス＆スタッフによる誘導
74
クックパッドさんご協力ありがとうございました

76. 平日なので明日も仕事

77. お酒だけでなくソフトドリンクも豊富に
77

78. 他にも…
• 多くの人にチャンスがある抽選制
• エレベーターホールに誘導張り紙
• 円滑に進行するためにパネルディスカッション
の質問をふせんで集める

79. そう、これが…！

80. Think User First を Think User First や！！
ここでもう一度ドヤ顔

81. お知らせ

82. 凄腕デザイナー募集！！
積極採用中！！！

83. 凄腕デザイナー募集！！
気になる方はWantedly経由もしくは直接ご連絡ください！
https://www.wantedly.com/projects/1425

84. パネルディスカッションをお楽しみに
＆楽しい懇親会にしましょう！
資料は後ほど共有させていただきます

85. リンク
• http://keisuke.tsukayoshi.com
• https://twitter.com/redxiii_
• https://www.wantedly.com/projects/1425
85