かつてWebデザインでタブーとされていたものが、近年もっとも人気がある手法の１つとして完全復活しました。ユーザーはスクロールが必要なサイトを好み、評価するようになったのです。スクローリングは過去の汚名を捨て去り、主要なインタラクションデザインの要素として新たに生まれ変わろうとしています。つまり、デザイナーは新たなルールを学ぶ必要があるということです。
この記事では、スクローリングの復活について探ります。この手法の長所と短所を説明し、ちょっとしたヒントも紹介します。
出典： Fitbit
スクローリングが再評価された理由
簡潔に言えば、答えはモバイルデバイスにあります。
モバイルユーザーの数がデスクトップユーザーの数を上回って以来、UIデザイナーの誰もがこの流れに適応してきました。小さな画面を利用するユーザーが多くなったことで、スクローリングの必要性が増しました。画面が小さくなるほど、スクロールは長くなります。
また、別の要因もあります。高速なインターネットへのアクセスが多くの場所で可能になったことで、ページを次々クリックして閲覧するよりも、スクローリングで閲覧するほうがより手軽に情報にアクセスできるようになりました。ソーシャルメディアの成長もまた、スクローリングの流行に拍車をかけています。スクローリングは、もともとユーザー作成型コンテンツ（UGC）と相性が良い手法です。
『Web Design Trends 2015 & 2016』の手引きの中で説明されているように、ロングスクロールはカードデザインと共に進化してきました。これら２つの手法が組み合わさることで、手頃なサイズのコンテンツを途切れることなくユーザーに提供できます。これはWeb体験、特にモバイル体験に最適です。
出典：Upworthy
さらに、スクローリングの使用に歯止めをかけていた「Above the fold」の原則は、今や過去の幻想だとみなされています。
編注：Above the foldとは、スクロールせずに表示される画面領域のこと（国内ではファーストビューなどともいわれます）。
研究によれば、実際ユーザーはスクローリングをためらいません。ファーストビューにすべてを詰め込む慣習から、スムーズなスクロールに沿って配置するように変わりつつあります。
この幻想が広まった理由の１つにはもちろん、JavaScriptやCSSが進歩し、スクローリングが意図的なデザインパターンだとしか真剣に見なされなくなったことがあります。以前は、視覚的な物語を通じてスクローリングを魅力的にするのはもっと難しいことでした。ご想像の通り、稀に画像が挟まれつつも、文字でいっぱいの長いページは、あまり魅力的なUIレイアウトとは言えません。
出典：The Boat
しかし、ロングスクロールをキャンバスとみなして、画像やアニメーション、アイコンなどを挿入しながら始めから終わりまで描きすすめると、ロングスクロールにはユーザーの注意を引きつける、映画のような力があることがわかります。
実際、スクローリングの最新トレンドとして、ハイブリッドなスクロールがいくつか登場しています。たとえば、私たちが運営するUXPinの紹介ページで使用している「一部を固定するスクロール」は、サイトを縦に引き延ばすことなく、従来のロングスクロールのサイトと同じようにインタラクティブな体験を作り出しています。
出典：UXPin
あなたのサイトにスクロールは適切か？
すべてのデザインテクニックやツールは、人によって好き嫌いが分かれます。多くの場合、本質的にはどちらが正しいと決まっているものでありません。そのため、プロジェクトなどに取り組む前に、すべてを考慮することが重要です。
スクローリングのメリット
- インタラクションを促進する - スクローリングは要素の変化によって絶え間なく刺激が生まれるので、ユーザーにインタラクションをうながすことができるストーリーテリングの手段です。センスが光るパララックススクロールではわかりやすく表れています。
- スピード - ロングスクロールは複雑なナビゲーションの道筋に沿ってクリックするよりも速くインタラクションできるので、ユーザーの体験を遅くしたり制限したりすることがありません。『Interaction Design Best Practices』で説明されているように、知覚した時間のほうが実際に経過した時間よりも重要であることが多いです。
- ユーザーの気を引く - ユーザーが利用しやすいことで、よりサイトにインタラクションするようになり、訪問時間が長くなります。特に、無限スクロールのサイトではなおさらです。無限スクロールは、ユーザーが今まで思いつかなかった関連するコンテンツを見つける手助けになります。
- レスポンシブデザイン - デバイスごとにサイズやキャパシティが異なることで、ページデザインが複雑になることがありますが、スクローリングによってこの違いに簡単に対処することができます。
- ジェスチャーコントロール - スクローリングは、画面に触れることと生来の繋がりがあるようです。なぜなら、指を上から下に滑らせるのは、画面のさまざまな場所を何度もタップするよりも簡単だからです。モバイルにおいてこの手段は、情報を表示する方法としてほとんどのユーザーに認められています。
- 楽しいデザイン - クリック数が少なく済むことでインタラクションが速くなり、アプリやゲームのようなユーザー体験が生まれます。
出典：Bauer
スクローリングのデメリット
- 受け入れられない人もいる - 変化に抵抗感があるユーザーが常に存在することに注意しましょう。ただ、特にモバイルでの体験において、今やスクローリングは広く浸透しているので、大半のユーザーがこの手法に慣れていると言って間違いないでしょう。
- SEO対策の弊害 - １ページしかないことは、サイトのSEO対策の面ではマイナスになるかもしれません。こうしたSEO対策のマイナス面を知るには、Mozのパララックススクロールに関する記事や、Quicksproutの無限スクロールに関する記事をご覧ください。
- 混乱を招く - スクローリングとコンテンツがばらばらだと、ユーザーの混乱を招いたり、気を逸らしてしまうかもしれません。
- ナビゲーション上の使いづらさ - ページの前のコンテンツに「戻る」のが面倒かもしれません。対策として、各項目がページの各セクションに対応している固定されたトップナビゲーションを作成しましょう。
- サイトの表示速度 - 動画や画像ギャラリーなどのサイズが大きいコンテンツはサイトの表示速度を遅くするかもしれません。特に、JavascriptやjQueryに依存するパララックススクロールがあるサイトは顕著です。サイトの表示速度を遅くすることなくパララックスサイトを作成する方法は、こちらのレクチャーをご覧ください。
- フッターがない - 無限スクロールのサイトでは、ナビゲーションが失われないよう、画面下部に固定する「スティッキーフッター」をおすすめしています。フッターがないと、ページ下部に詳しいナビゲーションがないことで、ユーザーが混乱する可能性があります。
メリットとデメリットはさておき、ロングスクロールはいくつかの種類のサイトには特に適した手法です。より長いスクロールのWebサイトに最適なのは、次のようなコンテンツやデザインプランです。
- 大部分（大半のユーザー）がモバイルからアクセスされる
- ブログなど、頻繁にアップデートしたり、新たなコンテンツ更新することがある
- インフォグラフィックなど、大量の情報が１つの方法で表示されている
- ローディングに時間がかかるようなリッチメディアを含まない
コンスタントに豊富なユーザー作成型のコンテンツがあるソーシャルメディアのサイトは、ロングスクロールとの相性が良いです。実際、FacebookやTwitterは、数年前にこの手法を広めるのに一役買いました。他方、一貫したナビゲーションを必要とする、ECサイトのような目標を重視するサイトは、より保守的なページの長さになる傾向があります。
出典：Amazon
その間にあるのが、Etsyのようなユーザーが作成した商品を扱うECサイトです。数ページにわたる「無限」スクロールを採用しつつも、末尾に「もっと見る」のコールトゥアクション（CTA）を配置する、ハイブリッドなソリューションを採用しています。
出典：Etsy
あらゆるWebデザインにおけるトレンドと同様に、ほかのサイトがこのパターンに従っているという理由だけで、ロングスクロールを実装するのはやめましょう。今まで説明した基準に、開発しているWebサイトを合わせましょう。そうでなければ、悪い結果が待ち受けているかもしれません。
スクローリングのベストプラクティス
ロングスクロールやパララックス効果、それに類似した仕組みは、デザインの分野において比較的新しい存在（４年以内）ですが、基本的な試行錯誤を通じて、基本的なベストプラクティスが生み出されています。
ここでは、『Web Design Trends 2015 & 2016』を要約し、ロングスクロールを上手に実装するヒントを紹介します。
- 長いスクロールと短いスクロールを交互に使うことを恐れてはいけません。コンテンツがスクロールの長さを決定づけるのであって、その逆ではありません。よって、トップページに短いスクロール、ランディングページ（商品、紹介ページなど）に長いスクロールを使用しても一向にかまいませんし、むしろよくあることです。
- Free Range Designsが使用しているような固定されたナビゲーションを考えましょう。これにより、ユーザーは常にスクロール内のある要素から別の要素に素早く「戻る」、または移動することができます。
- すべてのユーザーがすぐにサイトの仕組みを理解できるように、デザインの要素やツールを合わせてスクロールを表示しましょう。矢印やアニメーションボタンのようなUIデザインのツールは、ユーザーを楽しませられるだけでなく、ユーザーが次にすべきことを判断する手助けになります。サイトによっては、「スクロールしてもっと見る」や「始める」といった指示と一緒に小さなボタンを配置するという型破りな方法でサイトを誘導しやすくしています。
- スクロールクリックやタップなどのCTAを明確に区別し、Webサイトで思い通りのインタラクションができるようにしましょう。
- ユーザーがスクロールにどうインタラクションするかを調査し、観察しましょう。たとえば、Google Analyticsでは、「Below the fold（ビロウザフォールド）」（編注：スクロールしなければ見られない画面領域）をクリックする人数を知るため、「ページ解析」のタブを開くことができます。このデータを基にして、必要に応じてデザインを調整することができます。
- やり過ぎは禁物です。ロングスクロールは、コンテンツが途切れることなく500ページ分も続くことではありません。ロングスクロールはシンプルにしてください。物語を伝えたら、それで終わりにしましょう。強制してはいけません。以下のDecaでスクロールできるのは、わずか数ページ分です。
出典：Decasrl
- ユーザーの目的に注目し、無限スクロールのサイトでさえ本当に終わりがないわけではないことを理解しましょう。ロングスクロールのサイトを作るとき、ユーザーには現在位置やナビゲーション（ほかの道順）が必要です。
- スクロール内にユーザーを導く手助けとなるような、視覚的な手がかりを用意しましょう。たとえば、以下のサイト『The Seven Types of Motorcycle Rider』では、左側にヘルメットのアイコンがあります。
出典：MCaleicester
スクローリングは諸刃の剣です。効果的な範囲を超えて害にならないよう、推奨された使用法を守りましょう。
将来のページレスデザイン
ロングスクロールのサイトはなくなりそうにありません。人気のデバイスで使われる画面の大きさは増減してきましたが、当分は小さい画面が主流になるでしょう。そして小さな画面には、多くのスクロールが必要です。
実際、ロングスクロールから「ページレス」なデザインへの移り変わりは既に始まっていて、Digital Telepathyのデザイナーなど、ページレスこそがWebの未来の姿だと信じているデザイナーもいます。Webサイトでは、ユーザーが情報を扱い、消費する際の制約を取り除き続ける必要があるので、コンテンツを作成する最善の方法について、デザイナーはさまざまな環境でもっと根本的に考えなければなりません。
出典：Photohigh
インタラクションデザインは、ロングスクロールのWebデザインの根幹です。ユーザーがインターフェイスを気に入り、直感的だと感じて楽しんで使ってくれるなら、スクロールの長さは、常識的であれば気にならないでしょう。
待ち時間をより楽しませることができるのなら、必ずしもユーザーの待ち時間を短くする必要はありません。
この記事が役に立ったと感じたら、無料の電子書籍『Web Design Trends 2015 & 2016』もチェックしてみてください。ロングスクロールのベストプラクティスだけでなく、Webデザインのトレンドで成功する９つのヒントを得られます。また、優れたサイトから160個以上の解析例を使ってテクニックを説明しています。
