スクロールビューも大事だけどファーストビューはもっと大事だと思う。ユーザーに如何にしてスクロールをさせるかを考えてみた

firstview-scroll

ファーストビューはとっても大切。というのはわかるけど具体的にどうするといいのか?って難しいですよね。

ファーストビューで大事なのはたくさんの情報じゃなくて、自然にスクロールをさせることだと思う

もういきなり、答えです。
ファーストビューはとても大切です。最近ではスクロールを行うことの抵抗感がより一層なくなってきたと言われます。(これもデータ見たこと無いからなんとも言えないが、感覚値でそうだとは思う)
要はスクロールビューを重視して、その体験を素晴らしい物にした方がいいよねってこと。

けどさ、ぱっと開いた画面に自分が必要としている情報がなかったらダメじゃね?
スクロールすらせずにユーザーは帰っちゃうんじゃないかな?

ニールセン博士もこう言っています。

しかし、サイズという以上に折り目というのはコンセプトなのだ。折り目は重要である。ページの上部に何が表示されるかというのは重要なことだからだ。もちろんユーザーもスクロールする。しかし、それはファーストビュー内に表示されているものによって、この後の内容に対してしっかり期待が持てそうな場合に限られる。何のアクションもしなくてもページ上に見えているものによって、我々はスクロールをしようという気になるのである。

引用元:ファーストビューに関するマニフェスト: ページの折り目が今も大事な理由 – U-Site

まずそのサイトのターゲットがどんな気持ちで、どういう流入経路を辿ってくるのかを考える。
サイトを開いた時に求めていたものと近い(一致する必要は必ずしもないと思います)ものが表示してあげる。これでユーザーはスクロールをする可能性が上がったといえます。

なので、個人的にはカルーセルはもう古いとか言われたりしてるけど、動画だろうがカルーセルだろうがヒーローだろうが、ターゲットが「おっ!これは求めていたものかも」と思ってくれればなんでもいいと思ってます。

でもこれだけでは足らない。
そうだ、チラ見せだ!

ファーストビューの下に、さらなる期待が埋まっているような演出をしてあげれば、ユーザーはスクロールするはず。
演出って言うけどやることは簡単で、キャッチの文章だったり、画像だったりその下のコンテンツがチラ見せできていれば自然とスクロールという行動を取ってくれます。

じゃあファーストビューの高さを最適化しよう

そうなってくると、困るのがファーストビューってデバイスによってぜんぜん違うってことなんですよね。
考え方は以下の順番です。

  1. ターゲット属性に近い人はどのデバイスで最も訪れるか?
  2. そのデバイスのサイズで最も使われているのはどのサイズか?

です。

一番は想像力を働かせましょう。
二番はStatCounter Globalで調べましょう。

一例を出すと、以下はデスクトップでのモニター解像度の直近1ヶ月のシェア率。

StatCounter-resolution-JP-monthly-201509-201510-bar

1920*1080と1366*768で半分近いですね。後者はノートですかね。
ということは高さ768pxまでにファーストビューとその下のコンテンツチラ見せがあればいいということです。これPC表示ね。

まとめ

これはあくまでも私の考え方です。
ただ、ずれてないないと思います。どれだけ自然にスクロールさせることができるかがファーストビューでは大切です。

ちょっとした改善でも同様。例えばPDCA回してる中で、ヒートマップ解析してみたら全然スクロールされてない!ってわかったら、まず疑うべきはファーストビューの内容ですが、加えて高さも関係しているかもしれないと疑って、試してみます。

少しでも誰かの役に立っていると嬉しいです。
あと、冒頭の「最近ではスクロールを行うことの抵抗感がより一層なくなってきた」この根拠とかデータ知っている人いたら教えてほしいです。切実に。

firstview-scroll

ABOUTこの記事をかいた人

Tetsu

都内で働くWebディレクター。ディレクターになる前は某アパレルブランドにて勤務。「なんとなくおもしろい」という理由でこの業界にいる。このブログもなんとなく続けてます。Twitterはやっていません。