ページネーションをデザイン性高く彩るコードスニペット8選

みなさんはページネーション（pagination）をご存知ですか？

ページネーションとは、日本語で「ページ割り」を意味する用語です。その重要性は見過ごされがちですが、非常に重要なデザインの一要素です。特に、コンテンツの多いWebサイトやブログの場合、サイト内でのスムーズなナビゲーションにページネーションは不可欠です。ユーザーがサイト内を探索しやすいように、最適なページネーションのデザインを考えましょう。

この記事では、ページネーションに使えるクリエイティブなコードスニペットを紹介します。

1. シンプルで動きのあるホバーエフェクトを

ホバーエフェクトは、シンプルながらもページネーションのデザイン性を一気に向上させてくれます。カーソルの動きに合わせてメニューの下線が移動し、動きのあるUXを生み出してくれます。シンプルで非常に読みやすいのも好印象です。

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

2. ページ数を自動でカウントする

コンテンツによっては、多くのページをメニューで管理しなければなりません。jQueryを使用したこのスニペットを使えば、メニューをクリックする度に、それに合わせてページ数が自動で表示されます。

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

3. スライドバーを活用する

面白いコンセプトを用いているがこちらのスニペット。レスポンシブかつ誰にでも使いやすいデザインで、スライドバーだけでなく、キーボードでもナビゲーションできます。スライドバーはタイムラインのようにも見えるので、サイト全体の情報量を伝え、そのうえで今どこにいるのか、ユーザーが一目でわかるようにデザインされています。

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

4. キャラクターを使用して遊び心満載に

このスニペットでは、ページ番号をクリックする度に巨人の手が出てきてページ数を変更してくれます。もちろん必ずしも巨人の手である理由はないので、あなたのWebサイトのテーマやスタイルに合わせてカスタマイズし、ワクワク感をプラスしてみましょう。

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

5. モバイルにも対応したデザインを

モバイルなど小さなスクリーンでは、小さくて読みにくいページネーションは非常に使いにくいものです。このスニペットは、ひとつひとつのアイテムが大きめかつ縦方向にデザインされており、モバイルでの使用に最適化されています。

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

6. そもそも番号を使わない

ページネーションだからといって、必ずしも番号を使う必要はありません。こちらの事例では、番号の代わりにドットのみを使用したミニマルなデザインとなっています。スライドショーや、複数のパネル間を行き来する際におすすめです。

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

7. タッチフレンドリーに

モバイルUIはタッチフレンドリーであるべきです。こちらのスニペットは、ユーザーがスワイプして使えるページネーションとなっています。タッチフレンドリーであると、それだけでモバイルでのユーザビリティが一気にアップします。

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

8. ページネーションとスクロールを組み合わせる

ページネーションの代わりに、永遠に続く長いスクロールを使用するデザイナーもいます。しかし、こちらの事例では、ページネーションとスクロールを組み合わせて使っています。長いスクロールだと特定の場所に戻るのが難しいという欠点がありますが、ページネーションとの組み合わせることで簡単にナビゲーションできます。

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

まとめ

いかがでしたか？優れたデザインには、ページネーションも重要です。今回の記事で紹介したようなアイデアを活用し、より良いページネーションを目指しましょう。

（著者： Eric Karkovack　翻訳：Mariko Sugita）

こちらもおすすめ！▼