スクロール機能を使うときに確認したい、新しいルールやテクニックまとめ

海外デザインブログDesignModoで公開された「The New Rules for Scrolling in Web Design」より許可をもらい、日本語抄訳しています。

一度はウェブサイトのタブーとなりながらも、ユーザーが新しい楽しさを発見したことで、ここ数年スクロールが見直されています。過去の汚名にもめげず、スクロールはインタラクティブなデザイン要素の核として、新しく生まれ変わっています。同時に、デザイナーは新しいルールを学ぶ必要があることも意味しています。

この記事では、スクロールが再復活した理由をさぐり、それぞれのメリットとデメリットをまとめ、実践で活用できるテクニックをまとめています。

詳細は以下から。

スクロールの復活はなぜはじまった？

単純な答えとしては、モバイル端末の影響と言えます。

モバイル端末の利用者数がデスクトップユーザー数を超えてから、UIデザイナーはそれに応じてデザインを調整しています。そしてたくさんのモバイル端末ユーザーが増えたことで、スクロールがより必要になってきています。

しかし他にも理由はあるようです。高速インターネットサービスが世界中で展開されるようになり、ページからページヘの移動はより手軽になってきています。また成長を続けるソーシャルメディア系サイトでも、このテクニックを利用され、ユーザーは作成されたコンテンツを、自然とスクロールしています。

またスクロール機能は、カード型デザインと一緒に利用されているケースが多いようです。組み合わせることで、スクロールテクニックは、ユーザーにコンテンツを無限に提供することができ、ウェブサイト特にモバイル向けサイトにパーフェクトと言えるでしょう。

さらに加えて、ユーザーはスクロールをしないという考えから生まれ、スクロール機能の実装を思いとどまらせていた、ファーストビュー（英: Above-the-fold）という考えも迷信だと分かってきています。実際に行われた研究によると、ユーザーはスクロール機能についてまったく気になっていません。ファーストビューにコンテンツを詰め込んでしまうことで、余白スペースを均等に取ることができず、滑らかなスクロールに支障をきたしてしまいます。

もちろんスクロールは、意図的なデザインパターンを、JavascriptとCSSで実装できるようになってから、じっくり考えられるようになりました。それまでは、ストーリー性のあるウェブサイト制作はよりむずかしいものでした。想像できるように、文字テキストばかりで、画像も少なく縦に長いページは、ユーザーインターフェース用レイアウトにはまったく向いていません。

しかし、ウェブカンバスを最初と中盤、終盤にわけて、スクロールを実践することで、映画のようにユーザーの興味を惹きつけることに気付くでしょう。

実際に、いくつかのデザイントレンドは、スクロールを利用したものとなっています。たとえば、カーテン状にコンテンツが展開するUXPinツアー用ページは、典型的な長いスクロールを利用し、サイトが縦長にならないように工夫しています。

あなたのサイトにスクロールは必要？

どんなデザインテクニックや機能も、コンセプトが好きなひとと嫌いなひとが別れます。そのためスクロール機能をプロジェクトに採用する前に、じっくりと検討する必要があるでしょう。

スクロール機能のメリット

サイトを体験したくなる – コンスタントに切り替わる刺激的なデザインは、ユーザーにウェブサイトを読み進めてもらうのに最適。
より早い – 長いスクロールは、複雑なナビゲーションメニューを辿り、クリックするよりも早く、ユーザーエクスペリエンスが改善されます。デザインに気付くまでの時間は、実際の滞在時間よりも重要であると言えるでしょう。
ユーザーをその気にさせる – インタラクティブな使いやすさから、サイトの滞在時間が伸びます。特に無限スクロールでは、ユーザーが考えてもいなかったコンテンツを見つける手助けとなるでしょう。
レスポンシブデザイン対応 – 異なるスクリーンサイズで表示されるウェブページの作成は複雑ですが、スクロールはレイアウトの違いをシンプルに解決してくれるでしょう。
ジェスチャー操作 – スクロール操作はスクリーンタッチと関連付けされており、下方向へのスワイプは、異なるエリアをタップするよりも、とても手軽です。特にモバイルユーザーは、情報を表示する方法として、スクロール機能を利用しています。
たのしいデザイン – ほんの数クリックのみで、手軽にインタラクティブな表現可能で、モバイルアプリやゲームなどのユーザーエクスペリエンスに。

スクロール機能のデメリット

頑固なユーザー – あまり気にしなくてよいでしょう。なぜならこれらのユーザーはいつでも変化を拒みます。スクロール機能はかなり普及しており（特にモバイル・エクスペリエンスの分野）、ユーザーの大部分がこのテクニックに慣れていると言っても良いでしょう。
SEOの問題 – ひとつのページしかない場合、SEOに悪影響があるかもしれません。（SEOの良くない部分を最小化するには、Moz Piece for Parallax Scrollとthis Quicksprout piece for infinite scrollを参考にどうぞ。）
ユーザーを混乱させる　−　コンテンツとコンテンツの間にある空白をスクロールすることで、何を見ているかわからなくなり、コンテンツがバラバラになってしまう。
ナビゲーション誘導がむずかしい　- よく見かける「トップに戻る」ボタンでは機能しません。この問題を解決するために、ページのセクションごとにアンカーリンクを利用し、ナビゲーションメニューに表示してみましょう。
読み込み速度が遅い – ビデオ動画や画像ギャラリーなどファイルサイズの大きいコンテンツは、ページの読み込み速度を下げてしまう可能性があります。特にJavascriptやjQueryで実装された、パララックス・エフェクトを利用したサイトには注意が必要です。（読み込み速度を落とさずに、パララックスエフェクトを実装するチュートリアルはこちらから。）
フッターがない – 無限スクロールを利用したサイトでは、固定フッターを使いユーザーを誘導することをオススメします。ユーザーがページの下までスクロールしたときに、次への誘導リンクがないため、迷ってしまうかもしれません。

メリットとデメリットの両方を見ることで、長いスクロール機能はいくつかの種類のサイトやコンテンツに向いていると言えます。

モバイル端末からのユーザー流入が多い場合。
頻度高めのコンテンツ更新がある場合。（ブログなど）
ひとつの方法でたくさんの情報を扱うとき。（インフォグラフィクスなど）
ページ読み込み速度の点から、リッチコンテンツを含まない場合。

ユーザーが作成するコンテンツが、次々に更新されるソーシャルメディアサイトは、長いスクロールに向いていると言えるでしょう。反対に、一貫性のあるナビゲーションが必要なオンラインショップなどは、ある程度ページの長さを決めたほうが良いでしょう。

次に、ユーザーが自由に手づくりの商品を販売できるEtsyでは、ハイブリッドな解決法が利用されています。最初の何ページかは無限スクロールが続き、さいごに「もっと表示する（Show Me More）」ボタンを配置しています。

すべてのウェブデザイントレンドと同じように、使っているサイトを見たからといって、スクロール機能を利用するのはやめましょう。自分のサイトが上記ポイントを満たしているかじっくり確認、実装しなければ、ウェブパフォーマンスを低下させてしまう恐れもあります。

スクロール機能のベスト・プラクティス

長いスクロールやパララックスエフェクトなどは、まだまだデザインの領域で新しいテクニックなので、トライ＆エラーの繰り返しで分かってきた、実装に役立つ基本的なベストプラクティスをご紹介します。

短いスクロールと長いスクロールを一緒に使いましょう。たとえばトップページには短いスクロール、ランディングページには長いスクロールで全く問題ありません。
Free Range Designで利用されているような、固定ナビゲーションメニューを採用しよう。これでユーザーは、セクションごとに行き来することができます。
矢印マークやアニメーションボタンなどを加え、ユーザーにスクロールをするように促しましょう。いくつかのサイトでは、「下にスクロール」や「はじめよう！」などのテキストを表示することで、機能に慣れていないユーザーにも親切なつくりを実現しています。
スクロールするべきか、ボタンをタップするべきか分かりやすく区別しましょう。
どのようにユーザーがスクロール機能を考えているのか、すこしリサーチしてみましょう。Google Analyticsをつかうことで、特定のリンクをクリックした人数なども確認することができます。これらの分析をもとに、デザインを微調整するとよいでしょう。
あまり極端にやり過ぎないようにしましょう。無限スクロールだからといって、500ページ以上つづくコンテンツを意味しているわけではありません。Decaではほんの数ページのみにスクロール機能を実装しています。
ユーザーのニーズに特化しましょう。無限スクロールを採用するときも、ユーザーが現在の場所やすぐに移動できるナビゲーションメニュー必要と言えます。
みちしるべとなる機能やデザインパーツを配置しましょう。The Seven Types of Motorcycle Riderでは、ヘルメットを並べることで各コンテンツを表現しています。