ページネーションを考える上での基礎知識＆便利なプラグインまとめ｜レバテッククリエイター

クリエイターのフリーランス求人・案件募集
Tips
ページネーションを考える上での基礎知識＆便利なプラグインまとめ

2016年9月08日

ユーザビリティに優れたページネーションの作り方

ページネーションを考える上での基礎知識＆便利なプラグインまとめ

ページネーションはユーザビリティを考える上で外すことができない要素です。
そこで今回は、前半はページネーションを決める上で考慮しておくポイントの解説、後半はページネーションの実装に役立つjQueryプラグインを5つご紹介します。
今までページネーションにあまりこだわっていなかった方は、本記事を機会にページネーションのユーザビリティを考えてみてください。

ページネーションのポイント

ポイント（1）1ページは長すぎず短すぎず

1ページが長すぎる、特に画像が多い記事は読み込み速度が遅くなります。
読み込み時間が長くなるとページが表示される前に離脱するユーザーが増えるため、長い記事は分割を考える必要があります。
しかし、あまり短く分割しすぎると今度はページ送りのストレスが増えてしまうという問題が生じます。
そのため、ユーザーが読み込み待ちで離脱せず、かつページ送りでストレスがかからないようにちょうど良い長さに調整しましょう。

ページを分割するとPVが増えますが、PV稼ぎのためにページを分割するのは本末転倒です。
ユーザーの利便性を考えてページネーションを実装し、PVではなく滞在時間や読了率を重視しましょう。

ポイント（2）表示するページ数を制限する

ユーザーが一気に数ページ前後に飛べるようにしたり、検索エンジンのクローラーが巡回しやすくするために、各ページへのリンクを設置するのはページネーションの常套テクニックです。
このとき、数ページであればすべてを表示させればよいですが、数十ページにも及ぶような場合は、ページ数の表示を制限するのが一般的です。
たとえばGoogleの検索結果画面では10ページまでページネーションが表示されており、最後尾の数字をクリックすると4ページずつページネーションのリンクが増えていきます。

画面サイズが小さいスマートフォンでは、10ページ分のページネーションでも多すぎるケースがあるため、デザインも考慮しながら適切な件数に調整するとよいでしょう。
再びGoogleの検索結果画面を例に挙げると、スマートフォン版では前後のページヘのリンクが表示されるだけになっています。

ポイント（3）要素をクリック・タップしやすい大きさにする

ページネーションのボタンやリンクなどの要素が小さいと、誤タップや誤クリックの原因になります。
特にスマートフォンやタブレットなどのモバイル端末は画面サイズが小さいため、誤タップが起こりやすいです。
誤クリックや誤タップをしてしまわないように、クリック / タップできる要素を大きめにしましょう。

ポイント（4）誤クリック・誤タップしないように要素同士の間隔を空ける

ページネーションの要素の間隔を詰めすぎていると、誤クリックや誤タップで意図しないページを開いてしまい、ユーザーにストレスがかかります。
特にモバイルサイトでページネーションを実装する場合は、誤タップしないように要素同士の間隔を十分に空けましょう。

ポイント（5）前後のページに遷移できるボタンを配置する

数字のみ表示するページネーションだと、一ページずつページ送りしたいユーザーにとって不便なため、数字に加えて前後のページに遷移できるボタンも配置した方が親切です。
日本語なら「前へ」「次へ」、英語なら「Prev」「Next」などで表示します。

ポイント（6）現在ページが一目でわかるようにデザインする

https://creator.levtech.jp/tips

2ページ以上ある場合、ユーザーがいま見ているページを一目で認識できるようなデザインにしましょう。
「数字に背景色をつける」「数字の色を変える」「数字を大きく表示する」といった方法があります。

ポイント（7）rel=”next” と rel=”prev” の指定

Googleは、複数ページにまたがる記事やコンテンツ向けに「rel=”next”」と「rel=”prev”」というHTML属性をサポートしています。

記事やコンテンツが複数ページにまたがる場合、検索エンジンはどのページが最優先であるかの判断を誤ることがあり、ユーザーにとって最適なページが表示されない場合があるためです。
「rel=”next”」と「rel=”prev”」を指定することにより、最も重要性・利便性の高いページ、通常は最初のページを表示させることができます。

実装方法や注意点は、Googleウェブマスター公式ブログに掲載されています。

複数ページにまたがる記事やコンテンツをお持ちの方へ。rel=”next” と rel=”prev” を使用したページネーションのご紹介 / Googleウェブマスター向け公式ブログ

ページネーションのプラグイン

simplePagination.js

http://flaviusmatis.github.io/simplePagination.js/

名前の通り、シンプルなページネーションが実装できるJQueryプラグインです。
デザインは「light-theme」「dark-theme」「compact-theme」の3種類から選べます。
オプションが充実しているためカスタマイズしやすいです。
Bootstrapにも対応しています。

jQuery Twbs Pagination Plugin

http://www.jqueryscript.net/other/Simple-Customizable-Pagination-Plugin-with-jQuery-Bootstrap-Twbs-Pagination.html

こちらもシンプルなデザインのページネーションプラグインです。
Bootstrapにも対応しています。

Pagination.js

http://paginationjs.com/

シンプルながらカスタマイズがしやすいページネーションプラグインです。
サンプルがたくさんありますので、サイトに合ったページネーションを探してみてください。

Extreme Makeover: jPaginator CSS3 Edition

http://webdesign.tutsplus.com/tutorials/extreme-makeover-jpaginator-css3-edition--webdesign-3620

CSS3でリッチに装飾したページネーションプラグインです。
スライダーでページ数の表示範囲をコントロールできる機能や、「前へ」「次へ」ボタンがマウスオーバーで動く機能が備わっています。

jqPagination

http://beneverard.github.io/jqPagination/

トータルページ数と現在のページ数で表示するプラグインです。
順番にページ遷移しなければならないのが長所でもあり短所でもあります。
ページを飛ばさず順番に読んで欲しい記事に使えそうです。

まとめ

ページネーションを実装する際、ユーザーの利便性を考えることを疎かにしてはいけません。
デザインや開発上の都合があると思いますが、ユーザーがストレスなく操作できるページネーションであることがベストです。
たかがページネーションと軽視せず、可能な限り使いやすいUIを実現しましょう。

クリエイターの求人・案件探しは、
レバテッククリエイターへ

レバテッククリエイターでは、フリーランスや派遣で働くクリエイターを対象とした求人・案件の提案サービスを行っています。Web業界やゲーム業界を中心に年間1000件以上（※）の取り扱いがあり、様々なスキルを活かせる案件の提案が可能です。
※2016年度実績自社調べ
求人・案件探しの相談をする

また、「今よりも年収をアップさせたい」「トレンドに敏感な現場でWebデザインスキルを磨きたい」などの理由からフリーランスへの転向を検討している方には、無料の個別相談会も実施していますのでお気軽にご相談ください。業界に精通したプロのコーディネーターが、一人ひとりの希望や状況に合わせて丁寧にサポートします。

「個別相談会」に申し込む

役に立った／参考になったと思ったら、シェアをお願いします。