LPのファーストビューとは？重要性やサイズについて事例付きで解説！

LPを開いてまず最初に目に入る画面のことを、ファーストビューと言います。

ファーストビューは、縦に長いLPにおいて、最も重要な部分です。ファーストビューの出来が、ユーザーの滞在時間やコンバージョン率を大きく左右します。

そんなLPのファーストビューですが「そもそもファーストビューのことがイマイチ分かっていない」「どうやって作成すれば良いか分からない」と悩んでいる方も多いのではないでしょうか。

そこで今回は、LPファーストビューの基本情報や推奨サイズ、魅力的にするために意識すべきことなどについてまとめました。

専門用語は極力使用せず、初心者の方にも分かりやすいように解説しています。

記事を最後までチェックすれば、LPのファーストビューに関することがひと通り分かります。LPの制作やWeb広告の運用等を任されている担当者の方は、ぜひ最後までチェックしてみてください。

LP(ランディングページ)のファーストビューとは？

LPのファーストビューとは、冒頭でも述べたとおり、LPを開いてまず最初に目に入る画面のことです。

例えば弊社の以下LPを例に考えてみましょう。

パソコンを使って上記LPにアクセスをした場合、まず最初に表示される画面は以下です。

この最初に表示されたページのことを「ファーストビュー」と言います。

詳しくは後述しますが、ファーストビューを見てLPを読み進めるか離脱するかを決めるユーザーが多いため、ファーストビューはLPにおいて最も重要な箇所だとされています。

LP(ランディングページ)のファーストビューを構成する3つの要素

LPのファーストビューは、以下3つの要素から構成されています。

• 写真
• キャッチコピー
• ボタンやナビなどのUI

各要素について、画像付きで簡潔に解説します。

写真

LPファーストビューに掲載される写真は、「メインビジュアル」とも呼ばれます。

メインビジュアルという名前からも分かるとおり、ファーストビューに掲載される写真は、LPの「顔」のような役割を果たします。一般的には、商品・サービスの写真や、商品・サービスの広告を行っている著名人の写真、商品・サービスのターゲットとなる人物像の写真などが掲載されます。

例えば以下は、ホワイトニングを提供する「starwhitening」のLPファーストビューです。

「歯が白くて綺麗な方の写真(＝ユーザーの未来の姿)」を掲載することで「私もこうなれる」とユーザーにホワイトニングをした後の未来を想像してもらえます。

キャッチコピー

LPに掲載される文字の中でも、サイズが大きくユーザーの目を引くように作られているものを、キャッチコピーと言います。

LPのファーストビューには、以下のようなキャッチコピーが掲載されます。

• 商品・サービスの内容を端的に表すキャッチコピー
• ユーザーの悩みを的確に表すキャッチコピー
• 実績やキャンペーンをアピールするキャッチコピー

例えば以下は、AGA治療を行う「湘南美容クリニック」のLPファーストビューです。

AGA治療には決して安くない費用がかかるため、ユーザーは「もしお金を払ったのに効果が出なかったらどうしよう」といった悩みを抱えています。

その悩みを解消するために、ファーストビューにて「全額返金制度あり」のキャッチコピーが掲載されていると考えられます。

LPのキャッチコピーについては以下の記事でも詳しく解説しているので、ぜひ併せてお読みください。

関連記事：【応用可能】LP(ランディングページ)に使えるキャッチコピーの例や作り方を一覧で紹介！

ボタンやナビなどのUI

詳しくは後述しますが、LPのファーストビューには、申し込みボタンやお店への地図・電話番号などの情報を掲載することも大切です。

申し込みボタンはファーストビュー下部に、電話番号などはファーストビュー最上部に掲載するのが一般的です。

例として、カメラの買取を行う「カメラ高く売れるドットコム」のLPファーストビューを見てみましょう。

ファーストビュー最上部に、電話番号や受付時間、買取価格を調べるためのボタンが設置されています。

ファーストビューはLP(ランディングページ)において最も重要

縦に長いLPは、以下3つの構成に細分化されます。

• ファーストビュー
• ボディ
• クロージング

上記3つの構成の中でも、ファーストビューは最も重要です。なぜならファーストビューは、確実にユーザーの目に留まる箇所だからです。

一方のボディやクロージングは、ユーザーがLPを読み進めてくれなければ見てもらえません。

ユーザーは、ファーストビューを見て3秒以内に、記事を読み進めるかどうかを判断するとされています。

ファーストビューの出来が、ユーザーの滞在時間やコンバージョン率を大きく左右するため、ファーストビューは最も力を入れて作成しましょう。

LP(ランディングページ)のファーストビューを魅力的にするために意識すべきこと6つ

LPのファーストビューを魅力的にするためには、以下6つのことを意識しましょう。

• ペルソナ設定は詳細に行う
• 「どんなLPなのか」が一目で分かるようにする
• 権威付けを行う
• 掲載する写真にこだわる
• CTAを設置する
• 魅力的なオファーを掲載する

なおこれら6つのポイントは、ファーストビューのみならず、LP全体に対して言えることです。6つのポイントを抑えることで、ファーストビューはもちろん、LP全体が魅力的なものになります。

それぞれ詳しく解説します。

ペルソナ設定は詳細に行う

ペルソナは、商品やサービスの典型的なユーザー像を指します。

ペルソナ設定を行うことで、ユーザーにどんなデザインが刺さるのか、どんな文言が刺さるのかが見えてきます。

ペルソナ設定の例は以下のとおりです。

• 名前：田口優馬
• 年齢：28歳
• 性別：男
• 居住地：東京郊外
• 家族構成：一人暮らし
• 趣味：登山
• 悩み：20代も後半に差し掛かり、今後のキャリアに対して悩んでいる
  　　　片道1時間半かけて通勤をするのが大変

上記はあくまで「典型的なユーザー像」ですので、上記に完全に当てはまる方はいません。

しかしペルソナを定めることで、万人に向けたふんわりとした訴求ではなく、ピンポイントで訴求を行うことができます。

よって「これって私のことじゃん」とユーザーの心を捉えることができ、LP下部まで読み進めてもらえたり、コンバージョンに繋がったりします。

「どんなLPなのか」が一目で分かるようにする

前述のとおり、ユーザーはLPファーストビューを見て、3秒ほどで先を読み進めるか離脱するかを判断します。

あなたもLPやWebサイトにアクセスして、「このサイトはなんか違うな」と数秒のうちにブラウザバックをした経験があるのではないでしょうか。

ユーザーの離脱を防ぐために、ファーストビューを見て「どんなLPなのか」が瞬時に分かるようにしましょう。「どんなLPなのか」は写真やキャッチコピーを使って表現可能です。

例えば「パーソナルトレーニングに関するLP」ということがファーストビューで分かれば、パーソナルトレーニングに興味があるユーザーの一部はLPを読み進めてくれるでしょう。

しかし「パーソナルトレーニングに関するLP」ということがファーストビューでわからなければ、せっかくアクセスをしてくれたユーザーも、多くがその場で離脱をしてしまいます。

リスティング広告経由でLPに集客する場合、広告を出稿する検索キーワードとLPファーストビューの文言を合致させるという手法もおすすめです。

関連記事：リスティング広告とは？初心者向けに仕組みから予算まで丁寧に解説

権威付けを行う

人は権威に弱いです。言っていることが同じであっても「誰が言っているのか」によって捉えられ方が変わってきます。

具体的な数字、これまでの実績、メディア出演など、権威付けになるものは積極的にLPのファーストビューでアピールしましょう。

例えば以下は、不登校の子供向けの学習塾「キズナ共育塾」のLPファーストビューです。

• 卒業生4000人
• 実績10年

上記2つの文言で、権威性がアピールされています。

「4000人に教えているなら安心だな」「10年も続いてるってすごい塾なんだろうな」とユーザーに安心感と信頼性を与えます。

何か自社の権威付けになることはないか、考えてみてください。

掲載する写真にこだわる

これはお伝えするまでもありませんが、ファーストビューに掲載する写真には、こだわりましょう。

掲載する写真は、ペルソナや掲載する文言とマッチするものを選ぶようにしてください。

ファーストビューでは、キャッチコピーや権威付けのための文言、アクセス情報、CTAボタンなどを掲載します。よって写真の情報量が多くなりすぎないようにすることが大切です。

またLPの表示速度が遅いと、それだけでユーザーに離脱される原因となります。よってできればWebP形式の画像を使用するようにしましょう。

CTAを設置する

CTAは「Call To Action」の略で、日本語では「行動喚起」と訳されます。LPにおいては、申し込みや資料請求のためのボタンのことです。

CTAは、LPファーストビューにも必ず設置しましょう。なぜならユーザーの中には、すでに購入を決心しているユーザーも一部いるからです。

LPをスクロールしてボタンをクリックしてもらうよりも、ファーストビューの分かりやすいところにボタンがあった方が親切ですからね。

例えば以下のLPでも、ファーストビューにCTAが設置されています。

またCTAには、マイクロコピーの設置が効果的です。マイクロコピーとはボタン周りに小さく記載された、ユーザーを後押しするための文言のことです。

上記LPの場合は「調査・シミュレーション作成を無料でおこなっています！」がマイクロコピーにあたります。

• 無料ならやってみようかな
• 簡単に退会できるならとりあえず登録してみようかな
• 3分で申し込めるなら今申し込もうかな

上記のように、申し込みを悩んでいるユーザーに対する最後の一押しの役割を果たします。

魅力的なオファーを掲載する

ファーストビューにて魅力的なオファーを提示することで、ユーザーに興味を持ってもらいやすくなります。魅力的なオファーの例は、以下のとおりです。

• 入会金無料
• ⚪︎日までの申し込みで10％オフ
• 7日間無料体験実施中

特に「無料」のオファーは強力です。あなたも「無料キャンペーン中だから」という理由で、なにか商品やサービスを購入した経験があるのではないでしょうか。

自社でなにかオファーを提供できないかを考え、それをファーストビューでアピールするようにしましょう。

有名商品・サービスLP(ランディングページ)のファーストビューデザイン事例

ここでは、以下3つの有名商品・サービスLPのファーストビューデザインを紹介します。

• chocoZAP
• レバテックエキスパート
• タイミー

「こんな工夫が施されているな」と考えつつ、自社のLPに取り入れられる点がないか考えながら、チェックしてみてください。

それぞれ詳しく見てみましょう。

chocoZAP

以下は、RIZAPグループ株式会社が運営するトレーニングジム「chocoZAP」のLPファーストビューです。

ファーストビューを見て一目で「気軽に利用できるジムであること」が分かります。メインビジュアルとして使用されている写真は、chocoZAPのペルソナと一致したものになっています。

ファーストビューにCTAボタンがあるので、すぐに申し込みが可能です。入会が不安な方のために、マイクロコピーとして「入会方法について詳しく見る」の文言もあります。

また時期によっては「入会金無料」の魅力的なオファーが掲載されています。

レバテックエキスパート

以下は、レバテック株式会社が運営する転職サービス「レバテックエキスパート」のLPファーストビューです。

ハイクラスIT人材を対象にした転職サービスということで、落ち着いた高級感のあるデザインになっています。権威性やオファーのアピールも控えめになっていますね。

ただしどのような転職サービスなのかは一目で分かるようになっていますし、CTAボタンは赤色で目立つように掲載されています。

タイミー

以下は、バイト募集サービス「Tmee」のLPファーストビューです。

TimeeのテレビCMでもお馴染みの橋本環奈さんの画像がメインビジュアルとして使われています。

導入企業のロゴを掲載したり、「ワーカー数500万人以上」と掲載することで権威性の獲得に繋がっています。

またCTAボタンが2つあるので、「いきなりアカウントを開設するのはちょっと…」という方に向けた資料ダウンロードの訴求も可能です。またマイクロコピーとして「最短7分で」といった文言がCTAボタン上部に掲載されており、簡易性のアピールにもつながっています。

LP(ランディングページ)のファーストビューに最適なサイズは？

ファーストビューのつもりで作成したコンテンツでも、デバイスによっては画面サイズの問題から表示されないかもしれません。

ファーストビューとして表示させたいコンテンツが表示されなければ、ユーザーの離脱に繋がってしまいます。

ここでは、LPのファーストビューに最適なサイズについて、デバイス別に紹介します。

パソコンの推奨サイズ

日本でよく使用されるパソコンの画面の大きさは「1920×1080px」です。またタブレットの場合は「768×1024px」です。

パソコンの場合、LPにおけるファーストビューのサイズは「幅1000〜1200px、高さ550〜650px」程度が良いでしょう。

スマートフォンの推奨サイズ

日本でよく使用されるスマートフォンの画面の大きさは「375×667px」です。

スマートフォンの場合、LPにおけるファーストビューのサイズは「幅350〜365px、高さ600〜650px」程度が良いでしょう。

パソコンの場合もスマートフォンの場合も、画面いっぱいにファーストビューが広がると、見栄えが悪くなる傾向にあります。よって高さは、デバイスの画面の大きさよりも小さく設定しています。

レスポンシブデザイン

パソコン、スマートフォンなど異なるデバイスでLPを正確に表示したいのであれば、レスポンシブデザインがおすすめです。

レスポンシブデザイン対応のLPを制作すれば、デバイスに応じたサイズでLPが表示されます。

少し前までは、レスポンシブデザインに対応しておらず、画面を拡大しないと文字が読めなかったり、不自然に空白が表示されたりするWebページが多かったです。しかしここ数年は、大半のWebページがレスポンシブデザインに対応しています。

LPにおけるレスポンシブデザインについては、以下の記事で詳しく解説しています。

関連記事：LP（ランディングページ）はレスポンシブデザインにすべき？ スマホ対応の注意も紹介

LP(ランディングページ)のファーストビューはLP制作会社への相談がおすすめ

ここまで記事を読み進めてみて「LPを自社で作るのは難しそう」と感じている方も多いのではないでしょうか。

以下のような理由から、LP制作は、LP制作会社への依頼がおすすめです。

• コーディングやWebデザインには専門スキルが必要
• キャッチコピー次第で売り上げは大きく変わる

それぞれ詳しく解説します。

コーディングやWebデザインには専門スキルが必要

• ここにこのボタンをこの大きさで配置したい
• ここにこの写真を入れたい

上記のような希望をLPに反映させるには、コーディングやWebデザインの専門スキルが必要です。

Web上に表示されているコンテンツは、お絵描きのように誰もが自由にデザインできるものではありません。

例えば弊社株式会社クロスバズのLPは、以下のようなコードを記述することで制作されています。

自社にコーディングやWebデザインの知識を持った方がいる場合は問題ありません。しかしそうでない場合は、LP制作会社への依頼がおすすめです。

ペライチのように、専門知識がなくてもLPを制作できるツールはあります。しかし簡易的なLPしか作れず、ユーザーにも「このLPなんだか素人っぽいな」といったイメージを与えてしまうため、おすすめしません。

ある程度費用をかけてでも、最初にクオリティの高いLPを作っておくべきだと考えます。

関連記事：【画像付き】ペライチを使ったLP(ランディングページ)の作り方や事例まとめ！

キャッチコピー次第で売り上げは大きく変わる

LPでは、デザインのみならず言葉も大きな力を持っています。文言を1つ変えるだけで売り上げが大きく変わる、なんてこともよくあります。

LP制作会社に依頼をすれば、ユーザーの購買意欲を刺激するようなキャッチコピーを用いてLPを制作することが可能です。

特に弊社株式会社クロスバズは、行動経済学を用いたコピーライティングを行っており、キャッチコピーには力を入れています。

いくつかLP制作時に使っているテクニックをご紹介します。

バンドワゴン効果を用いれば「10,000本も売れてるならきっとすごいんだろう」といった印象を与えることが可能です。

またアンカリングを用いれば、「20,000円が9,800円まで安くなってる！今がお得だ」といった印象を与えられます。最初から「9,800円」とだけ記載するのと、先に「20,000円」という価格でアンカリングするのとでは、ユーザーに与える印象が大きく異なります。

LPに掲載するキャッチコピーは、なんでも良いなんてことはありません。上記のように1つ1つどういった効果があるかを考えながら、キャッチコピーを作る必要があります。

株式会社クロスバズでもLP制作について詳しく解説しているので、ぜひチェックしてみてください。

まとめ

LPファーストビューの基本情報や推奨サイズ、魅力的にするために意識すべきことなどについて解説しました。

ファーストビューはLPにおいて最も重要な箇所です。よって手を抜いてはいけません。またユーザーを惹きつける写真やキャッチコピー、デザインなどが求められます。

「自社でLPを制作するのは難しそう」と感じる方は、弊社クロスバズの“バズLP”をご活用ください。

LPの戦略設計から運用まで、集客のプロがトータルサポートいたします。お見積もり・ご相談は無料です。

▶︎詳細はこちら：バズLP – LP制作依頼・ランディングページ作成サービス