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
3
2.9k
管理画面の画面設計方法について
管理画面はどうあるべきという自身の考え方や、実際使用したことのある手法(UI flows)の紹介などを行います。
kitte
February 08, 2019
Tweet
Share
Other Decks in Design
See All in Design
デザイナーの帽子をかぶったわたしが、プロダクト開発するうえでスクラムチームに提供したいこと / what I want to provide to Scrum teams when developing products
hiromitsuuuuu
14
5.4k
What Was UX Design All About?
ykazu
3
600
良いアプリケーションをデザインするための感覚の持ち方 / Cultivating a Sense for Designing Great Applications
usagimaru
23
9k
Mitra Manual
nnidhz
0
140
顧客体験を作るデザイナーが 意思決定速度を上げるために使うAI
cremacrema
3
760
アクセシビリティのはじめかた デザイナー編
tokimari
2
750
JBUG京都#1登壇資料_「考える」をマネジメントする_ビーワークス高濱
webnaut
0
390
情報サービスユニット UXUIチーム紹介/btobuxui
nikkei_engineer_recruiting
1
130
Sociotechnical design for software and human systems
xinyao
2
560
業務システムのUX/UI設計ノウハウを解説。デザイナー不在で失敗しないために身につけるべき基本とは?
ncdc
2
720
ノンデザイナーでもできる。直感的で使いやすいUIの設計方法
ncdc
8
6.4k
decksh object reference
ajstarks
2
990
Featured
See All Featured
Gamification - CAS2011
davidbonilla
78
4.9k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
325
21k
Unsuck your backbone
ammeep
666
57k
Practical Orchestrator
shlominoach
185
10k
Visualization
eitanlees
139
14k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
12
3.8k
Statistics for Hackers
jakevdp
792
220k
Building Effective Engineering Teams - LeadDev
addyosmani
47
2.2k
Principles of Awesome APIs and How to Build Them.
keavy
124
16k
How GitHub (no longer) Works
holman
305
140k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
13
430
Making Projects Easy
brettharned
111
5.7k
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/