ファーストビューだけで情報を伝える時代は終わりました。最近では長いスクロールや無限スクロールを用いるサイトが増えてきています。ユーザーが簡単にコンテンツをスクロールができ、スクロールすると自然に情報が表示されるサイトは以下のような利益をもたらします。
- ナビゲーションがシンプルになる
- ユーザーをコンテンツにひきこみやすくなる
- モバイルサイトへの対応が楽になる
このテクニックが普及した理由のひとつとしては、モバイル端末の画面を見る人が増えたことが考えられます。画面が小さいほど長いスクロールが必要だからです。
ジェスチャー操作は簡単にできて楽しいものですが、ユーザーは長いスクロールページにわずらわしく感じることもあるでしょう。ここでは、ユーザーの期待に応えるような長いページのベストプラクティスをいくつか紹介します。
ビジュアル的なヒントを使う
ほとんどのコンテンツはファーストビューより下にあることを知らせる
デザイン要素を用いてスクロールを促すことで、ページがどう切り替わるのかが分かります。
画面の外を指している矢印や「下にスクロール」という文字のような小さなヒントがあれば、ユーザーにほとんどのコンテンツはファーストビューより下にあることを知らせることが可能です。
画面の外を指している矢印は、ユーザーにほとんどのコンテンツは下方にあることを知らせます。引用：Fillet
ナビゲーションの選択肢を可視化する
フローティングメニューや「ページへ飛ぶ」オプションを使う
長いページの大きなリスクのひとつは、ユーザーが目当てのページに到達できず迷子になってしまうことです。見ているページがサイト内でどの位置にあるのかを示す情報や目的のページへのナビゲーションがなければ、ユーザーにいらだちや混乱をもたらします。
長いスクロールページを作る際は、ユーザーのためにページの位置情報やナビゲーションをつけることを忘れてはいけません。
この課題への解決策はフローティングメニューです。このメニューによってユーザーが見ているページの位置が示され、常に画面の定位置に表示されます。
スクロールで作動するフローティングメニュー。引用：Google
画面サイズが限られていてナビゲーションバーをつけられない場合、「ページへ飛ぶ」オプションをつけましょう。
画面右側に「ページへ飛ぶ」オプションがあります。引用：brightmedia
モバイル端末は画面が小さいため、ナビゲーションバーが比較的大きなスペースを使ってしまう可能性があります。新しいコンテンツをスクロールしているときにはナビゲーションを隠し、プルダウンで画面上部に戻ろうとしたときに表示されるようにするのも良いアイディアです。
Facebookはスクロールの方向によってはナビゲーションバーを隠すことで縦のスペースを節約しています。引用：Imjabreu
画面をページとしてデザインする
コンテンツに合わせてスクロールの長さを決める
サイトでは、プロダクトのストーリーを簡単かつスムーズに伝えたいものです。ひとつひとつの画面をページとしてデザインすることでサイトを整理し、ユーザーにとって分かりやすくする必要があります。Le Mugsのサイトではそれぞれの情報がアニメーションとなり、より伝わりやすく表現されています。
引用：Le Mugs
ポイント：ページ数はできるだけ少なくし、ナビゲーションをシンプルにしましょう。長いスクロールページといえど、100ページもの長さになって良いというわけではありません。
機能的なアニメーションを取り入れる
アニメーションを使ってユーザーを引きつける
インタラクションデザインは、長いスクロールのサイトデザインの基礎にもなる概念であり、アニメーションは必要不可欠なものです。アニメーションを使うことによって、サイトの魅力や個性を表現でき、ユーザーはよりすんなりと心地よくサイトを閲覧することができます。
アニメーションはスクロールをより視覚的に楽しいものにします。引用：codemyui
パララックス（視差効果）でストーリーを伝える
パララックスによるスクロールは、コンテンツに対して背景がゆっくり動くことで奥行きや没入感を生み出します。また、パララックスはただサイトを見やすくするだけでなく、プロダクトのストーリーを目に見える形で伝えることができ、ユーザーの心を掴みます。
パララックスは魅惑的な3Dの感覚を創出します。
まとめ
長いスクロールによって、没入感のある体験を演出することができます。ユーザーがUIを気に入り、直感的であると判断すれば、ページが多少長くてもユーザーは気にならないでしょう。
ユーザーの目的に焦点をあて、彼らにとって利便性のあるページを作ることが重要です。
