管理画面の 画面設計方法について 1 岸野 哲朗 / @outskirtsHinode 2019/02/08 DIST.25 「管理画面から考える UX」LT 

自己紹介 ● 岸野哲朗 ● GMOペパボ株式会社 ● カラーミーリピート ● デザイナー ● https://tech.pepabo.com/2018/07/04/des igner-and-ap-exam/ 2 

まずはとにかくリピートの画面を ご確認ください！ 3 

4 サービストップ画面 管理画面 購入者側の管理画面 定期購入画面 … 

5 サービストップ画面 管理画面 購入者側の管理画面 定期購入画面 「いっぱい来る方が理想的」 「いっぱい来ない方が理想的」 … 

管理画面は「煩わしさ」を 無くすことに重きをおくと良さそう！ 6 

「煩わしさ」を無くすこと ● わかりやすさ ○ 画面設計 ● 効率性 7 

自分が行った画面設計 8 

作業フロー 1. 競合調査 2. UI Flowsの作成 3. 画面デザイン 9 

1. 競合調査 2. UI Flowsの作成 3. 画面デザイン 作業フロー 10 

UI Flowsの作成 ● 「ユーザーの見るもの」「ユーザーがすること」に焦点をおいた遷移図法 11 ユーザーが見るもの ユーザーがすること ユーザーが見るもの ユーザーがすること ユーザーが見るもの ユーザーがすること 

12 ● 「ユーザーのみるもの」 ○ 競合調査で見えてきた使わ れている要素 ● 「ユーザーのすること」 ○ ストーリーマッピングで出て きたユーザーの行動 

UI Flowsのメリット ● ユーザーの行動に基づいた遷移を考えることになる ● 画面遷移図よりも手軽に使用することができる 13 

UI Flowsのデメリット ● 粒度の設定が難しい ● 画面レイアウトは別途考える必要がある ○ 最近クラス図の相互関係からみるマークアップ・レイアウトを研究中 14 

15 

16 詳しくはお話しましょう！！ 

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/