こんにちは！マインドファクトリーのしいのです。今回は、昨今のWebサイトにおいて目立つ手法「スクロールテリング」について紹介していきたいと思います。
一般的にWebサイトのリニューアル周期は3〜5年がベストであると言われています。ユーザーニーズのあり方や、Web環境を取り巻く技術などが概ねそれくらいのスパンで変わるためです。もしWebサイトのリニューアルを考えている人は、トレンドを取り入れたデザインでユーザー満足度を高めてみてはいかがでしょうか。
目次
UI／UXデザインとは
スクロールテリングの説明の前に、UI／UXデザインの重要性について簡単に説明します。ご存知の方も多い領域かとは思いますが、改めて読んでみてください。既にしっかりご理解されているという場合は「スクロールテリングとは」まで飛ばしてくださいね。
UIとUXの違い
UIとはUser Interface、つまりユーザーがWebサイトやアプリを使用する際の操作面のことを指します。UIにはフォントやボタン、イラストなど、ユーザーと接するすべての構成要素が含まれます。
混同されやすいものとして「UX」があります。UXはUser Experienceの略で、ユーザーがWebサイトやアプリを利用した際に得られる体験のことを指します。
UIはUXに含まれますが、UIを改善しただけではUXの部分的な改善にしかなりません。UX全体の改善にはコンテンツ内容の精度や画像の解像度、サイトの読み込み速度なども含めた、Webサイト・アプリ全体の品質向上が必要となります。
UI／UXデザインの重要性
UI／UXデザインが重要なのは、Webサイトの離脱に直結するからです。ユーザーがWebサイトを訪問した際に、文字が見づらい、購入ボタンがわかりづらい、必要な情報が得られない、といったUI／UX上の問題があることで、目的を達成することなく離脱してしまう可能性が高まります。
特にECサイトでは、操作のしやすさや購入までの導線の分かりやすさといった機能面が重要です。一方で、購入や問い合わせ等の具体的なアクションが発生しづらいコーポレートサイトやブランドサイトなどにおいても、いかにユーザーの興味を持続させるかという点でUI／UXデザインの工夫が求められます。
スクロールテリングについて
UI／UXデザインの重要性をお分かりいただいたところで、UI／UXデザインのトレンドであるスクロールテリングについて説明していきます。
スクロールすることによりダイナミックに画面を切り替えることをスクロールエフェクト（パララックス・スクロール、水平スクロールなど）といいますが、その中で特に注目が高まっているのがスクロール・テリングです。スクロールテリングは、「スクロール」と「ストーリーテリング」を組み合わせた造語です。スクロールすることにより「ストーリーテリング＝物語を語る」要素を表現するデザインのことをいいます。
スクロールテリングはさまざまなWebサイトで使用されますが、特に目立つのはランディングページなどの長編記事において、ユーザーにストーリー仕立てでコンテンツを読ませるという手法です。
スクロールテリングを使った魅力的なサイト例
言葉で説明するよりも、実際にスクロールテリングがどう取り入れられているのを見た方が理解しやすいと思います。ここではスクロールテリングを効果的に活用したWebサイトを紹介します。
スクロールテリングを効果的に活用している代表的なWebサイトです。画面をスクロールすると、動きのあるエフェクトや文字、動画が効果的に組み合わされて展開され、臨場感と没入感を与えてくれます。
このサイトは、文字での説明が多いのも特徴的。文字情報は多いものの、スクロールに合わせてコンテンツが進んでいくため、一方的な説明にならずユーザーの理解を助けています。
絵本を読む感覚でコンテンツを進めることができるWebサイトです。内容は国際的に問題視される事象への示唆に富んでいますが、柔らかいタッチの手描きイラストと、わかりやすいストーリー展開により親しみやすい印象になっています。随所に盛り込まれたアニメーションもポイントです。
森の中を進んでいくように展開するWebサイト。ブランドの世界観を表現する方法としてスクロールテリングを駆使しています。エフェクトは少なめですが、FVや詩的なブランドメッセージも含め、全体を通して飽きることなくGIN NO MORIの世界に浸ることができます。
スクロールテリングの特徴
前述した通り、UI／UXデザインは機能面だけでなく、ユーザーの興味を惹きつける内容面の充実という点でも重要となります。その両方を叶えることができるのが、スクロールテリングの特徴です。
特徴1：ストレスなく操作できる
スクロールするだけでストーリーに触れることができる操作性のしやすさが大きなメリットです。クリックも選択もポップアップもなく、画面遷移も不要なため、目的のために必要な動作を最小限に抑えられます。
近年では多くの人がスマートフォンを使用していることから、画面領域が狭い中で多くの情報量を伝えられるという点でも有効な手法です。
特徴2：コンテンツ理解を助ける
商品の誕生秘話などをストーリー仕立てで見せることで、単純に数字やデータで説明するよりも相手に伝わりやすくなります。
さらにスクロールテリングには、Airpods Proのようにスクロールダウンに連動して、文字による説明とグラフィック・アニメーションが起動してストーリーを展開するという特徴があります。文字だけでなくグラフィックやアニメーションからも情報を得られるため、よりコンテンツを理解しやすくなるのです。
特徴3：没入感がある
Webサイトのデザインや機能が進化している中で、ユーザーは、より没入感のあるインタラクティブな体験をWebサイトに求めるようになってきています。
スクロールテリングはスクロールと連動したストーリー展開により、ユーザーを世界観に惹き込みやすくなります。没入感があることで、感情や体験などのUXに訴えかけやすくなるのがポイントです。
スクロールテリングの注意点
スクロールテリングの手法を取り入れたWebサイトを作成する上での注意点を説明します。
デザインとストーリー構成の両輪を意識する
スクロールテリングでユーザーを世界観に惹き込むためには、表面的なビジュアルだけでなく、どのようなストーリーを展開していくかという構成が重要になります。
対象となるユーザーを深く調査した上でストーリーを考えることが必要です。通常のWebサイトよりも多くの時間や労力を要することを前提として作り込むようにしましょう。
ロングスクロールで想定される不都合をケア
ボタンによるページ遷移がない「ロングスクロール」では、ユーザーが自分のいる場所を見失いやすかったり、読み飛ばしやすい（冗長になりやすい）という懸念もあります。そのため、以下のようなことにも注意が必要です。
- FVに魅力的なコンテンツをおき、スクロールを誘導する
- ナビゲーションメニューを固定する
- スクロールによって現在の位置を見失わないよう、画面端に全体コンテンツの長さと現在位置を常に表示する
- セクションごとに背景を変える、適切な位置でアニメーションを入れるなどで関心を持続させる
これらの対策はアナリティクスを見れば効果を検証できます。ユーザーの行動を確認しながら、デザインを調整しましょう。
目的を伝えるための「手段」としてスクロールテリングを活用しよう
スマートフォンやタブレットと相性の良いスクロールテリングは、今後もWebサイトに活用されていくと思われます。その一方で、よりシンプルで削ぎ落としたミニマルなデザインがトレンドになってきている向きもあります。ミニマルなデザインは見やすいだけでなく、動作が早いのも特徴です。
スクロールテリングはうまく使えば効果的にユーザーを引き込むことができますが、複雑なエフェクトを多用すると読み込みが遅くなる場合もあります。あくまで伝えたいストーリー、世界観をわかりやすく伝える目的を叶えるための「手段」として取り入れるようにしましょう。