独創的なページネーションのコードスニペット８選

ページネーションはデザインの中での必需性が低く、見過ごされることが多いもののひとつです。しかしブログやコンテンツの多いサイトでは、ページネーションはナビゲーションにおいて重要な意味を持ちます。サイトのページネーションが上手く作られていると、ユーザーはサイトを深くまで探求するようになるでしょう。

信じられないかもしれませんが、ページネーションのレベルを次のステップまで引き上げるデザイナーたちがいます。ここではWebサイト改善に役立つ、独創的なページネーションのコードスニペットを見ていきましょう。

シンプルで直観的なホバー効果

基本的なホバー効果によって標準的なページネーションは大幅に改善されます。カーソル移動に合わせて滑らかに下線が移動するため、より直観的な体験ができ、メニュー全体も非常に読みやすいです。これはユーザーを助けるシンプルな方法です。

See the Pen Line Pagination with Hover (PureCSS) by MARK (@defaultclass) on CodePen.

ページ番号の自動カウント

大量のページを処理するメニューは、ページネーションの中でも最もフラストレーションが溜まるものです。このコードスニペットではjQueryを使用して、自動で隣接するページ番号を表示するように調整しています。サイト内を深くまで利用するための最も簡単な方法です。

See the Pen jQuery Pagination Example (twbs-pagination) by Simon Codrington (@simoncodrington) on CodePen.

あらゆるものを詰め込む

これはとても興味深いコンセプトです。レスポンシブであると同時にアクセシビリティの両面からデザインされていて、キーボードでの操作機能など、いくつかの方法で操作可能なUIになっています。ページ番号の上に表示されているタイムラインのようなバーは、現在どのページにいるのかを明確にラベル付けし、利用可能なページ全体の概要を示します。

See the Pen Pagination by Simon Goellner (@simeydotme) on CodePen.

イエティに助けてもらう

よい助けを受けるのは難しいと言われます。しかしこのコードスニペットではページ番号をクリックするときに、イエティの手助けを受けられます。イエティはあなたのモチーフに合わないかもしれませんが、面白さや驚きの要素をいかに加えることができるかを示すひとつの例です。

See the Pen Yeti Hand Pagination by Darin (@dsenneff) on CodePen.

モバイル用のページネーション

小さな画面では項目が小さすぎて読みにくいづらいことがよくあり、ページネーションが非常に難しいです。 このコードスニペットは、モバイルデバイスに最適なページネーションになっています。ナビゲーションが垂直方向に伸びるため、各項目が大きく表示され、モバイルユーザーは目を細めたり拡大することなくページ番号を確認し移動できます。

See the Pen Responsive Pagination by Scott Carver (@scottcarver) on CodePen.

ページ番号を使用しない

ときには各項目にページ番号を付ける必要がないこともあります。この例では、数字でなくドットを使用することでデザイン要素を最小限に抑えています。これはスライドショーや複数のコンテンツパネルへの移動に適しています。

See the Pen Infinite Pagination by Mariusz Dabrowski (@MarioD) on CodePen.

モバイルで操作しやすい

ユーザーの操作に対応して動くものがモバイルのUIとしては最適です。このコードスニペットでは、ユーザーが前後のアイテムにスワイプで移動できるようにページネーションしています。このちょっとした利便性が、ユーザビリティにおけるすべての違いをつくりだします。

See the Pen Swiper custom pagination by Pavel Zakharoff (@ncer) on CodePen.

ページ割り/無限スクロールコンボ

デザイナーは、ページネーションの代わりに無限スクロールをよく使用します。このコードスニペットでは、ページネーションと無限スクロールの両方を組み合わせています。

無限スクロールのときには、長いリストの中を戻って１つの項目を見つけるのが難しくフラストレーションを感じます。 このスクリプトでは、一定の間スクロールするとナビゲーションに新しいページ番号を追加することで前の項目に戻るのが少し簡単になっています。

See the Pen Infinite Scroll + Pagination by Tim Severien (@timseverien) on CodePen.

ページネーションをさらに進める

素晴らしいWebデザインは、ページを構成するさまざまな要素を考慮します。ここで示した例は、ページネーションのデザインによって、Webサイトのさらなる改善を目指したものです。ここからインスピレーションを得て、見た目も機能も良いページネーションにしましょう。