ページネーションデザインのシンプルでおしゃれなサンプル10選

2ページ目以降を選択するとPREVが出るページネーションデザイン

HTML／css／JSコード参照先：https://codepen.io/jsnanigans/pen/dXAYBJ

一見シンプルにみえますが、丸い円と数字が白色で、黒色の背景にとてもマッチしています。1桁の数字も2桁の数字も同じ円の大きさで統一されていて、とても見やすいデザインです。どんなページでも使いやすく合わせやすいでしょう。

初めは「PREV」の文字が表示されていませんが、2ページ目以降を選択すると現れる仕組みになっています。ページを進んでも、1ページ目と最後の19ページ目が表示に残るようになっていて、すぐに初めのページに戻りたい場合や最後のページを見たい場合にはとても便利です。

カーソルをNextに合わせると色が変わるページネーションデザイン

HTML／css／JSコード参照先：https://codepen.io/cssparadise/pen/WNeYjjp

英語で記載されているため少しわかりにくいと思うかもしれませんが、デザイン性は高いので、クリエイティブ関連の会社などのサイトには似合う仕上がりになっています。

カーソルをNextに合わせると赤色に変わり、ページ全体の雰囲気を変えることが可能です。このページネーションデザインを設置するだけで、サイトのアクセントの一つになるでしょう。

パクパクするデザインがかわいいページネーションデザイン

HTML／css／JSコード参照先：https://codepen.io/perry_nt/pen/bvjBWo

ページ数が記載されていない四角いページネーションになっています。ページネーションだからといって、必ずしも番号を使う必要はありません。パックマンがページを移動するごとに、パクパクするデザインが可愛い仕上がりになっています。

独創的なページに演出したい場合におすすめです。

アニメーション機能が付いたページネーションデザイン

HTML／css／JSコード参照先：https://codepen.io/Aashima/pen/OwRYLd

見た目はシンプルですが、今どのページにいるのかわかりやすいページネーションデザインになっています。どんなサイトでも使いやすいと言えるでしょう。数字にポイントを合わせると、アニメーション機能で動きながら移動するので、ボタンを押す楽しさもあります。

ページにユニークさを取り入れたい方は、ぜひ使用してみてください。

スマホでも見やすいシンプルなページネーションデザイン

HTML／css／JSコード参照先：https://codepen.io/devilishalchemist/pen/QdLVVv

シンプルですがおしゃれ感もあるページネーションです。上品な雰囲気のデザインなので、どのサイトでも合わせやすい仕上がりになっています。

スマホでも見やすいデザインになっていて、通販サイトなどパソコンとスマホの両方で閲覧してもらいたいサイトにおすすめです。数字の選択箇所も四角で大きいため、指でも操作しやすいでしょう。

開いているページが一目でわかるページネーションデザイン

HTML／css／JSコード参照先：https://codepen.io/angeal185/pen/ALzLNm

開いているページ数が大きく書いてあるため、何ページを開いているのかとてもわかりやすいページネーションデザインです。クリックすることでコンテンツごと動くアニメーション機能で、少し変わった演出を取り入れています。

印象に残りやすいデザインで、プレゼンテーションやスライドショー、大きく写真を表示するサイトなどにおすすめです。

ホバータイプのページネーションデザイン

HTML／css／JSコード参照先：https://codepen.io/RajRajeshDn/pen/RzMmqw

とてもおしゃれでデザイン性があるホバータイプのページネーションデザインです。ポップで明るい印象なので、シンプルなページでもデザイン性を一気に向上させてくれます。

ポイントの選択範囲が広いため選択しやすく、また、ポイントを併せると色が濃くなり見やすさも抜群で、ユーザーの利便性を高めるうえでもおすすめです。

ホバーボタンタイプのページネーションデザイン

HTML／css／JSコード参照先：https://codepen.io/RajRajeshDn/pen/pXVXRp

こちらも、ホバータイプのページネーションデザインです。番号の箇所がボタンになっていることによりおしゃれ度が上がります。

数字にポイントを合わせることで赤く色が移動するので、ページ選択の押し間違いなどなくし、快適にページを開くことができます。

インテリア系のサイトなどで、おしゃれ感を出したい場合におすすめです。

インジケータータイプのページネーションデザイン

HTML／css／JSコード参照先：https://codepen.io/Aashima/pen/jOLWozX

シンプルでクールなイメージのページネーションデザインですが、丸ボタンで可愛らしさも演出しています。カーソルを合わせると色が変わるインジケータータイプで、どんなサイトにも合わせやいでしょう。

シンプルさを損なわずにページのデザイン性を高めたい場合におすすめです。

選択場所の色が変わるページネーションデザイン

HTML／css／JSコード参照先：https://codepen.io/vamsikrishna-kodimela/pen/vYBbRpL

矢印風のページネーションです。数字にカーソルを合わせると色が赤く変わり、見やすくなります。

ページネーションはスマホなど小さなスクリーンだと小さくて読みにくくなる傾向がありますが、こちらのデザインは数字が大きく書いているため読みやすく、ユーザーの利便性を向上させるのに効果的です。