6
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

太古の時代から幅を利かせている1,2,3...10のようなページネーションを撲滅したい

6
Last updated at Posted at 2020-07-19

Webサイトのページネーションというと、どのようなUIを思い浮かべますか?

昔から様々なWebページで登場する下記のようなページネーションを思い浮かべた方が多いのではないでしょうか。
前へ・次へのリンクが両サイドにあり、あいだにページ番号のリンクがついているものです。
スクリーンショット 2020-07-14 22.35.37.png

PCのGoogle検索も下記のようなページネーションですね。
スクリーンショット 2020-07-14 22.33.54.png

あとページ数が多い場合は途中のページ番号を省略したり、途中から単位が変わったり・・・
スクリーンショット 2020-07-14 23.00.42.png

このタイプのページネーションについて考えてみる

このタイプのページネーションを見かけたら、ページ番号リンクのユースケースを考えてみてください。

数字のリンクはどういうときに使いたくなるんだろう?

1ページ目からいきなり5ページ目に飛びたいときってどういうときだろう?

ページ遷移するとしても順番に見るから「前へ」 / 「次へ」だけあればよさそうだよなー

・・・と、このようにぱっとメリットが思いつかないことが多くないですか?

『まあ、同じようなページネーションよく見かけるし明確なメリットは思いつかないけど使う人がいるかもしれない。ページ番号リンクつけといて損はないでしょ?』

いいえ、そんなことはありません。
利用者・実装者、どちらの観点でもデメリットがあります。

利用者の観点では、使わないものは画面に表示せずシンプルにしたほうが操作を迷ったり誤操作することがなくなり使いやすくなります。

実装者の観点では、このページネーションは用途が思い浮かばない割に実装コスト高いです。
また、ページネーションに限らずですが、どんなものでも実装するとそれ以降メンテナンスコストがかかるようになります。
「使わないものは実装しない」
これがコードを健全に保つ一番の方法です。

ではどうするか?

ページ番号リンクのユースケースが思い浮かばないのであれば、素直に「前へ」 / 「次へ」だけにすれば良いと思います。

あとは無限スクロール(下までスクロールしたら次のページが自動で読み込まれて追加表示されるもの)という選択肢もあります。
SNSなどユーザーが連続して読みたい場合はページリンクをクリックする手間がなくなるので無限スクロールのほうが相性が良いです。
何でもかんでも無限スクロールにすればよいというわけではないですが候補に入れましょう。

もしどうしてもページ番号リンクが必要だと言われたときも、必要な理由を深堀りしてみましょう。
深堀りすると、本当に必要なのかが見えてきます。

『ページ番号リンクがあると現在のページがわかっていいよね』
もし現在のページを知りたいだけであれば、リンクにせずに現在のページ番号を表示するだけで良いです。

『あいうえお順に並んでいて、「は」行は5ページ目くらいから始まると覚えているから数字のリンクを使うんだよね』
頭文字で絞り込めるようにしてあげましょう。
ページ番号リンクを活用している理由の大半は絞り込み機能をつけることで解決できると思います。
(絞り込みできないから何ページ先くらいに出てくるか覚えちゃったパターン)

深堀りしていけばページ番号リンクが本当に必要なのか?検索機能など真に必要な機能がないから仕方なくページ番号リンクを使っているではないか?などが見えてきます。

なんでもかんでもページ番号リンクの実装は今後一切やりませんと言っているわけではありません。
必要な理由があるのであればページ番号リンクを実装すればいいと思います。
ただ、このタイプのページネーションは必要なユースケースが思いつかないのによくあるUIだからという理由だけで出てくることが多いと感じたのでこの記事を書きました。

ページネーションに限らずですが、よく見かけるという理由だけで置かれている無駄なUIを見かけたら必要な理由をきちんと洗い出し、本当に必要なものだけ実装するようにしましょう。

6
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
6
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?