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
Sponsored
·
Ship Features Fearlessly
Turn features on and off without deploys. Used by thousands of Ruby developers.
→
kitte
February 08, 2019
Design
4
3.1k
管理画面の画面設計方法について
管理画面はどうあるべきという自身の考え方や、実際使用したことのある手法(UI flows)の紹介などを行います。
kitte
February 08, 2019
Tweet
Share
Other Decks in Design
See All in Design
“ことば”が苦手なデザイナーへの処方箋 「なんとなく」から「意図」へ、 デザインを動かす言葉の力
mixi_design
PRO
1
200
Storyboard Exercise: Chase Sequence
lynteo
1
210
これからの「Webデザイン」の話をしよう~デザイナーの私が考えるブロックテーマへの対応で変わりゆくデザインの価値~
ds35mm
0
550
maki setoguchi
maki_setoguchi
0
670
「余白」と「欲望」を味方につける ——AI時代のデザインエンジニアリングと「越境」の作法 #KNOTS2026
koyaman
1
1.4k
コムデマネージャーがプロダクトデザインに挑戦した。むずかしくて楽しかった。
payatsusan213
0
200
kintone_aroma
kintone
0
1.4k
Mandalyn_DT5001_FinalAssignment.pdf
lynteo
0
140
Meet, Learn, Grow × AI ― コミュニティで加速するスキル循環 「コミュニティと関わり方」
tame
1
370
20260215独立行政法人科学技術振興機構(JST) 社会技術研究開発センター(RISTEX)ケアが根づく社会システム _公開シンポジウム
a2k
0
110
Correspondence:共に生成していく過程
akiramotomura
0
190
アイデアを加速させる!Firefly ボードで発想の幅を広げよう
connecre
1
310
Featured
See All Featured
State of Search Keynote: SEO is Dead Long Live SEO
ryanjones
0
120
Digital Ethics as a Driver of Design Innovation
axbom
PRO
1
190
The AI Search Optimization Roadmap by Aleyda Solis
aleyda
1
5.2k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
49
3.3k
Game over? The fight for quality and originality in the time of robots
wayneb77
1
120
Visualization
eitanlees
150
17k
So, you think you're a good person
axbom
PRO
2
1.9k
Bridging the Design Gap: How Collaborative Modelling removes blockers to flow between stakeholders and teams @FastFlow conf
baasie
0
450
Designing for humans not robots
tammielis
254
26k
How to Get Subject Matter Experts Bought In and Actively Contributing to SEO & PR Initiatives.
livdayseo
0
67
Tips & Tricks on How to Get Your First Job In Tech
honzajavorek
0
440
How to build an LLM SEO readiness audit: a practical framework
nmsamuel
1
650
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/