Webデザインにおいては、お目当ての情報にたどり着くことが大目的ではありますが、そこにたどり着くまでの過程も、同じくらいに楽しい体験となりえます。
これはWebページにおけるスクロールとその種類の話です。クリエイティブなスクロールを使い分けることによって、コンテンツが読まれるペース、量、そしてユーザーとのインタラクティブ性を調整することができます。インターネット上では、人間の関心は約8秒という短さで移り変わりますので、快適なスクロール体験がユーザーの関心の維持に寄与するのは間違いないでしょう。
この記事では、最も多く使われ、競争を生き延びたスクロールパターンの良し悪しを見ていきます。無償公開されているWeb UI Patterns 2016 Vol.1という電子書籍で言及されている通り、スクロールパターンはそれぞれが独創的ではありますが、長年の改良によって有用であることが証明されています。
それでは、各々の状況に合ったスクロールパターンを決めるにはどうすればいいでしょうか。次に挙げる順番で、具体例、実際の仕組み、最も成功した形を見ていくことにします。
・長距離スクロール
・一部固定＋長距離スクロール
・無限スクロール
・パララックススクロール
では、始めるとしましょう！
１. 長距離スクロール
課題
・サイトが多様且つ大量の内容を含んでいて、複数のページでは誘導が難しい
・サイト上のコンテンツをスムーズに、そして連続して展開したい
解決策
Webサイトに含む情報を一か所に集めたいなら、長距離スクロールサイトをシングルページで作りましょう。ソーシャルメディアのサイトや、その他ユーザーの制作物を含むサイトには絶大な効果を発揮します。これらは内容を一度にまとめて閲覧することが楽しみの一つであり、また常に内容の更新が行われるために、情報の分類が難しいからです。
画面が小さいためにスクロール量が多くなるモバイル環境の普及も、長距離スクロールにとっては追い風です。
後述する無限スクロールを長距離スクロールと組み合わせれば、Webサイトの閲覧に没入感を生み出します。ユーザーが特定の情報を探している場合は、Amazonのような体系的な仕組みに軍配が上がりますが、情報を次々に閲覧するなら、長距離スクロールがユーザーにとって最も高速で、楽しいものとなるでしょう。
導入のコツ
・固定ナビを使いましょう。現在位置を見失ったり、前に戻ることができなかったりする点は長距離スクロールの欠点ですが、メニューを固定することで、ユーザーは自在に移動が行えます。
・SEO対策においては長距離スクロールが悪影響を及ぼすことがありますが、この記事のアドバイス（英語）に従って回避できます。
・長距離スクロールでは必ずしもシングルページでなくても構いません。中心となる長距離スクロールのページが存在し、そこから従来の派生ページへリンクすることを特徴とするWebサイトも時折あり、FacebookやTwitter の独立したプロフィールページはその好例です。
・ウェブページ上の特定領域で、一回限り長距離スクロールを適用したい場合は、次に述べる固定長距離スクロールも検討しましょう。
２. 一部固定＋長距離スクロール
課題
・長距離スクロールを活用する利点があるが、複数ページからなる構造全体を変更したくない
解決策
Webサイトに一部固定＋長距離スクロールを採用すると、長距離スクロール領域を１つ用意し、その内部に複数の領域が必要となる情報を表示できます。この視覚効果は「スクロール内でのスクロール」といった印象を与えます。
導入のコツ
・固定スクロール領域で表示する内容を決めるにあたっては、単一の話題や分類に収まる情報のみを選ぶようにしましょう。たとえば、Squarespaceの固定スクロール領域は、それぞれ異なる業種ごとの、「きれいなWebサイトを作成する方法」に絞った内容になっています。
・固定スクロール領域それぞれの終端には、CTA（Call to Action）を配置しましょう。
・UXPin product tour pageがそうであるように、上部メニューに「スクロール進捗バー」を追加することも検討しましょう。この方式は、３つから４つのフレームを含むWebサイトにおいて、移動速度の把握にとても役立ちます。
３. 無限スクロール
課題
・内容をシングルページ上に整理したいが、一度に読み込むには情報が多すぎる
解決策
無限スクロールを採用することで、情報を必要に応じて読み込み、一定の割合で表示することができます。無限スクロールは、映像や音声など、特に画面数枚をこえる量の情報をシングルページ上に含める場合に有用です。
無限スクロールはソーシャルメディアのサイトにおいて、ユーザーがクリックや待ち時間なしで連続して映像や音声を楽しめるリズムのようなものを生み出します。
無限スクロールで問題となるのは、ユーザーが現在位置を見失った場合ですが、対策はあります。ここでもやはり固定メニューが最適で、設置することでユーザーは無限に近い映像や音声の海の中でも快適に移動できるでしょう。
導入のコツ
・場所を見失った際の対策として、固定メニューの他にも方法があります。Tumblrにあるような、場所を指定して遷移する方式を用いれば、ユーザーは迷った時に始めの位置に戻ることが可能になります。
・無限スクロールはページネーションと組み合わせることで、より精確な検索を可能にします。たとえば、Facebookでは、ユーザーはタイムラインを年別に検索できます。
・ローディングを表示する際、従来の丸いアイコンに囚われないようにしましょう。アイコン次第で、Webサイトの個性に深みを与えることができます。Facebook、Tumblr、Imgurやその他のWebサイトはみな個別の記号を使用しています。
４. パララックススクロール
課題
・ユーザーが長距離スクロールでは十分長く留まらない、エンゲージメントが低い
解決策
凝ったパララックスを追加して、長距離スクロールのWebサイトに更なるインパクトを与えましょう。数十年にわたってテレビゲーム業界の間で知られている通り、この方式は、２次元画像を複数の層に分け、スクロールの際に異なる速度で動かすものです。
これはすなわち、それぞれ手前と奥で動く物体の速度の違い、あるいは背景で異なる層が動く際の速度の違いを表します。この視覚効果で、立体的な感覚を与えて、ユーザーを魅了することができます。
パララックスはスクロールの持つ側面の中でもクリエイティブな一面を引き出します。これは特にスクロールに連動するアニメーションと組み合わさった際に顕著です。このパララックスは、物語を展開するWebサイトにおいて有用で、Webサイトの外観を向上させるとともに、さらなる没入感と刺激性をもたらします。
The Walking Deadではパララックスと併せて他にもスクロール関連技術を採用しており（ここでは、ユーザーが下にスクロールするのに合わせ、操作とは異なって左から右に画面を遷移させています）、画面上の物語に深みを与えています。必須の技術ではないとはいえ、この背景への差別化はスクロールを眺める際の楽しさに結びついています。また、画面上で登場人物がスクロールに反応することも、状況に合致しています。
導入のコツ
・パララックスのコードを書くにあたっては、Dave Gamache氏のMedium記事が役立ちます。
・読み込み回数に注意しましょう。どんなに凝っていても極端に読み込みが遅ければ、結局はシンプルで高速なWebサイトに軍配が上がってしまいます。
・・・
このような内容をもっと知りたい方は、完全版の無料電子書籍 Web UI Patterns 2016 Volume 1をご覧ください。この文献では、38のUIパターンについて、140以上の例を挙げて解説しています。
