EN
JP
KRページネーションUIとは？設計・実装・アクセシビリティ・改善ポイントを徹底解説
一覧画面を作るとき、多くの人はまずカードの見た目やテーブルの整列、検索条件、ソート、件数表示などに意識を向けます。もちろんそれらは非常に重要ですが、一覧体験の質は「何をどう並べるか」だけで決まるわけではありません。もう一つ大きく効いてくるのが、「利用者がその一覧の中をどう移動するか」です。たとえば商品一覧、検索結果、記事一覧、管理画面のテーブルのように件数が多い画面では、最初の一画面ですべてを見せきることはできません。そのため、どこで区切るか、次のまとまりへどう進ませるか、今どこにいるかをどう伝えるかが、一覧そのものの見やすさと同じくらい重要になります。ここで中心になるのがページネーションUIです。
ページネーションUIは、一見すると小さなページ番号の列に見えるかもしれません。しかし実際には、情報量の整理、現在位置の把握、移動のしやすさ、URL 状態管理、アクセシビリティ、モバイルでの省スペース設計など、かなり多くの判断を含んでいます。しかも、無限スクロールや「もっと見る」ボタンといった別の一覧移動手法も存在するため、単に番号を付ければよいという話にはなりません。本記事では、ページネーションUIを単なる操作部品としてではなく、「一覧における移動設計」として捉え、基本構造、種類、設計の考え方、実装例、アクセシビリティ、起きやすい失敗までをまとめて解説していきます。
1. ページネーションUIとは何か
ページネーションUIの根本にあるのは、「大量の情報を一度に見せず、適切なまとまりで分割し、それぞれを無理なくたどらせる」という考え方です。利用者はすべての情報を連続した一つの流れとして読むとは限りません。むしろ、ある程度の区切りがあるほうが、比較や確認や探索がしやすいことも多いです。特に検索結果や管理画面では、「次のまとまりへ進む」「前のまとまりへ戻る」「この近辺のページを確認する」という行動が発生しやすく、ページネーションUIはそれを支える部品になります。
また、ページネーションUIは移動だけでなく、位置感覚も支えます。今が 2 ページ目なのか 20 ページ目なのか、全体としてどれくらいの件数を扱っているのかが分かると、利用者は探索を計画しやすくなります。つまり、ページネーションUIは単なるリンク群ではなく、一覧の地図のような役割も持っています。
1.1 ページネーションUIが必要になる理由
ページネーションUIが必要になる大きな理由は、一覧の見やすさと操作のしやすさを両立させるためです。一度に大量の情報を表示すると、スクロール量が大きくなり、比較がしづらくなり、どこまで見たかも分かりにくくなります。一方で、適切に分割すれば、一画面あたりの密度を調整しやすくなり、利用者は「今見ている範囲」を把握しやすくなります。つまり、ページネーションは情報量を削るためではなく、情報を適切な単位へ整理するために必要です。
もう一つの理由は、位置を戻しやすくすることです。無限スクロールでは一度進むと戻るのが大変なことがありますが、ページネーションではページ単位で位置を記憶しやすくなります。特に管理画面や検索結果では、この「戻りやすさ」が非常に重要です。つまり、ページネーションUIは一覧の前進だけでなく、再訪や比較にも向いています。
1.2 ページネーションUIが使われる場面
ページネーションUIは、商品一覧、記事一覧、検索結果、会員一覧、注文履歴、管理画面のテーブルなど、件数が多く、一覧として探索や確認が行われる場面でよく使われます。これらに共通しているのは、ただ流し見するだけではなく、「探す」「比較する」「戻る」「フィルタと組み合わせる」といった行動があることです。つまり、ページネーションUIは読むだけの一覧より、操作を伴う一覧と相性が良いです。
一方で、SNS フィードや短いニュース流し読みのように、連続性が重視される体験では無限スクロールのほうが向いていることもあります。つまり、ページネーションUIは万能ではなく、一覧の目的によって選ぶべき手法です。
2. ページネーションUIの基本構造
ページネーションUIは小さな部品ですが、いくつかの基本要素の組み合わせで成立しています。代表的なのは「前へ」「次へ」「ページ番号」「現在ページの強調表示」「省略記号」です。これらはそれぞれ別の役割を持っています。前後移動は連続的な移動を支え、ページ番号は直接移動と位置把握を支え、現在ページの強調は今どこにいるかを示し、省略記号はページ数が多いときの圧縮表現になります。つまり、ページネーションUIは単に番号を並べたものではなく、移動と位置理解を支える小さな情報設計です。
この構造を理解すると、なぜ「すべての番号を全部見せる」のが必ずしも親切ではないのかも分かりやすくなります。ページ数が多いときは、すべてを並べると逆に見づらくなるからです。つまり、ページネーションUIは情報を増やすのではなく、必要な情報だけを見せる整理の設計です。
2.1 基本的な構成要素
基本構成としてよく使われるのは、前へ、次へ、現在ページ、近くのページ番号、そして場合によっては先頭と末尾です。ページ数が少ないなら番号を全部出しても問題ありませんが、多いときは省略記号を使って圧縮します。たとえば「1 ... 7 8 9 10 11 ... 50」のような表示は、現在位置と全体感の両方をある程度伝えられる典型的な形です。つまり、ページネーションUIは「すべてを見せる」より「必要な位置情報を残す」設計が重要です。
2.2 最低限必要な情報
良いページネーションUIには、最低限三つの情報が必要です。ひとつは「今どのページにいるのか」、ふたつめは「どこへ移動できるのか」、三つめは「全体としてどれくらいの範囲があるのか」です。この三つが欠けると、利用者は自分の位置や次の移動先を判断しにくくなります。つまり、ページネーションUIは見た目よりも、この三つが自然に読み取れることが重要です。
2.3 コードで見る基本構造
以下は、番号付きページネーションUIの基本的な HTML と CSS の例です。ここではシンプルな構造にしていますが、現在ページ、前後移動、ページ番号の関係が分かるようにしています。
index.html
<nav class="pagination" aria-label="ページ送り">
<a class="pagination__link pagination__link--prev" href="?page=1">前へ</a>
<a class="pagination__link" href="?page=1">1</a>
<a class="pagination__link" href="?page=2">2</a>
<span class="pagination__link pagination__link--current" aria-current="page">3</span>
<a class="pagination__link" href="?page=4">4</a>
<a class="pagination__link" href="?page=5">5</a>
<a class="pagination__link pagination__link--next" href="?page=4">次へ</a>
</nav>
style.css
.pagination {
display: flex;
gap: 8px;
align-items: center;
flex-wrap: wrap;
}
.pagination__link {
min-width: 40px;
height: 40px;
padding: 0 12px;
display: inline-flex;
align-items: center;
justify-content: center;
border: 1px solid #d1d5db;
border-radius: 8px;
text-decoration: none;
color: #1f2937;
background: #ffffff;
}
.pagination__link--current {
background: #2563eb;
color: #ffffff;
border-color: #2563eb;
}
.pagination__link--prev,
.pagination__link--next {
font-weight: 600;
}
この例では、現在ページを aria-current="page" で表し、視覚的にも背景色で強調しています。つまり、見た目と意味の両方で現在位置を明確にしています。
3. ページネーションUIが重要な理由
ページネーションUIが重要なのは、一覧画面の UX が「何を表示するか」だけでなく「どう進ませるか」で大きく変わるからです。たとえばカードのデザインが美しくても、次のページへ進みにくければ一覧としては使いづらくなります。特に検索結果や管理画面では、利用者は連続して読み進めるだけではなく、前の位置へ戻ったり、条件を変えたり、違うページと比較したりします。そのときに位置感覚と移動手段が明確であることは、一覧性と同じくらい重要です。つまり、ページネーションUIは一覧画面の補助ではなく、一覧体験の主要な構成要素です。
また、ページネーションUIはパフォーマンスや描画量にも関わります。一画面で扱う件数を抑えることで、表示負荷や読み込み負荷をある程度コントロールしやすくなるからです。つまり、UX と技術的な現実の間をつなぐ役割も持っています。
3.1 一覧性を保ちやすい理由
ページネーションUIがあると、一画面あたりの情報量を調整しやすくなります。これにより、一覧画面が長くなりすぎるのを防ぎ、視線移動の負担も抑えられます。特にテーブルや比較前提の一覧では、一度に見せる量が多すぎると読みづらさが増します。つまり、ページネーションは情報を削るのではなく、情報密度を適正に保つための手段です。
3.2 操作性を整理しやすい理由
ページネーションUIがあると、前へ進む、戻る、特定ページへ飛ぶといった操作が整理しやすくなります。無限スクロールでは「どこまで来たか」が分かりにくくなりやすいですが、ページネーションなら位置が固定的に表現されるため、探索しながら戻る動作とも相性が良いです。つまり、ページネーションUIは移動の構造を作る UI です。
3.3 パフォーマンスや表示負荷との関係
管理画面や大量検索結果では、一度に全件を描画するよりページ単位で区切ったほうが現実的なことが多いです。特にテーブルや複雑なカード一覧では、件数を制御しないと描画も重くなりやすいです。つまり、ページネーションUIは視覚的整理だけでなく、パフォーマンス上の現実的な選択でもあります。
4. ページネーションUIの主な種類
ページネーションUIにはいくつかの代表的な型があります。番号付き、前へ・次へ中心、省略記号を含む型、さらに比較対象として無限スクロールや「もっと見る」ボタンもあります。これらは単なる見た目の違いではなく、「どのくらい現在位置を見せるか」「どのくらいジャンプしやすくするか」「どのくらい画面を圧迫しないか」という設計方針の違いです。つまり、ページネーションUIの種類は一覧体験の性格を変える選択肢です。
4.1 番号付きページネーションUI
番号付きページネーションUIは最も一般的で、現在位置が分かりやすく、近くのページへ直接飛びやすいのが強みです。検索結果や商品一覧、管理画面のように、位置感覚と戻りやすさが重要な画面と相性が良いです。つまり、番号付きは探索型一覧の標準形です。
4.2 前へ・次へ中心のページネーションUI
前へ・次へ中心の UI は見た目がかなりシンプルで、画面を圧迫しにくいです。ただし、現在位置や全体感は弱くなりやすいため、ページ数が少ない一覧や連続閲覧中心の一覧に向いています。つまり、情報量を減らす代わりに位置情報も減る形です。
4.3 省略記号を含むページネーションUI
総ページ数が多い場合は、すべての番号を並べず、近くのページだけ見せて省略記号で圧縮するのが一般的です。これにより、一覧の圧迫感を減らしながら、先頭・末尾と現在位置付近を把握しやすくできます。つまり、省略記号は単なる省略ではなく、圧縮された地図として働きます。
4.4 無限スクロールや「もっと見る」との違い
無限スクロールは連続閲覧には向いていますが、位置感覚や戻りやすさは弱くなりやすいです。「もっと見る」は段階的読み込みに向いていますが、全体量の見通しは弱いです。ページネーションUIは、位置と全体感を持ちながら探索しやすいのが強みです。つまり、どれが優れているかではなく、一覧の目的に対してどれが合うかで選ぶべきです。
5. 良いページネーションUIの設計
良いページネーションUIは、現在位置が分かりやすく、移動先が予測しやすく、総ページ数が多くても見づらくなりすぎず、モバイルでも扱いやすいものです。つまり、ページネーションUIの評価軸は「番号があるかどうか」ではなく、「迷わず使えるかどうか」です。これは UI 部品としてはシンプルに見えますが、実際には視覚設計、情報設計、操作設計がかなり密接に関わっています。
5.1 現在位置が分かりやすいこと
今どのページにいるのかは、色、背景、枠線、文字の太さなどで明確に区別されるべきです。現在ページが他とほぼ同じ見た目だと、利用者は位置を見失いやすくなります。つまり、現在ページの強調は装飾ではなく、ページネーションUIの必須機能です。
5.2 移動先が予測しやすいこと
前へ・次へや番号リンクは、押したときにどこへ移動するのかが分かりやすくあるべきです。また、押せない状態のものは無効であることが視覚的にも分かる必要があります。つまり、ページネーションUIではボタンらしさと状態差が重要です。
5.3 総ページ数が多い場合の見せ方
ページ数が多いときに全部を並べるのは逆効果です。そのため、現在位置の近辺、先頭、末尾、そして必要に応じて省略記号を組み合わせるのが現実的です。つまり、多い情報をそのまま見せるのではなく、必要な位置情報だけを見せることが設計の中心です。
5.4 モバイルでの扱いやすさ
モバイルでは横幅が足りないため、デスクトップと同じUIをそのまま縮めるだけではうまくいきません。表示する番号を減らす、前へ・次へを優先する、タップ領域を大きくするなどの調整が必要です。つまり、ページネーションUIはレスポンシブにおいて単なる縮小ではなく、情報量の再設計が必要です。
6. ページネーションUIの実装で考えること
ページネーションUIの実装では、見た目を作るだけでは不十分です。何件ごとに区切るか、URL にどう反映するか、検索条件とどう連動するか、サーバー側で区切るのかフロント側で区切るのかまで含めて考える必要があります。つまり、ページネーションUIは UI 部品であると同時に、一覧データの状態管理でもあります。
6.1 何件ごとに区切るか
一ページあたり件数は、画面の性質によって変わります。カード一覧なら 12 件や 20 件、テーブルなら 25 件や 50 件が自然なこともありますが、正解は固定ではありません。重要なのは、一覧性と移動回数のバランスです。つまり、件数は技術的な都合だけでなく、利用者の読みやすさで決めるべきです。
6.2 URL 設計や状態管理との関係
ページ番号はクエリパラメータとして URL に持つことが多いです。たとえば ?page=3 のようにしておけば、リロードや共有時にも同じ一覧位置を再現しやすくなります。検索条件やソート条件と一緒に持てば、一覧状態全体を URL で表現できます。つまり、ページネーションUIは URL 設計と相性が非常に良いです。
6.3 サーバーサイド処理とクライアントサイド処理の違い
件数が多い場合は、サーバー側でページ単位のデータを返すサーバーサイドページネーションが一般的です。一方、件数が少ない場合や全件をすでに保持している場合は、クライアント側でページを分割することもできます。つまり、同じページネーションUIでも、裏側の実装は大きく異なります。
6.4 コードで見る実装例
以下は、検索結果一覧でクエリパラメータ付きのページネーションリンクを出すイメージです。
index.html
<nav class="pagination" aria-label="検索結果ページ送り">
<a class="pagination__link" href="/search?q=shoes&page=1">1</a>
<a class="pagination__link" href="/search?q=shoes&page=2">2</a>
<span class="pagination__link pagination__link--current" aria-current="page">3</span>
<a class="pagination__link" href="/search?q=shoes&page=4">4</a>
<a class="pagination__link" href="/search?q=shoes&page=5">5</a>
</nav>
style.css
.pagination {
display: flex;
gap: 6px;
align-items: center;
}
.pagination__link {
min-width: 36px;
height: 36px;
padding: 0 10px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 6px;
border: 1px solid #d1d5db;
color: #1f2937;
text-decoration: none;
}
.pagination__link--current {
background: #111827;
color: #ffffff;
border-color: #111827;
}
app.js
function buildPageUrl(basePath, query, page) {
const params = new URLSearchParams(query);
params.set("page", String(page));
return `${basePath}?${params.toString()}`;
}
// 使用例
const url = buildPageUrl("/search", { q: "shoes", sort: "popular" }, 3);
console.log(url); // /search?q=shoes&sort=popular&page=3
この例では、ページ番号が URL に含まれるため、リロードや共有にも強い設計になります。つまり、ページネーションUIはリンク設計と一緒に考えるとかなり扱いやすくなります。
7. ページネーションUIのデザインとアクセシビリティ
ページネーションUIは小さな操作部品ですが、アクセシビリティではかなり重要な対象です。数字だけ見えていればよいわけではなく、押しやすく、現在位置が分かりやすく、スクリーンリーダーでも意味が伝わり、キーボードでも自然に操作できる必要があります。つまり、ページネーションUIは単なる装飾付きリンク列ではなく、きちんと設計されたナビゲーション要素であるべきです。
7.1 ボタンらしさと押しやすさ
特にモバイルでは、数字だけが小さく並んでいると押しづらくなります。タップ領域、余白、境界の見え方が弱いと、押せる要素として認識しにくくなります。つまり、ページネーションUIでは視認性と操作性を同時に考える必要があります。
7.2 ラベルや読み上げ対応
スクリーンリーダー利用者にとっては、「1」「2」「3」だけでは意味が足りないことがあります。「ページ 2 へ移動」「現在のページ 3」といった意味が補えると理解しやすくなります。aria-label や aria-current="page" を使うことで、見た目だけではない意味を与えやすくなります。つまり、ページネーションUIは数字を並べるだけでなく、意味を付与することが重要です。
7.3 キーボード操作とフォーカス表示
キーボード利用者はフォーカス移動でページネーションを使うことがあります。そのため、フォーカスリングがはっきり見え、移動順が自然であることが重要です。現在ページが span なのかリンクなのかでも挙動は変わるため、アクセシビリティ上の意味付けを意識した実装が必要です。つまり、クリック前提ではなく、操作手段を広く想定する必要があります。
7.4 コードで見るアクセシビリティ対応例
index.html
<nav class="pagination" aria-label="記事一覧のページ送り">
<a class="pagination__link" href="?page=1" aria-label="1ページ目へ移動">1</a>
<a class="pagination__link" href="?page=2" aria-label="2ページ目へ移動">2</a>
<span
class="pagination__link pagination__link--current"
aria-current="page"
aria-label="現在のページ 3"
>
3
</span>
<a class="pagination__link" href="?page=4" aria-label="4ページ目へ移動">4</a>
</nav>
style.css
.pagination__link:focus-visible {
outline: 3px solid #2563eb;
outline-offset: 2px;
}
このように、ラベルとフォーカス表示を加えるだけでも操作性はかなり向上します。つまり、アクセシビリティ対応は大がかりなものではなく、小さな意味付けと視覚差から始められます。
8. ページネーションUIで起きやすい問題
ページネーションUIは単純そうに見えますが、実務ではかなり失敗しやすい部品でもあります。よくあるのは、番号が多すぎて見づらい、現在ページが弱くて迷う、モバイルで窮屈、フィルター変更時に不自然なページへ残ってしまう、といった問題です。つまり、ページネーションUIの失敗は「機能がない」より「使えるが分かりにくい」という形で表れやすいです。
8.1 ページ番号が多すぎる問題
総ページ数が多いときに番号をそのまま全部出すと、視線が散りやすくなります。特に 30 ページ、50 ページ、100 ページのような一覧では、全部見せることは親切ではなく、むしろノイズになります。つまり、省略と圧縮が必要です。
8.2 現在ページが目立たない問題
現在ページの色差や枠線差が弱いと、利用者は今どこにいるか分からなくなります。これは検索結果や管理画面ではかなり大きなストレスになります。つまり、現在位置の視覚強調は必須です。
8.3 モバイルで横幅が足りない問題
デスクトップ用の番号列をそのままモバイルへ載せると、ボタンが詰まって押しづらくなります。場合によっては折り返して逆に読みにくくなることもあります。つまり、モバイルでは表示要素の再設計が必要です。
8.4 フィルターやソート変更時の混乱
検索条件を変えたのに前のページ番号を保持したままだと、空ページや不自然な位置に飛ぶことがあります。通常は条件変更時に 1 ページ目へ戻すのが分かりやすいですが、文脈によっては保持が自然な場合もあります。つまり、ページネーションUIは一覧の他の状態変化と必ず連動して考える必要があります。
おわりに
ページネーションUIを理解する本当の意味は、ページを分ける技術を知ることではありません。本質は、大量の一覧情報をどう整理し、利用者が今どこにいて、どう進み、どう戻れるかを自然に設計することにあります。つまり、ページネーションUIは単なる番号の並びではなく、一覧探索の体験を支える移動設計そのものです。
実務では、件数設計、番号の見せ方、URL 状態管理、サーバーサイドとクライアントサイドの切り分け、モバイル対応、アクセシビリティまで考える必要があります。また、無限スクロールや「もっと見る」と比較しながら、その一覧に最も合う移動手法を選ぶことも重要です。良いページネーションUIは、現在位置が分かりやすく、移動先が予測しやすく、情報量が整理されていて、狭い画面でも破綻しません。そして、その設計がしっかりしていると、一覧画面全体が「見やすい」だけでなく、「探しやすく、戻りやすく、迷いにくい」体験へ変わっていきます。
