「ファーストビューの重要性は？」

「ファーストビューでどうやってCVRを上げるの？」

Webサイトを運営している方のなかには、以上のような悩みを抱えている方もいるでしょう。

実は、ファーストビューでの離脱率は驚愕の70％超えとも言われているため、CVRが思うように上がらないWebサイトは早めの改善が必要です。

そこでこの記事では、ファーストビューの重要性とCVRを上げるポイントについてご紹介します。

1. ファーストビューとは？

ファーストビューとは、訪問者がWebサイトに入ったとき最初に表示され目にする部分のことです。

スクロールせずに表示される部分を示し、パソコンやスマホによって大きさは異なります。

Webサイトによっては、ブランドのイメージを全面に出し興味を引くことを重要としますが、購入や申し込みを促すページなどでは、できるだけ離脱しないようなデザインや内容が大切です。

2.ファーストビューの重要性

「ファーストビューがなぜ大切なのか」

ここでは、ファーストビューの重要性をサイトの直帰率と絡めてご紹介します。

(1).ファーストビューからの直帰率

先述したように、ファーストビューはできるだけ離脱しないようなデザインや内容が大切であり、読み進めるか否かの判断が下される場面です。

時間にして、わずか3秒。

離脱せずに、スクロールして読み続けるかどうかは、以下の要素で判断されていると言われています。

・ターゲットは誰か
・読み進めるメリットはあるか
・利益・ベネフィットはなにか

また離脱した割合は直帰率と呼ばれ、企業の公式サイトであるコーポレートサイトでは直帰率40〜60％と言われています。

(2).LPの直帰率は70％以上

商品の購入やサービスの申し込みを成果とするLP（ランディングページ）では、ファーストビューでの直帰率が70％以上を占めているとも言われています。

サイトにアクセスした訪問者のなかで、ファーストビューからスクロールする訪問者は、半分以下にまで減少してしまうのです。

逆に言うと、ファーストビューのみを改善することで、コンバージョンが上がることも期待できるため、LP全体を変えるような手間や費用が不要になる場合もあります。

3. CVRを高めるポイント

Webサイトにとって重要なファーストビューですが、ここではファーストビューでCVRを高めるポイントをいくつかご紹介します。

(1).画像容量の調整

ファーストビューには商品を購入した後やサービスを申し込んだ後の「ベネフィット」が含まれる画像などが効果的ですが、画像の容量が大きい場合は調整が必要です。

画像の容量が大きい場合は、ページの読み込み時間が長くなり、せっかくデザインしたアイキャッチ画像が出る前に離脱者が出てしまいます。

実際、Googleのデータでは、モバイルサイトの表示に1秒〜3秒かかるページの直帰率は32％とも言われ、1秒〜5秒では90％と高確率。

ファーストビューはもともとLPで70％以上の離脱があることから、表示スピードでの離脱は避けたいところです。

現在のファーストビューの表示スピードが分からない場合は、Webサイトの読み込み速度を可視化してくれるツール「PageSpeed Insights」で、チェックしてみてください。

画質もブランドイメージに大きく左右するため、調整した画像はPCとスマホで何度も確認を行い、速度と共に確認することが大切です。

(2).配色に配慮する

ファーストビューの配色は、以下の2つの軸から考えて決めます。

・訪問者が求めるイメージ
・自社が訪問者に与えたいイメージ

「LINEと言えば緑」というように、イメージカラーが確率されている場合は、イメージカラーはそのまま緑色を使用して間違いないでしょう。

イメージカラーが確立されていない商品やサービスの場合は、色彩が持つイメージやターゲットに合わせた色の設定が必要です。

色の持つ効果は絶大であり、イメージに合った配色を選ぶことで訪問者の共感が得られ、成果へとつながります。

また、訪問者に与えたいイメージがある場合は、イメージに合った色を取り入れることでブランドイメージを与えることができます。

(3).ファーストビューにCVボタンを入れる

先述したように、ファーストビューでの離脱は70％以上であるため、この範囲内にもCVボタンを設置しておきます。

購入するモチベーションが高いサイト訪問者は、ファーストビューから購入や申し込む場合も多いためひと目で分かるデザインのボタンを設定し、煩わしさをなくすことが大切です。

サイトの雰囲気やイメージにもよりますが、一般的にはオレンジや緑色のCVボタンは認知されやすいと言われています。

また、影やグラデーションをつけて立体的なボタンデザインにすることで、「ここはクリックできる」と判断されやすく、ボタンをスルーしてしまうことを阻止できます。

逆に、クリックできないものを立体的なデザインにしてしまうと、訪問者は混乱してしまうため、サイト全体のデザインでCVボタンの邪魔をしないようにしたいところです。

(4).閲覧サイズに合わせたページを作る

Webサイトは主にPCとスマホから見られるため、どちらにも対応したサイズに合わせたページを作る必要があります。

特に近年では、通学・通勤中に商品やサービスを探すことも多くなり、購入・申し込みもスマホで完了させる方が増えているため、スマホ画面に対応したデザインは必須と言えるでしょう。

パソコンからの訪問者には幅1,000px×高さ550px、スマホでは幅360px×高さ600pxのサイズのファーストビューが一般的です。

今後、スマホ画面の一般的なサイズが変動した場合には、常に変化していくため常にアンテナを張っておく必要があります。

(5).権威付け

ファーストビューにおいて、明確な数字を用いた権威付けを行います。

以下のような第三者から得た事実や実績、ランキングが入ることで訪問者の不安感が払拭され離脱を防止します。

・お客様満足度 第1位
・〇〇年売上 第1位
・リピート率驚愕の ◯％
・販売実績◯万個突破
・100％オーガニック
・100％国内生産
・◯種類の植物由来成分配合　など

まとめ

今回は、ファーストビューの重要性とCVRを上げるポイントをいくつかご紹介しました。

LPでは全体の70％以上の方が、離脱しており下へとスクロールしていません。

また、ページの表示が3秒かかると32％の離脱、5秒かかると90％の訪問者が離脱すると言われているため、ひと目でイメージを感じ取れる配色やCVボタンのデザインだけでなく、表示速度も非常に重要です。

さらに数字を用いた権威付けを行うことで、訪問者の不安感は払拭されるでしょう。

LP全体のデザインを見直す前に、まずはファーストビューを見直すことでCVRの向上が期待できます。

【参考文献】

Mobile conversion rates are lower than desktop.
（https://www.thinkwithgoogle.com/consumer-insights/consumer-trends/mobile-page-speed-new-industry-benchmarks/）