ページネーション
Pagination
別名: ページ送り、ページャー、Pager
生態(さわってみる)
一言定義
一覧を複数のページに分割し、番号や前後ボタンで行き来できるようにするナビゲーションUI。
分類
使う場面
- 特定の項目に再訪したい、またはページ番号をURLで共有したいとき
- 総件数やページ数を把握させたい、目的志向の強い一覧(EC検索結果など)
避ける場面
- 探索型・回遊型の閲覧で、明確な終端を意識させたくないとき(→無限スクロール)
- 1画面に収まる程度の少件数のとき(そもそも分割が不要)
近縁種との比較
無限スクロールはスクロールに応じて自動で追加読込するのに対し、ページネーションは一覧を 固定ページへ明示的に区切ることで、特定ページへの再訪やURL共有をしやすくする。もっと見るボタン は無限スクロールとページネーションの中間に位置し、読込のタイミングはユーザーの明示的な操作に 委ねつつ、ページという単位そのものは持たない。目的地に正確にたどり着かせたいEC検索結果などでは ページネーションが、回遊性を優先したいフィードでは無限スクロールが向く。
実例リンク
アクセシビリティ
- role
- nav要素に aria-label="ページネーション"。現在のページには aria-current="page"
- キーボード操作
- 各ページボタン・前へ/次へボタンをTabで移動、Enter/Spaceで実行