ページネーションとは?ページを整理してUXを向上させよう!のアイキャッチ画像

SEO

更新日: 2024/11/22

ページネーションとは?ページを整理してUXを向上させよう!

character_balloon

ブルーちゃんブルーちゃん

どうしたのピンクちゃん?

character_balloon
character_balloon

ページネーションってなにかしら?

あーページネーションね

character_balloon

じゃぁ今日はページネーションについて説明するね

character_balloon

ページネーションとは?

ページネーションとは?ページを整理してUXを向上させよう!の画像_2枚目
character_balloon

ページネーションとは、Webサイトのページを区切って分けられたページの番号やそれぞれのページへ遷移するためのリンクのことだよ

character_balloon

情報を分割することでユーザーにわかりやすくWebサイトを閲覧してもらうのがメインの目的だね

character_balloon

掲載する情報量が多い時や文字数が多い時に有効な手段だよね

ページネーションを導入するメリットは?

character_balloon

ページネーションをWebサイトに導入するメリットを具体的に紹介していくよ

character_balloon

ページネーションを導入すると、使いやすくなるだけじゃなくて実はいろいろなメリットがあるんだ!

ページネーションのメリット1.SEO対策に効果あり

ページネーションとは?ページを整理してUXを向上させよう!の画像_6枚目
character_balloon

ページネーションはSEO対策にも有効とされているよ

character_balloon

ページを分割すると情報が整理されてわかりやすくなるよね

character_balloon

ユーザーにとってわかりやすいWebサイトは、Googleなど検索エンジンにとってもわかりやすいWebサイトだと認識されやすいんだ

character_balloon

SEO効果が高まると検索結果にも上位表示されて流入が増えるよ

character_balloon

ただ、分割されたページをすべて1ページ目に正規化することはGoogleに勧められていないから注意してね

ページネーションのメリット2.PVの増加

ページネーションとは?ページを整理してUXを向上させよう!の画像_8枚目
character_balloon

ページが適切に分割されていると、ユーザーが次々とページを遷移していくからPVが増加するよ

character_balloon

ページングがない大量の文章を1記事に収めていると、全部読まれても1PVだよね

character_balloon

でも2ページに分かれていたら、2PV獲得することになるんだよ

character_balloon

Webサイト内を遷移する動線ができていると、さらに他の記事やコンテンツにも飛んでもらいやすくなるよね

ページネーションのメリット3.UXの向上

ページネーションとは?ページを整理してUXを向上させよう!の画像_10枚目
character_balloon

ページネーションを適切に導入すると、UXも向上するよ

character_balloon

膨大な情報が1ページに詰め込まれていて、何度もスクロールしないといけないのは大変だよね

character_balloon

どこにどの情報があるかもわかりづらくて、ユーザーが必要な情報に辿り着けなくなっちゃうよ

character_balloon

ページネーションされて情報が整理されていれば、ほしい情報にすぐたどり着けるんだ

character_balloon

UXが向上するとまたWebサイトに訪問してもらえるようになるよね

ページネーションの事例を2つご紹介!

character_balloon

ページネーションを導入している事例を紹介するよ

character_balloon

普段よく目にしているものもあると思うから参考にしてみてね

ページネーションの事例1.Google

ページネーションとは?ページを整理してUXを向上させよう!の画像_14枚目
character_balloon

Googleは膨大な検索結果を「もっと見るボタン」の形でページネーションを表示しているよ

character_balloon

数万件の検索結果が1ページで表示されたら大変な量になるよね、、。

character_balloon

それを防ぐために、paginationを用意して、ユーザー体験(UX)の向上に対応しているんだよ

character_balloon

昔は1,2,3...っていうふうにページ遷移できる形だったけど、今は「もっと見るボタン」に変更されてるから、もしかしたらこっちの方がUXが良いのかもね!

ページネーションの事例2.食べログ

ページネーションとは?ページを整理してUXを向上させよう!の画像_16枚目
character_balloon

食べログは、全国各地のレストラン情報を掲載しているから件数が膨大になるよね

character_balloon

現在のページに近いページだけでなく、離れたページにも飛びやすいよう工夫されたページングになっているよ

character_balloon

意図した検索条件とソートで、大体この辺りの結果が見たいなというときに便利だよね

wordpressでページネーションの実装方法はどうやるの?

character_balloon

WordPressでページネーションを実現したい場合、主に

wordpressのページネーション実装方法

1.プラグインでWordPressに組み込む


2.PHPを書いて自作する

character_balloon

という2つのやり方があるよ

character_balloon

プラグインは簡単に組み込めて便利だけど、プラグインの仕様に制限されることもあるんだ

character_balloon

思い通りのページネーションを実現したかったらPHPで実装する方がいいね!

character_balloon

ただ、自分で実装する場合はPHPのスキルや専門知識がある程度必要になるから注意してね

まとめ

character_balloon

最後にページネーションとはなにかまとめておくね

まとめ

◆ページネーションとはWebサイトのページを区切って分けられたページの番号やそれぞれのページへ遷移するためのリンクのこと


◆Webサイトが整理されるのでSEOにも効果がある


◆回遊率が上がることでPVが上がったりUXが高まったり様々なメリットがある


◆実現したいページングによっては専門知識が必要な場合もある

ユーザーが使いやすいページングを実現してみたくなったわ

character_balloon

ありがとうブルーちゃん!

character_balloon
character_balloon

いいページになるといいねぇ

最新の記事一覧
最新の記事一覧