スクロールを用いたWebデザイン事例集と、設計のポイント

かつて、Webサイトのデザインにおいて、タブーとして扱われていたスクロール仕様ですが、その使いやすさから、近年最も人気のある仕様として、確固たる地位を確立するまでに至りました。

今ではスクロールは、インタラクションデザインの核を担うフォーマットとして見事に生まれ変わっています。

今回は、スクロールのデザイン事例とメリット・デメリットなどについてまとました。

スクロールを生かしたWebサイト10の事例集

1. リブセンス採用サイト

背景に動画が埋め込まれているので、動きのあるインターフェイスかと思いきや、スクロールをすると縦書きのメッセージが現れます。そのギャップを最大限に生かしてユーザーを惹きつけられるのは、スクロールならでは。

リブセンス

2. Fitbit

スクロールをすると、商品写真やクライアントのネームカードがアニメーションと共に登場します。

Fitbit

3. The Boat

墨で書いたようなイラストが、スクロールをするごとに現れます。背景には難破船が漂っており、世界観に引き込まれてしまいそう。

The Boat

4. Bauer

アイスホッケーのチームのWebサイトです。プレー中の写真にコンテンツのタイトルを載せただけのシンプルなものですが、チームカラーが伝わってきます。

Bauer

5. Free Range Desings

Free Range Designsで使用されているようなスティッキーナビゲーションを使えば、ユーザーはいつでも素早くスクロールで戻ったり、コンテンツを飛ばすことができます。

Free Range Designs

6. Nikon

製品自体に視線が行くよう、背景を大きく変えることなく、見せたいものを次々に表示させている印象。

Nikon

7. Etsy

長すぎず、短すぎない、UGCオンラインストアであるEtsyのようなサイトがあります。いわゆる無限スクロールの進化系である、「もっと見る」と表示されたリンクで終わっているデザインです。

Etsy

8. Deca

あまりにも長すぎるスクロールは、ユーザーを必要な情報から遠ざけてしまいます。50のコンテンツを連続して並べることに、意味はありません。要点を記したら、そこで終わらましょう。Decaでは、スクロールはほんの数ページ分しかありません。

Deca

9. Retra

下のサイトRetraの左側に使用されているヘルメットのアイコンのように、ビジュアルキューは、ユーザーにスクロール方向を示すのに役立ちます。

Retra

10. Nathan Rileyポートフォリオサイト

スクロールをすると、背景の渦が少しずつ姿をかえます。スクロールの幅をあえて長くし、訪れる人を楽しませているのです。

Nathan Riley

モバイルデバイスの普及が、スクロールの台頭を支えた

モバイルユーザーの数が、デスクトップユーザーを超えて以来、UIデザイナーは常にモバイルデバイスを念頭に置いてデザイン構築を行うようになりました。画面のサイズが小さければ小さいほど、スクロールの必要性も増していきます。画面が小さくなるほど、スクロールは長くなります。

さまざまな場所からインターネットへのアクセスが可能となり、ページクリックよりも、より迅速に情報にアクセスできる、スクロールが重宝されるようになりました。

SNS全盛期ともいえる昨今、ユーザークリエイテッドコンテンツとの親和性が高いスクロールは、非常に重宝されています。

ロングスクロールは、カードベースのデザインと共にその進化の道を歩んできました。これらの技術を組み合わせることで、ユーザーに、一口サイズのコンテンツを、無限に提供できます。

▲出典：Upworthy

これまで、ファーストビュー至上主義が根強くあった理由には、スクロールがJavaScriptとCSSの進歩の後に意図的なデザインパターンとして捉えられていたことが挙げられます。なぜなら、それまでビジュアルストーリーテリングと、スムースかつ魅力的なスクロールデザインの両立は不可能だったからです。文章でいっぱいになった長いページは、魅力的なUIレイアウトとは言えません。

しかし、ロングスクロールを、グラフィック、アニメーション、アイコンなどを用いて「冒頭から最後まで描き続けることのできるキャンバス」と捉えると、途端にユーザーの注意を惹きつける、まるで魔法に魅力的なものに変化します。

実際に、最新のスクロールデザインとして、いくつかのハイブリッドパターンが生まれています。たとえばUXPinのツアーページで使われている「定位置スクロール」は、サイトを垂直に伸ばさずとも、従来のロングスクロールサイトと同じインタラクティブな体験を生み出すことができます。

UXPin

スクロールデザインを用いる場合のメリット・デメリット

すべてのデザインテクニックとツールには、そのコンセプトを愛する人たちと、それを嫌う人の両方が存在します。スクロールもまた然り。両者の考え方を把握しておく必要があるでしょう。

スクロールを使ったWebサイトのメリット

インタラクション

スクローリングは、常に変化する刺激的な視覚要素を提供し、UIを促す、魅力的なストーリーテリング方法と言えます。特にスムーズなパララックス効果スクロールが効果的です。

速さ

ロングスクロールは、複雑なナビゲーションルートをクリックするよりも断然スピーディーです。UXを遅らせたり、制限することもありません。記事「Interaction Design Best Practicesでも触れましたが、実際の時間の経過よりも、体感時間の方が重要なケースも存在します。

初心者ユーザーでも使いやすい

サイトの使いやすさは、対話性の促進や、サイト滞在時間の延長に繋がります。ロングスクロールのサイトは特にその傾向があります。スクロール仕様にすることで、当初ユーザーが見るつもりのなかった関連コンテンツをチェックするように促すことも可能です。

対話性の高いデザイン 

ページのデザインは、画面サイズや機能が異なるデバイスから開いた際、複雑に表示されるケースがありますが、スクロール仕様にすることで、個々のデバイスに対応することができます

ジェスチャーコントロール 

同じ「触れる」動作ではありますが、画面を複数タップするより、スクロールの方が遥かに簡単です。特にモバイルユーザーは、情報を読み取りやすいスクロール方式を好みます。

スクロールを使ったWebサイトのデメリット

SEOにおける欠点が多い

ページが1つしかない場合、サイトのSEO対策において、不利になる可能性があります。 （SEO対策におけるマイナス面を最小限にする方法を学ぶには、ブログサイトMozの、パララックス効果スクロールについての記事と、無限スクロールについて書かれたQuicksproutの記事を参照してください。）

ナビゲーションが難しい

ページ上の以前のコンテンツに戻るのが厄介なことがあります。ですが、永続的なトップナビゲーションを作成し、各アイテムがページセクションに固定されるように設定することで対処できます。

サイトスピードが遅い

ビデオや画像ギャラリーなどのコンテンツの大部分は、パララックス効果スクロールサイト(JavascriptとjQueryに依存するタイプ)のサイトの速度遅くする可能性があります。

フッターが無い

無限スクロールのサイトでは、ナビゲーション性を犠牲にしないよう、細く「べたついた」フッターを採用することをおすすめします。ページの下部にナビゲーションがないため、ユーザーが混乱することがあります。

長いスクロールWebサイトが最適なコンテンツとは？

• モバイルからのアクセスがメインとなるもの
• 頻繁な更新や新しいコンテンツ（ブログなど）
• 膨大な情報が提示されているもの(例:インフォグラフィック)
• 読み込み時間を短縮するため、リッチメディアを組み込んでいないもの

ソーシャルメディアサイトは、あらゆる種類のユーザー生成コンテンツを含んでいるため、長いスクロールとの相性がとても良いです。(実際FacebookやTwitterは数年前にこの技術を普及させました)。一方、Eコマースなど、首尾一貫したナビゲーションが必要なゴール指向のサイトは、ページの長さが短くなる傾向があります。

▲出典：Amazon

最も効率のよいスクロールのための技法5選

ロングスクロール、パララックス効果、及びそれに準ずるメカニズムは、まだ比較的新しいものですが、すでに多くの試行錯誤がなされ、最も効率のよい技法がいくつか生み出されています。

1. 短いスクロールと長いスクロールを使い分ける

コンテンツのボリュームによって、スクロールの長さを変更しましょう。ショートスクロールのホームページや長いスクロールのランディングページも使用可。例えば、商品や旅行ツアーについてのサイトなどに有効です。

2. サイトの仕組みを明にする

スクロールを促す表示を組み込みましょう。矢印・アニメーションボタン・もしくは同様のUIツールは、ユーザーが次に何をすべきかの判断を助ける、シンプルで遊び心のある方法です。「もっとスクロールする」「スタート・アップ」などと表示された小さなボタンを組み込むのも良いでしょう。

3. インタラクションを区別する

スクロール、クリック、タップなどのインタラクションを促す言葉をそれぞれ明確に区別し、それぞれが相互に作用するようにしましょう。

4. テストを欠かさない

ユーザーがどのようにスクロール動作を行なっているか調べましょう。例えばアナリティクスでは、「ページ解析タブを開いて、何人のユーザーが下のスクロールページを開いているかを確認できます。調査を行えば、データに基づき、必要に応じてデザインを調整することが可能です。

5. ユーザーのゴールに焦点を当てる

「無限スクロール」と言えど、実際にページが無限に連ねられているわけではありません。ロングスクロールのサイトを作成する場合、ユーザーは指標とナビゲーションを必要としていることを忘れないで下さい。

まとめ

ロングスクロールWebサイトデザインはインタラクションデザインの基礎です。ユーザーにインタラクションを心地よく感てもらえるよう、工夫してみてください。

（翻訳：Ayaka Tankei）