ナビゲーション
ページネーション
Pagination
ページネーションとは、長いリストを一定の件数ずつ区切って複数のページに分け、番号や前へ・次へで行き来できるようにする方法です。
現在のページを強調し、両端では「前へ／次へ」が無効になります。
定義
ページネーションは、とても長いリストを一度に全部表示せず、一定の件数ずつ区切って複数の ページに分け、その間を行き来できるようにする方法です。ふつうはリストの下に 1、2、3 といった ページ番号と「前へ / 次へ」ボタンが並び、見たい位置へ一気に飛んだり、一つずつ移動したり できます。いま見ているページは番号を強調して表示するので、全体のどのあたりを見ているのかが いつでもわかります。本のページ番号と同じ仕組みなので、特別な説明がなくても誰でもすぐに 理解できます。検索結果や掲示板、テーブルのように項目が多い画面でよく目にする仕組みです。
なぜ重要か
どこまでも下に続く無限スクロールと違って、ページネーションは「何ページ中の何ページ目」という はっきりとした位置の感覚をユーザーに与えます。この感覚は思ったより大切です。全体の分量が つかめるので、あとどれくらいで終わるのか見当がつきますし、気に入った項目を見つけたら 「3ページ目にあった」と覚えておいて、あとから同じ場所へ正確に戻れます。アドレスにページ番号が 残れば、そのリンクを保存したり誰かに共有したりするのも簡単です。無限スクロールでは一度 通り過ぎた項目をもう一度探すのがとても難しく、終わりが見えないので疲れてしまいます。さらに ページ単位で必要な分だけ読み込むので画面が重くなりにくく、検索結果のように複数の区間を 見比べながら探す場面にもよく合います。
よくある間違い
- いま何ページ目にいるのかの強調が弱いケースです。現在のページ番号がほかの番号と同じように 見えてしまうと、ユーザーは自分の位置を見失い、同じページをもう一度押したり、まったく 違う場所へ移動してしまったりします。
- ページが数十、数百もあるのに番号をすべて並べてしまうケースです。番号が画面いっぱいに 広がると、肝心の前へ・次へや現在地まわりの番号が埋もれてしまい、操作がかえって面倒になり 視線も散らばってしまいます。
- 1ページに載せる件数を適切に決めていないケースです。少なすぎるとページを何度もめくることに なって煩わしく、多すぎるとページで分けた意味が薄れて画面がどこまでも長くなります。 コンテンツの性格に合った適切な件数を見つけることが大切です。
実務のヒント
- ページがとても多いときは、最初と最後、そして現在地まわりのいくつかだけを番号で見せて、 残りは … でまとめましょう。こうすればどこへでも一度に飛べるうえに、番号の列が画面を ごちゃごちゃさせず、すっきりと保てます。
- 現在のページは色や太さではっきりと強調し、前へ・次へのボタンはいつも同じ位置に置きましょう。 位置が固定されていれば、ユーザーはページをめくるたびにボタンを探し直すことなく、習慣的に 素早く移動できます。
- 最初のページでは前へボタン、最後のページでは次へボタンを押せないように薄く表示しましょう。 これ以上進む先がないという合図を出すことで、ユーザーが反応のないボタンをむだに押さずに すみます。