![ページネーションとは?ページを整理してUXを向上させよう!のアイキャッチ画像](https://images.microcms-assets.io/assets/849933361e3447368c1f885948b087dc/8815ad45d5f84d60a5f5d1d84fa7418c/Group%20361.png?w=1200&fm=webp)
SEO
更新日: 2023/12/2
ページネーションとは?ページを整理してUXを向上させよう!
![character_balloon](/media/character/pink_normal_left.png)
ブルーちゃんブルーちゃん
どうしたのピンクちゃん?
![character_balloon](/media/character/blue_normal_right.png)
![character_balloon](/media/character/pink_normal_left.png)
ページネーションってなにかしら?
あーページネーションね
![character_balloon](/media/character/blue_normal_right.png)
じゃぁ今日はページネーションについて説明するね
![character_balloon](/media/character/blue_normal_right.png)
ページネーションとは?
![ページネーションとは?ページを整理してUXを向上させよう!の画像_2枚目](https://images.microcms-assets.io/assets/849933361e3447368c1f885948b087dc/1965e039d207437eb990b252ed34cbd8/81C0E567-CED6-4138-ACAD-11F11BB16EBA.jpeg?w=1200&fm=webp)
![character_balloon](/media/character/blue_normal_left.png)
ページネーションとは、Webサイトのページを区切って分けられたページの番号やそれぞれのページへ遷移するためのリンクのことだよ
![character_balloon](/media/character/blue_normal_left.png)
情報を分割することでユーザーにわかりやすくWebサイトを閲覧してもらうのがメインの目的だね
![character_balloon](/media/character/blue_normal_left.png)
掲載する情報量が多い時や文字数が多い時に有効な手段だよね
ページネーションを導入するメリットは?
![character_balloon](/media/character/blue_normal_left.png)
ページネーションをWebサイトに導入するメリットを具体的に紹介していくよ
![character_balloon](/media/character/blue_normal_left.png)
ページネーションを導入すると、使いやすくなるだけじゃなくて実はいろいろなメリットがあるんだ!
ページネーションのメリット1.SEO対策に効果あり
![ページネーションとは?ページを整理してUXを向上させよう!の画像_6枚目](https://images.microcms-assets.io/assets/849933361e3447368c1f885948b087dc/234273c5b0eb4628b94d7d47fe1f9880/3DE15AD2-D51D-4E0F-8F9D-BD5836DA992F%20(1).jpeg?w=1200&fm=webp)
![character_balloon](/media/character/blue_normal_left.png)
ページネーションはSEO対策にも有効とされているよ
![character_balloon](/media/character/blue_normal_left.png)
ページを分割すると情報が整理されてわかりやすくなるよね
![character_balloon](/media/character/blue_normal_left.png)
ユーザーにとってわかりやすいWebサイトは、Googleなど検索エンジンにとってもわかりやすいWebサイトだと認識されやすいんだ
![character_balloon](/media/character/blue_normal_left.png)
SEO効果が高まると検索結果にも上位表示されて流入が増えるよ
![character_balloon](/media/character/blue_normal_left.png)
ただ、分割されたページをすべて1ページ目に正規化することはGoogleに勧められていないから注意してね
ページネーションのメリット2.PVの増加
![ページネーションとは?ページを整理してUXを向上させよう!の画像_8枚目](https://images.microcms-assets.io/assets/849933361e3447368c1f885948b087dc/22e6f8e313724903b2088abd006cdad9/4CBCE29C-113B-4D34-A848-426878E5EB67%20(1).jpeg?w=1200&fm=webp)
![character_balloon](/media/character/blue_normal_left.png)
ページが適切に分割されていると、ユーザーが次々とページを遷移していくからPVが増加するよ
![character_balloon](/media/character/blue_normal_left.png)
ページングがない大量の文章を1記事に収めていると、全部読まれても1PVだよね
![character_balloon](/media/character/blue_normal_left.png)
でも2ページに分かれていたら、2PV獲得することになるんだよ
![character_balloon](/media/character/blue_normal_left.png)
Webサイト内を遷移する動線ができていると、さらに他の記事やコンテンツにも飛んでもらいやすくなるよね
ページネーションのメリット3.UXの向上
![ページネーションとは?ページを整理してUXを向上させよう!の画像_10枚目](https://images.microcms-assets.io/assets/849933361e3447368c1f885948b087dc/0885c0851b964256b9adba36febb123b/25F6A164-3A7D-4EED-BFD1-EDE10698B9D6.jpeg?w=1200&fm=webp)
![character_balloon](/media/character/blue_normal_left.png)
ページネーションを適切に導入すると、UXも向上するよ
![character_balloon](/media/character/blue_normal_left.png)
膨大な情報が1ページに詰め込まれていて、何度もスクロールしないといけないのは大変だよね
![character_balloon](/media/character/blue_normal_left.png)
どこにどの情報があるかもわかりづらくて、ユーザーが必要な情報に辿り着けなくなっちゃうよ
![character_balloon](/media/character/blue_normal_left.png)
ページネーションされて情報が整理されていれば、ほしい情報にすぐたどり着けるんだ
![character_balloon](/media/character/blue_normal_left.png)
UXが向上するとまたWebサイトに訪問してもらえるようになるよね
ページネーションの事例を2つご紹介!
![character_balloon](/media/character/blue_normal_left.png)
ページネーションを導入している事例を紹介するよ
![character_balloon](/media/character/blue_normal_left.png)
普段よく目にしているものもあると思うから参考にしてみてね
ページネーションの事例1.Google
![ページネーションとは?ページを整理してUXを向上させよう!の画像_14枚目](https://images.microcms-assets.io/assets/849933361e3447368c1f885948b087dc/9d96a097c91b424585005d7b7d0ac320/image%2068.png?w=1200&fm=webp)
![character_balloon](/media/character/blue_normal_left.png)
Googleは膨大な検索結果を「もっと見るボタン」の形でページネーションを表示しているよ
![character_balloon](/media/character/blue_normal_left.png)
数万件の検索結果が1ページで表示されたら大変な量になるよね、、。
![character_balloon](/media/character/blue_normal_left.png)
それを防ぐために、paginationを用意して、ユーザー体験(UX)の向上に対応しているんだよ
![character_balloon](/media/character/blue_normal_left.png)
昔は1,2,3...っていうふうにページ遷移できる形だったけど、今は「もっと見るボタン」に変更されてるから、もしかしたらこっちの方がUXが良いのかもね!
ページネーションの事例2.食べログ
![ページネーションとは?ページを整理してUXを向上させよう!の画像_16枚目](https://images.microcms-assets.io/assets/849933361e3447368c1f885948b087dc/7dcdbabf4a1c4c82b29f348d423649a9/image%2067.png?w=1200&fm=webp)
![character_balloon](/media/character/blue_normal_left.png)
食べログは、全国各地のレストラン情報を掲載しているから件数が膨大になるよね
![character_balloon](/media/character/blue_normal_left.png)
現在のページに近いページだけでなく、離れたページにも飛びやすいよう工夫されたページングになっているよ
![character_balloon](/media/character/blue_normal_left.png)
意図した検索条件とソートで、大体この辺りの結果が見たいなというときに便利だよね
wordpressでページネーションの実装方法はどうやるの?
![character_balloon](/media/character/blue_normal_left.png)
WordPressでページネーションを実現したい場合、主に
1.プラグインでWordPressに組み込む
2.PHPを書いて自作する
![character_balloon](/media/character/blue_normal_left.png)
という2つのやり方があるよ
![character_balloon](/media/character/blue_normal_left.png)
プラグインは簡単に組み込めて便利だけど、プラグインの仕様に制限されることもあるんだ
![character_balloon](/media/character/blue_normal_left.png)
思い通りのページネーションを実現したかったらPHPで実装する方がいいね!
![character_balloon](/media/character/blue_normal_left.png)
ただ、自分で実装する場合はPHPのスキルや専門知識がある程度必要になるから注意してね
![character_balloon](/media/character/blue_normal_left.png)
最後にページネーションとはなにかまとめておくね
まとめ
◆ページネーションとはWebサイトのページを区切って分けられたページの番号やそれぞれのページへ遷移するためのリンクのこと
◆Webサイトが整理されるのでSEOにも効果がある
◆回遊率が上がることでPVが上がったりUXが高まったり様々なメリットがある
◆実現したいページングによっては専門知識が必要な場合もある
ユーザーが使いやすいページングを実現してみたくなったわ
![character_balloon](/media/character/pink_normal_right.png)
ありがとうブルーちゃん!
![character_balloon](/media/character/pink_normal_right.png)
![character_balloon](/media/character/blue_normal_left.png)
いいページになるといいねぇ
![character_balloon](/media/character/blue_writer.png)
ブルー
SEOやエンジニアリングマーケティングが得意。非常にめんどくさがりで、動きたくないがために自分でコードを書いて自作のMAを組んだりする。自動化のためなら努力は惜しまない。