Webサイトを制作する上で絶対に欠かせない要素として顧客の満足度があります。どんなにデザイン性が良くても、使いづらい、見づらいサイトはユーザー（お客様）はすぐにサイトを離れてしまうでしょう。

最近のWebサイトでは、コンテンツを生成する上で

• ページネーション
• 無限スクロール

主にこの2つの構成で組織されている事が多く、コンテンツ量とそれによるページの数に応じて、それぞれ最適な方法でコンテンツを表示します。

「無限スクロール」と「ページネーション」、この2つの構成は一体どういうものなのか、どちらが優れているのかなどを紐解いていきたいと思います。

ページネーション

ページネーションは主にECサイトやブログなどの情報サイトで使用されることが多く、ページの下部に位置する番号付きのリンクを選択して別のページに遷移します。サイト内にある情報を分割する事で、ユーザーに対して必要な情報を適切な情報量分、表示する役割があります。

ページネーションの長所としては

• 目的の記事に飛びやすいのでUX評価が高い
• 回遊率が高まりやすくなり、コンテンツ内容によってはコンバージョン率が期待できる
• 過去のコンテンツも見失わずにすぐ遷移、閲覧できる

ユーザーによっては見たい記事が異なりますが、興味のないコンテンツをずっとスクロールして閲覧するとサイトの離脱にも繋がります。ページネーションによってコンテンツを分割表示することで、ユーザーは興味のあるコンテンツにすぐ遷移できるため、UXの評価も良くなります。また膨大になっているWebサイトやECサイトも、情報表示スピードが上昇するため、ユーザーも無駄な時間を費やす事なく、目的のコンテンツページにストレスなくたどり着くことができます。

長所だけでなくもちろんページネーションも短所もあり

• ページ毎の評価が分散する可能性がある
• 表示速度が遅いと離脱されてしまう事がある
• 適度な分割数にしないと訪問者にとってストレスになる

場合によっては重複コンテンツとGoogle側に評価されSEOに悪影響となる場合があったり、広告を使用することによって一々遷移するたびに興味のない広告が出たりすると、表示速度にも影響を与え、ユーザーに不快を感じさせる場合もあります。

なのでページネーションを導入する際は

• ページの下部に設置する
• 適度にコンテンツ量を分散
• ページ数が多い場合は「1〜」の数字のみではなく、「前へ」「次へ」「最初」「最後」といった前後ボタンを設置する
• モバイル端末に合わせたサイズ感を意識する

特に最後のモバイル端末に合わせたサイズ感を意識しないと、ユーザーにとってはボタンが小さくて、または大きくて操作しづらいという事が起きてしまい、サイトを離れる可能性が高くなりますので注意が必要です。

無限スクロール

無限スクロールは文字通り、ユーザーが下部にスクロールしてもページは変わらず、永続的にコンテンツが読み込まれ続けるコンテンツ表示方法です。これは1つのページ上で情報が流れ続ける事ができ、主にFacebookやInstagramなどのSNSのフィード画面で使用されることが多いです。

またアルゴリズムにより、自分の興味に適したものに関するコンテンツがリダイレクトされ、ユーザーが特にコンテンツのジャンルを決定されていない状態で、何気なく興味のあるコンテンツを閲覧する、またそこから何か「発見」するためのキッカケを与える目的としては必須の表示方法です。

無限スクロールの長所としては

• スクロールするだけで情報が流れてくるので、ユーザーのストレスが軽減でき、滞在時間を増やす事ができます。
• ページが分割されていないので、一度に閲覧できるコンテンツがスクロールする分無限に表示される
• モバイル端末に適している

PCで閲覧する際、画面が大きい分一度に多くの情報を得ることが可能ですが、スマホなどのモバイル端末は画面が比較的小さいため、一々ページを読み込むページネーションスタイルだと、ユーザーにとってストレスを抱えてしまう場合もあります。無限スクロールはタップしてページの読み込みを待つページネーションより、スクロール一つで新しいコンテンツを閲覧できるので、情報を得られるスピードも速いのが利点です。

しかしこの無限スクロールにも短所があり

• 読み込み速度が遅いと離脱の原因につながる
• 特定の項目に辿り着いてもブックマークできない上に再発見できない
• フッターがないためフッターリンクによる別のページに遷移できない

コンテンツの内容が長く、容量の大きい画像などが使用されたりすると、読み込み自体に時間がかかってしまい、ユーザーが離脱することもあります。またある程度スクロールした際に気になるコンテンツがあってとしても、そのコンテンツを一旦ブックマークして別のコンテンツを閲覧（スクロール）した時やサイトを一度離れて再アクセスした際にそのコンテンツを再度見つけるのに困難になってしまう、最悪見つからない場合があります。

なので無限スクロールを導入する際は

• ユーザーに対して利用可能や新たな発見をしてもらえるようなコンテンツを生成するサイト
• 容量が重い画像などを載せず、読み込み速度を抑制する
• 固定バーを設置し、他の画面に遷移できないというユーザーのストレスを無くす

無限スクロールも当然デメリットの要素が存在するため、用途、使いやすさを考慮した上でコンテンツを生成すると良いでしょう。

まとめ

ページネーションはユーザーをできるだけ早く目的のコンテンツに辿り着かせるため、無限スクロールはユーザーに効率的に「新しい発見」を促すのに適した表示方法であり、どちらも読み込み速度が遅いとユーザーにとってストレスを抱えてしまうため、適度なコンテンツ量を1つのページに組み込む必要があります。

どちらが優れているかという事に関しては優劣つけることはできません。使いやすさに関しては掲載するコンテンツの内容によります。「新しい発見」を促すようなサイトにページネーション、目的のコンテンツにたどり着いて欲しいようなサイトに無限スクロールを導入しても、ユーザーにとっての本来の使いやすさには辿り着きません。

Webページを作成する際には、掲載するWebサイトの内容や、ユーザーの行動などを分析し、それに応じた最適なコンテンツUXを選択しましょう。

下記はそれぞれのUXコンテンツに適したサイトの参考例です。

ページネーション

• ECサイト全般
• ブログやニュースなどの情報掲載系サイトやアプリ

無限スクロール

• FacebookやX（Twitter）などのユーザー生成型のSNS系のサイト、アプリ
• 画像検索サイトなどのビジュアルコンテンツ系のサイト、アプリ

‍

弊社でもこのようなコンテンツを少しずつですが掲載していき、ゆくゆくはページネーションを活用して皆様にとって有益に、そして見やすいサイトを構築していきます。

‍