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