Slide 1
Slide 1 text
管理画面の
画面設計方法について
1
岸野 哲朗 / @outskirtsHinode
2019/02/08 DIST.25 「管理画面から考える UX」LT
Slide 2
Slide 2 text
自己紹介
● 岸野哲朗
● GMOペパボ株式会社
● カラーミーリピート
● デザイナー
● https://tech.pepabo.com/2018/07/04/des
igner-and-ap-exam/
2
Slide 3
Slide 3 text
まずはとにかくリピートの画面を
ご確認ください！
3
Slide 4
Slide 4 text
4
サービストップ画面
管理画面 購入者側の管理画面 定期購入画面
…
Slide 5
Slide 5 text
5
サービストップ画面
管理画面 購入者側の管理画面 定期購入画面
「いっぱい来る方が理想的」
「いっぱい来ない方が理想的」
…
Slide 6
Slide 6 text
管理画面は「煩わしさ」を
無くすことに重きをおくと良さそう！
6
Slide 7
Slide 7 text
「煩わしさ」を無くすこと
● わかりやすさ
○ 画面設計
● 効率性
7
Slide 8
Slide 8 text
自分が行った画面設計
8
Slide 9
Slide 9 text
作業フロー
1. 競合調査
2. UI Flowsの作成
3. 画面デザイン
9
Slide 10
Slide 10 text
1. 競合調査
2. UI Flowsの作成
3. 画面デザイン
作業フロー
10
Slide 11
Slide 11 text
UI Flowsの作成
● 「ユーザーの見るもの」「ユーザーがすること」に焦点をおいた遷移図法
11
ユーザーが見るもの
ユーザーがすること
ユーザーが見るもの
ユーザーがすること
ユーザーが見るもの
ユーザーがすること
Slide 12
Slide 12 text
12
● 「ユーザーのみるもの」
○ 競合調査で見えてきた使わ
れている要素
● 「ユーザーのすること」
○ ストーリーマッピングで出て
きたユーザーの行動
Slide 13
Slide 13 text
UI Flowsのメリット
● ユーザーの行動に基づいた遷移を考えることになる
● 画面遷移図よりも手軽に使用することができる
13
Slide 14
Slide 14 text
UI Flowsのデメリット
● 粒度の設定が難しい
● 画面レイアウトは別途考える必要がある
○ 最近クラス図の相互関係からみるマークアップ・レイアウトを研究中
14
Slide 15
Slide 15 text
15
Slide 16
Slide 16 text
16
詳しくはお話しましょう！！
Slide 17
Slide 17 text
17
参考
● https://signalvnoise.com/posts/1926-a-shorthand-for-designing-ui-flows
● http://www.standardinc.jp/reflection/article/ui-flows/
● https://tech.pepabo.com/2018/09/04/designers-interview-tecchan/