こんにちは、ツバサです。
商品ページの改善ミーティングで「ファーストビューに何を置くか考えよう」という議論になった。なんとなく「最初に見える部分」だろうとは想像がついたけど、具体的にどこまでがファーストビューなのか、何を置くのが正解なのかがわからなかったので調べてみた。
ファーストビューとは
ひとことで言うと、Webページを開いたときにスクロールせずに表示される画面範囲のこと。ユーザーが最初に目にするエリアで、ページの第一印象を決める部分だ。
実はファーストビューは和製英語で、英語では「Above the Fold（アバブ・ザ・フォールド）」と呼ぶ。Kaizen Platformのファーストビュー解説記事によると、もともとは新聞を半分に折ったときに上半分に見える部分を指す言葉で、それがWebの世界に転用されたものらしい。
ファーストビューのサイズはデバイスによって変わる。ミエルカヒートマップのファーストビュー解説にまとめられていたデータを参考にすると、目安はこんな感じだ。
| デバイス | 横幅 | 高さ |
|---|---|---|
| PC | 1000〜1400px | 550〜700px |
| スマホ | 320〜430px | 500〜700px |
| タブレット | 768〜1024px | 600〜900px |
ブラウザのツールバーやアドレスバーの高さによっても変わるので、あくまで目安。実際にはGoogle Analyticsなどでユーザーの画面解像度を確認して、自サイトの実情に合わせて考えるのがいい。
EC実務で出てくる場面
ECサイトの運営でファーストビューが話題になる場面はかなり多い。
商品ページの改善
僕が遭遇したのがまさにこの場面。商品ページを開いたとき、ファーストビューに商品画像・商品名・価格・カートボタンが全部見えているかどうかが重要だと言われた。エックスサーバーのファーストビュー解説記事にも、ユーザーはページを開いて3秒で読み進めるかどうかを判断すると書いてあった。
スマホの場合、画面が小さいので商品画像だけでファーストビューが埋まってしまうことがある。価格やカートボタンが見えない状態だと、スクロールしないと買えないページになり、離脱の原因になりうる。
トップページのヒーローバナー
ECサイトのトップページでは、ファーストビューの大部分をヒーローバナー（大きなメインビジュアル）が占めることが多い。セール告知や新商品の訴求をここに置くか、それとも商品一覧を見せるか、という判断が求められる。WCAのファーストビューデザイン記事でも、ECサイトのファーストビュー設計には商品への導線確保が重要だと触れられていた。
LP（ランディングページ）の設計
広告から流入するLPでは、ファーストビューで「何のページか」「自分に関係があるか」が伝わらないと即離脱される。キャッチコピー、商品画像、CTAボタン（購入ボタンなど）をファーストビュー内に収めるのが基本とされている。
覚えておきたいポイント
スマホファーストで考える
今はECサイトのアクセスの7〜8割がスマホからと言われている。PCで見たときの見た目だけでなく、スマホで開いたときにファーストビューに何が見えるかを優先して確認したほうがいい。SiTestのファーストビュー解説記事でも、モバイルファーストの視点でファーストビューを設計することの重要性が説明されていた。
表示速度もファーストビューの一部
いくら良いデザインでも、ページの読み込みが遅ければユーザーはファーストビューを見る前に離脱してしまう。画像の最適化やサーバーの応答速度など、表示パフォーマンスもファーストビュー体験の一部だ。
ヒートマップで実際の行動を確認
ファーストビューにどんな要素を置くか迷ったら、ヒートマップツールを使ってユーザーの行動を確認するのも手だ。どこまでスクロールされているか、どこがクリックされているかを可視化できるので、改善の根拠になる。
