ページネーションシステム は何をしますか？
目的
ページネーションシステムスキルは、大規模なデータセットを個別のページに分割するインターフェースを設計するための方法論を提供します。これにより、ユーザーはアイテムの長いリスト（商品、検索結果、記事）を移動しながら、「現在地」と「残りのコンテンツ量」を明確に把握できます。堅牢なページネーションシステムは、ナビゲーションの正確性とシンプルさのバランスを取り、認知負荷を最小限に抑え、ユーザーの混乱を防ぎます。
ユースケース
- eコマースやディレクトリサイトの検索結果ページの設計。
- 長いブログやニュースアーカイブの整理。
- コンテンツハブにおける「Load More」と従来の番号付きページネーションの実装。
- データ量の多いダッシュボードテーブルやログのナビゲーション作成。
- 個々のセクションを個別のビューとして扱うマルチページフォームやステップベースのウィザードの最適化。
使用すべきでない場合
- 小規模データセット（12アイテム未満）: すべてのコンテンツが1〜2画面に収まる場合、ページネーションは不要なクリックと摩擦を追加します。
- 無限スクロールのコンテキスト: 特定のページアドレスが重要でない、発見重視のソーシャルフィードやニュースストリームをユーザーが探索している場合（代わりに
infinite-scroll-implementationを使用してください）。 - 単一のナラティブコンテンツ: 「前へ/次へ」リンクで十分な線形フローに沿った記事やストーリーの場合。
入力
- 総アイテム数: コレクション内のアイテムの総数はいくつですか？
- 1ページあたりのアイテム数: 標準的な密度はいくつですか（例：12、24、48アイテム）？
- 現在のページコンテキスト: ユーザーは現在どのページを表示していますか？
- 表示の制約: ページネーションバーに利用可能な水平スペースはどれくらいですか（
responsive-grid-systemより）？
出力
- ページネーション構造仕様: ページ番号、前へ/次へボタン、および「ジャンプ」コントロール（省略記号）の定義された視覚スタイル。
- 状態マトリックス: デフォルト、現在、ホバー、フォーカス、および無効（例：1ページ目の「前へ」ボタン）状態の視覚的な処理。
- レスポンシブ戦略: ページネーションバーがデスクトップ（全範囲）からモバイル（コンパクト表示）に縮小する計画。
- アクセシビリティマップ: ARIAロール、ラベル、キーボード操作パターンの明示的な定義。
ワークフロー
1. 範囲戦略を定義する
総量に基づいて、一度に表示するページ番号の数を決定します。
- シンプル（3〜5ページ）: すべてのページ番号を表示。
- 中程度（6〜10ページ）: 最初と最後、および現在のページの周りのウィンドウを表示。
- 複雑（10ページ以上）: 省略記号（
...）を使用してスキップされた範囲を表します（例：1 ... 4 5 6 ... 20）。
2. ナビゲーションコントロールを設計する
ページネーションバーの視覚的な階層を確立します。
- 主要アクション: 前へボタンと次へボタンは明確に表示され、バーの端に配置する必要があります。
- 現在のページインジケーター: 現在のページをすぐに認識できるように、ハイコントラストなスタイル（背景色または太い枠線）を使用します。
- ページ番号: インタラクティブな要素のように見えるようにします（例：
interactive-state-systemを使用）。
3. 流動的なスペーシングとサイズを適用する
fluid-spacing-system を使用して、ターゲットが使いやすいことを確認します。
- タップターゲット: すべてのページ番号とボタンは少なくとも44x44pxである必要があります。視覚的な密度のために小さいコントロールが必要な場合、WCAG 2.2（2.5.8 ターゲットサイズ最小値）は、偶発的なアクティベーションを避けるために、ターゲット間に適切な間隔を空けた24x24pxの絶対的な下限を設定します。
- 内部ギャップ: 誤クリックを避けるために、ページ番号間には一貫した間隔（例：
--space-xs）を使用します。
4. アクセシビリティを確立する（WCAG AA/AAA）
- ランドマーク: ページネーションを
aria-label="pagination"を持つ<nav>要素でラップします。 - 現在のページ: アクティブなページリンクに
aria-current="page"を使用します。 - 無効状態: 最初のページにある場合、「前へ」ボタンが視覚的およびプログラム的に無効になっていることを確認します（例：
aria-disabled="true"）。 - キーボードパス: ユーザーが各ページ番号とコントロールを
Tabで移動できる必要があり、フォーカスされたコントロールが固定ヘッダー/フッターによって完全に隠されてはなりません（WCAG 2.2、2.4.11 フォーカスが隠されていない）。
5. レスポンシブ適応を計画する
デスクトップからモバイルへの移行をマッピングします。
- 削減ルール: モバイルでは、ほとんどのページ番号を非表示にし、「前へ」、「次へ」、および現在のステータス（例：「4/20ページ」）のみを表示します。
- 視覚的なスケール: ページ番号を残す必要がある場合は、「ウィンドウ」を現在のページとそのすぐ隣のページに減らします（例：
1 ... 4 ... 20）。
決定ルール
- 数字 vs. Load More: ユーザーが特定の結果をブックマークまたは共有する必要がある場合（例：「4ページをチェック」）は数字を使用します。目標が長期間の発見と比較である場合は「Load More」を使用します。
- 「7アイテム」の最大値: デスクトップでは、レイアウトをすっきり保つために、ページネーションバーに7〜9アイテム（省略記号とボタンを含む）を超えて表示しないようにします。
- 予測可能性: 「前へ」は常に左側、「次へ」は常に右側に配置します。これらのボタンを非表示にしないでください。適用できない場合は無効にするだけです。
- 即時フィードバック: ページ番号をクリックすると、すぐにユーザーをコンテンツリストの先頭にスクロールするか、明確な「読み込み中」状態を提供する必要があります。
制約
- アクセシビリティ: ページネーションはキーボードでナビゲート可能で、スクリーンリーダー対応である必要があります。ラベルは説明的である必要があります（例：「5」ではなく「5ページに移動」）。インタラクティブなターゲットは、少なくともWCAG 2.2の24x24pxの最小値（2.5.8）を満たす必要があり、主要な前へ/次へのコントロールには44x44pxが推奨されます。
- レスポンシブ性: ページネーションバーは、水平方向のオーバーフローや他のUI要素との重なりを引き起こしてはなりません。
- 視覚的な階層: ページネーションはコンテンツと視覚的に区別できる必要がありますが、コンテンツ自体よりも目立ってはなりません。
一般的な失敗パターン
- 小さなタップターゲット: モバイルで正確にタップできない、小さく密集した数字。
- 見えないアクティブ状態: 「アクティブ」スタイルが微妙すぎて、ユーザーがどのページにいるかわからない。
- 壊れたキーボードループ: AJAXを介してページコンテンツが更新されたときにフォーカスを処理し忘れる（ユーザーを結果の先頭に移動する必要があります）。
- 「モバイル爆発」: モバイル画面に10個のページ番号を表示しようとすると、水平スクロールやレイアウトの破損を引き起こす。
- 曖昧なラベル:
aria-labelなしで数字のみを使用すると、スクリーンリーダーユーザーがコンテキストを理解するのが難しくなる。
検証基準
- 現在のページが視覚的に区別され、
aria-current="page"を持っている。 - ナビゲーションが説明的な
aria-labelを持つ<nav>でラップされている。 - タップターゲットが少なくともWCAG 2.2の24x24pxの最小値（主要な前へ/次へのコントロールは44x44px）を満たしている。
- 無効状態（1ページ目の前へ、最終ページの次へ）が明確で、プログラム的に定義されている。
- レスポンシブ動作が定義されている（モバイル用のコンパクトビュー）。
- キーボードユーザーがページネーションバー全体をナビゲートできる。
- 大きな範囲に対して省略記号が正しく使用されている。