サイト制作では欠かせない!ページネーションとは

ページネーションを意識して離脱防止!


Webマーケティングに携わす方で、中小企業に所属している方のほとんどは、マーケティングだけではなくWeb制作の仕事も兼務でされているのではないでしょうか。
様々なマーケティングのことを学びながらも制作のことも技術や知識を身につけていくことは大変なことでしょう。
制作の現場においては、外部のマーケティングの話だけではなく、内部の構成やページの作り方にまでユーザビリティを意識して行う必要があります。
その中でも、ページネーションの考え方や技術は、コンテンツマーケティングを意識したWeb制作をする上で欠かせない機能となるでしょう。
ここではサイト制作に欠かせない、「ページネーション」についてご紹介します。まずは「ページネーション」とは何かについて、その定義について見てみましょう。

ページネーションの重要性とは?


「ページネーション」とは日本語では「丁付け」とか「ページ割り」という意味になります。紙のページのように1枚の文字数が決まっておらず、1ページをいくらでもスクロールできるWebページでは、「ページ割り」がない場合、ややもするとメリハリがなく、特徴がないWebページになりがちです。
こうした場合には前後のページへのリンクをつけ、クリックの領域を適度につけるなどの工夫が必要です。
また、画像があまりに多い場合も同様です。ページは適当に区切ってあっても、画像が多くて重いと読み込みが遅くなってしまいなかなか表示されないのは、読者の離脱の原因となります。
読者が快適にストレスなく、Webページを読むことができるようにWebデザイナーが調節することがページネーションのもっとも重要な点だと言ってもいいでしょう。

ページネーションのメリット・デメリット

ページネーションの重要性がわかったところで、今度はページネーションのメリットとデメリットを見ていきましょう。Webページのページネーションにはどんなメリット、デメリットがあるのでしょうか?

ページネーションのメリット

それではまず、ページネーションのメリットと言える点です。

読者が快適にページを読むことができる

なんといっても読者が快適にWebページを読むことができる点が、ページネーションの最大の魅力です。
「ページネーション」が施されているページの対極は「無限スクロール」とも言える状態のページです。
もし、ページ割も前後のページへのリンクもなく、ページネーションが施されていない状態のWebページがあって、無限スクロールするだけだったら、それは読者にとって苦痛でしかないページだと言えます。
こうしたページでは、読者は最初の数ページだけを読んで、スクロールの多さやメリハリのないページに疲れてしまうため、そのサイトを離脱してしまうでしょう。
このようなことがないよう、読者が快適に読むことができるように工夫を凝らすのがWebデザイナーの力量の見せ所と言えます。

PV数が向上する

ページネーションで記事をいくつかのページに区切ったり、リンクをつけて読みやすくしたりすることは、なんといっても読者の快適性を向上させますので、PV数が向上します。読みやすいページだと、読者はついつい引き込まれて読んでしまい、新しい記事を読むのも楽しみにしてくれます。
その結果、PV数も上がるのでSEO的にもいい結果を生み出せることが期待できます。

被ブックマークやシェアを狙う

Webページの運営者にとって、SNSでシェアしてもらうことや、ブックマークしてくれていつも見に来てくれる読者はとてもありがたい存在です。
ページネーションがきちんと施されていて、ページごとにSNSのシェアボタンがつけられていると、いい記事だと思った読者がシェアしてくれます。
たとえばTwitterなどでは、他のSNSと違い、「友達でない人」にも情報を送ることができますので、ひとたびシェアされるととてつもない人数に拡散されます。その結果、記事に興味を持ってくれた人が見に来てくれて、PV数が上がることも期待できます。
また、適当なページネーションが施されていると、ページごとにブックマークをしてくれる読者もおり、記事が更新されるたびに見に来てくれたりすることも予想されるため、結果的にPV数の向上に繋がります。

ページネーションのデメリット

では反対にページネーションのデメリットはどんなところにあるのでしょうか?

クリックやタップの煩わしさ

読者の中にはいろいろな人がいます。たとえば、じっくり長文でも平気な人もいれば、画像が多くて文字が少ないのがいい人、それにクリックやタップを嫌う人です。
ページネーションを施すということは、長文ページをいくつかのページに分割することになりますので、必然的にクリックやタップが多くなります。少し読んではクリックを強要されると、中には読むのが面倒になって離脱してしまう人がいることも否めません。

読み込みが遅いと離脱に繋がる

PCやスマホのスペックにもよりますが、ページネーションによってページを分割すると、クリックすることによって、次ページの読み込みをしなくてはならなくなります。
そのため、PCやスマホのスペック、または、通信環境などによっては、画像などがネックとなり読み込みが遅くなってしまう場合があります。
これでは、読者は読むのが億劫になってしまい、やはりページの離脱に繋がる場合があります。

ブラウザの「戻る」ボタンの使い方がわからない

一般的なブラウザでは、ページネーションで分割されたページの最後まで読んだ場合、ブラウザの「戻る」ボタンを長押しすることで、履歴ページが表示され、入った検索サイトに戻ることができます。
しかし、この「戻る」ボタンの長押しという使い方を知らず、何度も繰り返して「戻る」ボタンを押さないと戻れないという煩雑さから、離脱してしまう読者もいるようです。
これはページネーションの問題ではなく、ブラウザの使い方のリテラシーの問題ですが、意外に知らない人もいるのではないかと推測されます。
せっかくページネーションで快適に読めるページを作っても、最後の何度も「戻る」ボタンのせいでページの離脱やサイト自体の離脱が起きてしまっては、もっと稼げるはずのPV数が稼げなくなってしまい、ほんとうに勿体ないです。
このようなことが少なからずあると想定し、容易にホームのページに戻れるようホームボタンを設置するなど、ちょっとした工夫で離脱は防げます。

ページネーション設置のポイントとは?


では、ページネーションを設置するポイントとは、どんなところにあるのでしょうか?ポイントとなるところを挙げてみましょう。

スマホ用に調整する

近年では、PCよりもむしろスマホでWEBページを読んでいる人が多いくらいです。PC用にいくらきれいで快適に読めるページを作っても、スマホ用に最適化されていなければ、やはり読者は読むのを諦めて離脱してしまいます。
現在ではWEB用のエディタでもスマホ用に最適化できる機能が揃っていますので、作成や更新をしたら必ずスマホ用でもプレビューをしてみることがおすすめです。

ボタンのサイズを大きく

現在ではPCのブラウザ用サイト以上にスマホ用サイトの見え方に重点を置かなくてはならないというのが現状となっています。
そのため、ページネーションを実装する際にも、スマホように最適化できるよう、細心の注意が必要です。
例えばボタンのサイズですが、PC用サイトのデザインをそのままスマホ用にも実装すると、ボタンが小さすぎてタップできない、または誤タップでうまくリンク先に飛べないということも起こりえます。
これでは読者の離脱に繋がってしまうので、次のページに飛ぶボタンなどは大きめに作るのが得策と言えるでしょう。

現在地がわかるようにする

いまやWebサイトはPCで見るだけではなく、スマホやiPadなどマルチデバイスで見る時代です。
そのような時代にはすべてのデバイスに対応できるようにページをデザインしていかなくてはなりません。
特にスマホで見た場合、デバイス自体が縦長で、縦にスクロールすることが多いです。無限にスクロールできるサイトでは、自分が果たして今現在「どこのページにいるのか」がわからなくなると思います。
これでは、自分がすでにどのくらい読んだのか、またこの先どのくらい読む量が残っているのかがわからず、不安になったり、面倒臭くなったりして離脱の可能性も出てきます。
そのため、「次へ」「もっと読む」などとともにページ表示やタブなど、わかりやすい区切りをつけてページネーションを実装するのもいいアイディアだと言えます。

ページは適度な長さにする

ページネーションを適度に設置しないWebページだと、ダラダラとしたメリハリのない無限ページが続き、読者の離脱率も増えます。
また反対に1ページの内容があまりにも少なすぎるページも頻繁に次ページへのリンクをクリックしなければならず、それも読者の負担になります。
1ページの長さとして推奨されるのは「5スクロール」くらいの長さで、長過ぎたり短すぎたりして頻繁にクリックを強要されるようなことがないよう、読者に負担をかけないような長さにすることが重要と言えます。

最初と最後のページへのリンクは使用しない

ページネーションの実装の鉄則として、各ページへのリンクを貼る時、「最初と最後のページのリンクは使用しない」ことが鉄則です。
これはなぜかというと、結論から言うと一連の繋がったページとしてGoogleに認識されるためには最初のページは次のページが存在することがわかればいいので、「next」を、最後のページには、前にページがあることがわかればいいので、「prev」を設置します。
この他の設置方法だと、Googleの評価が悪くなる可能性がありますので避けたほうが無難です。

ボタンが押しやすくなるよう工夫をする

以前にスマホサイトでのボタンの大きさについて触れましたが、「ボタンが押しやすい」ことも重要です。
そのためにはパッと見て目立つことはもちろんなので、認識しやすいアイコンにするとかアンダーライン、マーカーを入れるなど、そこにリンクがあることがひと目でわかるようなリンクにしたいところです。

前後のページへのリンクを作る

Webページのページネーションはとても繊細なものです。ユーザーが一度の訪問で「なんか読みにくいサイトだな」と思ったら、もう二度とそのサイトを訪問することがない率も高いと言えます。
スクロールするだけの無限ページでなく、長い記事をいくつかのページに分けている場合、必ず前後のページへのリンクを作って実装しましょう。
また、その場合、1ページの長さが長過ぎたり短すぎたりすると、スクロールやクリックに疲れてユーザーの負担が大きくなりますので、だいたい5スクロールくらいで次のページに飛ぶように設計するのがいいとされています。

キーボードだけで操作できるようにする

また、次のページに飛んだり、説明のためのリンクへ飛んだりといった作業も、キーボードだけで操作できるようにするのもいいでしょう。
理想を言えばマウスのクリックだけですべての操作ができるようになるのが理想です。それだけ読者の負担も減り、「読みやすく、使いやすいサイト」という評判も上がりますので、リピーターが増えて結果的にはPV数の向上に繋がります。

ページネーションのSEO効果について


実はページネーションを実装すると、読者にとって読みやすくなるだけではなく、SEO効果もあると言われています。それはいったいなぜでしょうか?

ユーザビリティの効果

Webページにページネーションを実装すると、第一に「ユーザビリティの効果」があります。また、ユーザーが読みやすくなるだけではなく、検索エンジンのクローラもクローリングがしやすくなると言われていますので、ページネーションをおざなりにすることはできないと考えたほうがいいでしょう。

ユーザビリティとは

「ユーザビリティ」の意味は、文字通り、ユーザーが読みやすく、使いやすいページかどうかということになります。
具体的には前出の5スクロール程度での改ページやボタンの大きさ、押しやすさなどがこれに当てはまります。

効果的にするには

では、ユーザビリティを効果的にするにはどうしたらいいでしょうか。具体的には下記のようになります。
適度な1ページの長さ(5スクロール程度)
見やすく押しやすいページリンクボタン
現在位置(自分が今、読んでいるところ)を表示する
何ページあるのかを表示する
ユーザーが読みやすいように配慮を払うことで結果的にはPV数にも跳ね返ってくると言えます。

ページネーションタグの設置方法について

では、最後にページネーションタグの設置方法についてご紹介しましょう。

タグの書き方は?

ページネーションのタグは、「link 要素」でのように指定します。
こうすることで、次のページにリンクしたり、前のページにリンクさせたりすることができるのです。
URLにパラメーターがついている場合にはどうする?
次にURLにパラメーターがついている場合にはどうすれがいいでしょうか?
そもそも「パラメーター」とは、サーバーに情報を送る為、URLに付け加える変数を言います。例えば、 というURLにページの内容を変更しないパラメーターが付いている場合には、そちらも含めてといった具合に設置する必要があります。

無限スクロールとページネーション、どちらがよい?

結局の所、まったく次ページへのリンクなどがない「無限スクロール」ときちんとページネーションが施されて、見やすくデザインされたWebページでは、ページネーションが施されたほうに軍配が上がるでしょう。
なぜならば、無限スクロールのページではずっとマウスを押し続けてスクロールを続けなくてはいけないし、そのうちに飽きが来てページからの離脱をしやすいと考えられるからです。
しかし、ただページネーションが施されていればいいというわけでもなく、ページ内の文字量は適当か、リンクには押しやすく見やすいボタンが設置されているかなど、チェックすべきポイントは多いです。

まとめ

ここではユーザーに快適で見やすいWebページを提供するための技術、「ページネーション」についてご紹介しました。
ユーザーにとって快適にページ内を見ることができるためのWebページのデザイン手法「ページネーション」は、ただページの区切りがなく無限スクロールを続けるだけのページに比べると格段に見やすく、その上SEO的な評価も高いそうです。
Webページを何枚かのページに分割し、1枚を適度な文章量にして見やすいボタンやみやすく目立つリンクをつけることはユーザーにとっての快適性を向上させるばかりではなく、結果的にはSEO評価も上がることから、無視できないということができるでしょう。
ぜひユーザビリティとSEO効果を向上させるために、もういちどページネーションを見直してみてはいかがでしょうか?