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
リストビュー画面UX改善の振り返り
Search
proteinMochi
April 03, 2025
Programming
0
150
リストビュー画面UX改善の振り返り
Muddy_Web_#11_Cybozu_proteinmochi
proteinMochi
April 03, 2025
Tweet
Share
Other Decks in Programming
See All in Programming
Cline with Amazon Bedrockで爆速開発体験ハンズオン/ 株式会社ブリューアス登壇資料
mhan
0
110
API for docs
soutaro
3
1.6k
M5UnitUnified 最新動向 2025/05
gob
0
120
iOSアプリで測る!名古屋駅までの 方向と距離
ryunakayama
0
150
Deoptimization: How YJIT Speeds Up Ruby by Slowing Down / RubyKaigi 2025
k0kubun
1
1.9k
RuboCop: Modularity and AST Insights
koic
2
2.3k
「理解」を重視したAI活用開発
fast_doctor
0
270
今話題のMCPサーバーをFastAPIでサッと作ってみた
yuukis
0
110
AIコーディングの理想と現実
tomohisa
35
37k
Jakarta EE Meets AI
ivargrimstad
0
760
AIコーディングエージェントを 「使いこなす」ための実践知と現在地 in ログラス / How to Use AI Coding Agent in Loglass
rkaga
4
1.2k
Golangci-lint v2爆誕: 君たちはどうすべきか
logica0419
1
230
Featured
See All Featured
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.3k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
357
30k
How to Think Like a Performance Engineer
csswizardry
23
1.6k
Designing for humans not robots
tammielis
253
25k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
The Art of Programming - Codeland 2020
erikaheidi
53
13k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.6k
Automating Front-end Workflow
addyosmani
1370
200k
A better future with KSS
kneath
239
17k
A Tale of Four Properties
chriscoyier
158
23k
Docker and Python
trallard
44
3.4k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
129
19k
Transcript
リストビュー画面UX改善の 振り返り
None
話す内容 • 「リストビュー画面」(一覧画面)のUXの改善タスクを振り返る • 一覧画面を一目に収める対応 • 微妙に伸びる横幅の対応 *主に実装レベルで振り返る(UXの概念はあまり触れません)
before
after
None
前提:一覧画面の構成
ヘッダー & グローバル ナビゲーション メインコンテンツ (utility) メインコンテンツ (table)
横にスクロールすると..
None
一覧画面を一目に収める対応
実装方法の検討 1. スクロール対象をテーブルに変更 2. 1.の変更に加えて、外側に偽スクロールを作って同期させる 3. テーブルコンポーネント以外をviewportに固定する
1. スクロール対象テーブルに変更
None
採用できなかった理由 • 横スクロールバーがviewportの最下部に表示されない → 横スクロールバーを探すために毎度下まで下がらないといけない → UX よくないと判断
None
2. 1.の変更に加えて、 外側に偽スクロールを作って同期させる
内側スクロールバー 外側スクロールバー (に見えるやつ)
採用できなかった理由 • ゴリ押しすぎる (偽スクロールバーってなに?) → React の DOM update の自然な流れに反する
bad practice → コードの可読性&メンテ性&拡張性などにおいて NG
3. テーブルコンポーネント以外をviewportに固定する
ラッパーコンポーネント用意
ラッパーコンポーネントの css 指定
None
絶妙に伸びる横幅の対応
横幅が伸びたとは?
横幅が伸びた原因 • `width: 100vw` → 現状 css 仕様的には、縦スクロールバーを考慮しない
解決策の検討 1. 別の width property 単位 → `dvw` を活用 2.
別の width property 単位 → `%` を活用 3. JS 活用
1. 別の width property 単位 → `dvw` を活用
% に変更 from web.dev vw = dvw
解決できなかった理由 dvhはモバイルの viewport では意味あるけど、 dvwは = vw なので、 スクロールバー分を考慮してくれるわけではない
2. 別の width property 単位 → `%` を活用
% に変更
Viewportに固定したい コンポーネント テーブル コンポーネント root コンポーネント Viewport
Viewportに固定したい コンポーネント テーブル コンポーネント root コンポーネント Viewport
解決できなかった理由 伸ばしたくないコンポーネントの幅を伸ばしてしまう。 kintoneの構造上無理だった。
3. JS 活用
1. グローバル resize イベント → ブラウザー window 自体のサイズを観察 → 画面自体のレイアウト変更は観察しない
2. MutationObserver API → DOM 変更を観察 → DOM追加・削除に使えそう 3. IntersectionObserver API → viewport範囲内で見えるか否かを観察 → lazy loading, scroll tracking などで使えそう 4. ResizeObserver API → 要素のサイズの変化を観察 → 縦スクロールバーによる width 変更に反応してくれそう 使えそうなJS pick-up
ResizeObserver API は幅広く使われてる!
% に変更
% に変更
解決!
あとがき
source • Scrollbar problem source • `dvh` explanation source •
Can I use source • resize event source • MutationObserver source • IntersectionObserver source • ResizeObserver source