※本サイトは一部アフィリエイト広告を利用しています。
「ページネーションって何？」や「SEO対策になるの？」などと思っている方も多いと思います。
実は、ページネーションは情報量の多いページを分割して見やすくすることで、SEOの観点からみても、必要なものになります。
このページではBowned編集部がページネーションについて以下のことを解説します。
- ページネーションとは何か
- ページネーションの効果
- ページネーションに大切なこと
- ページネーションの設置方法
最後までご覧いただければ、自身のサイトを整理し、ページネーションでつなぐことができるようになり、ユーザビリティが向上するでしょう。
目次
ページネーションとは？
ページネーションとは内容の多いページを複数に割り、情報を読み取りやすくすることです。
前後など関連のあるページへのリンクを並べることで、それぞれのページにアクセスしやすくすることも重要です。
日本語に直接直すと「ページ送り」「ページ割り」ともいわれます。
ページネーション設置の要点
ページネーションは、情報量が多く文章が長くなる場合や、解説のために必要な画像が多くなりすぎるページの場合に有効です。
適切に設置・利用しない場合は以下のように問題が発生し、せっかくの情報を上手くユーザーに届けることができません。
ページネーションを行う理由
- 文章が長く画像が多いと読み込み時間がかかり、ユーザーの離脱に繋がる
- ユーザーが快適にページを閲覧するために文章が長いページには重要
ページネーションを行わなかったばかりにユーザーが離脱してしまうと直帰率や離脱率が高くなってしまい、よくありません。
直帰率や離脱率について更に知りたい方は「直帰率と離脱率の違い。改善方法とともに解説」の記事をご覧ください。
ユーザーが快適に閲覧することができるようにするために、ページネーションを設置する際に重要なポイントを解説します。
ページを分割しすぎない
いくら分割した方が見やすくなるといっても、極端に文字数の少ないページができるほど分割することはよくありません。
記事のジャンルや内容、網羅しているテーマの数をはじめ、メインで閲覧されるであろうPCやスマートフォンなどのデバイスなどに合わせるなど、記事ごとに合った文字数や段落数を検討することが必要です。
記事一覧などの検索結果を一覧で表示する件数も、表示するページの内容や情報の量によって大きく変わる場合があり、件数が多い場合は読み込み自体に時間がかかってしまう場合もあります。
表示の件数を減らしたり、表示範囲を狭めたりするなどの判断が必要にもなりますので、表示のスピードも確認しましょう。
現在のページを示す
ページネーションはナビゲーションの役割もありますので、ユーザーが「今、どのページを見ているか」を認識できるようにすると同時に、「何ページに移動できるのか」という情報も分かりやすくする必要があります。
ユーザーの現在位置は、リンクの色を変えるだけでなく、文字の大きさや背景の変更など、いろいろな方法を使って他のリンクと差別化する工夫をするとよいでしょう。
違いを色だけで区別する方法は、アクセシビリティの低下を招くことになってしまうため、他にも工夫するようにしましょう。
一例として、Bownedのページネーションはユーザーの現在地が背景が青い丸印で表示され、一目で自分の現在地を把握できるデザインとなっています。
また、現在のページの前後へのリンクや、全体を把握するためにページそれぞれのページへのリンクを設置することも重要です。
「前へ/次へ」「1.2.3.4…」といった分かりやすい表現を使用することで、今どのページにいて、サイト全体はどのくらいの量があるのかということも分かりやすいです。
ただし、コンテンツが多くなるとリンクの数が増え、100を超えるという場合もありますよね？
そういった場合に、全てを貼ってしまうとリンクばかりになってしまい、誤操作の原因になったり、見やすさも低下してしまいます。
実際に表示するページのリンクは10ページ程度に抑え、前後は「…」などで省略しましょう。
ユーザビリティーを考えたデザインにする
ページネーションでクリックできる部分は前後のページへの移動を行うボタンや、ページ番号が主なものになります。
ユーザビリティの低いサイトになる原因の一つとして、クリックボタンのサイズが小さい、横にもスクロールが発生するなど、見やすさや使いやすさに欠点がある場合があります。
これはページネーションに限らず、モバイルフレンドリーに認識されるためにも重要なポイントにもなっているので、クリックボタンのサイズは大きくすることが鉄則です。
クリック可能なボタンの最小サイズを7mm、ボタン同士の間隔を2mm以上に、慎重に操作したいボタンの場合はボタンの幅を9ｍｍにしましょう。
このサイズはiOSヒューマンユーザインターフェイスのガイドラインによって推奨されているものになります。
ページネーションの設置方法
ページネーションの設置はHTMLのhead部分にタグを記述することで行います。
少し前まではHTMLとセッションを利用し、強制的に行っていた作業ですので知識と手間が必要でしたが、最近ではプラグインも多く配布されるようになったため、比較的簡単に行えるようにもなりました。
タグは前ページを「rel=”next”」、次ページを「rel=”prev”」と記述します。
記述するタグの例
<link rel="next" href="URL/page2/">
<link ril="prev" href="URL/page/">個別のページがうまくつながるように設置し、重複しないように注意しましょう。
まとめ：ページネーションとは
ページネーションについて解説しましたが、いかがだったでしょうか？
要点をまとめると以下のようになります。
- ページネーションは、情報量が多くなる場合に、ページを分割しリンクを表示すること
- ユーザーが快適に閲覧するために有効で、途中での離脱を減らすことができる
- 情報量は適切を守り、分割して短くなりすぎないようにする
- 現在のページや、全体のページが分かりやすいようにデザインし、ボタンのサイズなど誤操作を防ぐ工夫が必要
せっかくユーザーにとって有益な情報を多く詰めたページを作るのなら、ユーザーの閲覧のしやすさや使い勝手にも配慮し、「最後まで閲覧したい」と思わせるような配置やデザインで作成したいですよね。
ページネーションはそのための一つの手段でもありますので、適切に検討・設置しSEOにも良い影響を与えるサイトを作りましょう。
