参考になるSEO2016年9月08日ユーザビリティに優れたページネーションの作り方ページネーションを考える上での基礎知識&便利なプラグインまとめ0ページネーションはユーザビリティを考える上で外すことができない要素です。そこで今回は、前半はページネーションを決める上で考慮しておくポイントの解説、後半はページネーションの実装に役立つjQueryプラグインを5つご紹介します。今までページネーションにあまりこだわっていなかった方は、本記事を機会にページネーションのユーザビリティを考えてみてください。「自分のスキルの相場をしりたい」と思う方へ簡単3ステップ!職種や経験年数をポチポチ選ぶだけで、あなたのフリーランスとしての単価相場を算出します!単価相場算出ページへ※相場算出に個人情報の取得はおこないません。﻿ページネーションのポイントポイント(1)1ページは長すぎず短すぎず1ページが長すぎる、特に画像が多い記事は読み込み速度が遅くなります。読み込み時間が長くなるとページが表示される前に離脱するユーザーが増えるため、長い記事は分割を考える必要があります。短く分割しすぎると今度はページ送りのストレスが増えてしまうという問題が生じます。そのため、ユーザーが読み込み待ちで離脱せず、かつページ送りでストレスがかからないようにちょうど良い長さに調整しましょう。ページを分割するとPVが増えますが、PV稼ぎのためにページを分割するのは本末転倒です。ユーザーの利便性を考えてページネーションを実装し、PVではなく滞在時間や読了率を重視しましょう。ポイント(2)表示するページ数を制限するユーザーが一気に数ページ前後に飛べるようにしたり、検索エンジンのクローラーが巡回しやすくするために、各ページへのリンクを設置するのはページネーションの常套テクニックです。このとき、数ページであればすべてを表示させればよいですが、数十ページにも及ぶような場合は、ページ数の表示を制限するのが一般的です。Googleの検索結果画面では10ページまでページネーションが表示されており、最後尾の数字をクリックすると4ページずつページネーションのリンクが増えていきます。画面サイズが小さいスマートフォンでは、10ページ分のページネーションでも多すぎるケースがあるため、デザインも考慮しながら適切な件数に調整するとよいでしょう。Googleの検索結果画面を例に挙げると、スマートフォン版では前後のページヘのリンクが表示されるだけになっています。ポイント(3)要素をクリック・タップしやすい大きさにするページネーションのボタンやリンクなどの要素が小さいと、誤タップや誤クリックの原因になります。スマートフォンやタブレットなどのモバイル端末は画面サイズが小さいため、誤タップが起こりやすいです。タップできる要素を大きめにしましょう。ポイント(4)誤クリック・誤タップしないように要素同士の間隔を空けるページネーションの要素の間隔を詰めすぎていると、誤クリックや誤タップで意図しないページを開いてしまい、ユーザーにストレスがかかります。モバイルサイトでページネーションを実装する場合は、誤タップしないように要素同士の間隔を十分に空けましょう。ポイント(5)前後のページに遷移できるボタンを配置する数字のみ表示するページネーションだと、一ページずつページ送りしたいユーザーにとって不便なため、数字に加えて前後のページに遷移できるボタンも配置した方が親切です。日本語なら「前へ」「次へ」、英語なら「Prev」「Next」などで表示します。ポイント(6)現在ページが一目でわかるようにデザインするhttps://creator.levtech.jp/tips2ページ以上ある場合、ユーザーがいま見ているページを一目で認識できるようなデザインにしましょう。「数字に背景色をつける」「数字の色を変える」「数字を大きく表示する」といった方法があります。「rel=”prev”」というHTML属性をサポートしています。記事やコンテンツが複数ページにまたがる場合、検索エンジンはどのページが最優先であるかの判断を誤ることがあり、ユーザーにとって最適なページが表示されない場合があるためです。「rel=”prev”」を指定することにより、最も重要性・利便性の高いページ、通常は最初のページを表示させることができます。実装方法や注意点は、Googleウェブマスター公式ブログに掲載されています。複数ページにまたがる記事やコンテンツをお持ちの方へ。Googleウェブマスター向け公式ブログページネーションのプラグインsimplePagination.jshttp://flaviusmatis.github.io/simplePagination.js/名前の通り、シンプルなページネーションが実装できるJQueryプラグインです。デザインは「light-theme」「dark-theme」「compact-theme」の3種類から選べます。オプションが充実しているためカスタマイズしやすいです。Bootstrapにも対応しています。Pluginhttp://www.jqueryscript.net/other/Simple-Customizable-Pagination-Plugin-with-jQuery-Bootstrap-Twbs-Pagination.htmlこちらもシンプルなデザインのページネーションプラグインです。Bootstrapにも対応しています。Pagination.jshttp://paginationjs.com/シンプルながらカスタマイズがしやすいページネーションプラグインです。サンプルがたくさんありますので、サイトに合ったページネーションを探してみてください。Editionhttp://webdesign.tutsplus.com/tutorials/extreme-makeover-jpaginator-css3-edition--webdesign-3620CSS3でリッチに装飾したページネーションプラグインです。スライダーでページ数の表示範囲をコントロールできる機能や、「前へ」「次へ」ボタンがマウスオーバーで動く機能が備わっています。jqPaginationhttp://beneverard.github.io/jqPagination/トータルページ数と現在のページ数で表示するプラグインです。順番にページ遷移しなければならないのが長所でもあり短所でもあります。ページを飛ばさず順番に読んで欲しい記事に使えそうです。まとめページネーションを実装する際、ユーザーの利便性を考えることを疎かにしてはいけません。デザインや開発上の都合があると思いますが、ユーザーがストレスなく操作できるページネーションであることがベストです。たかがページネーションと軽視せず、可能な限り使いやすいUIを実現しましょう。最後に簡単4ステップ!スキルや経験年数をポチポチ選ぶだけで、あなたのフリーランスとしての単価相場を算出します!単価相場算出ページへ※相場算出に個人情報の取得はおこないません。クリエイターの求人・案件探しは、レバテッククリエイターへレバテッククリエイターでは、フリーランスや派遣で働くクリエイターを対象とした求人・案件の提案サービスを行っています。Web業界やゲーム業界を中心に年間1000件以上(※)の取り扱いがあり、様々なスキルを活かせる案件の提案が可能です。自社調べ求人・案件探しの相談をするまた、「今よりも年収をアップさせたい」「トレンドに敏感な現場でWebデザインスキルを磨きたい」などの理由からフリーランスへの転向を検討している方には、無料の個別相談会も実施していますのでお気軽にご相談ください。業界に精通したプロのコーディネーターが、一人ひとりの希望や状況に合わせて丁寧にサポートします。「個別相談会」に申し込む役に立った/参考になったと思ったら、シェアをお願いします。EffectsMayaInDesignDreamweaverレバテッククリエイターおすすめコンテンツレバテッククリエイターはWeb・ゲーム業界に特化したデザイナー・クリエイター向けの求人・案件提案サービスです。us運営会社ヘルプフリーエンジニア案件エンジニア・クリエイター転職ハイクラス転職ITエンジニア向け新卒就活支援サービス案件の提案をご希望の方はお気軽にご相談下さい。無料サポート登録レバテック株式会社は、「プライバシーマーク」使用許諾事業者として認定されています。