SlideShare a Scribd company logo
UXマップを使ったサービス改善
株式会社Fablic デザイナー
塚由 恵介
こんばんは!
プロフィール
• 塚由恵介(くれちょん)
• フリーランス→Fablicに入社
• フリルのUX設計、iOSアプリデザイン
を担当
• 外部で発表するの初めてです
• めちゃくちゃ緊張してます!
3
お知らせ
フリルリニューアルしました!
5
ファッションフリマアプリ女性向けのフリマアプリ
6
リニューアルの目的
• リブランディング
•価値観の軸足を拡張する or ズラす
•より多くの人に使ってもらいたい
•リデザイン
•インタラクションを最適化する
•よりフリルを楽しんでもらいたい
7
ファッションフリマアプリ
リニューアルの目的
• リブランディング
•価値観の軸足を拡張する or 変える
•より多くの人に使ってもらいたい
•リデザイン
•インタラクションを最適化する
•よりフリルを楽しんでもらいたい
8
今回はこちらのお話
ファッションフリマアプリ
インタラクションとは?
Twitterを例に紹介
Twitterを起動するときのインタラクション
インタラクションがうまくデザインされてい
ないと・・・
これはうまくいってる例
Twitterを起動するときのインタラクション
Twitterを起動するときのインタラクション
ユーザー「アプリが使いにくい…。」
ユーザー「だれが使うんだこの機能…。」
デザイナー「うまく使ってくれない…。」
コンテキストに応じたUIデザインができない
どうやって改善しよう?
「なぜ使いにくいのか?」を
可視化するためのUXマップを作ろう!
Fablic流UXマップ
どんなUXマップを作るか?
• 初めての購入者
• 初めての出品者
• リピート購入者
• リピート出品者
18
どんなUXマップを作るか?
• 初めての購入者
• 初めての出品者
• リピート購入者
• リピート出品者
19
ユーザーモデルごとのマップを作成
モデル=「こういうひとはだいたいこういう行動をする」
どんなUXマップを作るか?
• 初めての購入者
• 初めての出品者
• リピート購入者
• リピート出品者
20
ユーザーモデルごとのマップを作成
モデル=「こういうひとはだいたいこういう行動をする」
今回はこちらを紹介
Fablic流UXマップの作りかた
目的達成までのインタラクションを並べる
アプリとの最初の接点
アプリの導入
アプリスタート
Uxマップを使ったサービス改善
理想的な感情の動きをプロットする
理想的な感情の動きとは?
• サービスが立てた仮説ベース
• ある程度想像でOK
• こうなればいいね、というものを描く
28
Uxマップを使ったサービス改善
実際にあった感情の動きをプロットする
実際にユーザーに使ってもらう、書いてもらう
31
Uxマップを使ったサービス改善
実際にあったユーザーの声を反映
何回か繰り返してモデル化&精度をあげる
ちなみにニールセン先生によるとユーザビリティテストは5回繰り返すと
75%の傾向がわかるらしい
Uxマップを使ったサービス改善
Uxマップを使ったサービス改善
Uxマップを使ったサービス改善
Uxマップを使ったサービス改善
離脱
•詳しく調査
•わかった問題
•デフォルトでフリル内で人気のブランドを
出していたことが、ユーザーの好みを制限
していた
•男性には特にうまく機能していない
•考えられる解決案
•ブランドを好きに選べたら自分向けのアプ
リだと認識してもらえるのでは?
40
タイムラインで何が起こっていたのか?
Uxマップを使ったサービス改善
理想との乖離
理想でも低い
眺めているだけでも様々な問題が見つかる
UXマップを作ってよかったこと
45
UXマップを作ってよかったこと
• コンテキストに沿った適切なUI設計をするため
の良い材料になった
46
UXマップを作ってよかったこと
• コンテキストに沿った適切なUI設計をするため
の良い材料になった
• 今のインタラクションがどうなっているのかを
可視化できた
47
UXマップを作ってよかったこと
• コンテキストに沿った適切なUI設計をするため
の良い材料になった
• 今のインタラクションがどうなっているのかを
可視化できた
• ユーザー調査を繰り返すことで改めて適切な
ユーザーモデルを構築できた
48
その中でも一番よかったのが…
• チーム全体の意識がユーザーの体験の改善に
向いた
• チーム全体の意識がユーザーの体験の改善に
向いた
めっちゃユーザーファースト!
実践編
後編:UXマップを実践しよう
株式会社Fablic デザイナー
塚由 恵介
身近なところでの
UXマップの利用例を出すべく、考えてきました
Think User First を Think User First
ここでドヤ顔
Think User First を Think User First
• 普段はデザイナーであるみなさんにユーザーを
体験してもらおう!
• 今回のイベントを想定してUXマップを作って
みました
56
「来てよかったと思えるイベントのUXマップ」
「来てよかったと思えるイベントのUXマップ」
• インタラクション:ぼくがパイロットテストで確認
• 理想的UX:ぼくのかんがえたさいきょうのイベント
• 現実的UX:ぼくがいつも思うこと&ヒアリング
58
Uxマップを使ったサービス改善
Uxマップを使ったサービス改善
イベントとの最初の接点
イベント中のインタラクション
イベント後のインタラクション
Uxマップを使ったサービス改善
理想との乖離
Uxマップを使ったサービス改善
Uxマップを使ったサービス改善
どうすればこの乖離を小さくできるか?
話したい人が集まる話しやすい場所づくり
69 カジュアルに話しかけていいスペースをイベント内に設置
Uxマップを使ったサービス改善
理想との乖離
Uxマップを使ったサービス改善
Uxマップを使ったサービス改善
遅れてきても座りやすいように前から座って
もらうようアナウンス&スタッフによる誘導
74
クックパッドさんご協力ありがとうございました
Uxマップを使ったサービス改善
平日なので明日も仕事
お酒だけでなくソフトドリンクも豊富に
77
他にも…
• 多くの人にチャンスがある抽選制
• エレベーターホールに誘導張り紙
• 円滑に進行するためにパネルディスカッション
の質問をふせんで集める
そう、これが…!
Think User First を Think User First や!!
ここでもう一度ドヤ顔
お知らせ
凄腕デザイナー募集!!
積極採用中!!!
凄腕デザイナー募集!!
気になる方はWantedly経由もしくは直接ご連絡ください!
https://www.wantedly.com/projects/1425
パネルディスカッションをお楽しみに
&楽しい懇親会にしましょう!
資料は後ほど共有させていただきます
リンク
• http://keisuke.tsukayoshi.com
• https://twitter.com/redxiii_
• https://www.wantedly.com/projects/1425
85

More Related Content

PDF
Holiday のデザインと開発 - ユーザーに価値を届けるためのプロトタイピングから実装まで
Keisuke Tada
 
PDF
Think user first #2 フリルの機能改善における仮説と検証
YUKI YAMAGUCHI
 
PDF
風呂場で考えるUIデザイナーの未来
Masayuki Uetani
 
PDF
デザイナーの私と サービスをつくる私
Shizuka Yamada
 
PDF
エクスペリエンス・デザイン
Saori Baba
 
PDF
デザインのためのデザイン
Masayuki Uetani
 
PDF
アプリを生み出す現場でUI/UXデザイナーが意識するべきこと:RoomClip
takaaya
 
PDF
デザインのための経営のデザイン
Satoshi Shimmyo
 
Holiday のデザインと開発 - ユーザーに価値を届けるためのプロトタイピングから実装まで
Keisuke Tada
 
Think user first #2 フリルの機能改善における仮説と検証
YUKI YAMAGUCHI
 
風呂場で考えるUIデザイナーの未来
Masayuki Uetani
 
デザイナーの私と サービスをつくる私
Shizuka Yamada
 
エクスペリエンス・デザイン
Saori Baba
 
デザインのためのデザイン
Masayuki Uetani
 
アプリを生み出す現場でUI/UXデザイナーが意識するべきこと:RoomClip
takaaya
 
デザインのための経営のデザイン
Satoshi Shimmyo
 

What's hot (20)

PDF
誰のためのUI? - モノづくりのゴールを実現するフレームワーク -
Mikihiro Fujii
 
PDF
「個」から「集」のデザイン
Mari Kimura
 
PDF
クックパッドデザイナーが実践するユーザーファースト
Miwa Kuramitsu
 
PDF
ブランディングを意識したサービス開発の一歩
Haiji Haiiro
 
PDF
SketchがAndroidのUIデザインに向いているワケ
Asami Yamamoto
 
PDF
サービスにおけるビジュアルデザインの役割
Kenichi Suzuki
 
PPTX
息のながーいB2Bサービスで、デザイナーが価値を発揮するための取り組み
Yuya Toida
 
PDF
Sketchで変わるワークフロー
Asami Yamamoto
 
PDF
UIデザイナー最終防衛マニュアル
Taiki Kawakami
 
PDF
【第二回】デザイン初心者でも出来る!企業ロゴの作り方【案出し~デザイン作成編】
schoowebcampus
 
PPTX
デザイナーが複業でデザイナーしてる話
Yuya Toida
 
PDF
DeNAでのサービスの作り方
Naoki Masuda
 
PDF
これからのWebデザイナーのキャリアプラン
Sasaki Kouhei
 
PDF
デザイナーとディレクターのイイ関係の作り方
Take Bo
 
PDF
レスポンシブサイト制作に効く デザインTipsあれこれ
Akiko Kurono
 
PDF
未来のデザイナー論 -変化するデザイン環境と、デザイナーに求められる変化-
Satoru MURAKOSHI
 
PPTX
これまでのポートフォリオ履歴全部。 @2018/2/26 ポートフォリオナイト
Yuya Toida
 
PDF
Creative insights 01 / 受託開発にプロトタイピングを導入した時のアレコレを語る
Ryo Yoshitake
 
PDF
デザインに自信がつく、タイポグラフィの基本
Takuya Nishitani
 
PDF
デザインツール戦争とMaterial Theme Editor
Asami Yamamoto
 
誰のためのUI? - モノづくりのゴールを実現するフレームワーク -
Mikihiro Fujii
 
「個」から「集」のデザイン
Mari Kimura
 
クックパッドデザイナーが実践するユーザーファースト
Miwa Kuramitsu
 
ブランディングを意識したサービス開発の一歩
Haiji Haiiro
 
SketchがAndroidのUIデザインに向いているワケ
Asami Yamamoto
 
サービスにおけるビジュアルデザインの役割
Kenichi Suzuki
 
息のながーいB2Bサービスで、デザイナーが価値を発揮するための取り組み
Yuya Toida
 
Sketchで変わるワークフロー
Asami Yamamoto
 
UIデザイナー最終防衛マニュアル
Taiki Kawakami
 
【第二回】デザイン初心者でも出来る!企業ロゴの作り方【案出し~デザイン作成編】
schoowebcampus
 
デザイナーが複業でデザイナーしてる話
Yuya Toida
 
DeNAでのサービスの作り方
Naoki Masuda
 
これからのWebデザイナーのキャリアプラン
Sasaki Kouhei
 
デザイナーとディレクターのイイ関係の作り方
Take Bo
 
レスポンシブサイト制作に効く デザインTipsあれこれ
Akiko Kurono
 
未来のデザイナー論 -変化するデザイン環境と、デザイナーに求められる変化-
Satoru MURAKOSHI
 
これまでのポートフォリオ履歴全部。 @2018/2/26 ポートフォリオナイト
Yuya Toida
 
Creative insights 01 / 受託開発にプロトタイピングを導入した時のアレコレを語る
Ryo Yoshitake
 
デザインに自信がつく、タイポグラフィの基本
Takuya Nishitani
 
デザインツール戦争とMaterial Theme Editor
Asami Yamamoto
 
Ad

Viewers also liked (12)

PDF
BPStudy #111 iOS 10 and iPhone 7
Yukio Andoh
 
PDF
UX milk (UX Jam) 20160108
Yukio Andoh
 
PDF
UX Strategy 2016/06/18
Yukio Andoh
 
PDF
DesignJP prototyping 20160825
Yukio Andoh
 
PDF
Shin UX 2017 - UX strategy - UX review
Yukio Andoh
 
PDF
新規事業サービス 「おいしい健康」の 機能追加・改善の仮説検証
Kanako Sakamoto
 
PDF
チームを動かすデザイナー
Keisuke Tsukayoshi
 
PDF
Design JP vol2 (Motion Design & Animation)
Yukio Andoh
 
PDF
UX Jam x UX Sketch 2017 HD
Yukio Andoh
 
PDF
機能追加を行う際に考慮したい3つのポイント
Miwa Kuramitsu
 
PDF
AWA - Coockpad Tech Kitchen 20170913
Koki Togashi
 
PDF
自分たちでつくった"UXガイドライン"を片手に、クラウドワークスを作り変える。
kazuma ueda
 
BPStudy #111 iOS 10 and iPhone 7
Yukio Andoh
 
UX milk (UX Jam) 20160108
Yukio Andoh
 
UX Strategy 2016/06/18
Yukio Andoh
 
DesignJP prototyping 20160825
Yukio Andoh
 
Shin UX 2017 - UX strategy - UX review
Yukio Andoh
 
新規事業サービス 「おいしい健康」の 機能追加・改善の仮説検証
Kanako Sakamoto
 
チームを動かすデザイナー
Keisuke Tsukayoshi
 
Design JP vol2 (Motion Design & Animation)
Yukio Andoh
 
UX Jam x UX Sketch 2017 HD
Yukio Andoh
 
機能追加を行う際に考慮したい3つのポイント
Miwa Kuramitsu
 
AWA - Coockpad Tech Kitchen 20170913
Koki Togashi
 
自分たちでつくった"UXガイドライン"を片手に、クラウドワークスを作り変える。
kazuma ueda
 
Ad

Similar to Uxマップを使ったサービス改善 (20)

PPTX
UXdesign_schoo2/2
Ryosuke Matsumoto
 
PPTX
Schoo講演資料130409
schoowebcampus
 
PDF
Schoo講演資料130409
schoowebcampus
 
PDF
Schoo講演資料130409
Ryosuke Matsumoto
 
PPTX
UI/UXデザインでサイトを改善しよう
Kentaro Ohkouchi
 
PDF
【Schoo web campus】8ヶ月で会員1万人と、総額8億円を集めたux改善 先生:吉田浩一郎
schoowebcampus
 
PDF
201210_オンデマンドコマースによるマネタイズ
Satoshi Kyoda
 
PPTX
アイリッジご紹介資料
TomomiMatsuoka2
 
PDF
150806 カスタマージャーニーマップワークショップ
直人 相沢
 
KEY
Bazaar
hivelocity
 
PDF
画面じゃなくて体験をデザインしよう!事業サイドとデザイナーで認識を一致させるカスタマージャーニーマップ作成ワークショップ
Akihiko Kodama
 
PDF
レビューサイト活用の重要性と効果測定 公開版
Ryoma Hosokawa
 
PDF
【Schoo web campus】webサイトの「ユーザー体験」を高める 先生:坂本貴史
schoowebcampus
 
PDF
なぜUXをデザインしているのか
Mikihiro Fujii
 
PDF
キッチンにはスマートフォンとカレーライス
トモロヲ いちがみ
 
PDF
201211オンデマンドコマースによるマネタイズ
Satoshi Kyoda
 
PDF
新人が考える、UXと魔法の板っきれの話
Natsumi Kashiwa
 
PDF
第2回 FIC+FCS勉強会
Hiroyuki Honta
 
PDF
App souken menu(ui&ux consulting)
appsouken
 
PPTX
ソーシャルコマースとUI/UXの落とし穴
tetsuyuki suzuki
 
UXdesign_schoo2/2
Ryosuke Matsumoto
 
Schoo講演資料130409
schoowebcampus
 
Schoo講演資料130409
schoowebcampus
 
Schoo講演資料130409
Ryosuke Matsumoto
 
UI/UXデザインでサイトを改善しよう
Kentaro Ohkouchi
 
【Schoo web campus】8ヶ月で会員1万人と、総額8億円を集めたux改善 先生:吉田浩一郎
schoowebcampus
 
201210_オンデマンドコマースによるマネタイズ
Satoshi Kyoda
 
アイリッジご紹介資料
TomomiMatsuoka2
 
150806 カスタマージャーニーマップワークショップ
直人 相沢
 
Bazaar
hivelocity
 
画面じゃなくて体験をデザインしよう!事業サイドとデザイナーで認識を一致させるカスタマージャーニーマップ作成ワークショップ
Akihiko Kodama
 
レビューサイト活用の重要性と効果測定 公開版
Ryoma Hosokawa
 
【Schoo web campus】webサイトの「ユーザー体験」を高める 先生:坂本貴史
schoowebcampus
 
なぜUXをデザインしているのか
Mikihiro Fujii
 
キッチンにはスマートフォンとカレーライス
トモロヲ いちがみ
 
201211オンデマンドコマースによるマネタイズ
Satoshi Kyoda
 
新人が考える、UXと魔法の板っきれの話
Natsumi Kashiwa
 
第2回 FIC+FCS勉強会
Hiroyuki Honta
 
App souken menu(ui&ux consulting)
appsouken
 
ソーシャルコマースとUI/UXの落とし穴
tetsuyuki suzuki
 

Uxマップを使ったサービス改善