Pagination = ページ割り・ページ送り。Infinite Scrollとの違いは?

名詞: Pagination

不可算名詞

IPA表記: /ˌpædʒ.ɪˈneɪ.ʃən/

読み表記: パジネーション / paj-uh-NEY-shuhn

意味:

Webサイトやアプリケーションにおいて、大量のデータや記事一覧を一定件数ごとの独立したページに分割し、番号や矢印ナビゲーションで移動可能にするUI設計の仕組み。

一般的な訳語:

ページネーション、ページ送り、丁付け、ページ割り。Web開発やUI/UX設計の現場では訳さずそのまま「ページネーション」と呼ばれる。

詳細:

Webサイトの一覧表示やUI設計において混同・対比されやすい表現に「Infinite Scroll（無限スクロール）」がある。Infinite Scrollは、ユーザーが画面最下部に到達したタイミングで次のデータを非同期で自動追加読み込みし、単一ページ上で途切れなく閲覧を続けさせる手法である。SNSのタイムラインなど受動的なコンテンツ消費に適している反面、フッターに到達できない、特定アイテムの場所を再現・共有できない、ブラウザの「戻る」操作でスクロール位置がリセットされやすいといった構造的欠点を持つ。

これに対してPaginationは、コンテンツを意図的に独立した区画（ページ）へ論理的に分割し、固有のURLパラメータ（?page=2など）を付与して管理する手法を指す。Paginationを採用することで、ユーザーは総データ量と現在地を正確に把握でき、目的のページへの直接アクセスやブックマークが可能になる。さらに、検索エンジンのクローラーが下層コンテンツを巡回・インデックスする際のURL構造が明確化され、SEO上の評価漏れを防ぐ技術的基盤としても機能する。Infinite Scrollが「摩擦のない連続的な閲覧体験」を重視するのに対し、Paginationは「明確な構造化、操作の決定権、および検索親和性」を担保する設計である点で明確に使い分けられる。

ネイティブな組み合わせ:

Numerical Pagination (番号付きページネーション)

"Implementing numerical pagination allows users to quickly jump between non-consecutive pages in a large blog archive."

番号付きページネーションを実装することで、ユーザーは大規模なブログアーカイブ内の連続していないページ間を素早く移動できるようになる。

Cursor-Based Pagination (カーソルベースのページネーション)

"High-traffic APIs prefer cursor-based pagination over offset pagination to prevent duplicate items when new records are inserted."

トラフィックの多いAPIでは、新規レコードが挿入された際の重複表示を防ぐために、オフセット方式よりもカーソルベースのページネーションを好んで採用する。

Click The Pagination (ページネーションをクリックする)

"Users can click the pagination dots to manually switch between slides without waiting for the auto-play timer."

ユーザーは自動再生タイマーを待つことなく、ページネーションのドットをクリックして手動でスライドを切り替えることができる。

動画から切り取った生の文:

"(4:50) It turns our originally grid-based blog list into an interactive carousel so it can be dragged like so, you can also click this pagination at the bottom and use the arrows to navigate these blog posts."

元々はグリッド形式だったブログ一覧をインタラクティブなカルーセルへと変換し、このようにドラッグ可能にするほか、下部にあるページネーションをクリックしたり矢印を使ったりして記事を移動できます。

"(3:23) That would not allow us to access the built-in navigation like accessing the older post or previous posts when you have, for example, more than 20 items on a page."

それによって、例えば1ページに20件以上の項目がある場合に、過去の投稿や前の投稿へ移動するといった標準のナビゲーションにアクセスできなくなってしまいます。