おしゃれなページネーションボタンデザイン 6選
ページネーションのおしゃれなデザインを考えよう！
ブログやお知らせなどの投稿数が多いページには、ページネーションと呼ばれるものが設置してありますよね。
ページの読み込みを早くしたり、投稿を探しやすくするために使われています。
このページネーションのデザインは単調になりがちなボタンの一種でもあります。
今回は、このページネーションのいろいろなスタイルのデザインをご紹介したいと思います。
ページネーションはあまり派手なものは好まれないので、今回はモノクロのデザインのみにします。
また共通して、2ページ目をアクティブなページと仮定しています。
それでは早速作っていきましょう♪
よく読まれている記事
角丸のボタンでスタンダードなページネーション
数字は角丸ボタン、PREVとNEXTは下線にして見た目にも区別しやすいデザインです。
英語と数字のみすることで、より海外のおしゃれな感じに作ることができます。
記事をメインとした投稿型サイトなどにおすすめです。
See the Pen
ボタンアニメーション by loa (@hana4525)
on CodePen.
丸の中に数字を入れたページネーション
シンプルに丸ボタンに数字を入ったデザインです。
数字以外のボタンをなくすことで、よりシンプルでユーザーに分かりやすいですね。
お知らせやニュースのような単純な投稿に最適です。
See the Pen
ボタンアニメーション by loa (@hana4525)
on CodePen.
四角の枠線でおしゃれなページネーション
文字の外に枠線をつけたような洗練されたデザインです。
数字を2桁にすることで、すべての見た目をそろえることでできます。
ニュースサイトのような見た目が揃えられたサイトにおすすめです。
See the Pen
ページネーションボタン by loa (@hana4525)
on CodePen.
区切りを入れたシンプルなページネーション
数字の間に縦線の区切りを入れただけのシンプルなデザインです。
両サイドにもシンプルな矢印をつけただけなので、直感的に操作することができます。
毎日更新されるような、ページ数が多いものなどにぴったりです。
See the Pen
ページネーションボタン by loa (@hana4525)
on CodePen.
１つのボタンのようなページネーション
長い1つのボタンのように整列した珍しいデザインです。
あまり見ることがないデザインですが、ユーザーの目を引くことができます。
他社サイトと差別化させたいときに使ってみたいですね。
See the Pen
ページネーションボタン by loa (@hana4525)
on CodePen.
横に長いページネーション
ページ幅に合わせて横に長いデザインです。
上下に線を追加して、矢印をサイドに付けることで見た目にもわかりやすくなります。
他のコンテンツと見た目を分けたいときに最適なページネーションですね。
See the Pen
ページネーションボタン by loa (@hana4525)
on CodePen.
よく読まれている記事
まとめ
今回はモノクロだけで作ったページネーションをいくつかご紹介しました。
色をつけなくても簡単におしゃれなデザインをつくることができます。
サイトによって最適なページネーションは異なるので、いろんなパターン試してみてもいいですね。
随時デザインを追加していきますので、ブクマしてチェックしていただけたら嬉しいです。
ぜひ自分のサイトなどにコピペして作ってみてください♪
最後までご覧いただきありがとうございました☆彡