ページネーションとは、一覧や検索結果を一定の表示件数ごとに分割し、ページ番号や「前へ / 次へ」で移動できるようにするUIです。「情報の全体量」と「現在地」を俯瞰させ、ユーザーに見通しとコントロールを取り戻させます。
この記事を読むと、ページネーションUIの使い方、表示件数の見せ方、無限スクロールとの使い分け、A11yに必要なARIA属性の判断が自分でできるようになります。
まず結論：ページネーションを使う条件
ページネーションを使う条件は、ユーザーが一覧の現在地を把握し、特定の位置へ戻れる必要があることです。検索結果、商品一覧、管理画面のテーブル、記事一覧のように、比較・再訪・共有が重要な一覧ではページネーションが向いています。
一方で、SNSタイムラインやニュースフィードのように「次々と読む」ことが目的なら、無限スクロールやLoad Moreの方が自然です。ページネーションは単に一覧を分けるUIではなく、全体件数・表示件数・現在ページを伝えるナビゲーションとして設計します。
| 場面 | 向いているUI | 理由 |
|---|---|---|
| 検索結果・商品一覧 | ページネーション | 特定ページへ戻りやすい |
| 管理画面のテーブル | ページネーション | 表示件数を固定して比較しやすい |
| ニュースフィード | 無限スクロール | 連続消費に向いている |
| モバイルの短い一覧 | Load More | 操作が単純で画面を圧迫しにくい |
1. UI例（Preview / Live）
実装で見る（GunjoUI）
この部品を、デザインシステム GUNJO の実装で確かめられます。
2. 定義（Definition）
Pagination（ページネーション）とは、大量のリストやコンテンツを一定数の塊（ページ）に分割し、任意の位置へ移動できるようにしたナビゲーションUIです。
検索結果や商品一覧では、「全96件中 21〜30件を表示」のように表示件数と現在の表示範囲を一緒に示すことで、ユーザーは全体量と現在地を把握しやすくなります。
表示件数UIでは、ページ番号だけでなく「総件数」「1ページあたりの件数」「現在表示している範囲」を同じ文脈で見せます。たとえば「全96件中 21〜30件を表示」と書くと、ユーザーは今のページが一覧全体のどの位置なのかを判断できます。
近いUIとの違い：無限スクロールは「最新情報を消費する」フロー向き、Load Moreボタンは「追加読み込み」向き、Paginationは「特定ページへの直接移動・現在地把握」向き。
3. 使い分け（When to use / When NOT to use）
3.1 When to use
- 検索結果・商品一覧など、ユーザーが「3ページ目にあったあれ」と特定ページを再訪したいデータ群
- Tableなど一定の表示件数を保つことで比較・スキャンを容易にしたい場合
- フッターへの到達が重要なページ（無限スクロールはフッターを埋没させる）
3.2 When NOT to use
- SNSタイムラインなど最新情報を消費するフローが目的の場合 → 無限スクロールを使う
- 表示件数が10件未満の場合（Paginationが不要）
- モバイルで「もっと見る」ボタンの方が直感的な場合
3.3 代替UI（Alternatives）
- 最新情報の連続消費 → 無限スクロール
- 追加読み込みのみ → Load Moreボタン
- モバイルの省スペース → 「前へ / X / Y / 次へ」のシンプルパターン
4. 設計判断の核（Decision Principles）
「現在地」と「行き先」の明確な手掛かりを常に提供する。
- 現在地を強調する: Active状態のページ番号は色・太字・背景色で明確に区別する
- 端点を見せる: 先頭（1）と末尾（Last）は省略せずに表示し、全体規模を把握させる
- 前後の導線は必須: 「前へ」「次へ」ボタンは常に両端に配置する
- URLと同期する:
?page=Nでリロード・共有後も同じページが開くようにする - タップ領域を最大化: 数字だけでなくボタン全体を押せる領域にする（44px角以上）
5. 状態設計（States）
5.1 必須状態
- Default（通常）: 各ページへのリンクボタン。Hover効果でクリッカブルを示す
- Current / Active（現在地）: 色反転などで強調し、クリック不可にする（必須）
- Disabled（無効）: 1ページ目の「前へ」、最終ページの「次へ」。透明度を下げて押せないことを示す
5.2 条件付き状態
- Hover（ホバー）: 背景色変化でクリッカブルを明示
- Focus（フォーカス）: キーボード操作中のアウトライン表示
- Ellipsis（省略）: ページ数が多い場合の
...表示。リンクなし・装飾のみ
5.3 State Gallery
| 状態 | 見た目 | 意図 |
|---|---|---|
| Default | ボーダー付きボタン | 移動可能 |
| Active | 背景色反転・非クリック | 現在地 |
| Disabled | 透明度低下 | 移動不可（端点） |
| Ellipsis | ... テキスト | 番号省略 |
| Focus | アウトライン | キーボード操作中 |
6. バリエーション設計（Variants）
- フル型: 番号・省略記号・前後ボタンをすべて表示。デスクトップの検索結果・管理画面に適する
- シンプル型: 「前へ / 現在ページ/全ページ / 次へ」のみ。モバイルや省スペースに有効
- Load More併用型: 初期はLoad Moreで追加読み込み、最終的にPaginationへ移行するハイブリッドパターン
禁止パターン：Activeページに <a> や <button> をそのまま使いクリック可能な状態にする・現在地を数字のみで示し色分けなし
7. パターン集（Good / Bad / How to fix）
7.0 よく崩れる設計パターン
- 現在地の喪失: 何ページ目にいるか・あと何ページあるか分からない → 全体量と現在地を必ず明示する
- クリック領域の極小化: 数字テキスト部分しか押せない → ボタン全体を44px角以上のタップ領域にする
- 無限スクロールの誤用: 特定アイテムを探したい場面で無限スクロール → Paginationに切り替える
7.1 Bad
- ページ番号が小さく密集。「次へ」ボタンなし。現在何ページ目か不明。フッター直上にポツンと配置されているだけ
7.2 Good
- スマホでも押しやすい大きなボタン群。「前へ」「1」「2」「3」「…」「10」「次へ」で全体像が見え、現在「3」にいることが背景色でひと目で分かる。リスト上部には「全96件中 21〜30件を表示」と補足がある
7.3 How to fix
- 数字ボタンを広いPaddingで囲み最低44×44pxのタップ領域を確保する
- Activeページに背景色＋
aria-current="page"を付与し、視覚とスクリーンリーダー両方で現在地を明示する - 1ページ目の「前へ」・最終ページの「次へ」をDisabledにし、端点の迷いをなくす
7.4 GUNJO 実装で見る（Bad / Good）
同じ GUNJO の Pagination を、現在ページの示し方が崩れた使い方と正しい使い方で対比。
8. ルール（Must / Better）
Must（守らないと壊れる）
Better（品質が跳ねる）
9. アクセシビリティ要件（必須）
Keyboard
- 全ての有効なリンク/ボタンに
Tabでフォーカスし、Enterで遷移できる
Focus
- フォーカス時に明確なアウトラインを表示する
Screen Reader
- ナビゲーション全体を
<nav aria-label="ページネーション">で囲む - 現在ページに
aria-current="page"を付与する - 数字ボタンに
aria-label="3ページ目"のように読み上げ文脈を付与する - 省略記号（
...）はaria-hidden="true"にしてスクリーンリーダーから除外する
Touch / Pointer
- 各ボタンのタップ領域は最低 44×44px を確保する
- モバイルではシンプル型（前へ/現在/次へ）への降格も検討する
Contrast / Readability
- Activeボタンの文字色と背景色のコントラスト比は 4.5:1以上 を確保する
10. 実装メモ（Implementation Notes）
- 省略記号（Ellipsis）のロジックは「先頭・末尾・現在地±1を常に表示、残りを
...で省略」が最も汎用的 - Next.jsでは
useSearchParams+router.replaceでURLパラメータを同期する。router.pushはブラウザ履歴が積まれるので注意 - shadcn/ui の
<Pagination>コンポーネントはA11y対応済みのため優先して使う - 総ページ数が変動するAPI連携の場合、
X-Total-CountヘッダーやtotalフィールドをAPIレスポンスに含めるバックエンド設計が必要
11. 関連リンク
- 関連するUIデザイン原則: 状態の可視化 (Visibility of System Status), Fittsの法則 (Fitts's Law), チャンク化 (Chunking)
- 用語集（定義）: アクセシビリティ (Accessibility)
- 関連するUIコンポーネント（横）: Button（ボタン）, Tabs（タブ）
まとめ
Paginationの設計は「現在地の明示」と「タップ領域の確保」で9割決まります。迷ったら 4. 設計判断の核 に戻り、URLとの同期とARIA属性（aria-current="page"）の実装を確認してください。地味なパーツに見えますが、ユーザーの探索体験を支える重要な動線です。
