ページネーション vs 無限スクロール：目的別の使い分けと設計パターン

一覧ページで大量のコンテンツをどのように表示・分割するかは、UXに大きく影響します。ページネーション・無限スクロール・「もっと見る」ボタンのそれぞれに異なる特性と適用シーンがあります。本記事では、これらのパターンの使い分けと設計のポイントを解説します。

ページネーション（Pagination）

特長：

• コンテンツを明確なページに分割
• ユーザーが特定のページに直接アクセスできる
• ページの先頭・末尾に戻りやすい
• SEOに有利（各ページにURLがある）

向いている場面：

• 検索結果（特定のアイテムを探すユーザー）
• ECサイトの商品一覧（比較検討・戻る操作が多い）
• テーブルデータ・管理画面
• 比較的線形に閲覧されるコンテンツ

ページネーションのUI設計：

「前へ」「次へ」ボタン + ページ番号のリスト（最初・最後・現在の前後1〜2ページ + 省略記号）が標準パターンです。

← 前へ  1  2  ...  5  [6]  7  ...  12  次へ →

モバイルでは省略して「← 前へ」「次へ →」の2ボタンのみにすることもあります。

表示件数の設定：

「1ページあたり20件」などの件数設定と、総件数・現在の表示範囲（「121〜140件 / 全378件」）の明示が重要です。

無限スクロール（Infinite Scroll）

特長：

• スクロールするだけで次のコンテンツが自動で読み込まれる
• ページ遷移の摩擦がない
• コンテンツへの没入感・スムーズな体験
• フッターへのアクセスが困難になる

向いている場面：

• SNSフィード（Twitter・Instagram・TikTok）
• ニュースフィード
• 発見型コンテンツ（明確な終点を求めない探索）
• エンターテインメント・動画コンテンツ

実装の注意点：

• フッターリンクへのアクセスが妨害される → フッターは別の方法でアクセスできる設計が必要
• 特定のコンテンツへ戻れない → スクロール位置の保存・「○件目」のインジケーター表示
• ブラウザの「戻る」ボタンで一覧に戻ると最初に戻る問題 → スクロール位置の状態保存

ローディングインジケーター：

スクロール下部でのデータ取得中は、スピナーまたはスケルトンローダーを表示して読み込み中を示します。

「もっと見る」ボタン（Load More）

特長：

ページネーションと無限スクロールの中間的なパターン。「もっと見る」ボタンをタップした時のみ追加コンテンツを読み込みます。

向いている場面：

• ユーザーが「十分見た」と判断して止められるコンテンツ（記事一覧・レビュー）
• 無限スクロールのフッターアクセス問題を回避したい場合
• ページ読み込みコストを削減したい場合

ボタンのデザイン：

「もっと見る（残り○件）」のように残件数を表示することで、ユーザーの探索意欲を管理できます。

SEOへの影響

ページネーション： 各ページにURLがあるため、検索エンジンがすべてのコンテンツをクロールしやすい。rel="next" / rel="prev" のlink要素での補助が推奨です。

無限スクロール： 追加コンテンツがJavaScriptで動的に読み込まれるため、検索エンジンが認識しにくい場合があります。Progressive Enhancement（最初のページのコンテンツはHTMLで提供）での対応が必要です。

アクセシビリティ

ページネーション： ナビゲーションを