初見で心をつかむ！LPファーストビューで離脱率を大幅減少させるデザインテクニック

この記事のタイトルとURLをコピーする

2024/03/19

貴社のランディングページは、訪問者を一瞬で魅了し、長く留める力がありますか？
実は、ファーストビューにおける初めの数秒が、彼らを引きつけるか、それとも失うかの重大な瞬間です。驚くべきことに、研究によると、ファーストビューでの離脱率は60%を超える場合も少なくありません。ですが、適切なデザイン戦略を駆使すれば、この離脱率を劇的に改善することが実現可能です。

この記事では、訪問者の目を引き、心を掴むランディングページのファーストビューを設計するために必要な、実践的なデザインのポイントを紹介します。実際に成功を収めた事例をもとに、目を引くビジュアル、心を動かすキャッチコピー、そしてユーザーを次のステップへと誘うCTAボタンの最適な配置について詳しく解説していきます。

読み進めていただき、貴社の商品やサービスの魅力を最大限に伝えるランディングページを実現しましょう。一緒に、訪問者の心に残るファーストビューの創造を目指していきましょう。

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

LPのファーストビューは、ユーザーがWebサイトに訪れたときに最初に目に入る領域です。
ページをスクロールせずに表示される部分になります。

ファーストビューで表示される内容は以下のものです。

サイトのタイトル
商品やサービス内容
実際の商品画像

最近ではファーストビューに画像やイラスト、文字だけでなく動画を入れるWebサイトも増えてきました。
ファーストビューに動画を入れるメリットは「企業や商品のイメージが伝わりやすい」「短い時間で多くの情報を伝えることができる」などがあります。

文字だと伝わりにくい内容も、動画であればしっかり伝えることができ、理解してもらいやすくなります。

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

ファーストビューが重要な理由は、内容によってLPの離脱率が大きく変化するためです。
離脱率は、LPで60%〜90%以上、コンテンツWebサイトでは35%〜60%とされています。

LPに集客できても、ファーストビューで魅力を伝えることができなければ、大半のユーザーは数秒で離脱します。
そのため、ユーザーにLPを閲覧してもらうためには、ファーストビューのデザインを整えることが重要です。

参考：BENCHMARK BOUNCE RATE BY INDUSTRY｜CXL

LPのファーストビューを構成する3つのデザイン要素

LPのファーストビューを構成するデザイン要素は以下の3つです。

メインビジュアル
キャッチコピー
CTAボタン

それぞれ解説します。

メインビジュアル

メインビジュアルでは、キャッチコピーよりも多くの情報をユーザにー伝えることができます。たとえば、新商品・おすすめ商品など旬な情報を伝えるのもおすすめです。
情報を伝える手段は以下の方法があります。

画像
イラスト
スライドショー
アニメーション
動画

ただし、ページの表示速度が遅かったり情報が多すぎたりすると、ユーザーが離脱しやすくなるので注意しましょう。
画像規格の最適化や、動的なJavaScriptを減らすなど、バランスを考慮して設計することがポイントです。

サイトスピードが遅い原因や改善策｜おすすめの導入ツール4選も紹介

キャッチコピー

キャッチコピーはユーザーの興味を引き、Webサイトから離脱させないことを目的に作成します。まずはターゲットを明確にして、コンセプトを統一させましょう。
ターゲットがぶれてしまうと、ユーザーの興味を引くことができず離脱してしまいます。

また、ユーザーに信頼してもらうには、以下のような権威付けを意識してキャッチコピーを作成してみましょう。

〇〇賞3年連続受賞
〇〇ランキング1位獲得
実績数〇〇件以上

ユーザーが納得や安心するようなキャッチコピーがおすすめです。

CTAボタン

CTAボタンはファーストビューに入れるようにしましょう。
なお、CTAボタンはファーストビューに1つだけ設置するのがおすすめです。

CTAボタンをいくつも設置すると、ユーザーのクリック間違いが起こりやすくなります。
そのため、クリックしてほしいCTAボタンを設置しましょう。

また、CTAボタンのサイズはバランスを考えて、スマホ・PCの両画面で適切に表示されるか確認してください。

LPのCVR改善に有効な7つのアクションと成功事例もあわせて解説

ファーストビューのデザイン事例4選

ファーストビューのデザイン事例は以下の4選です。

スライドショー
立体
イラスト
タイポグラフィ

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

スライドショー

スライドショーは、ファーストビューの限られたスペースに複数のコンテンツを設置できるメリットがあります。
また、多くのWebサイトでスライドショーが使われています。

ファーストビューに画像やイラストを並べるよりも、自動で切り替わるスライドショーを活用した方が動きが出るため、ユーザーの視線を集めることができるでしょう。
発信する内容が多いLPは、スライドショーが向いています。

立体

立体表現では、色の強弱をつけたり写真を重ねたりして立体感を出します。
また、立体はユーザーにスタイリッシュな印象を与えることができます。

「商品やブランドを強くアピールしたい」「訴求が1つに絞られた商品やサービス」などのLPが向いているでしょう。

イラスト

イラストはオリジナリティ感を出せるのが大きなメリットです。
イラスト作成には時間はかかりますが、細かい部分まで表現できます。

「LPのオリジナリティを出したい」「キャラクターブランドを持っている」などが向いているでしょう。

タイポグラフィ

コントラストを付けて、文字の力強さを押し出したタイポグラフィは大胆な印象があります。
伝えたいメッセージをシンプルに見せられるので、ユーザーは読みやすくなります。

「ポスターみたいなファーストビューにしたい」「映画のような大胆な印象にしたい」などがタイポグラフィに向いています。

LPのファーストビューに最適なモニターサイズ

LPを閲覧する際、ユーザーはPCやスマホなどのデバイスを使用します。
そのため、ユーザーが使用しているモニターサイズを知れば、最適なファーストビューのデザインにできるでしょう。

ここでは、LPのファーストビューに最適なモニターサイズを紹介します。
LPのファーストビューのデザインを整えて、サイトの売り上げアップを目指しましょう。

PC表示

LPのファーストビューに最適なPCサイズは以下のとおりです。

幅	1000〜1200px
高さ	550〜650px

PCのモニターサイズは、主流のフルHDだと1920×1080pxです。
なお、小型の場合は1600〜900pxになっています。

フルHDであっても、フル画面でLPを閲覧する機会は少ないと考えられます。
そのため、LPのファーストビューに最適なPCーサイズは、幅1000〜1200px、高さ550〜650pxが最適です。

スマホ表示

LPのファーストビューに最適なスマホサイズは以下のとおりです。

幅	350〜365px
高さ	600〜650px

スマホのシェア率がもっとも高いサイズは、375×667pxとなっており、小さいサイズだと320×667pxになっています。

そのため、LPのファーストビューに最適なスマホサイズは、幅350〜365px、高さ600〜650pxです。

LPのデザインを見つけられる参考サイト

LPのデザインを見つけられる参考サイトは以下のとおりです。

WebDesignClip
Web Design Garden
SANKOU!

LPのデザインを考える際は、参考サイトや競合サイトをリサーチすることでヒントが得られます。
上記のデザインサイトを参考にして、LPのファーストビューの印象を良くしていきましょう。

WebDesignClip

WebDesignClipは、LPやデザイン制作の参考になるおしゃれなWebデザインのクリップ集です。

WebDesignClipには、36のカテゴリーがあり、2,102のサイトが登録されています。（2024年3月時点）
カテゴリーには以下のものが挙げられます。

WEB・情報サービス
アパレル・ファッション
コーポレートサイト・事務所
建築・住宅・不動産
採用サイト・転職・求人

キーワード検索やタグも用意されているので、自社にあったデザインが見つかるでしょう。

Web Design Garden

Web Design Gardenは、毎日更新しているWebデザインギャラリーサイトです。
カテゴリーは以下の5つです。

サイト種別から探す
業種・業界から探す
機能・要素から探す
印象・レイアウトから探す

LPのデザインを参考にしたい方は、トップページのヘッダーのカテゴリーにある「サイト種別から探す」をクリックし、「ランディングページ（LP）」を選択すれば、さまざまなデザインサイトが見れます。

SANKOU!

SANKOU!は、Webデザイン制作の参考になる国内Webサイトです。

SANKOU!には、さまざまなカテゴリーがあり、たとえば「テイスト・あしらい」「色・配色」「動き・ギミック」などがあります。
また、3,450サイトがSANKOU!に登録されています。（2024年3月時点）

LPのデザインを参考にしたい方は、トップページのヘッダーの検索窓に「LP」と検索すれば、おしゃれなサイトが出てきます。

LPのファーストビューで考慮するべきポイント

LPのファーストビューで考慮すべきポイントは以下の4つです。

ターゲットは誰なのか
伝えたいコンテンツは何か
どのようなクリエイティブにするか
コンバージョンにつながるか

ユーザーに伝えたいメッセージは、上記の流れを参考にしてみてください。

ターゲットは誰なのか

LPのターゲットを決めるにはペルソナ設定がかかせません。
ペルソナは「デモグラフィック」と「サイコグラフィック」の2つを使いましょう。

デモグラフィックは人口統計学を指します。
具体的には以下の5つです。

性別
年代
所得
職業
家族構成

サイコグラフィックは心理学的要因を指します。
具体的には以下の4つが挙げられます。

性格
価値観
趣味
コミュニティ

ペルソナ設定の情報収集は以下のとおりです。

アンケート調査
インタビュー調査
WebサイトやECサイト
SNSや口コミ

ペルソナ設定をすると、ユーザーをより深く理解することができ、ユーザー視点でマーケティングを展開しやすくなります。

LPOとは？SEOとの違いや実施の流れを徹底解説！

伝えたいコンテンツは何か

ペルソナ設定をしてターゲットが決まったら、ファーストビューでユーザーにどのようなメッセージを伝えるか考えましょう。

キャッチコピーを考える際は、ユーザーにベネフィットを伝えるようにします。
たとえば以下の事例です。

商品	ターゲット	ベネフィット
保湿クリーム	40代以降の女性	友人と会うのが楽しみになる肌に弾力が出て、30代に間違われた
オールインワン化粧品	忙しいOL	朝の時間に余裕ができた一つ前の電車に乗れる

また、キャッチコピーには具体的な数字を入れて信頼感を高めていきます。
たとえば「多くの方に利用されています」よりも「1万2,000人に利用されています」にした方が信頼感は高まるでしょう。

どのようなクリエイティブにするか

LPの基本構成は以下の3つで構成されています。

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

LPのファーストビューは、ユーザーが知りたい情報を過不足なく盛り込むことが大切です。
また「信頼」や「安心」を伝えて、ユーザーの心をつかむ必要があります。

メインビジュアルでは、キャッチコピーよりも多くの情報を伝えることができます。たとえば、画像やイラスト、動画などです。
ただし、あまりにも情報が多いと、ユーザーが離脱する原因になるので注意しましょう。

コンバージョンにつながるか

最終的にはユーザーに行動してもらう必要があります。
たとえば「お問い合わせ」や「資料請求」「セミナー参加」などです。

そのため、LPのコンバージョン率を上げるためにCTAボタンの色や配置、マイクロコピーを工夫します。
また、CTAボタンはファーストビューに入れるようにしましょう。

CTAボタンは、ユーザーがボタンと認識しやすい大きさにし、クリックしたくなるようなデザインにしましょう。

LPのCVRが向上するCTAボタンとは｜デザイン要素もあわせて紹介

まとめ：LPのデザインを整えてサイトの売上アップを目指そう

ここまでLPのデザイン事例や要素、作成ポイントについて詳しく解説しました。
LPのデザインを整えるためには、ファーストビューの重要性やデザイン事例を把握することが大切です。

ファーストビューのデザインが整えば、コンバージョン率が向上し、売り上げもアップします。

Webサイトの運用で改善したい課題がある、集客効果を最大化したい企業様は、ギャプライズにご相談くださいませ！分析・施策立案からABテスト、最適化、実装までを一気通貫で支援いたします。

ぜひお気軽にお問い合わせください。