<img height="1" src="https://www.facebook.com/tr?id=710558959080952&amp;ev=PageView&amp;noscript=1" style="display:none" width="1" />

スクロールがユーザー体験に与える影響とは

Alan Smith

Alanは、ITの領域において幅広い経験をもつ、テクノロジーに関する熱心なブロガーです。彼は現在、ロサンゼルスに拠点を置くSPINX Digital Agencyと連携して仕事をしています。

この記事はUsabilityGeekからの翻訳転載です。配信元または著者の許可を得て配信しています。

How Scrolling Can Make (Or Break) Your User Experience (2017-09-13)

些細なことがユーザー体験を大きく左右することもあります。私たちがインターネット上で行うことの大部分は、無意識下で行われます。私たちは、漠然と画面を見て、Webサイトを訪れ、コンテンツを消費しています。

ユーザーはほとんどのことを無意識に行っていますが、Webサイトはユーザーの行動を強く意識しなくてはなりません。Webサイトは、いかなるときでもユーザー1人ひとりのニーズとウォンツに対して責任を負う必要があります。Webデザイナーは、顧客データペルソナを活用してWebサイトのトーンやビジュアル要素を作り出し、ターゲットユーザーに最適な形でサイトを提供しなければなりません。

画面のスクロールは過小評価されがちですが、UXにとっては非常に重要です。スクロールがUXに対して与える影響を知り、ユーザーをサイトに留めるベストプラクティスを応用できるようになりましょう。

ユーザーはスクロールしない?

Webデザイン業界の一部では、ユーザーはスクロールをしないと信じられています。そのため、スクロールが最小限になるよう、ページを分割してコンテンツを表示することを好むデザイナーがいます。しかし、これは下記の2つの理由から誤りです。

  • 長文コンテンツ:SEO強化のために長文コンテンツを採用することが増えています。5ページに分割された記事を読み進めるのは、特にモバイルデバイスでは面倒です。記事であれ、説明書やチュートリアルであれ、あまりに読むのが煩わしくなるとサイトから離脱されやすくなるでしょう。
  • タッチスクリーン:モバイルデバイスとタッチパネルはスクロールに適しています。これらのデバイスが市場を支配し続けているので、スクロールはより標準的な操作方法になるでしょう。

また、次のようなマーケターや研究者の報告や調査によって、スクロールに適したWebデザインの必要性が支持されています。

  • データ分析サービスを提供するCheatbeatが20億件以上のWebサイトへの訪問を分析した結果、一般的なWebページでは、訪問者の注目を引いた記事の66%がBelow the fold(スクロールしなければ見られないページの範囲)にあることを発見しました。
  • ユーザビリティの第一人者であるJakob Nielsen氏のアイトラッキング調査によれば、ユーザーはファーストビューに注意を向けがちですが、それでもスクロールはするそうです。特にスクロールをうながすように表示しているページではスクロールされやすいことがわかりました。
  • モバイルサイトでは、ユーザーの約半数が10秒以内に、90%が14秒以内にスクロールを始めました。
  • 数ページに分けられたページよりも、スクロールの必要な長いページのほうがユーザーの読む速度が速いことが、Software Usability Research Laboratoryの調査で示されています。
  • CX Partnersが実施したアイトラッキング調査によると、デザイナーがスクロールに適したデザイン手法に従えば、ユーザーはスクロールしようと思うそうです。

以上の調査結果を要約すると、適切にデザインをすればユーザーはスクロールをするということです。しかし今度は次のような疑問が生じます。

「どのようにすればスクロールに適したWebサイトをデザインできるのでしょうか? どのようなベストプラクティスがあるのでしょうか?」

流し読みとスクロールポイントの重要性

人間は生まれつき流し読みをするものです。流し読みのほうが記事を隅々まで読むよりも精神的な労力が少ないため、重要だと思えることが見つかるまでは文章を流し読む傾向にあります。この法則はWebデザインだけに当てはまるものではありません。スーパーマーケットが高価な商品や人気商品を目の高さに陳列して、ノーブランド品や低価格ブランドの商品を一番下の棚に並べているのも同じ理由からです。

しかしWebデザインでは、スクロールポイントでユーザーの流し読みが中断されます。本文中の重要なポイントごとに関連する情報をまとめなければ、「スクロール疲れ」と呼ばれる現象を招いてしまうでしょう。

スクロール疲れによって、以下の2つの現象が引き起こされます。

  • 1つ目は「ゾンビスクロール」です。ユーザーが次第に集中力を失い、注意が向かなくなり、一般的なクリックベイトやフック、CTAに反応しにくくなることを指します。
  • 2つ目は「不満の爆発」または「長すぎて読まれない」です。長いスクロールにイライラしたユーザーが、サイトの要点を理解せず、何の知見も得ることなく離脱してしまうことです。

Webページをデザインする際は、このような否定的な印象になることを防ぎつつもユーザーに最後まで読んでもらえるよう、以下のヒントやコツを検討してみてください。

スクロールに適したコンテンツにする

スクロールを促進する1番の方法は、コンテンツの最後までスクロールしやすいデザインにすることです。すぐに実行できる以下の案を考慮してください。

  • 力強く始める:良いイントロダクションは読者を惹きつけ、一番下までスクロールするようにうながします。コンテンツの冒頭で簡単なインサイトを提供して、読み続ける動機を読者に与えましょう。
  • 一貫して関連する情報を提供する:情報が細部まで関連しているほど、読者がスクロールし続ける可能性は高まります。
  • 画像を使う:良い画像はコンテンツを分割して、読者の関心を維持する助けとなります。しかし、ストックフォトの画像はコンテンツにはあまり貢献しないということに留意してください。インフォグラフィックスやユニークな画像にこだわりましょう。

「最下部モドキ」現象に注意する

ビジュアルデザインの観点から、スクロールをうながす重要なヒントが1つあります。それは「最下部モドキ」を避けることです。

「最下部モドキ」は、ファーストビューの下にはもうコンテンツがないとユーザーが誤解するようなWebデザインにおいて生じます。ファーストビューには最優先して要素を配置する必要がある一方で、スクロールすれば価値のあるコンテンツが続くことを裏付けるべきです。

このようなデザインを視覚的に達成するのはとても簡単です。たとえば、グリッドやカードを用いてコンテンツを配置して、ファーストビューにそのグリッドが収まりきらないようにしましょう。訪問者にとって、スクロールして残りのコンテンツを見る手がかりになります。

もう1つの方法は、矢印や、「スクロール」というテキストで手がかりを提示することです。この単純な技術によって、ユーザーがサイトで過ごす時間を大きく伸ばすことができます。

ナビゲーションの技術

ナビゲーションはWebサイトの成否を決定づけるもっとも重要な要素の1つです。そのため、スクロールに適した形にナビゲーションを調整するのは、当然の解決策と言えます。

特に長いコンテンツでは、ナビゲーションに問題が起こる可能性があります。デスクトップとモバイルのいずれでも、ユーザーは上下にスクロールすることに不満を抱く可能性があります。この問題に対処する単純な方法は、固定ナビゲーションを使うことです。ナビゲーションがつねに見えていれば、ユーザーがコンテンツにアクセスしやすくなります。

スクリーンの貴重なスペースを節約するために、表示されている最上部付近をスクロールしたときに、ポップアップを表示するナビゲーションの方法があります。この方法は、扱えるスペースが非常に限られているモバイルデバイスで特に有効です。

SEOガイドラインの基本に従う

長いスクロールがSEOに悪影響をもたらす可能性はありますが、基本的なガイドラインに従えば悪影響は避けられます。Googleのベストプラクティスや推奨法をチェックして、Webサイトが検索結果ページの上位に表示されるようにしましょう。また、Googleアナリティクスを用いて、SEO対策が機能しているかどうか、途中で調整が必要かどうかを確かめてください。

スクロールのヒントとまとめ

スクロールは役に立たないと思っているのなら考え直してください。長文コンテンツとモバイルデバイスによって、スクロールはこれまで以上に重要になっています。

Webサイトがシンプルで直感的だと感じられれば、ユーザーはBelow the foldにすすんでスクロールしてくれるでしょう。

スクロールのベストプラクティスには、焦点を設定すること、コンテンツを分割すること、質の良い魅力的なコンテンツを組み上げること、スクロールに適したナビゲーションを整えることなどがあります。

視覚的な手がかりと直感的なデザインによって、Webサイト訪問者の滞在時間を伸ばし、スクロールを使って見込み客を顧客に変えることができます。この記事で紹介した技術をWebサイトに応用すれば、失望する結果にはならないでしょう。


Banner jobs