【社労士解説】ジョブ型雇用時代におけるフリーランスの生存戦略とは?
- コラム
- とは
- フリーランス/個人事業主
みなさんはページネーション(pagination)をご存知ですか?
ページネーションとは、日本語で「ページ割り」を意味する用語です。その重要性は見過ごされがちですが、非常に重要なデザインの一要素です。特に、コンテンツの多いWebサイトやブログの場合、サイト内でのスムーズなナビゲーションにページネーションは不可欠です。ユーザーがサイト内を探索しやすいように、最適なページネーションのデザインを考えましょう。
この記事では、ページネーションに使えるクリエイティブなコードスニペットを紹介します。
目次
ホバーエフェクトは、シンプルながらもページネーションのデザイン性を一気に向上させてくれます。カーソルの動きに合わせてメニューの下線が移動し、動きのあるUXを生み出してくれます。シンプルで非常に読みやすいのも好印象です。
See the Pen Line Pagination with Hover (PureCSS) by flowuhh (@flowuhh) on CodePen.
コンテンツによっては、多くのページをメニューで管理しなければなりません。jQueryを使用したこのスニペットを使えば、メニューをクリックする度に、それに合わせてページ数が自動で表示されます。
See the Pen jQuery Pagination Example (twbs-pagination) by Simon Codrington (@simoncodrington) on CodePen.
面白いコンセプトを用いているがこちらのスニペット。レスポンシブかつ誰にでも使いやすいデザインで、スライドバーだけでなく、キーボードでもナビゲーションできます。スライドバーはタイムラインのようにも見えるので、サイト全体の情報量を伝え、そのうえで今どこにいるのか、ユーザーが一目でわかるようにデザインされています。
See the Pen Pagination by Simon Goellner (@simeydotme) on CodePen.
このスニペットでは、ページ番号をクリックする度に巨人の手が出てきてページ数を変更してくれます。もちろん必ずしも巨人の手である理由はないので、あなたのWebサイトのテーマやスタイルに合わせてカスタマイズし、ワクワク感をプラスしてみましょう。
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.
いかがでしたか?優れたデザインには、ページネーションも重要です。今回の記事で紹介したようなアイデアを活用し、より良いページネーションを目指しましょう。
(著者: Eric Karkovack 翻訳:Mariko Sugita)
こちらもおすすめ!▼
モバイルアプリUXに必須!画面遷移におけるアニメーションの魅力と重要性
Workship MAGAZINE