Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
管理画面の画面設計方法について
Search
kitte
February 08, 2019
Design
4
3k
管理画面の画面設計方法について
管理画面はどうあるべきという自身の考え方や、実際使用したことのある手法(UI flows)の紹介などを行います。
kitte
February 08, 2019
Tweet
Share
Other Decks in Design
See All in Design
3 Reasons Why I Got into Design
harukausui
1
140
情報サービスユニット UXUIチーム紹介/btobuxui
nikkei_engineer_recruiting
2
180
Sunny Day Storyboard
ctagulao98
0
230
スマートバンクのプロダクトデザイン
putchomsmartbank
6
2.2k
私の困りごとと解決案 / My issues and proposed solutions
kubosho
1
230
Ubie Vitalsの取り組み紹介
8845musign
0
640
UXデザイナーが肩書きの私がいまUXデザインにそんなに興味がない理由 #uxd2024(字幕入り配布版)
versionfive
7
2.1k
Baby Bear Genius
yvonnehsuanho
PRO
0
620
美しいUIを作るために デザイナーが意識している ちょっとした考え方
yuichi_hara7
17
10k
Findy - デザイナー向け会社紹介 / Hiring Findy's Designers
findyinc
5
36k
Webフォント選定の極意!フォントの基本から最新トレンドまで徹底解説
takanorip
3
450
アクセシビリティのはじめかた デザイナー編
tokimari
3
1.1k
Featured
See All Featured
Principles of Awesome APIs and How to Build Them.
keavy
125
16k
Web Components: a chance to create the future
zenorocha
308
41k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
28
2.2k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
26
1.9k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
502
140k
Code Review Best Practice
trishagee
62
16k
GraphQLの誤解/rethinking-graphql
sonatard
65
9.7k
For a Future-Friendly Web
brad_frost
173
9.3k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
354
29k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
230
17k
Fashionably flexible responsive web design (full day workshop)
malarkey
400
65k
Why Our Code Smells
bkeepers
PRO
333
56k
Transcript
管理画面の 画面設計方法について 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/