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
3.1k
管理画面の画面設計方法について
管理画面はどうあるべきという自身の考え方や、実際使用したことのある手法(UI flows)の紹介などを行います。
kitte
February 08, 2019
Tweet
Share
Other Decks in Design
See All in Design
佐藤千晶|ポートフォリオ
chimi_chia
0
180
児童相談所における養育里親委託時の親権者同意に向けたコミュニケーションの実態
trivia
0
580
サービスリブランディングにおけるイラストレーションシステムの構築と活用事例 / Building and Utilizing an Illustration System in Service Rebranding
lycorptech_jp
PRO
0
630
地理院地図をもっと楽しく!れきちず新機能のご紹介
hjmkth
1
180
Ana Cortes Visual Development Portfolio 2025
haruanleb
0
120
Findyのプロデチームの 歩みとこれから
satty9556
0
310
Tools for Design Engineers other than LLM in the LLM era
takanorip
1
520
AI駆動なデザイン開発 〜Figma Make でまるっとつくるか、 HTML でシンプルにつくるか〜
t_east
1
1.4k
mento Design Team Portfolio
mento0fficial
1
890
不確実性の時代にみんなで試したFigma × MCP × Cursor ハンズオン
techtekt
PRO
7
980
root COMPANY DECK / We are hiring!
root_recruit
PRO
1
24k
SAMSUL KAMAR ABDUL RAHMAN
samsulrahman32
0
170
Featured
See All Featured
Code Review Best Practice
trishagee
72
19k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
55
3k
The Language of Interfaces
destraynor
162
25k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
9
980
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
31
9.7k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
285
14k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
PRO
189
55k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
230
22k
Building Applications with DynamoDB
mza
96
6.7k
Building Flexible Design Systems
yeseniaperezcruz
329
39k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
37
2.6k
A Modern Web Designer's Workflow
chriscoyier
697
190k
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/