ブログの記事一覧やネットショップの商品一覧の一番下に、「1 2 3 … 次へ」と並んだページの番号を見たことはありませんか。
この部品は「ページネーション」と呼ばれ、たくさんの情報を何ページかに分けて見せるときに欠かせませんが、現在のページが分かりにくかったり、番号が小さくて押しにくかったりすると、とたんに使いづらくなります。
この記事では、ページネーションとは何か、どんなパーツでできているか、「もっと見る」ボタンや無限スクロールとの使い分け、スマホでの扱い方を、見本を使って初心者向けに解説します。
この記事の見本は、サイトの配色ではなく、架空のサービスの配色(青系)で描いています。見本の部品は押しても動きません。
ページネーションの基本
まずは、ページネーションとは何か、どんなパーツでできているかを押さえましょう。
ページネーションとは
ページネーションとは、たくさんの記事や商品、検索結果を何ページかに分けて表示し、ページの番号や「前へ」「次へ」で行き来できるようにする部品のことです。
英語の「pagination(ページ分け)」から来た言葉で、「ページャー」「ページ送り」と呼ばれることもあります。
100件の記事を1ページに全部並べると、ページの表示が重くなるうえ、見る人は自分がどのあたりを見ているのか分からなくなります。
10件ずつ10ページに分けてページネーションを付ければ、1ページの量がほどよくなり、「全部で10ページのうち3ページ目」と現在地もつかめます。
Googleの検索に関する公式ドキュメントでも、ページ分けの長所として、全体の長さと現在の位置が分かることを挙げています(ページ分け、段階的ページ読み込み、それらの Google 検索に対する影響 | Google 検索セントラル)。
ページネーションの構成
ページネーションは、主に「前へ・次へ」「ページ番号」「現在のページ」「省略の記号」の4つのパーツでできています。
- 前へ・次へ
1つ前・1つ後ろのページに移動するボタンです。
順番に読み進める人がいちばんよく使います。 - ページ番号
押すとそのページへ直接移動できる番号です。
「3ページ目だけもう一度見たい」といった使い方ができます。 - 現在のページ
いま見ているページの番号です。
ほかの番号と見た目をはっきり変えて、現在地を示します。 - 省略の記号(…)
ページ数が多いとき、途中の番号を省いたことを示します。
見本では、現在のページの「3」だけを青で塗りつぶし、ほかの番号は枠線だけにして区別しています。
なお、デジタル庁デザインシステムでは、前後への移動を中心にした似た部品を「ページナビゲーション」と呼び、「13/24」のような件数の表示と組み合わせた形も紹介しています(ページナビゲーション|デジタル庁デザインシステム)。
「もっと見る」・無限スクロールとの使い分け
たくさんの情報を見せる方法は、ページネーションのほかに「もっと見る」ボタンと無限スクロールがあり、見る人の目的に合わせて選びます。
「もっと見る」ボタンは、押すと同じページの下に続きが追加される方法、無限スクロールは、ページの下まで読むと自動で続きが追加される方法です。
例えば、レビューが10件並んだ下に「もっと見る」ボタンがあれば、押したときだけ11件目からの続きが同じページの下に追加されます。押さなければ続きは出ません。
無限スクロールは、SNSのタイムラインのように、下までスクロールすると何も押さなくても次の投稿が読み込まれ、終わりなく続いていく仕組みです。
先ほどのGoogleのドキュメントで挙げられている長所・短所をもとに整理すると、次のようになります。
| 方法 | 長所 | 短所 | 向いている場面 |
|---|---|---|---|
| ページネーション | 全体の量と現在地が分かる。特定のページに戻りやすい | ページを移動する手間がかかる | 検索結果、商品一覧、記事一覧など、比べたり探したりする一覧 |
| 「もっと見る」ボタン | 1つのページで続けて見られる。見る人が自分のペースで続きを出せる | 件数がとても多い一覧には向かない | 関連記事、レビュー、ほどほどの件数の一覧 |
| 無限スクロール | スクロールするだけで次々に見られる | 終わりが見えず、スクロールに疲れやすい。ページの一番下(フッター)にたどり着きにくい | SNSのタイムラインのように、流し見して楽しむ内容 |
見る人が「探す・比べる・あとで戻る」ことが多い一覧なら、現在地が分かるページネーションが向いています。
一方、目的のものを探すより、流れてくる内容を眺めること自体が目的の画面なら、無限スクロールのほうが手間がかかりません。
ページネーションのデザインのコツ
ここからは、ページネーションを見やすく押しやすくするためのデザインのコツを見ていきます。
現在のページをはっきり示す
ページネーションでいちばん大切なのは、「いま何ページ目を見ているか」がひと目で分かることです。
現在のページが分からないと、次にどの番号を押せばいいのか判断できないからです。
文字の色を少し変えるだけでは気づかれにくいので、背景を塗りつぶす、太字にするなど、色以外の違いも組み合わせましょう(色だけに頼らない考え方は色だけに頼らないデザインとは?で解説しています)。
番号は指で押せる大きさと間隔にする
ページ番号は1〜2文字しかないため、文字の大きさのままだと押せる範囲がとても小さくなってしまいます。
番号の周りに余白を付けて、押せる範囲を四角いボタンのように広げ、番号同士の間も少し空けましょう。
Googleが公開しているAndroidのアクセシビリティ(障害の有無や年齢にかかわらず使いやすくすること)のヘルプでは、タップする対象を48×48dp以上にし、対象同士の間に8dp以上の余白を設けることを勧めています(タップ ターゲットのサイズ – Android のユーザー補助機能 ヘルプ)。
dpはAndroidの画面で使う大きさの単位で、画面の細かさに関係なくほぼ同じ見た目の大きさになるように調整されています。
Webのガイドラインのひとつ、WCAG 2.2でも、押す対象は最低でも24×24 CSSピクセル(画面上の見た目の大きさと考えてよい単位)にするか、ほかの対象と十分な間隔を取ることを求めています(WCAG 2.2 達成基準2.5.8 ターゲットのサイズ(最低限)・WAIC日本語訳)。
dpやCSSピクセルといった単位の細かい違いは、覚えなくても構いません。スマホで、指で迷わず一度で押せる広さが必要だと覚えておけば十分です。
NGの見本は、文字だけが並んでいるため押せる範囲が狭く、現在のページも色の差がわずかで、どこを見ているのか分かりません。
OKの見本では、番号ごとに枠を付けて押せる範囲を広げ、現在のページを塗りつぶしと太字で目立たせています。
押せる範囲の広げ方はボタンの内側の余白とは?、押せるもの同士の間隔はUIコンポーネントの間隔とは?もあわせて参考にしてください。
ページ数が多いときは番号を省略する
ページ数が多いときは、すべての番号を並べず、最初と最後、現在のページの前後だけを表示して、あいだを「…」で省略します。
番号を全部並べると、番号の列が何行にも折り返してしまい、どれが現在のページなのか探しにくくなるからです。
Googleのドキュメントでも、見る人がどこから始まるのか分かるよう、最初のページへのリンクを用意することを勧めています。
NGの見本では、番号が2行に折り返し、現在のページを探すのに時間がかかります。
OKの見本では、表示する番号を絞ったことで1行におさまり、「全部で20ページのうち10ページ目」ということもすぐ分かります。
スマホでは番号をさらに減らす
スマートフォンでは画面の幅が狭いので、表示する番号をさらに減らすか、「前へ」「次へ」と「3 / 20」のような現在地の表示だけにします。
番号を詰め込むと1つ1つが小さくなり、押し間違いが起きやすくなるからです。
この形なら、番号を押して直接移動することはできませんが、ボタンが大きく押しやすく、現在地も分かります。
特定のページへ直接移動したい人が多い一覧なら、現在のページの前後1つずつだけ番号を残すなど、見る人の使い方に合わせて調整しましょう。
最初と最後のページでの「前へ」「次へ」
1ページ目には「前へ」、最後のページには「次へ」の行き先がないので、どう見せるかを決めておく必要があります。
デジタル庁デザインシステムのページナビゲーションでは、前後のページがない場合はボタンを無効化(押せない見た目にすること)せず、非表示にするよう指示しています。
一方で、ボタンを消すと番号の並びの位置がずれてしまうため、押せない見た目(薄い色)にして残すデザインもよく見られます。
どちらを選ぶ場合も、押しても何も起きないボタンが押せそうに見えることだけは避け、サイトの中でそろえておきましょう。
コーディングでページネーションを作るとき
ここからは、Webサイトを自分でコーディング(HTMLなどのコードを書いてページを作ること)する人向けの補足です。
コードを書かない人は、読み飛ばして「実践のポイント」へ進んでも構いません。
ページネーションは、ナビゲーションのまとまりを表す<nav>要素で囲み、現在のページにはaria-currentという属性を付けて、読み上げソフトにも「いまのページ」だと伝えます(MDN: <nav>、MDN: aria-current)。
<nav aria-label="ページ送り">
<a href="/page/2/">前へ</a>
<a href="/page/2/">2</a>
<a href="/page/3/" aria-current="page">3</a>
<a href="/page/4/">4</a>
<a href="/page/4/">次へ</a>
</nav>また、Googleのドキュメントでは、検索エンジンが各ページを正しく扱えるよう、ページごとに別々のURLを割り当てることを勧めています。
実践のポイント
ページネーションのデザインで陥りやすい失敗と、よくある疑問をまとめます。
注意点・よくある間違い
- 現在のページを、ほかの番号と色が少し違うだけで示してしまうことがあります。
塗りつぶしや太字など、色以外の違いも加えてはっきり区別しましょう。 - 番号の文字の部分しか押せず、少しずれると反応しないことがあります。
番号の周りの余白まで押せる範囲に含めましょう。 - 1ページの件数が少なすぎて、何度もページを移動させてしまうことがあります。
ページを分けるのは、1ページに並べると多すぎるときだけにしましょう。 - ページを移動したときに、新しいページの途中や一番下から表示されてしまうことがあります。
例えば、2ページ目の一番下で「次へ」を押したのに、3ページ目が下のほうから表示されると、3ページ目の最初の商品を見落としたり、どこにいるのか分からなくなったりします。
ページを移動したら、新しいページの一覧の先頭から見られるようにしておきましょう。
よくある質問
- Q. 1ページに何件ずつ表示すればいい?
A. 決まった件数はありません。
1件あたりの情報量や、見る人が比べながら探すかどうかによって変わるので、スマホで1ページをスクロールしたときに長すぎないかを確かめながら決めましょう。 - Q. ページネーションはどこに置けばいい?
A. 一覧を最後まで見た人が次に進めるよう、一覧のすぐ下に置くのが基本です。
検索結果のように件数が多い一覧では、一覧の上にも置いて、すぐにページを移れるようにすることもあります。 - Q. 「前へ」「次へ」は文字と矢印のどちらがいい?
A. 矢印だけでも伝わることは多いですが、「前へ」「次へ」の文字を添えると、より確実に伝わります。
矢印だけにする場合も、読み上げソフト向けに「前のページ」「次のページ」と分かる名前を付けておきましょう。
まとめ
ページネーションとは、たくさんの情報を何ページかに分け、ページ番号や「前へ」「次へ」で行き来できるようにする部品で、全体の量と現在地が分かるのが強みです。
現在のページを色以外の違いでもはっきり示し、番号を指で押せる大きさにして、ページ数が多いときやスマホでは番号を省略することがポイントです。
まずはよく使うネットショップやブログの一覧をスマホで開き、ページネーションの番号が押しやすいか、いま何ページ目かがすぐ分かるかを確かめてみてください。
