デザイン性の高い「ページ割り」を実現！ＷＥＢサイトの改善に使えるクリエイティブなコードスニペット8選

ページネーションはデザイン要素の中でも必需性が低く見過ごされがちですが、ブログやコンテンツの多いWebサイトでは重要なナビゲーションの役割を担っているのです。優れたメニューがあるとユーザーの探求心も高まります。

 

信じられないかもしれませんが、デザイナーの中にはページネーションのレベルを上げようとする人達がいます。

 

ここではWebサイトの改善に必要ないくつかのクリエイティブなコードスニペットを紹介します。

 

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

 

初めの例は基本的なホバー効果がスタンダードなページネーションをどれだけ大幅に改善しているかを表しています。

 

カーソルをのせたときの滑らかに下線が移動し、より直観的な操作を促します。

 

加えて、メニュー全体も非常に読みやすく、ユーザーにもとてもわかりやすいものとなっています。

 

See the Pen
Line Pagination with Hover (PureCSS) by Mark (@markmead)
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.

 

Yetiに任せてみよう

 

良い助けを得るのは難しいと言われますが、このスニペットではページ番号をクリックする際にYetiの助け（少なくともYetiの手助け）を借りることができます。

 

あなたのモチーフに合わないかもしれませんが、Yetiはどのように面白さや驚きの要素を加えることができるのかを示す一つの例です。

 

 

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デザインはページを構成する様々な要素を重要視します。

 

上記の例で紹介した長所では、少しの努力でページネーションがいかに強化されるのかを示しています。

 

ここから少しインスピレーションを得て、見た目も機能も優れたページネーションを作成しませんか。