昨今のWEBデザインのトレンドの一つが「スクロールテリング」です。
一般的にWEBサイトは３〜５年の周期でリニューアルするのがベストだといわれていますが、スマートフォンとも相性が良い「スクロールテリング」はどのような手法なのかご存知でしょうか。
今回は「スクロールテリング」のメリットや注意点を解説します。
スクロールテリングとは
WEBサイトをユーザーにストレスなくスクロールしてもらう方法として、「スクロールエフェクト」があります。
ページ全体が一度に表示されるのではなく、ユーザーがスクロールすることで段階的に情報が現れます。
平面的な動きからパララックス、奥行きを感じさせる動きなど様々な手法がありますが、中でも注目を集めているのが「スクロールテリング」です。
スクロールテリングは、「スクロール」と「ストーリーテリング（＝物語を語る）」を組み合わせた造語です。
スクロールすることで変化していくグラフィックやアニメーションの演出効果によって、まるで物語が進んでいくような感覚を与えるデザインのことをいいます。
スクロールテリングのメリット
ユーザーがストレスなく操作できる
クリックや選択、画面遷移も必要なく、スクロールするだけでストーリーが展開するため、操作しやすい点があげられます。
また、ページの読み込み時間が短縮されるため、ユーザーがサイトにアクセスした際の待ち時間を軽減することができます。
スマートフォンとの相性も良く、画面領域が狭い中でも多くの情報が伝えられることは大きなメリットです。
コンテンツ理解が得やすい
商品・サービスのこだわりや開発秘話をストーリー仕立てで見せることで、ユーザーに伝わりやすくなります。
アニメーションなどの動的な演出効果によって、よりインパクトを与えることができるため、単に数字やデータを使って説明するよりもユーザーの理解を得やすいでしょう。
世界観に浸りやすい
スクロールと連動させてストーリーを見せることで、ユーザーをサイトの世界観に惹き込みやすくなります。
没入感があることで、共感や体験などのUXの部分に訴えかけやすくなるのがポイントです。
UXとは、ユーザーエクスペリエンス（User Experience）の略で、ユーザーがWebサイトを利用した際に得られる体験のことを指します。
WEBサイトのデザインや機能が日々進化を遂げている中で、単にビジョンや想いを書き連ねるだけではユーザーに興味を持ってもらうことは難しくなってきました。
興味や共感を得るためには、対象となるユーザーを調査した上でストーリーを考えることが大切です。
スクロールテリングを効果的に使ったサイト例
スクロールテリングの手法は、商品などユーザーの共感を得たい時、ブランドの魅力やメッセージを伝えたい時などに有効で、様々な業界・目的で活用されています。
Apple AirPods Pro
（引用：https://www.apple.com/jp/airpods-pro/）
スクロールテリングの代表例として有名なのがAppleのサイトです。
シンプルかつ繊細なエフェクトで、文字情報が多くてもスクロールに合わせてコンテンツが進むため、ユーザーの理解を促してくれます。
JAL機炎上、そのとき何が 検証・羽田空港衝突事故
（引用：https://vdata.nikkei.com/newsgraphics/haneda-runway-collision/）
ジャーナリズムの世界でもスクロールテリングは活用されており、特にニューヨークタイムズがこの手法を得意としています。
日本経済新聞のデジタルコンテンツでは、事件発生時の状況から乗客の脱出までの流れを可視化し、問題点を検証しています。
みさとと。島根県三郷町魅力再発見プロジェクト
（引用：https://www.town.shimane-misato.lg.jp/misatoto/）
島根県美郷町の魅力を伝えるコンテンツです。
スクロールするごとに3次元的に変化する画面演出がうまくユーザーのスクロールを促しています。
スクロールテリングの注意点
スクロールテリングは効果的な手法ですが、取り入れる際には注意すべき点もあります。
ユーザーの体験に不都合を与えないようにする
クリックによる画面遷移がないロングスクロールは、ユーザーが自らの場所を見失いがちであったり、途中で飽きて離脱してしまう懸念点があります。
そのため、例えば以下のような対策が考えられます。
- ファーストビュー（FV）に興味を惹くコンテンツをおき、スクロールを促す
- 短すぎず、長すぎない、適切なスクロールの長さを設定する
- スクロールの進行状況を示すプログレスバーを表示させる
- 背景の変更、アニメーションを入れるなど、緩急を持たせる
- ページの読み込み時間を短くするために、画像やアニメーションの圧縮、キャッシュの有効化、サーバーの最適化を行う
ユーザーのWebサイト内での行動をアナリティクスなどで確認し、デザインをブラッシュアップしていきましょう。
ストーリー構成を練る
スクロールテリングは、ただ単に凝ったデザインにすれば良いというわけではありません。
世界観に惹き込むためには、どのようなストーリーを展開するかがとても重要です。
興味・関心を抱いてもらえるよう、対象のユーザーを調査・分析することに多くの時間を使い、それからストーリーを練る必要があります。
まとめ
スクロールテリングは、ユーザーが画面をスクロールしていくことで、商品やサービスの理解を促す手法です。
本のページをめくりストーリーを読み進める感覚で没入感を味わえるので、ユーザーに興味・共感を持ってもらいやすいのがメリットです。
興味・共感を持ってもらうためには、スクロールテリングのデザインや操作性の高さだけではなく、そもそものストーリー構成を練る必要があります。
そのために、まずは対象のユーザーを調査し、分析することがとても重要です。
ソーウェルバーではSNSをソースとした新しいユーザー分析ツール「HAKURAKU」を提供しています。
独自の機能で、貴社商品・サービスのペルソナを可視化することができますので、お気軽にお問い合わせください。
