ページネーションとは?メリット、デメリットや実装方法を解説
本来一つのページとして公開するものを、複数ページに分割して表示する機能がページネーションです。情報量が多いサイトやページの表示速度が遅い場合には、ページネーションを取り入れることでユーザビリティが向上するなどのメリットがあります。
ページネーションとは?
ページネーションとは、一つのページを複数のページに分割し、1ページあたりの情報を適切な量に調整することです。ページング、パジネーション、ページ送りなどと呼ばれることもあります。
基本的にインターネット上で公開されているサイトは、一つのページに収まっていることが大半です。しかし情報量が多いサイトの場合、一つのページでは閲覧ユーザーが読みづらかったり、読み込みに時間がかかり過ぎたりと、不便な状態になってしまいます。
そのためページネーションを活用し、閲覧ユーザーが読みやすい状態にすることが重要です。ここではページネーションの仕組みについて解説していきます。
ページネーションの仕組み
ページネーションは以下のような仕組みとなります。
- ページネーションのボタンをユーザーがクリック
- 「どのページを表示するのか」という情報がプログラムに伝達
- プログラムは総データの中から、表示する情報の範囲を計算
- 「何件目〜何件目」のように計算したデータを画面に表示
仮にユーザーが「2ページ」というボタンをクリックした場合、プログラムは「11件目〜15件目」という範囲で情報を取得する流れです。
そのためページネーションではボタンがクリックされる度に情報の範囲を計算し、データを取得して画面に表示する仕組みとなります。
ページネーションの必要性と設定すべきサイト
ページネーションの必要性を考えるうえで検索エンジンからの評価は重要ですが、Googleではページネーションの活用は原則不要と捉えています。
なぜならGoogleが過去に行った調査で「ユーザーはページネーションを行っているページより、1ページに情報がまとめられたページを好む」ことが判明したためです。
また以前までは、検索エンジンにページネーションを伝える役割として「rel=next」と「rel=prev」タグが存在しましたが、2011年にサポートが終了しました。
このように検索エンジンでは不要と認識されているページネーションですが、すべてのサイトにあてはまるわけではありません。なぜなら極端に情報量の多いサイトや表示速度の遅いサイトの場合、ページネーションを活用した方がユーザーの利便性を高められるからです。
ここではページネーションを設定すべきページについて解説していきます。
コンテンツの情報量が多いページ
1ページあたりの情報量が多いコンテンツの場合、ページを分割したほうがユーザーの利便性を高められます。
実際、情報量の多いコンテンツはスクロール回数が多く、ページを読み切るまでに離脱するユーザーも少なくはありません。なかには情報量が多いことが原因となり、最初から読む気力を失うユーザーもいます。
サイトジャンルやコンテンツ内容によっても情報量の基準は異なりますが、一般的なサイトでは1コンテンツあたり3,000文字〜10,000文字の範囲内といえます。
そのため10,000文字を超えるようであれば、ページネーションを活用しページを分割するか、コンテンツを2つ以上に分けることをおすすめします。
ページの表示速度が遅いページ
表示速度が遅いページの場合も、ページネーションは効果的な対策です。情報量が多い場合も該当しますが、コンテンツの内容が詰まっていればいるほどページの表示速度は遅くなる傾向があります。
特に画像や図、そして動画などを多用しているページの場合、ページは重くなりやすいといえます。
ユーザーからしても表示速度の遅いサイトは不便に感じやすく、離脱を促す原因です。そのためページネーションを取り入れ複数ページに分割し、ページごとの表示速度を早めることをおすすめします。
ページネーションのメリット
ページネーションの導入はユーザーの操作性を向上させ、回遊率やUX評価を高めるメリットがあります。また通常ページと比べてPV数を増加させやすい点やSEO評価につながる点も、ページネーションの強みといえます。ここでは、ページネーションのメリットについて解説していきます。
回遊率が高まりPV数が伸びやすい
まず1つ目のメリットは、ユーザーの回遊率が高まり、PV数が伸びやすいことです。
ページネーションを取り入れているページでは、多くのユーザーがページネーションボタンを活用し、複数ページを閲覧するはずです。知りたい情報はボタン一つで飛べるため、1ページをスクロールしながら閲覧する場合よりもサイトの回遊率は段違いに高まります。
またページネーションで分割されたページは、各ページごとにPV数がカウントされる仕組みです。そのため通常のページよりもPV数を増加させやすく、サイトの価値を高める手段として有効といえます。
UX評価が高まる
2つ目のメリットは、サイトを通じたユーザー体験を示すUX(User Experience)評価が高まることです。
通常のページでは目次を確認し、知りたい情報の項目までスクロールする必要があります。しかしページネーションが実装されているページでは、ページネーションのボタンをクリックするだけで求める情報をすぐに確認できます。
そのため閲覧ユーザーは無駄な作業や時間が発生せず、便利で活用しやすいサイトであると感じます。
またUXはサイトのSEOに影響を及ぼす項目のため、ページだけでなくサイト全体のSEO評価を高める面でもメリットになります。
ページネーションのデメリット
ページネーションは表示速度の改善が導入目的ではあるものの、サイトによっては速度が遅延する場合もあります。またページの分割によりサイト評価が分散されてしまう可能性があるため、新たな対策が必要になる点はデメリットといえます。
ここでは、ページネーションのデメリットについて解説していきます。
ページ評価が分散する可能性がある
まず1つ目のデメリットは、ページネーションを取り入れたことでページ評価が分散されてしまう可能性です。
前述で触れたとおり、現在のGoogleではページネーションを伝える役割として存在した「rel=next」と「rel=prev」タグには効果がありません。
ページネーションを活用したからといってマイナス評価を受けることはありませんが、場合によっては重複コンテンツと判断される可能性があります。
そのため本来は一つのページに向けられる評価が分散することや、SEOに悪影響となる場合があると認識しておきましょう。
仮に重複コンテンツ対策を行う場合は「canonical」タグを活用し、ページを正規化するといった別の対策が必要になります。
表示速度が遅いと離脱の原因になる
2つ目のデメリットは、ページネーションを導入したものの表示速度が遅い場合には、ユーザーの離脱を促してしまうことです。
本来、表示速度の改善はページネーションを導入する目的の一つです。しかしページ分割では「1,2,3」や「次へ」をクリックする必要があり、読み込みのタイミングが増えることで表示速度が遅くなる場合があります。
広告や画像の使用が多いサイトほど表示速度の遅延を招く恐れがあるため、導入する際は影響のない範囲内で活用することが重要です。
またページの移動タイミングごとに広告を掲載する悪質なサイトも存在しますが、ユーザーが不快に感じるようなページネーションの活用は避けましょう。
ページネーションを作る際のポイント
ページネーションを作る際は、以下のポイントを押さえましょう。
- ページの下部に設置する
- 適度な分割数にする
- 現在の位置が分かるようにする
- 前後、最後ページのリンクを設置する
- モバイル端末の操作性を高める
各々、解説していきます。
ページの下部に設置する
ページネーションボタンはできるだけページの下部に設置しましょう。
基本的に、ユーザーの大半はモバイル端末からサイトを閲覧しています。そのためページネーションボタンがサイトの左右に設置されている場合、ユーザーからは確認できない可能性があります。
またユーザーがページを閲覧する際の視線はローマ字の「Z」のように動くと言われており、上から下へ移動する流れです。したがってページネーションボタンが上部に設置されている場合も見落とす可能性が高いため、下部への設置が効果的となります。
適度な分割数にする
ページネーションは一つのページを分割する仕組みですが、適度な分割数であることが重要です。
仮に分割数が多い場合、ユーザーはページ移動が手間に感じてしまい悪影響となります。そのため多くても5ページ以内に収め、できるだけユーザーに負担をかけさせないことを意識しましょう。
また情報量や扱うテーマによっては、ページネーション自体が適さない場合もあります。実際にページネーションを導入しない限り判断つかないこともあるため、ユーザーの反応を確認しながら調整をしましょう。
現在の位置が分かるようにする
ページネーションでは「1,2,3」や「次へ」のボタンだけでなく、現在位置が分かるように設定しましょう。
何も設定を行っていない場合、ユーザーは現在どのページにいるのかが不明な状態となってしまいます。
またどの程度のページ数が残っているのかなど、読み終わりまでの把握もできません。そのため現在のページは「太字」や「色変更」など、ひと目で判断できるような設定が重要です。
前後、最後ページのリンクを設置する
前述では現在位置について触れましたが、他にも「前へ」や「次へ」などの前後ボタンも必須となります。
基本的にユーザーは1ページずつ移動していくため、前後ボタンは活用されることが多いといえます。また「最初」や「最後」のボタンが用意してあると、よりユーザービリティの向上につながり、サイトの回遊率を高められます。
「前後のページに戻りたい」や「最初にページに戻りたい」など、ユーザーが考えられるパターンを想定し、事前に対策することが重要です。
モバイル端末の操作性を高める
ページネーションではさまざまなボタンを設置しますが、スマートフォンなどのモバイル端末でも不便なく操作できることを確認しましょう。
よくある例は、ページネーションボタンが小さすぎるがために、スマートフォン上で拡大しない限りタップできない状態となっているケースです。
拡大すればタップできると捉えがちですが、ユーザーにとってわざわざ拡大してタップする一連の作業は非常に不便な状態となります。
特に操作性が低いサイトやページは離脱率が高まる傾向にあるため、PCだけでなくモバイル端末の操作性もかならず確認してから実装しましょう。
ページネーションの実装方法
WordPressサイトの場合、ページネーションの設定では「WP-PageNavi」プラグインの活用をおすすめします。難しい操作がなく短時間で実装できるため、以下の手順に沿ってすすめましょう。
- 「WP-PageNavi」のインストール
- 設定画面からカスタマイズ
- デザインを整える
各々、解説していきます。
「WP-PageNavi」のインストール
まずは「WP-PageNavi」のインストールと有効化を行っていきます。
以下の手順ですすめましょう。
- WordPressの管理画面から「プラグイン」を選択
- その後「新規追加」を選択
- 右上の検索窓から「WP-PageNavi」を検索しインストール
- インストール後「有効化」を選択
設定画面からカスタマイズ
インストール後は「WP-PageNavi」の設定画面から、実際にカスタマイズを行っていきます。設定方法はシンプルとなり、以下の項目を各々入力するだけです。
- 総ページ数用テキスト
- 現在のページ用テキスト
- ページ用テキスト
- 最初のページ用テキスト
- 最後のページ用テキスト
- 前のページ用テキスト
- 次のページ用テキスト
- 「前へ…」用テキスト
- 「次へ…」用テキスト
表示させたくない項目に関しては、空欄のまま設定すれば問題ありません。
デザインを整える
最後にページネーションのデザインを整え、実際のページへ実装しましょう。
細かいデザインを変更する際は、使用しているテーマのファイルにコードを記述する必要があります。
具体的な方法については「WP-PageNavi」サイトの「使い方」に記載されているため、必要に応じてご確認ください。
ページネーションを実装する際の注意点
ページネーションを実装したページでは、通常ページと同様の設定を行なえない場合があるため注意が必要です。
具体的には以下の内容となります。
- 2ページ目以降を1ページ目に正規化しない
- noindexやnofollowを使用しない
各々、解説していきます。
2ページ目以降を1ページ目に正規化しない
ページネーションを実装した際は、重複コンテンツを避ける手段として正規化を行うページは多いといえます。
しかし正規化するうえで注意しなければいけない点が、2ページ目以降を1ページ目に正規化しないことです。
なぜなら1ページ目と2ページ目以降のコンテンツ内容が類似しているとは限らず、正常に正規化されない可能性が高いためです。
本来の正規化は、類似したコンテンツ同士を対象に行います。そのためページネーションでは1ページ目を対象にするのではなく、ページ自身に「canonical」タグを設置するようにしましょう
noindexやnofollowを使用しない
「noindex」は検索エンジンへのインデックスを拒否する際に活用し、「nofollow」はクローラーがリンクを辿ることを拒否する際に活用します。
ただしページネーションを実装した際は、各ページでnoindexやnofollowを使用しないようにしましょう。
なぜなら検索エンジンで推奨していない使い方となり、SEOに悪影響となる可能性があるためです。場合によっては各ページが正しく認識されず、検索順位が大きく下がることもあります。
したがってnoindexやnofollowを活用する場合は、ページネーションの設定を外した状態で行ないましょう。