ロングスクロールや無限スクロールとは、ページが平均的なWebページよりはるかに長いために、文字通りスクロールが「無限に続く」ように見えるサイトです。このようなサイトはソーシャルメディアサイトや、Pinterestといったユーザー生成コンテンツを多く含むサイト、ニュースサイトやブログサイトでよく見られます。また、個人のサイトやポートフォリオでも、ユーザーのエンゲージメントを高めてサイトでの滞在時間を長くするために採用され始めています。
無限スクロールは人気で一般的なデザインパターンですが、UIデザイナーがロングスクロールを使ったサイトをデザインする際には、注意すべきいくつかの落とし穴があります。また、ロングスクロールのデザインパターンを実装すべきではないサイトも存在します。
ロングスクロールの目的とメリット
ロングスクロールのWebサイトが得られる最大のメリットの１つは、訪問者をサイトにより長く留められることです。より多くのコンテンツを見るために意識的な決断をする必要がないと、訪問者が立ち去る可能性は低くなります。
この手法は、FacebookやYouTube、Netflixのようなサイトが、ユーザーが見ている動画が終わったら次の動画を自動再生する手法と似ています。もし自動で新しい動画を見られない場合、クリックしてほかのサイトに移動してしまう可能性も同じだけ存在することを彼らは知っているのです。動画が自動で再生され続ければ、ユーザーが動画を見続ける可能性は高くなります。
適切なコーディングがされていれば、ロングスクロールのサイトは新しいコンテンツごとに新たなURLをロードします。新しいURLを読み込むことは、サイトのPVを増加させることと同じであり、それによって広告収入やサイトのマーケティング的な価値を上げることができます。
Mashableのトップページは、ユーザーがスクロールするのに合わせて新しいコンテンツを自動的にロードし、それによって、ユーザーをより長くページに留まらせています
あらゆるUXの意思決定と同じように、フォーマットを決定する前には、実際にサイトを使うユーザーに与えるメリットとデメリットを天秤にかけることが重要です。ロングスクロールはあるサイトでは有効な選択肢になりますが、別のサイトではユーザーを苛立たせるだけかもしれません。この２つの違いを知ることが大切です。
ロングスクロールを使うべきサイトと、使うべきでないサイト
ロングスクロールについて考える際に覚えておくべきなのは、どのような種類のサイトをデザインするにせよ、コンテンツがフォーマットを決めるということです。ロングスクロールのWebサイトはある種のコンテンツには有効ですが、ほかのコンテンツではUXに甚大な損害を与える可能性があります。
一般的に、タスクや目標を指向したWebサイトは、無限スクロールデザインからメリットを得られません。たとえば、ECサイトや、ユーザーが明確な進捗を確認したいようなチュートリアルなどの教育サイトが挙げられます。これらのタイプのサイトはユーザーに満足感と達成感を感じてもらう必要がありますが、ロングスクロールのサイトでこれらを感じさせるのは難しいことです。
たとえばEtsyは2012年に無限スクロールを試しましたが、最終的にページネーションに回帰しました。顧客の購買率はおおむね横ばいだった一方で、ユーザーのエンゲージメントは低下したことに気づいたのです。検索回数のような数値ですら下落していました。
Etsyは稼働テストの後、ロングスクロールをやめて、ページ割りされた検索結果に戻しました
ECサイトの中には、訪問者が商品ページを見る際に「View All」を選択できるようにしているサイトもあります。これによって、短い検索結果ページを好むユーザーには短いフォーマットを提供しながら、同時に無限スクロールで見たいユーザーにも適応しています。
ページネーションは、ユーザーが時系列順に情報を見る必要がある場合にも役立ちます。１ページをスクロールし続けるサイトでは、ユーザーが情報を流し読みしたり飛ばしたりするかもしれません。しかし、ページネーションなら訪問者が落ち着いて、適切な順序で情報を消費する可能性が高まります。
１ページをスクロールするWebサイトが有効なのは、自然な流れで新しいコンテンツや記事を読むことができる場合です。ニュースサイトやトピック毎にまとめられたブログはこのケースに当てはまります。こうしたサイトのユーザーは、１度に大量の情報を手に入れたいものです。無限スクロールであれば、そういった情報を簡単に表示することができます。
無限スクロールがUXとして選択されやすいほかの例は、ソーシャルメディアサイトやユーザー生成コンテンツがたくさん含まれるサイトです。FacebookやPinterest、Twitterはすべて無限スクロールを使っています。こうしたサイトはユーザーをできるだけ長くサイトに留めたいので、無限スクロールが有効に機能します。
ロングスクロールの心理学的なコスト
どのようなデザインの意思決定においても、心理学的な効果を注意深く考慮するべきです。１ページをスクロールし続けるWebサイトにおいても、好ましい心理学的な効果とそうでない効果の両方があります。
まず考慮すべきなのは、ユーザーは目的のためならクリックを厭わないことです。クリックはコンピュータ操作やGUIの一部であり、インターネットが誕生して以来欠かせない要素です。ユーザーはクリックというインタラクションに慣れています。より多くのコンテンツを見るためにいくつかのリンクをクリックしなければならないとしたら、ユーザーはクリックするでしょう。
基本的には、多くのユーザーは無限スクロールを好みません。スクロールがあまりにも長いページに出会うと、無限に広がる情報の海で溺れるような気持ちになります。ユーザーが特定の情報を探しているときに、スクロールは滅多に効率的な方法になりません。
無限スクロールではページの長さを正確に表示することができないので、ページの横にスクロールバーを表示します。しかし、中にはスクロールバーをうまく使えないユーザーもおり、彼らは無限スクロールに不満を抱くでしょう。
また、無限スクロールでは、ユーザーが１つのタスクを終えたり、あるページで目標に到達したりして次のページをクリックするという達成感が失われます。達成感が得られないユーザーは、やる気を失って、同じ情報やタスクを提示する別のソースを探そうとするかもしれません。
ロングスクロールのWebサイトが持ち得るもう１つのネガティブな心理学的影響は、ページの上部にあるコンテンツより下部にあるコンテンツのほうが重要度が低いとユーザーが考えやすいことです。しかし、このときヘッダーを使って、ページの１番上についての認識をリセットさせれば、悪影響を抑えることができるかもしれません。
ロングスクロールのWebサイトにおけるベストプラクティス
自分たちのWebサイトにロングスクロールデザインが相応しいと決まったら、最適なユーザー体験を提供するために覚えておくべきいくつかのベストプラクティスを参照してみましょう。
まずは、フッターを捨ててください。コンテンツがロードされ続けると、フッターもページの底に押し下げられ続けます。つまり、フッターに含まれるコンテンツや情報はいつまでも視界に入りません。さらに、ユーザーが一瞬フッターを見つけたとしても、クリックする前に見えなくなってしまいます。フッターを固定するのも１つの回避策ですが、大抵の場合はフッターを完全に削除したほうが良いでしょう。
Barbicanではフッターにある有益な情報を見ることはできません。というのも、フッターを見つけた瞬間に新しいコンテンツがロードされ、画面の外に押し出してしまうからです
特にファーストビューを読み込んだときにロードすべきコンテンツがまだあるかどうか一見してわからない場合は、視覚的なキューを使うことが重要です。ページをローディングしたら大きなヘッダー画像やビジュアルコンテンツが画面をうめ尽くすようなサイトでは、矢印（アニメーションがついている場合もあります）などの画像を使って、下にさらにコンテンツがあるのを示していることが多いです。
Dynamitはホーム画面の下部に小さな矢印を配置し、ユーザーにスクロールの必要性を示しています。
ヘッダーを固定したりナビゲーションリンクの付いたサイドバーを使ったりして、ナビゲーションがいつでも見えるようにしておきましょう。ただし、モバイルデバイスはヘッダーを固定するとスクリーンの大部分を占めてしまうので例外です。この問題に対して、Facebookはユーザーが下にスクロールしたときにはヘッダーを消して、上にスクロールし始めたら再表示することで対処しています。
Chromeブラウザはスクリーン下部の操作において似たデザインを採用しています。ユーザーが下にスクロールすると下部が消えて、上に戻り始めると再表示されます。スクリーンのスペースを最大限に活用できるインターフェイスを作るうえで、非常に直感的な方法です。
スクロールした先のセクションに応じてURLを変える機能が、無限スクロールのWebサイトにおいて一般的になりつつあります。また、ページの内部ブックマークを使ってURLを変更している事例もあります。
ニュースサイトやブログのようなサイトでは、ユーザーのスクロールに合わせてURL全体を更新しています。これによって、ユーザーはページ自体の変化を気にせずに、リンクを貼りたいコンテンツに確実にリンクを貼ることができるので、非常に重要です。
同じページに直接コンテンツをロードする「load more」ボタンを使って、「ハイブリッドな」ロングスクロールの作成を選ぶ人もいます。また、このボタンを１つのページの中で繰り返し使う人もいますし、１度ボタンがクリックされたら一般的なロングスクロールのフォーマットに移行させる人もいます。
無限スクロールを採用するサイトには、以上に紹介したロングスクロールのWebサイトをデザインするとき特有の考慮事項に加えて、一般的に優れたデザインを作るためのUI、UXのベストプラクティスも適用しましょう。
ロングスクロールが正しく使われている事例
The Story of Zohraのサイトでは、スクロールを始めるときに視覚的なキューが使われています
The Merbis Photography & Filmmakingのサイトは無限スクロールを使っているポートフォリオの素晴らしい例です
The Windows of New Yorkのサイトはトップページにすべてのコンテンツをロードします
The Like There is No Tomorrowのサイトはロングスクロールと視差的なスクロールを併用しています
The Faces of New York Fashion Week のWebサイトにはイベント写真が一覧で表示されていて、ロングスクロールのフォーマットが完全に適合しています
John BallのWebサイトは少し違うアプローチを採用しています。背景の画像は無限にスクロールできますが、テキストは固定されています
The Fake It DigitalのWebサイトは一般的なビジネス用語やデザイン用語、マーケティング用語に別のユーモラスな定義を表示するために、ロングスクロールを使っています
そして以下がAndrew McCarthyのサイトです。デザインはユニークでありながら、同じ情報を何度も表示している無限スクロールです。McCarthyはデザイナーなので、これは周囲との差別化を図るための作品的選択でしょう。
同じコンテンツを何度も繰り返すのはSam Rosenも同じですが、こちらはすべてのコンテンツをローディングし直すのではなく、トップページに戻る動きをループしています。
結論
ロングスクロールのWebサイトは新しいものではありませんが、今まさに成熟期に達しようとしています。デザイナーはもはやロングスクロールをただの次の「流行」として導入することはありません。このパターンがユーザー体験にどのような影響を与えるかについて注意を払っています。
無限スクロールのWebサイトを作る際にベストプラクティスに従えば、デザイナーはユーザーに不満を与えず満足させるUXを作り上げることができます。同時に、きちんと実装されたロングスクロールのWebサイトがあれば、ブランドのWebサイトの目的を達成することができるでしょう。
