無限スクロールとは？ページネーションとの違いや向いているサイトの特徴を紹介

2.　無限スクロールの3つのメリット

無限スクロールを導入することのメリットは、単に自動的にコンテンツを読み込んでくれるだけではありません。読み込み速度以外にも以下のようなメリットがあります。

①ページ滞在時間を増やす

無限スクロールの場合、ユーザーが画面をスクロールするだけで自動的にコンテンツを読み込んでくれるため、ユーザーのストレスが軽減されてページ滞在時間を増やせます。例えば、ユーザーが情報を求めてコンテンツを読んでいても、ページの読み込み時間が長いとブラウザバックしてしまう可能性が高いです。

したがって、自社コンテンツにおいてユーザーのページ滞在時間を増やすためには、質の高いコンテンツも必要ですが、いかにストレスを与えずに情報を伝えるかという点が大事です。

②モバイル端末で操作性に優れている

パソコンで表示するときは、画面が大きいため、一度に多くの情報を得ることが可能です。しかし、スマートフォンなどのモバイル端末は、画面がパソコンに比べて小さく、一度に得られる情報量も少ないです。そのため、情報量の多いコンテンツでページネーションを採用してしまうと、内容をすべて読むまでに複数のページにアクセスしなければいけません。

一方、無限スクロールはスマートフォンの画面をスクロールするだけで、コンテンツが読み込まれるため、スムーズに操作できます。

③多くの情報を表示できる

一般的には、情報量の多いコンテンツは読み込み速度が遅くなってしまいますが、無限スクロールを利用することで余計な負荷をかけずに多くの情報をユーザーに提供することが可能です。

とくに無限スクロールを採用しているコンテンツの場合、スマートフォンで閲覧するときに「流し読み」ができます。コンテンツを最後まで読むときも、別ページへ遷移するためのボタンや広告が表示されないので、ユーザーに効率よく多くの情報を伝えられるWebサイトになります。

無限スクロールのサイト実装について、依頼先をご検討の場合は、ビジネスマッチングサービス「リカイゼン」をご利用ください！ご希望に応じて実績あり・体制が整っている依頼先の候補企業リストをご紹介します。

3.　無限スクロールの3つのデメリット

無限スクロールは、1つのページだけでコンテンツをユーザーにすべて提供できることから、多くのメリットを感じます。しかし、実際にはデメリットも存在しているため、自社Webページに実装する前に知っておきましょう。

①ページの読み込み速度が低下する

「自動で読み込む」という点についてはとても優れた機能ですが、コンテンツの内容が長すぎたり、サイズの大きい画像などが多数使用されていたりすると、ページの読み込み速度が低下する可能性があります。

とくにGoogleは、「ページの読み込み速度をモバイル検索のランキング要素に反映する」と発表しているため、読み込み速度の低下は、SEOの観点からも注意しなくてはいけません。

②フッターのスペースがない

複数のページでコンテンツを提供するページネーションでは、次のページに遷移するボタンの下部にフッターを設定することが可能です。一方、無限スクロールは1ページに縦長のコンテンツが表示されるため、フッターを設定するスペースが基本的にはありません。あえてフッターを設定したとしても、コンテンツが長い場合は簡単に辿り着けない可能性が高いです。

したがって、無限スクロールを採用しながらフッターを表示したいときは、画面下部にフッターメニューとして固定させておくようにしましょう。

③情報の再発見が難しい

無限スクロールは、多くの情報をユーザーに提供できますが、コンテンツ自体が縦長になっているため、気になった情報をもう一度コンテンツ内で見つけ出すことが難しいです。そのため、コンテンツの内容がかなり長い場合はブックマーク機能などを実装して、可能な限りユーザーへの負担を避けられるような工夫をしましょう。

4.　無限スクロールを採用したWebサイトに適した事例

自社Webサイト内のコンテンツが、ユーザーにとって流し読みができるものであれば、無限スクロールの採用をおすすめします。

例えば、TwitterやFacebookなどのSNSはユーザーが目的を持って使っているというよりは、空いた時間に流し読みすることが多いです。他にもテキストではなく画像検索のように、視覚的なコンテンツを提供する場合は無限スクロールが適しています。

このように、モバイル端末でのスクロールに優れていることから、スマートフォン向けのコンテンツとして提供するのであれば、無限スクロールの実装を検討すると良いでしょう。

以下では、無限スクロールが採用されているWebサイトの成功事例をご紹介します。

事例①：Yahoo!｜ニュースサイト

無限スクロールがその特性を発揮するサイトの1つに「コンテンツを時系列で表示するサイト」があります。その代表例がニュース系サイトです。

ECサイトなどと異なり、ニュース系サイトを訪れる人の多くは明確な目的を持っていません。そのため、1記事だけ読んで離脱される可能性がそもそも低い状態です。

その状態で、無限スクロールで自動的に次の記事が流れるようになっていると、ユーザーはついつい記事を読み続けてしまいます。

さらに、ページが分割されている場合、記事をシェアする前に1ページ目に戻らないと、シェアされたリンクを踏んでも、2ページ目から始まってしまいます。このような事態を避けるためにも、ニュースサイトは積極的に無限スクロールを取り入れるべきです。

参考：https://www.yahoo.co.jp/

事例②：MUUUUU.ORG｜ギャラリーコンテンツ

「MUUUUU.ORG」は縦長のデザインのみを集めたギャラリーサイトです。

デザインの参考を探しているサイト訪問者にとって、ページ下部までいけば操作なしでも勝手に次のコンテンツが読み込まれるのはストレスフリーな仕様といえるでしょう。

「Webデザイナーが選ぶ使い勝手の良いギャラリーサイト」としてまとめられているサイトはどれも無限スクロールが活用されたものばかりで、非常に相性のいい組み合わせなのがわかります。

参考：https://muuuuu.org/

事例③：Nike｜ECサイト

一般的にECサイトに無限スクロールは向かないと言われています。これは、前述のとおり、無限スクロールの特性である「同じコンテンツを再度見つけることの難しさ」のためです。

しかし、誰もが知るスポーツアパレル「Nike」は商品の一覧ページに無限スクロールを採用しています。これは、古典的な無限スクロールに対していくつかのバリエーションが開発され、無限スクロールのデメリットとされてきた部分に改善の余地が生まれてきたからです。

代表的な例として挙げられるのが「さらに読み込む」ボタンです。この手法は、ECサイトのみならずGoogleのモバイル検索結果ページにも取り入れられています。

このボタンがあることで、読み込むコンテンツを前もって減らすことができ、データプランが限られているユーザーに親切な仕様となります。さらに、「さらに読み込む」と表示されることで、見ているユーザーは「希望に叶う商品が次の読み込みで出てくるかもしれない」と期待します。

少しの工夫で、欠点が回避され、さらにはユーザーエクスペリエンスの向上にまで繋がるのです。

参考：https://www.nike.com/

5.　まとめ

無限スクロールは、読み込み速度の低下などのデメリットはいくつかありますが、表示された1ページだけを最後までスクロールして読むだけで、コンテンツの内容をすべて知ることができます。

そのため、読み手であるユーザーに余計な負荷をかけずにコンテンツを提供できる点は、とても優れた機能だといえるでしょう。しかし、無限スクロールやページネーションは、自社が運用するWebサイトの形態によって使い分けることが重要です。

無限スクロールの実装や設計についての専門知識がない場合は、「リカイゼン」などの無料でビジネスパートナーや自社に適した外注先を探せるビジネスマッチングサービスの活用をおすすめします。