スクロールとコンテンツ管理

1）スクロールについて考える理由

• 適切なコンテンツの検索を高速化します（クリック数が少ない-スクロール数が多い）
• 制御の感覚を与えます（アンカー、「back to top」、 adhered filters）、
• リソースの保存（遅延ブート、仮想化）、
• 変換が増加します（以前に見られたコンテンツ、「thumb zone」のCTA）。

原則：速度>密度；context> noise；予測可能性>「魔法」。

2）スクロールモデル： 何を選ぶべき時

1.クラシックページネーション

検索結果、表、レポートに適しています。長所：制御、安定したURL、簡単なページナビゲーション。短所：より多くのクリック、注意「ギャップ」。

2.無限スクロール

エラーの低コストのフィードやカタログ（ニュース、コンテンツカード）。長所：エンゲージメント、クリック数が少ない。短所：「失われたフッター」、返すのは難しい、難しいアドレス。

3.ハイブリッド：Show More/Load More

妥協：ウィジェットはボタンごとにバッチでロードされます。長所：レンダリングコントロール、フッターの可用性、予測可能性。短所：まだ線形。

4.セグメント化されたスクロール（セクション/アンカー）

長い記事、参照およびwikiのため。長所：ドキュメントマップ、クイックジャンプ。短所：複雑なナビゲーションと目次。

• カタログ/ロビー-ハイブリッドまたは無限+「最初に戻る」。
• 検索/テーブル-ページサイズとクイックフィルタによるページネーション。
• ドキュメンテーション/ロングリッド-目次とプログレスバーの読み取りを持つセグメント。

3）情報アーキテクチャとレイアウト

トップヘッダー（粘着性）：検索、クイックフィルター、ソート；コンテンツが表示されても重複しません。
サイドバー（デスクトップ）：目次（目次）、フィルタ；モバイルで-シートを残します。
粘着性要素：トップフィルター、アンカーメニュー、進行状況インジケータの読み取り、「トップに戻る」。
コンテンツカード：予測可能なプレビュー高さ→レイアウトジャンプが少なくなります。
空の状態：スケルトン/キラキラ、「空の画面」ではありません。

4）スクロール動作（マイクロメカニクス）

慣性と物理：スクロールは「ネイティブ」である必要があります。システムパターンを壊さないでください。
軸ロック：水平線（カルーセル）の場合は、モーションスレッショルドの後に垂直軸をロックします。
スナップポイント：カルーセル、カード、ウィザードのステップに適しています。長いテープで乱用しないでください。
アンカーされたスクロール：再ロード時にユーザーフォーカスと相対位置を維持します。
スクロールチェーン：ネストされたコンテナからのイベントの「フロー」をページに「ジャンプ」しないように制限します。

5）注意管理

Floating STA/」 Deposit「/」Play「：親指エリアでは、コンテンツが重複しません。
プログレスバー読み取り：上のルーラー、アンカーと同期します。
目次（目次）-現在のトピックのハイライト、ショートカット、トップボタン。
タイトルアンカー：URLの安定したハッシュ；帽子の高さの補償のスクロール。
コンテキスト「粘着性」フィルタ：1-2画面をスクロールした後に修正します。

6）大きいテープのローディングおよびレンダリング

遅延ロード：画像、ビデオ、ブロック。負荷のしきい値は1〜2スクリーン~先にあります。
仮想化/ウィンドウ化：表示領域+バッファのみを描画します。
プレースホルダ/スケルトン：予測可能なサイズ、「飛躍」はありません。
バッチ再ロード：ステップ20-60要素；クエリとレンダリングのバランス。
パーティションキャッシュ：戻ってくるとき、位置とロードされたチャンクを回復します。

7）テープでコンテンツを管理する

グループ化：日付/カテゴリ別；セパレータヘッダスティック。
並べ替えとフィルタ：アクティブな条件を表示して、表示およびアクセス可能。
折りたたみ/展開：長い説明については、詳細を表示します。
スクロール中のメディア：視力からビデオを自動一時停止します。サウンドなしで、明示的なコントロールでのみ自動再生します。
エラーの状態：「ネットワークの損失」、「ロードに失敗しました」-再試行して位置を保存します。

8）可用性とローカライズ

すべてのアクションはジェスチャーなしで利用できます：「詳細をダウンロード」、「最初に」、「目次を開く」。
フォーカス管理：アンカーをナビゲートするとき-フォーカスをセクションのタイトルに転送します。
スクリーンリーダー：スクロールボタン/目次、注文ロジックの説明。
RTL：水平カルーセルとインジケータをミラーします。
モーションの縮小：単純化された効果を好む人のための「複雑な」アニメーションと視差を無効にします。

9）パフォーマンス： 目標と指標

INP （Interaction to Next Paint）キージェスチャー/スクロール：≤ 200ms。
Scroll-jank： <1％ frames> 16。典型的な装置の7ms。
CLS（累積レイアウトシフト）：≤ 0。1（特に再読み込み時）。
TBT/ブロッキング：スクロール中に重い同期コンピューティングを避けます。
メモリ：長いセッション中に安定した使用（仮想化の間に漏れはありません）。

• パッシブスクロールリスナー、'requestAnimationFrame'による繰延計算；
• 「光」の影/スクロール中に複雑なぼかしはありません。
• 固定または予測可能なカードサイズ
• 保存、再描画（バッチ更新）

10）テレメトリーとイベント

• 'scroll_start'/'scroll_end'（ソース、速度、方向）、
• 'content_load_request/success/fail'（スタック、サイズ）、
• 'viewport_item_exposed' （id、可視時間）、
• 'toc_click'、 'anchor_navigate'、 'back_to_top_click'、
• 'list_restore'（位置、リストア時間）

• Depth Reach （ecraps/elementsの表示回数）、
• 露出時間/アイテム（平均/中央値）、
• 負荷エラー率、再試行率、
• スクロール放棄（次のバッチがロードされる前に）、
• Return-to-Positionの成功。

11）異なったタイプの内容のためのパターン

ゲーム/製品のカタログ：ハイブリッドテープ、粘着フィルター、仮想化、「Show more」ボタン。
Longrides/wiki：目次、プログレスバー、アンカー、「セクションへのリンクをコピー」。
ニュースフィード：セパレータ日付の無限フィード「、最後に戻る」。
テーブル/グリッド：ペジネーション+「Nで表示」、フリーズする見出しとキー列、必要に応じて水平スクロール。
ライブフィード/ログストリーム：自動スクロールで「pause/catch up」、バッファ制限。

12）モバイル機能

親指ゾーン：CTAと「始まり」-以下から；フィルタ-発信シート内。
「プル」フッター：停止したときにのみ表示します。スクロールを妨げないでください。
ジェスチャー：水平カルーセル-軸ロック付き；pull-to-refresh-期待されている場合のみ。
滑らかさ：「重い」リストの60 FPSの点検；効果の密度を減らして下さい。

13） Antipatterns

「終わりのないテープ+出口のない隠されたフッター」（リンク/連絡先/ルールなし）。
読み取りをシフトする追加の負荷-コンテキストの損失。
テキストとCTAが重なったフローティングパネル。
カードの無制限の高さ→「さまよう」レイアウトシフト。
目に見えるときに音でメディアを自動再生します。
「戻る」時に位置回復はありません。

14）実装チェックリスト（スプリントによる）

スプリント1：モデル選択（ペジネーション/ハイブリッド/無限）、基本スクロールコンテナ、粘着帽子/フィルター、「Back to Top」。
スプリント2：画像/ブロック、スケルトン、予測可能なカードサイズの遅延読み込み。
Sprint 3：仮想化、保存位置、バーストキャッシュ、アンカー/目次をリストします。
スプリント4：スクロールと露出テレメトリー、およびスクロールジャンクアラート。
スプリント5：アクセシビリティ（フォーカス/リーダー）、RTL、減動、キーボードナビゲーション（デスクトップ）。
Sprint 6： Fine Optimization： Axial Lock、 Snap Points、 UX Media Enhancement in Tape。

15）用語集

無限スクロール-要素の無限のロード。
「ウィンドウ/仮想化」（Windows/Virtualization）-表示されるリスト項目のみをレンダリングします。
アンカーされたスクロール-再ロード時に相対位置を維持します。
スクロールジャンク-スクロール時にフレームをスキップするために「ジャーク」。
目次（目次）-アンカー付き目次。
CLS/INP-レイアウトの安定性と応答性の指標。

16）ボトムライン

1.適切なフローモデル（ペジネーション/ハイブリッド/無限）を選択し、

2.制御を与えます（アンカー、目次、粘着フィルター、「最初に」）、

3.高速かつ安定したレンダリング（遅延ロード、仮想化、シフトなし）、

4.アクセス可能で予測可能なまま、

5.テレメトリを測定し、データに基づいてUXを改善します。