使い分けが重要！ページネーションと無限スクロール【ページネーション編】

Webサイトを毎日更新し、コンテンツを追加し続けていくと、どうしてもページあたりの情報量が多くなってきます。

特に

• Webマガジンの記事一覧
• ECサイトの商品一覧

などがその最たる例ではないでしょうか。

このとき、ページネーションを使用するか無限スクロールにするかの判断が求められるわけですが、どちらが良い・悪いというものではありません。重要なのは使い分けです。

この使い分けについて、前編と後編の2回に分けてそれぞれ紹介していきます。前編の今回は「ページネーション編」として、その特徴と使用する際のポイントを見ていきましょう。

ページネーションとは

ページネーションとは、コンテンツを複数のページに分割するUIの様式のことです。日本語で「ページ送り」や「ページ割り」とも呼ばれています。

ページネーションは決して珍しいものではなく、みなさんが普段使っているGoogleの検索結果一覧もこのページネーションです。

Google Chrome 検索結果画面

ページネーションでは、Webサイト内の情報を複数のページに分割し、各ページへのリンクを配置するのが一般的なスタイルです。

現在では一昔前のように、低速回線、低スペック端末ではなくなったので、（たとえそれほど多くないデータ量でも）コンテンツの表示に時間がかかることはありませんが、ページネーションが広く採用されていたのはそうしたことが主な理由のひとつでした。ですから少々乱暴に言ってしまえばもう使う必要はないわけですが、それでもGoogleなど一部サイトで当たり前のように使われています。

その理由はユーザービリティへの配慮です。

ページネーションは、コンテンツのおおよその数や閲覧ページの位置が分かりやすく、ある程度ランダムに遷移できるため、ユーザーは自分自身でコントロールできていると感じやすいため、意図的にページネーションを使用しているというわけです。

ページネーションを使う際のポイント

ページネーションを使う際は以下の点に配慮して活用しましょう。

適切な情報量を設定する

一度に大量の情報を与えてしまうとユーザーは混乱します。探したいものがあっても、それを探す糸口が全くないため混乱してしまうのです。一度に全部ではなく、小鳥のえさのように少量ずつ分割し、小分けして与えることが大切です。

しかし、ただ単に小分けにすれば良いというわけではありません。適度な情報量がポイントです。というのもページを移動するたびにユーザーはページ送りのためのクリックボタンを押すわけで、それが頻繁にあったら嫌気がさしてしまうでしょう。

ですから、情報をあまりに小出しにしすぎてはいけません。

Google検索のように、10件表示or100件表示をユーザーが選択できるなど、そうした機能をつけておくとユーザーにやさしいですね。

Pixta（ https://pixta.jp/ ） 検索結果画面

リンクの大きさや間隔に注意する

リンクを設置する際はその大きさや間隔の空け方が重要です。とくにスマートフォンはそうですね。

タップ可能な領域が小さすぎたりリンク同士の間隔が狭すぎたりすると、誤タップにつながってしまいます。

間違って押して、自分が行きたいページではないページに飛ばされる、それが何回もあるとそれだけでストレスになります。

ページネーションはただでさえ小さめの数字が並ぶことになるため、こうした点をしっかり配慮し、リンクはある程度大きめに、間隔に余裕のあるボタン配置にしましょう。

Webサイトのアップ前に、テスト段階で実際の機器で試してみるのが一番です。

現在地がわかるような見た目にする

１，２，３，４，５…

といったように数字が並んでいくのがページネーションの特徴の一つですが、ユーザーがいま何ページ目にいるのかわかりやすい仕様にしないといけません。ページネーションのメリットの一つに「閲覧ページの位置が分かりやすい」ということがあるので、この特徴は大事に守っていきましょう。

ページネーションの利点が最大限活きるよう、現在見ているのが何ページ目なのか、ユーザーが一目でわかるようにしておくことが大切です。

まとめ

以上、ページネーション編でした。

ページネーションは馴染みのあるUI様式で何も考えずに使ってしまいそうですが、意外と奥が深いですね。

後編の【無限スクロール編】は次回を予定しています。お楽しみに。