大量のコンテンツを一画面に詰め込んでいませんか？ページネーションは、コンテンツを適切に分割してユーザーの閲覧体験を整えるための重要な設計要素です。
この記事では、多くの場面で活用されるページネーションの基本的な仕組みからSEOを踏まえた実装の考え方まで、Web担当者が知っておくべき情報をまとめて解説します。
ページ数が多いWebサイトでは、ページネーションが途中で切れてしまったり、設定が不十分なままになっていたりすることが起こります。そのため、10ページにするのか20ページにするのかを考えながら、計画的に設計していきましょう。
最初のWebサイトリニューアルやWebサイト制作のタイミングで一緒に設計しておけると理想的です。また、ページネーションをただのページとして扱うのではなく、どういう役割を持たせるのかという設定も、あわせて定義しておけるとよいと思います。
この記事でわかること
この記事の監修者
WINDOM株式会社 代表取締役
青柳 純也 Junya Aoyagi（あおやぎ じゅんや）
「費用対効果に特化したWebマーケティング」を掲げ、決まったパッケージや特定の施策を当てはめるのではなく、企業の事業目標・課題・予算・社内体制に合わせて提案型の支援を実施。
YouTube：「WINDOMのWebマーケ実践術」
X： @aowd_marketing
ページネーションとは
ページネーションの基本的な定義と、混同されやすい「ページ送り」との違いを整理します。
ページを分割して表示する仕組み
ページネーション（pagination）とは、大量のコンテンツや情報を複数のページに分割し、ページ番号や前後のナビゲーションリンクによってユーザーが順番に閲覧できるようにする仕組みです。「paginate」（ページ番号を付ける）という動詞が語源で、Webサイト・アプリケーション・印刷物など様々な文脈で使われます。
Webサイトでは、1ページに表示しきれないコンテンツを「1ページ目（/page/1/）」「2ページ目（/page/2/）」というように複数のURLに分割して管理します。ユーザーはページ番号をクリックしたり「次へ」ボタンを押したりすることで、前後のページに移動できます。一覧ページのほか、記事の続きを複数ページに分けた「記事内ページネーション」でも使われます。
使われるシーン
ページネーションが活用される代表的なシーンは、以下のとおりです。
- ECサイトの商品一覧：数百〜数千の商品を10〜20件ずつに分割して表示します。
- ブログ・メディアの記事一覧：投稿一覧ページを「10件ずつ・月別・カテゴリ別」などに分割します。
- 検索結果ページ：サイト内検索でヒットした件数が多い場合に分割表示します。
- 掲示板・コメント欄：投稿数が多い場合に古い順・新しい順で分割します。
- データベース・ディレクトリサイト：企業一覧・物件一覧・求人一覧など大量のレコードを管理します。
ページ送りとの違い
「ページ送り」と「ページネーション」は同じ意味で使われることが多いですが、厳密には区別される場合があります。ページ送りは、前のページ・次のページという前後の移動機能そのものを指す場合が多いです。ページネーションは、その移動機能を含む全体のページ分割の仕組みを指します。
また、ページネーションに近い概念として「無限スクロール（Infinite Scroll）」があります。無限スクロールは、ページを分割せずスクロールに合わせてコンテンツを追加読み込みする方法で、ページネーションとは異なるUX設計です。この2つの使い分けについては後述のFAQで詳しく解説します。
ページネーションの基本的な考え方
ページネーションを適切に活用するには、その根本的な役割と分割設計の考え方を理解することが重要です。
ページネーションが担う役割
ページネーションが担う役割は、「ユーザー体験の整理」と「サーバー・クライアントの処理負荷の分散」の2つです。
まず、情報を複数ページに分割することで、一度に表示する情報量を適切に抑えられ、ユーザーが内容を理解しやすくなります。現在のページ位置や全体のボリュームも把握しやすくなるため、迷わず閲覧を続けやすくなる点も特徴です。特に一覧ページでは、目的の情報に段階的にアクセスできる導線として機能します。
加えて、必要なデータのみを都度読み込む仕組みにより、サーバー側の処理負荷や通信量を抑えられます。結果としてページ表示速度の低下を防ぎ、安定したパフォーマンスを維持しやすくなります。
分割設計の考え方
「1ページに何件表示するか」という分割数の設計はサイトの目的とユーザー行動によって異なります。ECサイトの商品一覧では「12〜24件/ページ」が一般的です。グリッド表示（4列×3行など）に合わせて12の倍数にする設計が多くのサイトで採用されています。ブログ記事一覧では「10〜20件/ページ」が標準的です。
「多すぎると読み込みが遅くなる・スクロールが増える」「少なすぎるとページ移動が増えてUXが悪化する」というトレードオフを考慮して分割数を設定します。A/Bテストで実際のユーザー行動（離脱率・回遊数・コンバージョン率）を測定しながら最適な分割数を探ることが、精度の高い設計につながります。
ページネーションを導入する理由
なぜページネーションが必要とされるのか、導入の背景にある3つの理由を解説します。
情報量が多いページでの分割意図
Webページに表示するコンテンツ量が増えると、ユーザーが必要な情報を探すコストが増加します。1ページに500件の商品が並んでいると「どれを見ればいいか分からない・目当てのものが見つけにくい」という状況が生まれます。ページネーションで1ページあたりのコンテンツ量を絞ることで「今自分が見ているのは全体の中のどの部分か」の整理が可能です。
閲覧しやすさに与える影響
ページネーションは視覚的な情報密度の管理に貢献します。コンテンツを適切な量に絞ることで、各コンテンツの視認性が向上し「どのコンテンツを選ぶか」という判断を行いやすくなります。スマートフォンでの閲覧では特に顕著で、画面サイズが限られているため、1ページのコンテンツ量を抑えて縦スクロール量を減らすことが、閲覧体験の向上につながります。
表示速度との関係性
ページの読み込み速度はユーザー体験とSEOに直接影響します。1ページに大量の画像・コンテンツを読み込むと、ページの初期表示時間（LCP：Largest Contentful Paint）が遅くなります。ページネーションで1ページあたりのコンテンツ数を制限することで、1リクエストあたりのデータ量を抑え表示速度の維持が可能です。「遅延読み込み（Lazy Loading）」と組み合わせることで、さらなる表示速度の最適化が可能になります。
ページネーション設計の3つのメリット
ユーザーが目的の情報にたどり着きやすくなる
ページネーションにより、現在地の把握・総ページ数の把握・特定ページへの直接アクセスが可能になります。ユーザーは自分の探している情報がどのページにあるかを推測しながらナビゲートでき、目的のコンテンツへのアクセス効率が向上します。
読み込み負荷を抑えやすくなる
1ページあたりのコンテンツ量を制限することで、HTMLのサイズ・取得する画像数・APIリクエスト数といった読み込み負荷を抑えやすくなります。Core Web VitalsのLCPやFID（初回入力遅延）に関わる処理がページネーションによって改善されることで、Googleのページエクスペリエンス評価にも好影響が期待できます。
サイト内の回遊が生まれやすくなる
ページネーションは、コンテンツを複数のURLに分散させることで、自然な回遊を生み出す役割があります。ユーザーは1ページ目から順に閲覧しながら情報を比較・検討できるため、滞在時間の向上やコンバージョンにつながりやすくなります。
ページネーション設計の3つのデメリット
ページ移動の手間が発生する
ページネーションを使うと、コンテンツを見るたびにページ遷移（クリック→読み込み→表示）が発生します。この問題を軽減するために「プリフェッチ（次のページを先読みする）」「AJAXによる非同期ページ読み込み」などの技術的なアプローチが有効です。
コンテンツ評価が分散しやすくなる
ページネーションによってコンテンツが複数のURLに分かれると、SEO上の課題が生じます。被リンクが複数のURLに分散することで、1つのページに集約される場合と比べて評価が分かれてしまう可能性があります。canonicalの設定によって、どのURLを正規ページとして評価させるかを明確にすることで、評価の分散を抑えることができます。
設計次第で離脱につながる可能性がある
現在地が分からない、次のページへのリンクが見つけにくい、1ページあたりの件数が少なすぎる、モバイルでタップしにくいといった設計上の問題は、ユーザーの離脱を招きます。現在地のハイライト表示・目立つ前後ボタン・適切な件数設定・モバイル対応のタップターゲットサイズ（48px以上推奨）といった配慮が必要です。
＼ 設計の課題を無料チェック ／
導入を検討すべきケース
記事やレポートなど文章量が多い場合
10,000字を超える長文記事や連載記事などは、ページネーションで章ごとに分割することでユーザーの読み進めやすさが向上します。ただし、記事内ページネーションはSEO評価が分散するデメリットもあります。記事の評価を1つのURLに集約したい場合はページネーションではなく、単一ページで全文を表示し、目次と内部アンカーリンクで章に直接ジャンプできる設計が有効な代替手段です。
商品一覧や検索結果ページの場合
ECサイトの商品カタログや求人サイトの求人一覧など、多数のエントリーを一覧表示するページはページネーションが最も適した設計です。フィルタリング（カテゴリ・価格帯・エリア等）とページネーションを組み合わせることで「条件を絞った上で結果を1ページずつ閲覧する」という自然な探索フローが生まれます。
データベース型サイトでの活用シーン
企業ディレクトリや医療機関検索サイトなど、大量のレコードを検索したり閲覧したりするデータベース型サイトでは、ページネーションによるデータの分割取得が必須です。ページネーションによって生成される個別のページURLは、Googleのクローラーが各ページを独立したURLとして発見・インデックスできるため、サイト内の多くのコンテンツが検索エンジンに認識される機会が増えます。
記事一覧サイトでは、直近の数十件は無限スクロールで表示し、それより過去の記事はページネーションに切り替えるという組み合わせもよく使われます。新着コンテンツの回遊性と、過去記事のクロール・インデックスのしやすさを両立させたい場合におすすめの設計です。
ページネーション設計で意識したいポイント
現在位置が把握できる表示にする
ユーザーが「今自分は何ページ目を見ているか」を即座に把握できるよう、現在のページ番号を視覚的に強調します。現在のページ番号を他のページ番号と異なるスタイルで表示することが基本的な実装です。現在のページのリンクをクリック不可にすることで、ユーザーに「このページは既に表示中」であることを自然に伝えられます。
前後ページへ移動しやすくする
「前へ」「次へ」のナビゲーションは、数字のページ番号と並んで設置することを推奨します。1ページ目では「前へ」ボタンを、最終ページでは「次へ」ボタンをグレーアウトして、これ以上移動できないことを示します。
表示するページ数を適切に調整する
総ページ数が多い場合に全ページ番号を一列に並べるのは現実的ではありません。「現在のページを中心に前後数ページのみ表示し、遠いページは省略記号（...）で示す」という「トランケーション」パターンが標準的な設計です。
クリックしやすいUIに整える
Webアクセシビリティの観点から、ページネーションのクリック可能エリア（タップターゲット）は十分な大きさを確保することが重要です。Googleが推奨するタップターゲットの最小サイズは48×48pxです。
出典：web.dev「Accessible tap targets」（2026年9月確認）
配置場所をユーザー導線に合わせる
ページネーションの配置場所は一般的にコンテンツリストの下部ですが、ページによっては上部にも設置することが有効です。多くのECサイトでは「ページの上部と下部の両方に設置する」というパターンが採用されています。ナビゲーションは中央揃えが視認性が高いです。
SEOを踏まえたページネーションの扱い
ページネーションはSEOに複数の観点で影響します。検索エンジンがどのように認識するかを理解した上で適切に設定することが重要です。
検索エンジンが認識する仕組み
Googleのクローラーはページネーションの各ページをそれぞれ独立したURLとして認識・クロールします。「/products/?page=1」「/products/?page=2」などのURLが別々のページとしてインデックスされます。
Googleは以前はrel="prev"・rel="next"というHTMLのlink属性を使ってページネーションの連続性を認識していましたが、現在はこれらを使用しておらず、各ページのコンテンツと構造から自動的にページネーションの関係を推測します。Bingは現在もrel="prev"・rel="next"をサポートしており、対応しているとBingのクロールとインデックスに良い影響を与える可能性があります。
Googleが公開しているページネーションの方針
Googleは、ページネーションの扱いについて以下の方針を公式に示しています。
- ページを順番にリンクする
- URLを正しく使用する
- フィルタや並べ替えのあるURLがインデックスに登録されないようにする
Googleは、各ページを<a href>タグで順番にリンクし、一意のURLを付与することで、Googlebotがページ間の関連性を正しく把握できるようにすべきだとしています。フィルタ・並べ替えによって生成されるURL（絞り込み条件付きURLなど）は、noindexやrobots.txtでの制御が必要です。
出典：Google 検索セントラル「ページ分け、段階的ページ読み込み、それらのGoogle検索に対する影響」（2026年9月確認）
評価が分散しないための考え方
ページネーションの各ページが独立したURLを持つ場合、被リンクの評価やコンテンツの評価が複数のURLに分散するリスクがあります。特に「記事内ページネーション」では、記事への外部リンクがどのページURLに向けられるかによって評価が散らばります。対策として、記事はできる限り1つのURLで完結させ、ページネーションは一覧ページや商品リストに限定するという設計方針が、SEO観点では最もリスクが少ないアプローチです。
URL設計とパラメータの扱い
ページネーションのURL設計には主に2つのパターンがあります。
- パスベース：/products/page/2/ のようにURLのパスにページ番号を含める方法。
- クエリパラメータ：/products/?page=2 のようにURLパラメータにページ番号を含める方法。
どちらも有効ですが、パスベースの方が人間にとって読みやすく、Googleも両方を適切に処理します。クエリパラメータを使う場合はGoogle Search Consoleの「URLパラメータ」設定で意図しないインデックスが行われないよう設定することを検討しましょう。
なお、前述のGoogle検索セントラルの同資料では、URL設計の注意点として「ページ番号をURLフラグメント（#以降の文字列）で管理しない」ことも明記されています。フラグメントは検索エンジンにクロールされないため、ページネーションのURL設計ではパスベースかクエリパラメータを使い、フラグメントは避けるのが安全です。
canonicalの設定方法
canonicalタグ（rel="canonical"）は「このページの正規版はこのURLです」と検索エンジンに伝えるメタタグです。ページネーションのSEO設定でよく使われる方法として「各ページのcanonicalをそのページ自身のURLに設定する（self-referencing canonical）」があります。これがGoogleの推奨する標準的な対応です。
記事内ページネーションで全ページの評価を1ページ目に集約したい場合は、「2ページ目以降のcanonicalを1ページ目のURLに設定する」という方法があります。ただしこの場合、2ページ目以降のコンテンツがインデックスされなくなるため、コンテンツの目的を考慮した判断が必要です。
インデックス制御の判断
ページネーションの2ページ目以降をインデックスするかどうかは、コンテンツの質と目的によって判断します。「各ページに十分な独自コンテンツがある・検索流入を期待できるキーワードが含まれる」場合はインデックスさせることが有効です。「2ページ目以降は1ページ目と似たような内容・薄いコンテンツ」の場合はnoindexを設定してインデックスから除外することを検討します。
実装でよくあるつまずきとして、似たようなページにcanonicalとnoindexを同時に設定してしまうケースが挙げられます。この2つは目的が異なる指示のため、両方を同じページに設定すると意図した通りにインデックス制御されないことがあるので注意が必要です。
＼ 設計の課題を無料チェック ／
ページネーションの実装パターン
HTMLとCSSで構築する方法
基本的なページネーションはHTMLのリスト要素と<a>タグ・CSSのスタイリングで実装します。アクセシビリティを考慮して<nav>要素とaria属性を使った実装がベストプラクティスです。aria-label・aria-current="page"はスクリーンリーダーへの対応に必要なアクセシビリティ属性です。現在のページを示す要素はリンクではなく<span>にすることで「クリックできない」ことを明示します。
JavaScriptで制御する方法
SPA（シングルページアプリケーション）やAJAXを使ったページネーションでは、JavaScriptでデータを動的に取得してページの一部のみを更新します。URLはhistory.pushState()を使って変更することで「ページ全体のリロードなしにURLを更新する」実装が可能です。SEOを重視する場合はSSR（サーバーサイドレンダリング）またはSSG（静的サイト生成）でHTMLとしてページを生成し、各ページのURLにコンテンツが含まれる状態にすることを推奨します。
WordPressで対応する方法
WordPressにはページネーション機能が標準で搭載されています。投稿一覧・カテゴリページ・検索結果ページなどには自動的にページネーションが適用されます。より高機能なページネーションが必要な場合は「WP-PageNavi」「Pagination by BestWebSoft」などのプラグインを使うことで、ページ番号を表示するタイプのUIを簡単に実装可能です。
デザインパターンの考え方
シンプルな番号型の設計
「< 1 2 3 4 5 ... 10 >」のように数字のページ番号を並べる最もスタンダードなデザインです。ECサイトやブログなどで広く採用されています。特定のページに直接ジャンプできるため、全体像を把握しながら閲覧したいユーザーに向いています。
前後ボタン中心の設計
「< 前のページ | 次のページ >」というシンプルな前後ボタンのみのデザインです。総ページ数が多い・ページ番号での直接アクセスのニーズが低い場合（ブログ記事の連続読み・マンガビューアなど）に向いています。
視認性を高めるUIの工夫
十分な余白（ページ番号間のスペース）、明確なアクティブ状態（現在ページの背景色変更）、ホバー時の色変化、ボーダーやシャドウでの区別が効果的です。背景とのコントラスト比（WCAG 2.1では最低4.5:1以上を推奨）を確保することがアクセシビリティ基準への対応になります。
出典：W3C「WCAG 2.1 達成基準1.4.3 コントラスト（最低限）」（2026年9月確認）
モバイル表示での配慮
スマートフォンでの表示ではページネーションのUIを簡略化することが有効です。デスクトップでは全番号を表示していても、モバイルでは「< 前へ | [現在:3/20] | 次へ >」というコンパクトな表示に切り替えることで、限られた画面幅を有効活用できます。タップターゲットのサイズは最小48px×48pxを確保します。
ページネーションに関するよくある質問
Q. ページネーションは必須ですか？
必須ではありませんが、コンテンツ量が多い場合には強く推奨されます。10件未満の一覧ページにはページネーションは不要です。しかし商品一覧や記事一覧など「件数が今後も増え続ける・現時点ですでに多い」ページには、初期から設計に組み込んでおくことを推奨します。
Q. 無限スクロールとどう使い分けますか？
無限スクロール（Infinite Scroll）はスクロールに合わせてコンテンツを追加読み込みする方式で、InstagramやX（旧Twitter）のフィードで広く使われています。使い分けは「コンテンツの目的と探索方法」で判断します。コンテンツを探して選ぶ場面（EC・検索結果）はページネーションが、流れを楽しむ・発見する場面（SNSフィード・ニュース）は無限スクロールが向いています。SEO重視・URLのシェアが必要な場合は各ページにURLが存在するページネーションが有利です。
Q. 2ページ目以降は評価されますか？
Googleは2ページ目以降もクロール・インデックスしますが、一般的に1ページ目より評価が低くなる傾向があります。理由は、被リンクが1ページ目に集まりやすい、ユーザーが最初にアクセスするのは1ページ目であることが多い、コンテンツの重複・薄さの問題が2ページ目以降で起きやすい、といった点です。コンテンツが薄い2ページ目以降はnoindexを設定してインデックス対象から除外することも選択肢のひとつです。
まとめ：ページネーションは設計次第で評価が変わる仕組み
ページネーションは「コンテンツを分割して見せる」という単純な機能に見えますが、ユーザー体験や表示パフォーマンスの他に、SEO評価にも同時に影響する重要な設計要素です。「現在地を分かりやすく・移動しやすく・canonicalを適切に設定する」という基本を押さえることで、ユーザーにとっても検索エンジンにとっても使いやすいページネーションが実現できます。
今週やること
- 現在地を分かりやすく表示する
- 前後ページへ移動しやすくする
- canonicalを適切に設定する
参考文献
- Google検索セントラル「ページ分け、段階的ページ読み込み、それらのGoogle検索に対する影響」（2026年9月確認）
- web.dev「Accessible tap targets」（2026年9月確認）
- W3C「WCAG 2.1 達成基準1.4.3 コントラスト（最低限）」（2026年9月確認）
