意外と知らない!ページネーションとは?
ページネーションとは丁付け、ページ割りという意味でWeb制作においては検索結果一覧など、内容の多いページを複数のWebページに分割し各ページへのリンクを並べてアクセスしやすくするために設置するものである。この記事ではページネーションの概要からどんなページネーションが優れているのかをポイントごとにご紹介していく。
ページネーションとは
よく見かけるページネーションとは具体的には、連続した複数のページを内部リンクで繋ぎ、各ページには番号や「次へ」「前へ」といったナビゲーション要素が配置される。これにより、ユーザーは特定のページにアクセスしたり、情報を順番に確認したりできる。
例えば、ブログの記事一覧やオンラインショップの商品リスト、掲示板のコメント一覧など、表示すべきデータが多い場面でよく見られます。ページネーションの実装により、ユーザーは「次のページ」や「前のページ」といったボタンをクリックすることで、情報を順番に確認することができます。
・ただページネーションを導入すればよいのか
ただページネーションを導入すればよいというわけではなくページ内の文字が極端に少ないことはユーザーが1クリックしなければならず面倒くさいと思われてしまう可能性があるため状況に応じて適切に導入しなければならない。例えば画像検索などは無限スクロールをした方がユーザビリティが高くなる。
・どのようなときにページネーションを導入すればよいのか
ECサイトの商品一覧ページやニュースサイト・メディアサイトの記事一覧ページでは商品や記事の数が多い場合導入するべきである。その理由としてはユーザーが目的の商品を探すことが難しくなってしまうからである。また1ページの文字量が多い場合は途中で離脱してしまう可能性があるためページネーションは有効である。
ページネーションの実装方法
1つ目は、CMSである「WordPress」を利用した方法である。豊富なプラグインやテーマが利用可能なWordPressでは、コーディングの知識がなくてもページネーションの設定が可能。
2つ目は、静的な「HTML」を用いた基本的な方法で、シンプルながらも、直接コードを編集することで、細かいカスタマイズが行うことができる
ともにプログラミングを用いることで実装することができる
ページネーションを実装する際のポイントとしてページ間の関係性を順番にリンクする、ページ番号にURLフラグメントを使わない、フィルタや並べ替えのあるページはインデックスさせない、各ページごとに違うURLを割り当てる等がある。
ページネーションのSEO的効果。
・回遊しやすくPVが伸びやすい
回遊率やPV数が伸びやすくなる理由は、ページネーションのボタンがあることで訪問者が興味のあるページや別のカテゴリに飛びやすくなっているためである。スクロールしながら、たくさんの文字を目で追わなくてもページネーションのボタンで見たいところに一足飛びで行けるようになるのでサイト内の回遊率が高くなることが期待できる。
・目的の記事にたどり着きやすくUX評価が高い。
訪問者が見たい記事(目的)を探しやすくなり、User Experience(UX)評価が良くなるというもの。UX評価が良くなる理由としては、Webサイト自体がユーザーインターフェース(UI)の観点から改善されるためである。
ページネーションの効果的な作成術
・ページネーションはサイトの下部に設置する
サイト下部が効果的な理由はユーザーインターフェースが良くなるためである。Webサイトの見た目や操作性の向上にもつながる。訪問者はWebサイトを見る際Z字のような目線で見ていくため上部にページネーションを設置してもクリックしにくく、見終わる際にもっと見たいと思ってもらえたらクリックしてもらえるためユーザビリティが高くなる。
・表示するページ数は5ページ以内
その理由としては2つあり1つ目は訪問者が今現在どのページにいるのかを把握することができるからである。ページ数が多いと前に見たページで気になったところに戻れずユーザーがイライラしてしまう。ページネーションにより表示するページ数を適度なものにしておくことでユーザーが快適にサイトを閲覧することができる。2つ目は最後のページに飛べるようにしておくことである。これはユーザーがこの記事の終わりは何ページかをあらかじめ確認することができるというメリットがある。
総括(まとめ)
・ページネーションとは私たちも日ごろから目にしている丁区切りのことである。
・ページネーションの導入方法にはCMSである「WordPress」を利用した方法と静的な「HTML」を用いる方法がある。
・ページネーションのSEO的効果として回遊しやすくPVが伸びやすいや目的の記事にたどり着きやすくUX評価が高いといったことがある。
・ページネーションの効果的な作成方法はページネーションはサイトの下部に設置すると表示するページ数は5ページ以内ということを意識して導入するべきである。