ランディングページ（LP）のファーストビュー作成ポイント｜適正サイズや成果につなげるコツ

LPOツールのサービス一覧

• 驚くほど簡単にランディングページを作成
• 余計な外注コストを削減
• 定期的な改善施策でページを最適化

LPOツールの
サービスを一括ダウンロード(無料)

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

LPのファーストビューとは、訪問者が最初に目にする部分を指し、製品やサービスの魅力をひと目で伝えることが求められます。

訪問者が興味を持ち、ページを読み進めるかどうかは、ファーストビューの出来に左右されます。目を引くデザインや明確なメッセージを配置し、効果的なファーストビューを作り上げることが大切です。

ランディングページ(LP)におけるファーストビューの重要性

訪問者は、LPのファーストビューを見て、最後まで読み進めるかどうかを判断します。LPのファーストビューは離脱率が高い傾向があるため、読者の興味を引き、離脱を防ぐ工夫が必要です。

実際、LPの直帰率(最初に開いたページだけを見て離脱した割合)は60〜90％と非常に高いことが調査でも示されています。そのため、LPにおいては、目を引くデザインや明確なメッセージを表すファーストビューにすることが重要です。

[参照:CXL「直帰率のベンチマーク」]

ランディングページ(LP)のファーストビューの失敗例

LPのファーストビューでよくある失敗例を4つ挙げ、詳しく説明します。

何の商品・サービスなのかが分からない

ファーストビューで何の商品・サービスなのかがひと目で分からなければ、訪問者は興味を失ってしまいます。特に、掲載している画像や文言が商品やサービスとマッチしていないと、混乱を招くので注意が必要です。

例えば、化粧品のLPに風景写真だけを載せたり、具体的な効果が伝わらないあいまいな言葉を使用したりすると、訪問者は直帰してしまう可能性が高くなります。明確で魅力的なビジュアルとメッセージを心掛けましょう。

ベネフィットや商品・サービスの魅力が分からない

ファーストビューで商品やサービスから得られるベネフィットや魅力が伝わらない場合、訪問者の関心を引くことは難しいでしょう。

例えば、「この商品を使うとどんなよいことがあるのか？」、「他の商品と比べて何が優れているのか？」が分からないと、訪問者はすぐに離れてしまいます。

具体的な効果やメリットを簡潔に示し、魅力的なポイントを強調することで訪問者の興味を引き、続きを読み進んでもらうことが重要です。

CTAボタンがなく思うようにアクションを起こせない

ファーストビューにCTA(Call To Action)ボタンがない場合、訪問者は次に何をすればいいのか分からず、アクションを起こすことができません。

例えば、「今すぐ購入」や「無料で試す」といった具体的な指示がないと、せっかく興味を持った訪問者も行動に移せず、閲覧だけで終わりになってしまうでしょう。

明確で目立つCTAボタンを配置することで、訪問者がスムーズに次のステップに進むことができ、コンバージョン率を高めることができます。

ペルソナに合ったデザインになっていない

ファーストビューのデザインが、ターゲットとするユーザー像である「ペルソナ」に合っていない場合、訪問者の購買意欲を引き出すことは困難です。例えば、若年層向けの商品を紹介するLPに堅苦しいデザインやフォントを使用しても、魅力を感じてもらえません。

ペルソナに合う適切なデザインやカラーを採用し、訪問者が共感できるビジュアルを提供することで、興味を引き、購買意欲を高めることができます。

▷ランディングページの作り方！作成の流れやポイントを初心者向けに解説！

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

LPのファーストビューは以下の4つの要素で構成されています。それぞれの要素について、詳しく説明します。

商品・サービス名

まず、LPのファーストビューに欠かせないのが、具体的な商品・サービス名やその概要です。何を提供しているのかを訪問者がひと目で理解できるようにすることで、興味を持ってもらいやすくなります。

例えば、「〇〇クリーム - 美肌を実現する高保湿クリーム」といった具体的な名称と簡潔な説明を付け加えることで、訪問者が一瞬で商品と概要を把握できるでしょう。分かりやすい情報提供が、次のアクションへとつながります。

アイキャッチ画像

目を引くLPのファーストビューには、商品・サービスそのものや、それから得られるベネフィットを表現したアイキャッチ画像が必要です。視覚的な要素が訪問者の注意を引き、内容に興味を持たせる役割を果たします。

例えば、美肌効果を謳う化粧品のLPなら、美しく輝く肌を持つモデルの写真を使用すると効果的です。魅力的な画像を使用することで、訪問者に商品の価値を直感的に伝えられます。

キャッチコピー

LPのファーストビューには、ユーザーの心をつかむ短く端的なキャッチコピーが必要です。キャッチコピーは、訪問者に商品やサービスの魅力を瞬時に伝える重要な役割を果たします。

例えば、「たった1週間で美肌を実感！」といった具体的で魅力的なコピーを使用することで、訪問者の興味を引きつけられます。シンプルで分かりやすい言葉を選び、訪問者に強い印象を与えることで、次のアクションを促しましょう。

CTAボタン

LPのファーストビューには、申し込みや資料請求などのアクションを促すCTA(Call To Action)ボタンが欠かせません。CTAボタンは訪問者に次のステップを明確に示し、具体的な行動を促します。

例えば、「今すぐ申し込む」や「無料で資料請求」といった具体的な文言を使うことで、訪問者が何をすべきかがひと目で分かります。

目立つ色や大きさで配置し、簡単にクリックできるようにすることが重要です。効果的なCTAボタンはコンバージョン率を大きく向上させます。

▷ランディングページ（LP）のボタンデザインについて｜デザインや色・改善のポイント

ランディングページ(LP)のファーストビューの適正サイズ

LPのファーストビューの適正サイズは、スマホかパソコンか、訪問者のデバイスによって変わります。スクロールなしで全範囲が表示されるLPの適正サイズについて、デバイスごとに詳しく説明します。

スマホの場合

スマホでのLPのファーストビューは、幅350〜365px、高さ600〜650px程度が最適です。このサイズ範囲に収めることで、訪問者がスクロールせずに全体を確認でき、情報を見逃すことがありません。

特に、スマホは画面が小さいため、重要なメッセージやCTAボタンが視界に収まるようにすることが重要です。適切なサイズ設定を行うことで、訪問者にストレスを与えず、効果的な情報伝達ができます。

パソコンの場合

パソコンでのLPのファーストビューは、幅1000〜1200px、高さ550〜650px程度が最適です。このサイズに収められていれば、訪問者がひと目で全体を把握しやすくなり、スクロールせずに重要な情報にアクセスできます。

特にパソコンは画面が大きいため、広いスペースを有効に活用し、視覚的なインパクトを与えるデザインを採用するとよいでしょう。

▷ランディングページ（LP）のワイヤーフレームの作り方｜作成手順やテンプレート

ランディングページ(LP)のファーストビューで成果につなげるコツ

LPのファーストビューで訪問者のアクションを促し、成果につなげるには工夫が必要です。そのコツについて、以下の項目で詳しく解説します。

ペルソナは詳細に設定する

LPのファーストビューを作成する際には、ターゲットとなるユーザー像である「ペルソナ」を詳細に設定しましょう。名前や性別や年齢、職業、趣味、居住地域などを想定して、架空の人物を設定します。具体的なペルソナがあることで、ターゲットが求めるデザインや文言、訴求内容を考えやすくなります。

年齢層ごとに向いている色使いや言葉遣いは異なり、職業や立場によって相応しいデザインの印象や情報の専門性は多様です。想定したペルソナに向けて作成することで、訪問者の共感を得られ、伝えたい層に届くLPのファーストビューが出来上がるでしょう。

キャッチコピー・画像で何のランディングページ(LP)なのかを伝える

訪問者の離脱を防ぐためには、どのような商品・サービスのLPなのか、どのようなベネフィットがあるのかをひと目で分かるように、キャッチコピーと画像を適切に配置することが重要です。

キャッチコピーは、端的に商品の特徴や利点を伝えられる言葉を選びましょう。また、画像はペルソナに合わせたものにし、視覚的に訴求力を高めます。例えば、若年層向けならポップな画像、ビジネス層向けならプロフェッショナルな雰囲気の画像を選択するとよいでしょう。

CTAボタンを設置し行動を後押しする

すでに購買意欲のある訪問者の行動を妨げないよう、必ずCTA(Call to Action)ボタンをファーストビューに設置しましょう。CTAボタンは、訪問者が次に取るべき行動を明確に示し、購買や申し込みなどのアクションを促します。

CTAボタンには「今すぐ購入」や「無料で試す」といった具体的で行動を後押しする文言を使用することがポイントです。CTAボタンの配置やデザインも工夫し、訪問者が迷わず行動できるようにすることが、コンバージョン率向上につながります。

訪問者の信頼を得るため権威付けをする

これまでの実績を掲載して付加価値を高めることは、訪問者の信頼を得るための一つの方法です。

受賞歴や顧客の声、メディアへの掲載、導入実績などを紹介することで、商品やサービスの信頼性が増すでしょう。数字など客観的な情報が明示されていれば訪問者は安心感を持ち、購買意欲が高まります。

権威付けを行うことは、訪問者にとって信頼性の高いLPとなることにつながるのです。

▷おすすめのLPOツール9選比較！無料で使えるツールやCVR改善につながる手法

ランディングページ(LP)のファーストビューのデザイン事例

ここからは、LPのファーストビューのデザイン事例を3件紹介します。ぜひ作成する際の参考にしてください。

ソニービズネットワークス株式会社｜NURO Biz

ソニービズネットワークス株式会社が提供するNURO Bizは、法人向けのインターネット接続サービスです。

LPのファーストビューは、誠実なイメージのブルーを基調とし、シンプルかつ洗練されたデザインが特徴で、ユーザーの目を引くキャッチコピーとともに、サービスの主な利点がひと目で分かるように配置されています。

さらに、CTAボタンも目立つ位置にあり、訪問者が問い合わせなどすぐに行動を起こせるように設計されています。

[参照:ソニービズネットワークス株式会社「NURO Biz」]

株式会社DECENCIA｜DECENCIA(ディセンシア)

POLA ORBIS GROUPの株式会社DECENCIAが提供するDECENCIA(ディセンシア)は、大人の肌・敏感肌用スキンケアブランドです。

LPのファーストビューは、上品で清潔感のあるデザインが特徴で、商品の魅力を引き立てるビジュアルが配置されています。キャッチコピーは「未来のシワまで、跳ね返せ。」といった具合に、訪問者の悩み改善に訴えかけ興味を引くフレーズを採用している点も特徴です。

また、トライアルセットの商品ビジュアルのすぐ下に「今すぐお試し」のCTAボタンが目立つ色で配置され、訪問者がすぐに次の行動を取れるよう工夫されています。

[参照:POLA ORBIS GROUP「DECENCIA」]

万田発酵株式会社｜万田酵素

万田発酵株式会社が提供する万田酵素は、善玉菌を育てる栄養素を凝縮した植物性発酵食品です。

LPのファーストビューは、自然の恵みを強調したデザインが特徴で、商品の信頼性と品質を視覚的に訴求しています。キャッチコピーは「どう選ぶ？私のカラダの味方づくり」といった具合に、訪問者に親しく話しかけるような言葉遣いです。また、「累計出荷個数5,100万個突破」や「お客様レビュー評価4.1」と具体的な数字をアピールすることで信頼性と購買意欲を高めています。

[参照:万田発酵株式会社「万田酵素プラス温 発酵しょうが」]

ランディングページ(LP)におけるファーストビューの重要性を理解しよう

LPのファーストビューは、訪問者の第一印象を決める重要な部分です。ここで訪問者の関心を引き、次の行動へと誘導するためには、魅力的なキャッチコピーや視覚的に訴えるデザイン、明確なCTAボタンが欠かせません。

さらに、ペルソナに合った内容や信頼性を高める情報を盛り込むことで、コンバージョン率を大幅に向上させることができます。これらのポイントを押さえて、効果的なLPのファーストビューを作成しましょう。