ユーザーがスクロールする時代にファーストビューをどう考えるか

ファーストビューといえば、コピーやCTAを設置することでユーザーに対してダイレクトに訴求したいものを表示させる要素として長らく最も重要とされていました。
しかし昨今、ウィンドウサイズが大きくなっていることやレスポンシブウェブデザインやシングルページの広がりなどにより、ユーザーがスクロールを非としない環境が出てきています。

現在のウィンドウサイズ

netmarketshareの調査によれば下記のような状態となります。
みなさんのターゲットはどこに設定していますか。

ユーザーがスクロールする時代にファーストビューをどう考えるか

Resolution Total Market Share
1366 x 768 14.46%
1920 x 1080 8.79%
768 x 1024 7.88%
360 x 640 7.53%
320 x 568 6.26%
1280 x 800 5.43%
1440 x 900 4.74%
1280 x 1024 4.70%
1600 x 900 4.32%
1024 x 768 4.07%
375 x 667 3.36%
1680 x 1050 2.71%
320 x 480 1.95%
1280 x 720 1.40%
1920 x 1200 1.32%
2560 x 1440 1.01%

ユーザーがスクロールする時代

2006年と少し古い情報ですが、ヒートマップツールのclicktaleの調査です。

91% of the page-views had a scroll-bar.
76% of the page-views with a scroll-bar, were scrolled to some extent.
22% of the page-views with a scroll-bar, were scrolled all the way to the bottom.
Unfolding the Fold (Insights into Webpage Scroll) | ClickTale Blog

この時点でも実に22%が最後までスクロールしていることがわかります。

また、下記のデータをご覧ください。
ユーザーがスクロールする時代にファーストビューをどう考えるか
出典:Scroll behavior across the web – Chartbeat Blog Chartbeat Blog
エンゲージメントのピークはファーストビューからある程度スクロールされた1200pxの間に存在します。
ファーストビューはさっと読み流し、中盤あたりを多く見る傾向が推測されます。

スクロールしてもらうためのUIとは

全てのページがスクロールされるとは限りません。
ファーストビューに詰め込み過ぎるとユーザーはそこで離脱につながる傾向にあり、スクロールされず理解不足に陥る懸念が生じます。
下記はBristol Airportのサイトでのヒートマップです。
ユーザーがスクロールする時代にファーストビューをどう考えるか
出典:cxpartners | The myth of the page fold: evidence from user testing

左の要素を詰め込んだバリエーションはページの下が全く見られていないことがわかります。
この場合は見られていない要素を削るのか、それとも右のようにスクロールしてもらうようにするか、判断が必要です。

では、スクロールさせるために、どのようなUIが必要なのでしょうか。
こちらもデータから考えてみます。
下記の図のような4種類をテストしてみた結果です。
ユーザーがスクロールする時代にファーストビューをどう考えるか
出典:Everybody Scrolls.
程度の差はあれ、どれもスクロールされることがわかりました。
・・・なんとも言えない結果ではありますが、より効果的にスクロールさせるには矢印や下の要素をチラ見せすることが必要と言えそうです。

ユーザーがスクロールすることを前提にファーストビューは端的にしつつ、ページ全体でいかに読ませるのか考え、構成を練っていきたいですね。

事例

http://www.rambert.org.uk/
▼をメインビジュアルにくっつけて下に続いていることを表す。
ユーザーがスクロールする時代にファーストビューをどう考えるか

http://wearetmbr.com/
スクロールを促すアイコンを緩いアニメーション付きで設置。
ユーザーがスクロールする時代にファーストビューをどう考えるか

http://www.kaiyukan.com/kaiyukan25th/
最初に下から上まで見せた上で、タイムライン形式にする
ユーザーがスクロールする時代にファーストビューをどう考えるか

design > ユーザーがスクロールする時代にファーストビューをどう考えるか