ナビゲーション
ページネーション
Pagination
ページネーションとは、長いリストを一定の件数ずつ区切って複数のページに分け、番号や前へ・次へで行き来できるようにする方法です。
定義
ページネーションは、とても長いリストを一度に全部表示せず、一定の件数ずつ区切って複数の ページに分け、その間を行き来できるようにする方法です。ふつうはリストの下に 1、2、3 といった ページ番号と「前へ / 次へ」ボタンが並び、見たい位置へ一気に飛んだり、一つずつ移動したり できます。いま見ているページは番号を強調して表示するので、全体のどのあたりを見ているのかが いつでもわかります。本のページ番号と同じ仕組みなので、特別な説明がなくても誰でもすぐに 理解できます。検索結果や掲示板、テーブルのように項目が多い画面でよく目にする仕組みです。
なぜ重要か
どこまでも下に続く無限スクロールと違って、ページネーションは「何ページ中の何ページ目」という はっきりとした位置の感覚をユーザーに与えます。この感覚は思ったより大切です。全体の分量が つかめるので、あとどれくらいで終わるのか見当がつきますし、気に入った項目を見つけたら 「3ページ目にあった」と覚えておいて、あとから同じ場所へ正確に戻れます。アドレスにページ番号が 残れば、そのリンクを保存したり誰かに共有したりするのも簡単です。無限スクロールでは一度 通り過ぎた項目をもう一度探すのがとても難しく、終わりが見えないので疲れてしまいます。さらに ページ単位で必要な分だけ読み込むので画面が重くなりにくく、検索結果のように複数の区間を 見比べながら探す場面にもよく合います。
よくある間違い
- いま何ページ目にいるのかの強調が弱いケースです。現在のページ番号がほかの番号と同じように 見えてしまうと、ユーザーは自分の位置を見失い、同じページをもう一度押したり、まったく 違う場所へ移動してしまったりします。
- ページが数十、数百もあるのに番号をすべて並べてしまうケースです。番号が画面いっぱいに 広がると、肝心の前へ・次へや現在地まわりの番号が埋もれてしまい、操作がかえって面倒になり 視線も散らばってしまいます。
- 1ページに載せる件数を適切に決めていないケースです。少なすぎるとページを何度もめくることに なって煩わしく、多すぎるとページで分けた意味が薄れて画面がどこまでも長くなります。 コンテンツの性格に合った適切な件数を見つけることが大切です。
実務のヒント
- ページがとても多いときは、最初と最後、そして現在地まわりのいくつかだけを番号で見せて、 残りは … でまとめましょう。こうすればどこへでも一度に飛べるうえに、番号の列が画面を ごちゃごちゃさせず、すっきりと保てます。
- 現在のページは色や太さではっきりと強調し、前へ・次へのボタンはいつも同じ位置に置きましょう。 位置が固定されていれば、ユーザーはページをめくるたびにボタンを探し直すことなく、習慣的に 素早く移動できます。
- 最初のページでは前へボタン、最後のページでは次へボタンを押せないように薄く表示しましょう。 これ以上進む先がないという合図を出すことで、ユーザーが反応のないボタンをむだに押さずに すみます。
AIに頼む
下に貼り付けるページネーションのコードで、番号を全部レンダリングしている部分を直して。最初・最後のページと、現在のページを基準に左右それぞれ1〜2個だけ番号を表示して、残りの区間は…（省略記号）で折りたたんで。現在のページは背景色や太さで他の番号とはっきり区別できるように強調して、最初のページでは「前へ」、最後のページでは「次へ」ボタンを aria-disabled で薄くして押せないようにして。変更後のコードと一緒に、ページの総数が5個・50個・500個のときのレンダリング例も出して。
[一覧の性格 — 例: テキスト中心の掲示板の投稿]をページで分けるページネーションを、最初から設計して。1ページあたりの項目数は性格に合わせて（情報密度の低いリストは10〜25個、カード・画像グリッドは12〜24個くらい）、理由と一緒に提案して。一覧の下に番号＋前へ／次へボタンを配置して、前へ・次へはページを切り替えても常に同じ位置に固定して、ユーザーがボタンを探し直さなくて済むようにして。現在のページは色と太さで強調して、ページが増えたときに備えて、最初・最後・現在の周りだけ表示して残りは…で折りたたむ構造まで含めて。
下に貼り付けるページネーションは、ページを切り替えてもアドレスがそのままだから、リンク共有・ブックマーク・再読み込みで同じページを復元できない。現在のページ番号を ?page=N のクエリパラメータで URL に反映して、最初に読み込まれるときにその値を読み取って、そのページをそのまま表示するように直して。page の値がない場合や、全体のページ範囲を外れている場合は、1ページ目に安全にフォールバックして。ページ移動のときにブラウザの戻るボタンでも直前のページに戻れるように、history と同期して。