ページネーション

Pagination

別名: ページ送り、ページャー、Pager

生態(さわってみる)

一言定義

一覧を複数のページに分割し、番号や前後ボタンで行き来できるようにするナビゲーションUI。

分類

使う場面

  • 特定の項目に再訪したい、またはページ番号をURLで共有したいとき
  • 総件数やページ数を把握させたい、目的志向の強い一覧(EC検索結果など)

避ける場面

  • 探索型・回遊型の閲覧で、明確な終端を意識させたくないとき(→無限スクロール)
  • 1画面に収まる程度の少件数のとき(そもそも分割が不要)

近縁種との比較

無限スクロールはスクロールに応じて自動で追加読込するのに対し、ページネーションは一覧を 固定ページへ明示的に区切ることで、特定ページへの再訪やURL共有をしやすくする。もっと見るボタン は無限スクロールとページネーションの中間に位置し、読込のタイミングはユーザーの明示的な操作に 委ねつつ、ページという単位そのものは持たない。目的地に正確にたどり着かせたいEC検索結果などでは ページネーションが、回遊性を優先したいフィードでは無限スクロールが向く。

実例リンク

アクセシビリティ

role
nav要素に aria-label="ページネーション"。現在のページには aria-current="page"
キーボード操作
各ページボタン・前へ/次へボタンをTabで移動、Enter/Spaceで実行