Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Sign up for free
Menu
Search
Features
All features
Private URLs
Password Protection
Custom URLS
Scheduled publishing
Remove Branding
Restrict embedding
Deck Collections
Notes
Features
All features
Private URLs
Password Protection
Custom URLS
Scheduled publishing
Remove Branding
Restrict embedding
Deck Collections
Notes
Explore
Featured decks
Featured speakers
Programming
Technology
Storyboards
Explore
Featured decks
Featured speakers
Programming
Technology
Storyboards
Pricing
Search
Sign in
Sign up for free
管理画面で複雑なフィルタ機能をシンプルに表現する方法
Search
haguri
November 27, 2020
Design
4.3k
0
Share
Embed
Copy iframe code
Copy JS code
Copy link
Start on current slide
管理画面で複雑なフィルタ機能をシンプルに表現する方法
複雑になりがちな管理画面のフィルタ機能をできるだけシンプルに表現するために試行錯誤したこと。
haguri
November 27, 2020
Other Decks in Design
See All in Design
AI-Slopなデザインを生まないためのデザインプロセス戦略
takanorip
10
6k
Edmonton River Slidedeck
edmontonriver
0
340
設計の進め方と 品質特性品質特性
harakeishi
0
1.3k
「惜しいデザイン」 を生み出さないための AIレビューループ
0b1tk
3
4.5k
The ISO 25964 standard on Information and documentation — Thesauri and interoperability with other vocabularies
accessinnovations
0
160
デザインハーネス 〜AIが生成する"デザイン"の妥当性を、誰がどう担保するのか〜 / PdEConf2026 Design Harness
kgsi
14
21k
分散するデザイン組織をつなぐ デザインミートアップの取り組み/nikkei-tech-talk49
nikkei_engineer_recruiting
1
230
デザインツールを開く前に その画面は誰に何と言わせたい?受託UIデザイナーが顧客解像度を高める 「打ち合わせの場での確かめ方」
garyuten
1
240
【CEDEC2026】『Shadowverse: Worlds Beyond』続編開発におけるUIデザイン・アニメーション演出の「超進化」 ~継承と挑戦を両立するデザイン手法~
cygames
PRO
3
5.2k
2026/6/26 第6回韓日リビングラボネットワークフォーラムin世宗 ー未来を作るリビングラボー アジアの社会システム転換に向けたリビングラボの可能性
a2k
2
110
root COMPANY DECK / We are hiring!
root_recruit
4
30k
言幹と言葉(Stems & Leaves)
kakukoki
0
220
Featured
See All Featured
Designing Dashboards & Data Visualisations in Web Apps
destraynor
232
55k
Evolving SEO for Evolving Search Engines
ryanjones
0
300
Neural Spatial Audio Processing for Sound Field Analysis and Control
skoyamalab
0
510
Money Talks: Using Revenue to Get Sh*t Done
nikkihalliwell
0
500
The Limits of Empathy - UXLibs8
cassininazir
1
680
Code Review Best Practice
trishagee
74
20k
Leading Effective Engineering Teams in the AI Era
addyosmani
9
2.6k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
666
130k
Color Theory Basics | Prateek | Gurzu
gurzu
1
470
Designing for humans not robots
tammielis
254
26k
Building Flexible Design Systems
yeseniaperezcruz
330
41k
How to Talk to Developers About Accessibility
jct
2
550
Transcript
複雑なフィルタ機能を シンプルに表現する
葉 栗 雄 貴 haguri yuki デザイナー 2015/04 空間系のデザイン事務所勤務 2017/04
スマートキャンプにエンジニアとして入社 2020/06 デザイナー専任に
今回はこんな話をします 複雑 になりがちな フィルタ機能を なるべくシンプル に 表現 できるように デザイナー として
試行錯誤 したこと
こんな流れで話をします スマートキャンプの紹介 対象サービスの紹介 フィルタ機能の課題と解決方法
Small Company, Big Business. テクノロジーで 社会の非効率を無くす Vision Mission
ボクシル ベイルズ オンライン展示会 SaaSプラットフォーム SaaS情報Webメディア インサイドセールス代行 インサイドセールス向けSaaS SaaSマッチング インサイドセールス
ボクシル ベイルズ オンライン展示会 SaaSプラットフォーム SaaS情報Webメディア インサイドセールス代行 インサイドセールス向けSaaS SaaSマッチング インサイドセールス
見込み顧客(リード)と商談が増える インサイドセールス向けSaaS
こんな流れで話をします スマートキャンプの紹介 対象サービスの紹介 フィルタ機能の課題と解決方法
セールス セールス セールス セールス インサイドセールスとは?
マーケティング インサイドセールス フィールド セールス カスタマー サクセス インサイドセールスとは?
マーケティング インサイドセールス フィールド セールス カスタマー サクセス インサイドセールスとは?
BALES CLOUDとは リード 見込み顧客 メール mail 課題は? 予算は? 時期は? phone
電話 商 談
BALES CLOUDとは リード 見込み顧客 メール mail 課題は? 予算は? 時期は? phone
電話 商談 フィルタをかける 商 談
数百、数千名のリード情報が入っています
200名 以上の会社 + 経理部の人 + 〜〜〜な人 フィルター 数百、数千名のリード情報をグループわけします
①すぐ連絡する ②今は放置
①はじめて連絡する ③2回以上連絡した ②1回連絡した
フィルタリングして、リストとして保存します
こんな流れで話をします スマートキャンプの紹介 対象サービスの紹介 フィルタ機能の課題と解決方法
フィルタの課題
フィルタの課題 テキスト型 セレクト型 範囲指定 etc. 項目が多い AND検索?OR検索? 含む?含まない?
分岐が多くて複雑になる
なぜ複雜になるのか いろいろなユーザーの欲求が 凝縮されているから
Webサイト どうやってフィルタ機能を表現しているのか 管理画面
お部屋探し系のサイト ①大項目と小項目を一覧表示 Webサイトの場合
服探し系のサイト ②項目ごとにアコーディオン Webサイトの場合
Webサイトの場合 重要視すること どんな項目があるのか一覧表示 ユーザーが多い はじめて触る メインユーザー
Webサイト どうやってフィルタ機能を表現しているのか 管理画面
管理画面の場合 ユーザーが多い 繰り返し触る 重要視すること 繰り返し行う動作を、効率化する メインユーザー
管理画面の場合 繰り返し行う動作を、効率化する を色々入れ替える 小項目
項目とは 大項目 小項目 住所 会社名 部署 東京都 スマートキャンプ 人事部
項目とは なにを どうやって 住所 会社名 部署 東京都 スマートキャンプ 人事部
Webサイトの例に戻ると
Webサイトの例に戻ると なにを どうやって なにを どうやって
管理画面で重要視すること 繰り返し行う動作を、効率化する を色々入れ替える どうやって
絞り込むのか 絞り込むのか 何を 何を、どうやって どうやって
項目のつながりを切り離す シンプルにするには
実際にやったこと
実際にやったこと
実際にやったこと
実際にやったこと
実際にやったこと
実際にやったこと
いろいろなユーザーの欲求が 凝縮されている フィルタ機能は...
一人ひとりに合わせることは 無 理 だから
誰かのメリットは、 誰かのデメリットになる そして
複雑になる 色々な人の欲求を全て考慮する!
シンプルになる メインユーザー、重要視すること を明確にする
Webサイトの場合 重要視すること メインユーザー どんな項目があるのか一覧表示 ユーザーが多い はじめて触る
管理画面の場合 ユーザーが多い 繰り返し触る 重要視すること 繰り返し行う動作を、効率化する メインユーザー
複雑なフィルタ機能を シンプルに表現する