スクロールはWebサイトのきわめて基本的な機能です。しかし、基本的な要素であっても、スクロールはユーザーにとって便利な機能にも、ユーザーを苛立たせ、競合サイトに移動させてしまう原因にもなり得ます。
Webサイトの中には、ページを最下部までスクロールすると、スクロールバーが中央の位置に戻ってコンテンツが下に読み込まれ続ける、「無限」スクロールを実装しているものもあります。このようなスクロール機能は一部のサイトでは有効ですが、ユーザーを苛立たせてしまうことも多くあります。したがって、効果的なスクロールの活用方法と適切なスクロールの種類を理解することが重要です。
複雑な要素には単純さが必要
近年のWebサイトはこれまで以上に壮大で、コンテンツが充実しています。そのためデザイナーは、ユーザーを圧倒せずに情報を画面に載せきる方法を考案してきました。モバイルデバイスのユーザー数がデスクトップのユーザー数よりも多いことを踏まえると、これは非常に重要な作業です。デザイナーは小さな画面上に大量のコンテンツを表示させなければならないため、どうしてもスクロール機能が必要になります。
グリッドレイアウトは、素早く効果的にブラウジングできるよう、詳細なコンテンツにリンクする小さなコンテンツを作成する手法です。この概念とスクロールを組み合わせると、永遠にコンテンツが続くようなWebサイトが誕生します。
モバイルデバイスでは、スクロールは魅力的な機能でもあります。指でスワイプする動作はシンプルで簡単な上に、正確性が高いからです。ユーザーはページの下まで素早くスワイプしたり、次の関連コンテンツまでゆっくり移動したり簡単にできるようになるでしょう。
スクロールの種類
ブランドイメージや顧客層によって、Webサイトに採用すべきスクロールの種類は異なります。どの手法を採用するか判断する際には、スクロールによってどのようにコンテンツを操作するのか検討しましょう。スクロールには、主に以下の４つの種類があります。
１. ロングスクロール
ロングスクロールのメリットは、１つのページにシームレスなコンテンツを制作できることです。そのため、スムーズで直線的なブラウジング体験をユーザーに提供し、自然とストーリーテリングにつなげることができます。
The Boatはロングスクロールの素晴らしい事例です。
ユーザーはスクロールする中で、自然と多くの物語を読むことができるため、よりブラウジング体験に没入できます。ロングスクロールを採用した１ページだけのサイトが多くありますが、ロングスクロールの大きな問題点は、サイトのSEOに悪影響を与えてしまうことです。複数ページにまたがるWebサイトのほうが、SEO効果は高くなる傾向にあります。
２. 固定ロングスクロール
固定ロングスクロールとは、ページ全体をスクロールさせるのではなく、一部のコンテンツを固定し、残りのコンテンツをスクロールさせる手法です。あるいは、ユーザーが特定の場所にたどり着いたら、静的なコンテンツから新しいセクションに移動するようにスクロールを設定することもできます。
SEO対策のために、１ページだけの構成を避けたいサイトには最適な手法です。
３. 無限スクロール
膨大な量のコンテンツを配信するサイトは、量が多すぎてページ全体を１度に読み込むことができません。無限スクロールを設定すれば、サイトに区切りを作ることができます。Facebook、Tumblr、Imgurを始めとするほとんどのソーシャルメディアが、無限スクロールを採用しており、ユーザーは新しいコンテンツを閲覧し続けることができます。
唯一の欠点は、ユーザーが自分の位置がわからなくなり苛立ちを覚えてしまうことです。もし、サイトに無限スクロールを採用するなら、ユーザーがすぐに一番上や特定の位置に戻れるよう、スティッキーナビゲーションやツールバー、ボタンなどを実装してください。
４. パララックススクロール
ゲームファンはパララックス（視差）スクロールに親しみがあるでしょう。昔のテレビゲームは２次元の空間で作成していて、現代のゲームのように広大な３次元の超現実空間を作り出す技術はありませんでした。
パララックススクロールの例：Braking Badly
ソニック・ザ・ヘッジホッグ、ロックマン、スーパーマリオブラザーズのような昔ながらの８ビットや16ビットのゲームは、「横スクロール型」と呼ばれています。プレイヤーは左から右に進んでステージをクリアしていき、奥行きはモーションで表現されるからです。前景と背景の画像を異なるスピードで動かすことで、遠近感を演出していました。Webデザインにおけるパララックススクロールは、スクロールに応じてアニメーションを動かすときに効果を発揮します。
スクロールのベストプラクティス
Webサイトにどのスクロールを採用するかはコンテンツ次第です。スクロールの基本的な機能はユーザーがコンテンツを望んだ量だけ消費できることにあります。したがって、提供するコンテンツに合わせて体験を調整することが重要です。
膨大なコンテンツを持つサイトは、無限スクロールに投資するべきでしょう。この手法はソーシャルメディア、特にモバイルのプラットフォームに適しています。あまりにコンテンツが豊富なので１つのページでは消費しきれませんし、コンテンツごとに個別のページを作ると実用性やエンゲージメントが低下してしまうからです。
コンテンツによってスクロールの長さを判断しましょう。「さらにスクロールする」や「さらに表示する」といったボタンを組み込んで、スクロールを調整する方法もあります。ユーザーにスクロールするかどうか決めてもらうことで、ページを読み込む速度が速くなるだけでなく、好奇心に駆られてユーザーがクリックする確率が高まるでしょう。
ユーザーデータを分析することで、ユーザーはサイトをどのように操作しているか、スクロールの種類を検討し直すべきかどうかを判断できます。ユーザーがページを訪れたとき、まず目に入るのがページの最上部です。ファーストビューの下を「フォールド」と言い、Googleアナリティクスを活用することで、フォールドより下をクリックしたユーザー数やクリック数が解析できます。この指標を見れば、現在採用しているスクロールやレイアウトが、ユーザーにスクロールしてコンテンツを見ることをうながせているかどうか見極めることができます。
スティッキーナビゲーションは最高のツール
どのような種類のスクロールにおいてもスティッキーナビゲーションを使うことで、ユーザーはサイトを閲覧するとき、主導権を得ていると感じることができます。GmailといったWebベースのメールサービスを思い浮かべてください。受信トレイは下にスクロールできますが、画面左側のメニューには、違うアカウントやフォルダに飛べるボタンが固定されています。ユーザーは思いのままにスクロールできるだけでなく、いつでも特定のセクションを表示することもできるのです。
スティッキーナビゲーションはどのようなサイトにも効果的です。無限スクロールを採用したサイトであれば、ユーザーは上にスワイプし続けることなく、１回のタップでページトップに戻れる機能を好むでしょう。どれだけ下にスクロールしてもヘッダーをつねに画面に表示しておくことで、重要な機能にすぐにアクセスできます。
メリットとデメリット
モバイルデバイスでWebを閲覧する人が増えているので、スクロールは自然な選択と言えるでしょう。もちろん、リンクをタップするのも速くて簡単ではありますが、ほとんどのユーザーは、コンテンツの大部分に少しでも早くアクセスしたいと考えます。堅固なコンテンツを提供することでユーザーのエンゲージメントを高めることができます。加えて、ユーザーがコントロールできる手段を実装すれば、ユーザーに負担をかけることもないでしょう。
ただし、覚えておくべきこととして、大きなブロックのコンテンツやマルチメディアは、ページの読み込み速度を遅らせます。多くのモバイルデバイスのユーザーは、モバイルデータ通信や電波の弱い外出用Wi-Fiから閲覧していることが多いため、体験に悪影響を及ぼしてしまいます。
また、Webサイトのフッターも削除しなければなりません。ほとんどのサイトがページ最下部にフッターを配置して、会社概要、採用情報、問い合わせ先といった情報へのリンクを掲載しています。ロングスクロールでは、スティッキーナビゲーションを実装することでフッターを代用でき、ユーザーが特定の部分にアクセスできるようになります。
現在では、モバイルデバイス向けにデザインすることが多いでしょう。上手に設定することで、メリットがデメリットをはるかに上回るスクロールを作ることができます。モバイルデバイスは、基本的にインタラクションを促進できるものです。優れたレスポンシブなページデザインによって、ユーザーはユニークに楽しくコンテンツを消費することができるでしょう。
