1. HOME
  2. コラム
  3. Webマーケティング
  4. ファーストビューとは?LPの離脱を減らしてCVアップを狙うデザインのポイント
Webマーケティング ランディングページ

ファーストビューとは?LPの離脱を減らしてCVアップを狙うデザインのポイント

ファーストビューとは?LPの離脱を減らしてCVアップを狙うデザインのポイント

WebサイトやECサイトに広告やSEOを駆使して集客しても、訪問者がすぐに立ち去ってしまっては意味がありません。検索結果や広告を見た人が訪れるランディングページ(以下LP)には、離脱を抑えて次のアクションにつなげる役割があります。そして、このままLPを読み進めるか、ほかのサイトに移動するかの判断を左右するのが、LPのファーストビューです。この記事では、LPのコンバージョンを上げたい人のために、ファーストビューとは何か、その重要性や構成のパターン、成功するファーストビューのポイントを解説します。

目次

LPのファーストビューとは?

ファーストビューとは、Webページの上部のうち、スクロールをせずに表示される範囲を言います。
LPは検索結果や広告を見て、内容をもっと知りたいと感じたユーザーが訪れるページです。訪問者の多くは、求める情報がLPにあるかどうかを訪れた瞬間に判断し、ないと思えば次のページに移動します。

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

どんなに強力に集客をしても、ユーザーがファーストビューをちらりと見て、直帰してしまっては、元も子もありません。ユーザーがLPに滞在し、コンテンツに触れて、初めてコンバージョンにつながるのです。
そこで、LPが表示されたその瞬間に「あなたに必要な情報がここにある」というメッセージをはっきりと伝えることが重要になります。ファーストビューで瞬時にユーザーの興味を引き、離脱を防ぐのです。
そのため、効果的なファーストビューをいかに作るかは、広告やSEO対策と並んでWebマーケティングの重要なテーマのひとつとなっています。

ファーストビューのサイズ

ファーストビューの構成を考える際は、そのLPが主にパソコンの横長の画面で見られるのか、スマートフォンの縦長の画面で見られるのかといった、デバイスの画面サイズを意識する必要があります。
ちなみに、現在、日本で最もよく使われているパソコンの画面の大きさは1920×1080ピクセル。タブレットは768×1024ピクセル、スマートフォンでは375×667ピクセルです(※)。
また、デバイスによって最適な画像のサイズも異なります。ファーストビューでは表示スピードも重要となるため、デバイスに合った解像度のビジュアルを用意することも大切です。
※出典:https://web-saku.net/displaysize-japan/

ファーストビュー・デバイス推奨サイズ解説図

Check

LPについての詳しい解説は下記のコラムでご覧いただけます。
効果的なランディングページ(LP)とは?作成のポイントから効果検証の方法まで解説

ファーストビューデザイン前に確認しておくべきこと

具体的な構成やコンテンツを準備する前に、次のような点について方向性を整理しておきましょう。あとになってぶれが生じたり、迷ったりすることを減らせます。

ターゲット

このLPを見るターゲット(ユーザー)は誰でしょうか?
見る相手によって、訴求すべきポイントやデザインのイメージ、色使い、文字の大きさ、テキストの書き方までが変わります。対象のイメージを絞り込んで、ぶれのないターゲット像を関係者で共有します。

メッセージ

ターゲット(ユーザー)に伝えたいメッセージは何でしょうか?
ファーストビューのコンテンツはユーザー視点で考えることが大切です。この商品を使うと、ユーザーはどんなメリットや利益を感じるのか、それをどう表現すれば伝わるか、コアとなるメッセージを絞り込みます。

クリエイティブ

ターゲット(ユーザー)にメッセージを伝えるためには、どんなクリエイティブが適しているでしょうか?
ファーストビューに掲載する写真やイラスト、動画などのメインビジュアルの役割は大きく、LP制作の肝と言えます。狙った相手に、研ぎ澄ましたメッセージを的確に伝えるのはどんなビジュアルかを考えます。

CTA

購入や申し込みを決断したユーザーを、確実にコンバージョンにつなげるには何が必要でしょうか?
CTA(Call to Action=行動喚起)は、ユーザーに行動を促す仕掛けを意味する言葉で、主に購入や申し込み、資料請求のためのボタンを指します。ユーザーの決断を確実にアクションにつなぐCTAは、LPの重要な要素です。
LP訪問者のなかには、ファーストビューを見て心を決める人、LPを訪れる前に決断している人もいます。そういったユーザーのために、CTAはファーストビューにも配置し、スクロールをせずに申し込みができるようにしておきます。

ファーストビューの構成要素

ファーストビューのコンテンツは、次のような要素で構成するのが一般的です。

ヘッドコピー

ヘッドコピーは、そのページを読ませるために最も目立つ所に置く見出しです。ヘッドコピーを作成するときのポイントを挙げてみましょう。

  • ユーザーに、このページは「自分に向けて作られている」「自分に合っている」と思わせる
  • 検索ワードを入れて、このページに「求めている情報がある」ことを示す
  • 商品を利用したときにユーザーが感じるベネフィット(メリットや特長)を入れて、読み進めたくなるよう促す

メインビジュアル

大きなビジュアルは、文章よりも強いインパクトでメッセージを伝えることができます。
ここでも、自分に合ったページだと感じさせる絵柄や色使いを選びましょう。商品のイメージを損なわずに、ターゲット層に合ったデザインの方向性(トーン&マナー)にすることが大切です。
商品使用時に感じられるベネフィットをイメージさせる絵柄を選ぶのも効果的です。

権威付け

ヘッドコピーやメインビジュアルで示したベネフィットを裏付ける情報を入れて権威付けを図り、信頼性を高めます。ランキングの順位や「満足度●%」といったデータを、メダルや王冠のイラストを使って目立たせる手法がよく使われています。

CTA

CTAは、しっかりと目立ち、ボタンだということが分かりやすいデザインを選んで、クリックしやすい位置に配置します。
シンプルな内容の場合には、ファーストビューの中に申し込みや問い合わせのフォームを入れて、すぐにアクションできるようにするのも効果的です。

効果的なファーストビューを作るための5つのポイント

最後に、ファーストビューの制作で成功するために、押さえておきたい5つのポイントを紹介します。

1.ユーザーの心理を想定してコンテンツを作る

ユーザーは疑問や悩みを解決する情報を求めてLPを訪れます。ですから、ファーストビューで来訪したユーザーの疑問や悩みに適切に応える必要があります。ユーザーが何を求めて来るのか、疑問や悩み、そのときの状況を十分に想定することが大切です。そこからユーザーの期待に応えるファーストビューの全体像を考え、コピーやビジュアルを用意します。

2.ユーザーが自分ごとと感じられるメインビジュアルを用意する

情報を求めて訪れるといっても、そのLPは多くの選択肢のひとつにすぎません。ファーストビューを見て、自分とは合わなさそうという印象を持つだけで、ユーザーは簡単に離脱し、次のサイトに行ってしまいます。
そこで、LPの印象を左右するファーストビューのメインビジュアルには、ユーザーが自分ごととしてイメージできる絵柄を用意します。例えば、画像やイラストに人物を登場させるときは、ユーザー層の年代や性別に合ったモデルを使うことが大切です。

3.ユーザーの悩みを先回りしてコンテンツを配置する

繰り返しになりますが、ユーザーが求めているのは、自分の疑問や悩みを解決する情報です。ファーストビューに、その答えを置きましょう。
例えば、ヘッドコピーで「こんな悩みはありませんか?」とユーザーの悩みを提示し、「その悩みを解決するために」といった形で商品の情報を紹介します。
訪れた人の気持ちに寄り添った構成によって、次に読み進めるようにスムーズに促すことができます。

4.訴求内容を絞る

ファーストビューの狭いスペースに情報を詰め込んでしまうと、何を伝えたいのかが分かりにくくなり、印象が薄れます。訴求内容を絞って、情報を端的に伝えましょう。

5.ページの読み込みスピードを改善する

瞬間的に残るか去るかが決まるLPでは、画面の表示スピードも重要です。ファーストビューのメインビジュアルには美しい大きな画像が効果的ですが、解像度が高いと表示に時間がかかり、離脱率が上がる可能性があります。
ユーザー層がよく利用するデバイスに合わせて、画像の容量を調整し、ページの読み込みスピードを上げましょう。

効果的なファーストビューを作成して、コンバージョン率の向上に貢献しよう

LPの直帰率が高くてコンバージョンが増えないときには、LPのファーストビューを見直す必要があります。ファーストビューの役割は、訪問者に瞬時にこのページは「あなたのためのページ」であることを伝え、「疑問や悩みが解決できそう」と感じさせることです。ユーザーの心理を想定し、最適なヘッドコピーやメインビジュアルを選んで、ファーストビューを作りましょう。効果的なファーストビューによって、LPの離脱率を下げ、コンバージョン率を上げていきましょう。

効果的なファーストビューを作りたい、LPのコンバージョンを高めたいと考えている方へ。図書印刷では、ECサイトの運用やマーケティング施策の支援をしております。お悩みや疑問は、どんなことでもお気軽にご相談ください。お問い合わせはこちら

効果的なランディングページを作りたいと考えている方へ。
図書印刷では、ページ制作や改善の支援をしております。また、ランディングページに集客するためのWeb広告の運用も得意です。詳しくは下記バナーよりWeb広告運用代行サービスのページをご覧ください。

はじめてのWebマーケティングを支援 広告運用代行サービス

Web広告とはどういうものか、初心者向けの資料もご用意しています。
どなたでも無料でダウンロードできますので是非ご活用ください。

何から始める? Web広告入門編 無料eBookダウンロード

関連記事

  • bn_column_r_ebook
  • bn_column_r_ebook_ec
  • bn_column_r_ebook_cxm
  • bn_column_r_ebook_webad