LPのファーストビュー作成における5つのポイント｜売れるデザインや適正サイズも解説

こんにちは。「AIアナリスト」ライターチームです。

ランディングページ（LP）を訪問した際に初めに表示されるのがファーストビューです。

多くのLP訪問者がファーストビューの時点で、ページを離れていくと言われています。ファーストビューから本文へと読み進めてもらうことは、LP作成の課題といえるでしょう。

この記事では、ファーストビューを作成する際のポイントや、失敗例を解説します。売れるデザインや適正なサイズも解説するので、ぜひ参考にしてください。

目次

• LPのファーストビューの重要性
• LPのファーストビュー作成でよくある失敗例
• LPのファーストビューの作成で重要な5つのポイント
• LPファーストビュー事例のご紹介
• LPのファーストビューの適正サイズとは
• まとめ

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

商品やサービスの売上に貢献するLPを作成するためには、ユーザーを引きつけるファーストビューが欠かせません。まずは、ファーストビューの意味や役割、構成要素について見ていきましょう。

ファーストビューとは

ファーストビューとは、ユーザーがLPを訪れたときに、最初に目に入る部分です。ファーストビューの印象は、ユーザーがLPに訪問した直後の3秒で決まります。ユーザーは、その印象から自分に必要な情報があるかどうかを判断します。

ファーストビューの役割

ファーストビューの役割は、LPを訪問したユーザーの関心を引きつけることで、ユーザーを離脱させないことです。

そのため、ファーストビューにはLPで紹介する商品やサービスの魅力を端的に伝えるための情報を盛り込みます。

ファーストビューの要素

ここでは、魅力のあるファーストビューに必要な構成要素を紹介します。

イラストや写真

イラストや写真の掲載は、ユーザーの注意を引く効果があります。画像の選定候補にはLPで紹介する商品やサービスが挙げられます。

そのほか、商品やサービスのコンセプトや、ユーザーのベネフィットが伝わるようなイメージ画像が掲載されることもあります。

キャッチコピー

キャッチコピーとはユーザーの注意を引き、商品やサービスの魅力を的確に表現する文章のことです。LPでは、次のようなキャッチコピーが考えられます。

• 商品やサービスに関する受賞歴や顧客満足度などの客観的な評価を表す文章
• 有名人や著名人の推薦などの権威性を示す文章
• ユーザーのベネフィットを強調するような文章

短い文章で分かりやすく、商品やサービスの魅力を伝えることが大切です。

商品やサービスの訴求内容

訴求内容とは、ユーザーが商品やサービスの購入を希望するように訴えかける内容です。商品やサービスの魅力だけではなく、「無料」や「お得なキャンペーン」などの購入を換気するようなオファーも訴求内容に含まれます。

訴求内容はキャッチコピー中に記載されるだけではなく、CTAボタン内やキャッチコピー以外の文章に記載される場合もあります。

CTAボタン

CTAボタンとは、ユーザーが申し込みや問い合わせをするページに遷移するためのボタンです。

CTAボタンには、申し込みや問い合わせを促進する文章が記載されることが多いです。たとえば、「申し込みはこちら」とシンプルな文章が記載されたり、「無料申し込みはこちら」など訴求内容を含めた文章が記載されたりします。

LPのファーストビュー作成でよくある失敗例

ここでは、ファーストビューの失敗例を紹介します。実際にファーストビューを作成する際の参考にしてください。

商品やサービスの内容が分かりづらい

商品やサービスの内容が分かりづらいと、ユーザーのLPを読み進めるメリットが感じられません。その結果、ファーストビューにおける直帰率の悪化を招きます。

たとえば、商品名が書かれていなかったり、キャッチコピーに難しい漢字や表現が使われたりすると、分かりにくいファーストビューになります。

ユーザーにとってのベネフィットも伝わりづらいため、誰が見ても分かるようなファーストビューを心がける必要があるでしょう。

商品やサービスの魅力が伝わらない

ファーストビュー内にベネフィットが書かれていないと、商品やサービスの魅力が伝わりません。その結果、購入や申し込みにつながりづらくなります。

またベネフィットを伝える際に「とてもすごい」「大変すばらしい」など、抽象的な表現ばかりだと、ユーザーにありきたりな印象を与えます。

競合との差別化も図れず、商品やサービスの魅力を引き出せないため、注意しましょう。

ターゲットに適したデザインや文言になっていない

ファーストビューの内容が、ターゲットの趣向に沿わないデザインや文言になっている失敗例です。共感が得られなければ、ターゲットはLPから離脱してしまいます。

たとえば、企業向けの商品やサービスにも関わらず、カジュアル過ぎるファーストビューのデザインにしてしまうと、ユーザーに離脱される可能性が高まります。

また、文章に口語表現や若者言葉が多用されているのも失敗の原因です。ビジネスには適さない文言が目立つ場合も、LPの早期離脱につながるでしょう。

ファーストビューにCTAボタンが設置されていない

ファーストビューで商品やサービスの魅力が伝わっても、CTAボタンが設置されていない場合があります。せっかくターゲットに自社の商材をアピールできても、CTAボタンがなければ購入や申し込みに繋げられません。

また、CTAボタンの位置を確認しづらいのも失敗の原因です。購買意欲のあるユーザーからの購入や申し込みのタイミングを逃すことのないよう、ボタンはわかりやすい位置に設置しましょう。

LPのファーストビューの作成で重要な5つのポイント

魅力の伝わるファーストビューを作成するためのポイントを解説します。

ターゲットに適したデザインやトンマナを目指す

LPのファーストビューは、ターゲットに適したデザインやトンマナで作成しましょう。

性別や年齢、職業などの属性を理解したうえで、ターゲットに適したデザインやトンマナを意識しましょう。

分かりやすく魅力的なCTAボタンを設置する

商品やサービスの申し込みにつなげるには、分かりやすいCTAボタンを設置することが重要です。

まずは配色やデザインを工夫して、CTAボタンが目立つようにしましょう。また、「お問い合わせ」「購入」「資料請求」などのCTAのタイプを明記すると、ユーザーもボタンをクリックしやすくなります。

無料やキャンペーン期間など、ユーザーの行動喚起に有効な訴求ポイントがある場合は、それをCTAボタン内に明示するのも良いでしょう。

商品やサービスのベネフィットが分かるようにする

商品やサービスに関する魅力的なベネフィットは、ユーザーの興味や関心を引きます。ベネフィットを考えるポイントは、商品やサービスの購入者の未来を具体的にイメージすることです。

たとえば、折りたたみ傘のLPを作成する場合、「傘を折りたためる」という機能面をアピールするだけでは、ベネフィットとしては不十分だと考えられます。

傘を折りたたむことで、ユーザーがどのようになるのかを考えることが大切です。傘を折りたためるから、「鞄に納めて持ち運びしやすい」といった購入者の利便性まで考えるようにしましょう。

権威性をアピールして信頼感を高める

権威性や他者からの評価をファーストビューでアピールすると、ユーザーの信頼感を高められます。なぜなら、商品やサービスのベネフィットに客観性が加わるからです。

たとえば「大人気商品」と記載するよりも、「〇〇氏（著名人）も推薦する大人気商品」や「顧客満足度〇%の大人気商品」と記載した方が、ユーザーの支持を得やすくなります。

商品やサービスの内容が分かる画像を使用する

ファーストビューには商品やサービスの内容が分かる画像は欠かせません。画像だと、ユーザーに対し商品やサービスの魅力を視覚的に訴えかけ、印象に残すことが可能です。

たとえば、次のような画像で印象に残るファーストビューを作成するとよいでしょう。

• 商品やサービスそのものの画像
• コンセプトを表現する画像
• 商品を購入したユーザーの未来をイメージさせる画像

商品やサービスに関連のある写真やイラストをファーストビューの画像にすることが大切です。

LPファーストビュー事例のご紹介

ランディングページ（LP）のファーストビュー（FV）は、訪問者の印象を決定づけ、コンバージョン（CV）に直結する重要な要素です。特にBtoC向けとBtoB向けでは、ファーストビューの設計に大きな違いがあります。それぞれの特徴と成功事例を紹介します。

「BtoC向けLPのファーストビュー」

BtoC向けのLPでは、「ファーストビューだけでユーザーの興味を引き、すぐにアクションを促す設計」が鍵となります。視覚的なインパクトやシンプルなメッセージで、直感的に商品の魅力を伝える構成が特徴です。

chocoZAP

画像引用：chocoZAP

chocoZAPのLPでは、「気軽に利用できるジムであること」が分かります。ジムのウエアなど不要で私服でトレーニングマシンを利用している人をファーストビューのビジュアルに使用しています。「入会はこちら」とCTAもファーストビューの中に収まっており、とても分かりやすいです。

LAVA（ヨガ）

画像引用：LAVA（ヨガ）

LAVAのLPは、「100円で体験可能」「手ぶらで気軽に体験」といった訴求がファーストビューに凝縮されています。メインビジュアルは、親しみのある女性の写真を採用し、ターゲットに共感を生むデザインに。さらに、CTAボタンをファーストビュー内に設置し、「体験」へのハードルを下げる工夫が施されています。視覚的な心地よさと情報のわかりやすさが、ユーザーの興味を引きつけるポイントです。

LINEMO

画像引用：LINEMO

LINEMOのLPでは、視覚的に魅力のある料金を謳い得点の大きさが強調されています。また、CTAもファーストビューに盛り込まれており、行動を喚起しています。料金や特典内容が非常にシンプルにファーストビューに整理されていて良いLPといえるでしょう。特にLINEMOを検討するユーザーはスマホを閲覧している可能性が高い為、スマホのLPには特に注力していると考えられます。

BtoB向けLPのファーストビュー

BtoB向けのLPでは、ファーストビューでサービスの内容を簡潔に伝え、問い合わせや資料請求を促す設計が重要です。特に、フォームの露出やCTAボタンの明確化がコンバージョン率向上のカギを握ります。

WACUL（AIアナリスト）

画像引用：WACUL（AIアナリスト）

WACULのLPは、ファーストビューに「10万円でコンバージョン数を最大化」という明確なキャッチコピーを配置。さらに、「無料ダウンロード」といった資料請求へのCTAボタンがファーストビュー内にあり、スクロールなしで問い合わせへ誘導できます。フォームもファーストビューに露出しており、ユーザーが迷うことなくアクションを起こせる設計。必要な情報を端的にまとめつつ、CTAまでスムーズにつなげる構成が特徴です。

ミエルカ

画像引用：ミエルカ

ミエルカのLPでは、「多くの企業に導入されているツール」という信頼性を強調するメッセージをファーストビューに集約。ビジュアルには実際の管理画面のスクリーンショットを採用し、サービスの使いやすさを直感的に伝えています。また、「無料で試してみる」といったCTAボタンがファーストビューにあり、リード獲得の動線が明確に設計されている点がポイントです。

LPのファーストビューの適正サイズとは

明瞭なLPのファーストビューを作成するためには、デバイスごとの適正サイズを考慮する必要があります。ここでは、パソコンとスマートフォンに適したファーストビューサイズについて解説します。

パソコンに適したファーストビューのサイズ

パソコンに適したファーストビューのサイズは、幅1000〜1200px、高さ550〜650pxだと考えられます。

パソコンのモニターサイズは、主流のフルHDだと1920×1080px。サイズ最小のSDの場合は、720×280pxです。

ただし、フルHDであっても、フル画面でLPを見る機会は少ないと考えられます。そのため、LPをパソコン画面に合わせる場合は、幅1000〜1200px、高さ550〜650pxが適正なファーストビューサイズといえるでしょう。

スマートフォンに適したファーストビューのサイズ

スマートフォンに適したファーストビューサイズは、幅350px〜365px、高さ600px〜650pxだと考えられます。

スマートフォンを縦にして使う場合を考えると、画面サイズは幅320～414pxで高さ568～896pxです。

スマートフォンのデバイス全般に対応できるサイズに納めるために、幅350px〜365px、高さ600px〜650pxが適していると考えられます。

まとめ

LPに訪れたユーザーの購買意欲を高めるためには、ユーザーの興味を引き出せるファーストビューの作成が重要です。またファーストビュー作成後は、コンバージョンや滞在時間などの解析結果をもとにした改善も必要でしょう。

「AIアナリスト」は、AIがアクセス解析を⾃動で⾏い、重要な改善ポイントを教えてくれるtツールです。約40,000サイトを改善したノウハウで、Webサイトの膨大なデータを分析し、成果を伸ばすための改善ポイントをデータ根拠とともにお届けします。

Googleアナリティクスに連携するだけで利用可能で、2分程度で簡単に設定できます。

AIアナリストについて気になった方は、まずは無料版からお試しください。

AIアナリストの資料請求（無料）はこちら