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
効果的な管理画面を デザインをするために 避けるべき5つの罠
Search
takanorip
August 09, 2024
Design
14
6.9k
効果的な管理画面を デザインをするために 避けるべき5つの罠
takanorip
August 09, 2024
Tweet
Share
More Decks by takanorip
See All by takanorip
Eleventy3.0 で始める爆速個人ブログ開発!
takanorip
0
96
Webフォント選定の極意!フォントの基本から最新トレンドまで徹底解説
takanorip
5
760
社内管理画面のデザインもプロダクトデザイン
takanorip
4
1.7k
早わかり W3C Community Group
takanorip
0
450
Ubieとアクセシビリティのこれからを考える
takanorip
0
420
2023年版 デザインシステム 技術選定の勘所 - フロントエンドカンファレンス沖縄
takanorip
2
3.8k
Astroで始める爆速個人サイト開発
takanorip
15
11k
後悔しないデザインシステムの始め方
takanorip
4
3.1k
デザインシステム運用とOKRの良い関係
takanorip
0
2k
Other Decks in Design
See All in Design
Les petites aventures de CSS, saison 2025
goetter
3
3.9k
(第1回) アーキテクト・テックリード育成講座
masakaya
0
160
発表資料テンプレート / My slide template
thatblue
0
200
エンタメ業界からDX領域に飛び込んだデザイナーが今立ち向かっている壁とは / applibot-dx-designer
cyberagentdevelopers
PRO
1
190
TUNAG BOOK 2024
stmn
0
470
マルチプロダクトにおけるデザイナーの挑戦-デザイン初め新年会2025
u_ri_ta
1
150
Dive Deep into Communication
yomtsu
0
210
Tableau曲線表現講座(2024.11.21)
cielo1985
0
250
Illustrator2025がやってきた!私が好きな新機能
hamko1114
0
110
ビジョン実現を加速させるデザインプログラムマネージャーの視座とキャリア/ Designship2024_Sato
root_recruit
0
260
Fem tips om ux-text • WSA-dagen 29 jan 2025
jonas_blind_hen
PRO
0
130
pixel-art-skill-and-knowhow/ドット絵の経歴と知見
aokashi
0
210
Featured
See All Featured
Mobile First: as difficult as doing things right
swwweet
223
9.3k
Fashionably flexible responsive web design (full day workshop)
malarkey
406
66k
Building an army of robots
kneath
302
45k
YesSQL, Process and Tooling at Scale
rocio
171
14k
What's in a price? How to price your products and services
michaelherold
244
12k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
45
2.3k
Designing for Performance
lara
604
68k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
6
550
Bootstrapping a Software Product
garrettdimon
PRO
306
110k
How STYLIGHT went responsive
nonsquared
98
5.4k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
Transcript
効果的な管理画面を デザインをするために 避けるべき5つの罠 takanorip 2024年8月9日 DIST.44
自己紹介 takanorip デザインエンジニア@Ubie デザインしたりコード書いたりしてます。 趣味は個人サイト制作、料理、筋トレ、得意料理はパスタ。 デザインシステムとかデザインエンジニアとかの同人誌書いています。 https://zenn.dev/takanorip
Ubie株式会社
None
None
None
避けるべき 5つの罠 hs 既存のオペレーションに引っ張られすぎP Hs オペレーターのマインドとデータ構造が一致しな2 `s 階層が深くなりすぎて今どこにいるのかわからな2 !s Tableの呪縛から逃れられな2
Ys 汎用的に作りすぎて誰も使いやすくない
既存のオペレーションに 引っ張られすぎる
現場の人の声どおりにしたくなるけど… 「今まではこうやってたので」 → 改善できる部分を見逃してしまう 管理画面を使っている人は今あるものでなんとかしようと自然と慣れていi 気づかないうちに無駄な工程を作っていたU 意見を聞くのは大事だけど100%鵜呑みにするのは危険かも
ゼロベースでのコミュニケーションが大切 ゼロベースで オペレーションからデザインする ~ 管理画面のデザインにはオペレーションのデザインも含まれ ~ 業務遂行に必要な要素を見極めて管理画面に落とし込んでいl ~ もちろんトレードオフやキャッチアップコストを考慮する必要があ ~
一方的に押し付けるのはNG。しつこくコミュニケーションしよう。
オペレーターのマインドと データ構造が一致しない
データモデリングをしていると利用者の目線が抜けてしまいがちになる 「この値はあっちのデータと一緒に 入力したいんだよなあ」 n 具体的なオペレーションに詳しいメンバーがいないとデータ構造が オペレーターの認識とずれてしまうことがあf n 管理画面の使いやすさとデータ構造は密接に関係しているので データ構造が実際のオペレーションに耐えうるものなのか情報を集める
有識者を早い段階から巻き込んでデータ設計をする オペレーターのメンタルモデルを 理解してデータ設計をすることで UIの設計もやりやすくなる デザイナーだからこそ関心を払った方が良p オペレーションの観察会をやったり、得たいものを整理したり
有識者を早い段階から巻き込んでデータ設計をする 1エンティティ1画面に こだわる必要はない CRUDが中心のアプリケーションだと1エンティティ1画面になることが多いが 複数のエンティティをまとめて表示したり一気に登録できるようにしても良s メンタルモデルに近い画面になっていることが重要
階層が深くなりすぎて 今どこにいるのかわからない
データの階層って深くなりがち… 案件 ミッション ミッション 施策 ユーザー セグメント
ショートカットできるナビゲーション設計 ナビゲーション ミッション 案件 ミッション 施策 ユーザー セグメント
ショートカットできるナビゲーション設計 グローバルナビゲーションから 1,2手で遷移できるように f ページ階層が深くなると、どの画面にいるのかわからなくな f 情報を探しやすくするためにグローバルナビゲーションから辿れるようにす f 前後にどんなデータがあるのか明示できるとなお良い
Tableの呪縛から 逃れられない
Tableって便利だよね 気を抜くと全部がTableになる いっぱい情報が出てるけど見にくい? Tableは素晴らしいUIではあるが、Tableにいろんな情報を詰め込み過ぎると 逆に情報を見つけにくくなってしまv Tableは情報に強弱つけることが苦手なので、項目が多くなればなるほど 重要な情報を見落としてしまう可能性が高くなる
ケースバイケースで考えよう Tableが向いている場合 9 同じ重要度の情報をいっぱい並べたg 9 例:アカウント一Q 9 見る人によって大事な情報が変わる場4 9 例:入稿作業者は紐づいている疾患を見たいけど、マネージャーは公開期間を見たい
Tableが向いてない場面 9 情報の優先度をつけたほうが良い場4 9 例:タイトルを目立たせたい、その他の情報は見えててもいいけど重要ではないか 9 表示する情報量が少ない
汎用的に作りすぎて 誰も使いやすくない
みんなの願いを叶えてあげようとすると… こういうときはこれが良いけど 違う場面だと違う機能も欲しくて… 役割や立場が違う人が同じ画面で作業したくなることがあ みんなの願いを叶えてあげたくなるけど、そうすると誰にとっても使いやすく ない画面になってしまう
一番重要なターゲットを考える 一番重要度の高い人が使いやすい 画面を考えることが重要 U もし管理画面で操作ミスがあると数億円レベルの損害が出ることだってあf U 一番ミスされてた困る人にフォーカスすf U 必要があれば画面を分ける
まとめ
管理画面 デザイン 5つの ポイント Pu オペレーションの設計・改善から考えV fu オペレーターのメンタルモデルを深く理解すV bu 深いデータにもアクセスしやすいナビゲーション設X
(u 一覧に出すべき情報を見極めV au ターゲットユーザーを明確にする