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
160
リストビュー画面UX改善の振り返り
Muddy_Web_#11_Cybozu_proteinmochi
proteinMochi
April 03, 2025
Tweet
Share
Other Decks in Programming
See All in Programming
ニーリーQAのこれまでとこれから
nealle
2
810
flutter_kaigi_mini_4.pdf
nobu74658
0
150
「理解」を重視したAI活用開発
fast_doctor
0
300
Lambda(Python)の リファクタリングが好きなんです
komakichi
5
270
REALITY コマンド作成チュートリアル
nishiuriraku
0
120
医療系ソフトウェアのAI駆動開発
koukimiura
1
110
JAWS DAYS 2025 re_Cheers: WEB
komakichi
0
120
AIコーディングの理想と現実
tomohisa
37
40k
GitHub Copilot for Azureを使い倒したい
ymd65536
1
330
2025年のz-index設計を考える
tak_dcxi
12
4.5k
インプロセスQAにおいて大事にしていること / In-process QA Meetup
medley
0
170
今話題のMCPサーバーをFastAPIでサッと作ってみた
yuukis
0
130
Featured
See All Featured
How to Ace a Technical Interview
jacobian
276
23k
Music & Morning Musume
bryan
47
6.5k
Rebuilding a faster, lazier Slack
samanthasiow
81
9k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
32
2.3k
Large-scale JavaScript Application Architecture
addyosmani
512
110k
Designing Experiences People Love
moore
142
24k
Gamification - CAS2011
davidbonilla
81
5.3k
The World Runs on Bad Software
bkeepers
PRO
68
11k
Reflections from 52 weeks, 52 projects
jeffersonlam
349
20k
Bash Introduction
62gerente
613
210k
How to Think Like a Performance Engineer
csswizardry
23
1.6k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
29
1.7k
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