LPのファーストビューを最適化する方法【最適なサイズやデザインのポイントを解説】

LPを作ってもCV(コンバージョン)につながらず苦労している企業は多くあります。LPの成果を大きく左右するポイントは、ファーストビューの完成度です。LPのファーストビューの質が低いとユーザーは続きを見る前に離脱するため、期待した成果を得られません。

この記事ではLPのファーストビューの基礎知識や構成要素、最適な作り方、業種別のポイントについて解説します。記事を読めばファーストビューの最適な作り方がわかり、LPを効果的に改善できます。LPの効果的なファーストビューを作るには、ターゲットを明確にして必要な要素を適切に配置することが大切です。
目次

• LPのファーストビューの基礎知識
• LPのファーストビューを構成する3つの基本要素
• LPのファーストビューを最適化するステップ
• 効果的なLPのファーストビューを作るポイント
• 【業種別】効果的なLPのファーストビューの具体例
• LPのファーストビューに最適なサイズ
• LPのファーストビューのデザインを魅力的にするポイント
• LPのファーストビューのよくある失敗
• LPのファーストビューを改善するための手法
• LPのファーストビューに関するよくある質問
• まとめ

LPのファーストビューに関する基礎知識を以下の順番で解説します。

LPのファーストビューとは、ユーザーが画面をスクロールしない状態で見える部分のことです。ファーストビューはLPの顔とも言える部分なので、ユーザーが先を読みたくなるデザインにすることが欠かせません。ユーザーはファーストビューの雰囲気によって、LPを離脱するかどうかを判断します。
» ファーストビューとは？概要や作成ポイント、デザイン例を交えて解説

LPのファーストビューの役割は以下のとおりです。

• ・LP全体の第一印象を決める
• ・ユーザーに続きを読ませる
• ・Webサイトの価値やメリットを伝える
• ・ユーザーの離脱を引き止める

LPのファーストビューが悪いと、ユーザーは自分に必要な情報はないと判断してページを離脱します。広告を使って集客した場合、LPのファーストビューでユーザーを惹きつけられないことは企業にとって大きな損失です。

LPのファーストビューを構成する基本要素は以下のとおりです。

メインビジュアルはLPに訪れたユーザーが最初に見る画像で、LPの第一印象を決める重要な要素です。ユーザーは文字を読むより先に見た目から多くの情報を読み取るため、LPに魅力的なメインビジュアルを設定する必要があります。

LPのメインビジュアルに使う画像は、商品やサービスのメリットを一目で判断できるものにしましょう。LPのメインビジュアルはきれいで質の高い画像を使えば、ユーザーに安心感を与えられます。スマホでもきれいに画像が表示される工夫がLPのメインビジュアルには必要です。

LPのメインビジュアルは商品やサービスのイメージカラーを意識して、雰囲気にあった画像を選ぶことをおすすめします。

キャッチコピーはLPに訪れたユーザーの心をつかむための短い言葉です。商品やサービスに合う適切なキャッチコピーをLPに設定すれば、ユーザーの興味を引き付けられます。LPのファーストビューにおけるキャッチコピーの役割は以下のとおりです。

• ・商品やサービスへの興味を引き出す
• ・ターゲットの悩みや気持ちに直接訴えかける
• ・商品やサービスのメリットを短くわかりやすい言葉で伝える
• ・CTAボタンを押してもらうための流れを作る

キャッチコピーはLPに訪れるターゲットが困っていることやほしがっている商品を考えて、心に響く言葉を探しましょう。

CTAボタンは、LPに訪れたユーザーに対して具体的な行動を促すためのボタンです。メインビジュアルやキャッチコピーでユーザーの心をつかんでも、LPで次の行動が示されていなければ離脱されてしまいます。LPのCTAボタンがわかりやすい位置にあると、ファーストビューの効果を最大限に高められます。

LPでは「資料請求はこちら」や「無料相談を申し込む」などの具体的なアクションを、CTAボタンに記載しましょう。CTAボタンのデザインや設置場所が悪いと、ユーザーに見られない可能性があるため注意が必要です。

LPのファーストビューを最適化する手順は以下のとおりです。

商品やサービスを届けたいターゲットが明確になれば、LPのファーストビューのデザインやメッセージも決められます。ターゲットを明確にするには年齢や性別、年収といった基本情報を設定する必要があります。ターゲットが興味のありそうなことや大切にしている考えも、具体的にイメージしてください。

ターゲットが抱えている悩みや課題を明確にすれば、効果的なキャッチコピーを考えられます。

LPのファーストビューに記載されているキャッチコピーが心に響くかどうかで、ユーザーの行動が変化します。LPのキャッチコピーを考える際のポイントは以下のとおりです。

• ・ターゲットを理解する
• ・ベネフィットを具体的に示す
• ・数字やデータを活用する
• ・簡潔でわかりやすくする
• ・感情に訴えかける
• ・ユーザーに問いかける

複数のポイントを組み合わせれば、ターゲットの心に残るLPのキャッチコピーを作成できます。

LPのファーストビューの第一印象は、メインビジュアルによって決まります。メインビジュアルは言葉よりも早くユーザーにメッセージを伝えられます。ユーザーはメインビジュアルを見て自分に必要な情報があるかどうかを判断するため、画像や動画で視覚的にアピールしましょう。

LPのメインビジュアルを決める際は、ターゲットやキャッチコピーを踏まえてコンセプトを固めます。写真にするのか動画にするのか、メインビジュアルのコンセプトに合わせて最適な方法を選ぶ必要があります。

LPのファーストビューのキャッチコピーやメインビジュアルが決まったら、ユーザーの行動を促すCTAボタンを設置しましょう。CTAボタンが目立たなかったり内容が曖昧だったりすると、ユーザーがLPから離脱する確率が高まります。

LPにCTAボタンを設置する際に意識するポイントは以下のとおりです。

• ・行動を促す言葉を添える
• ・目立つデザインにする
• ・目立つ部分に配置する
• ・緊急性・限定性を示す
• ・マイクロコピーを活用する

LPのCTAボタンの色や形、大きさを工夫して目立たせると、ファーストビューの効果を最大化できます。LPのCTAボタンの近くに「3分で完了」などのマイクロコピーを記載すれば、ファーストビューでのクリック率を高められます。
» LPで効果的なボタンをデザインする方法を解説！

効果的なLPのファーストビューを作る際のポイントは以下のとおりです。

設定したターゲットに合わせてコンテンツを設計すれば、LPのファーストビューの効果を最大化できます。ターゲットが「自分のための情報だ」と感じると、LPの内容に興味を持ちやすいからです。ターゲットの知識レベルに合わせたコンテンツを作るには、ファーストビューでわかりやすい言葉や表現を使う必要があります。

ターゲットが「こんな風になりたい」と感じる写真やイラストがあれば、魅力的なLPのファーストビューを作れます。

権威付けとは商品やサービスに対する専門性や信頼性を証明することです。専門家の意見や多くの人が利用している事実をファーストビューで証明すれば、LPに訪れたユーザーは安心感を覚えます。

LPのファーストビューに以下の情報を記載すると、効果的な権威付けができます。

• ・専門家のおすすめ・監修
• ・受賞歴・メディア掲載実績
• ・導入企業名
• ・お客様の声・レビュー
• ・販売数や利用者数
• ・顧客満足度
• ・資格・特許

LPのファーストビューで信頼できる情報を示すと、ユーザーは安心して商品やサービスを購入できます。

レスポンシブデザインとは、パソコンやスマホ、タブレットなどの画面サイズに応じてレイアウトを自動調整する手法です。異なるデバイスごとにファーストビューのレイアウトを調整すれば、使いやすいLPを作れます。

多くの人はスマホでインターネットを見るため、LPはスマホでのファーストビューのレイアウトを第一に考えましょう。LPのCTAボタンは押しやすさを意識して、スマホでのファーストビューのレイアウトを決める必要があります。
» デジタル庁「ウェブアクセシビリティ導入ガイドブック」(外部サイト)

ファーストビューに具体的なベネフィットを提示すれば、効果的なLPを作れます。LPのファーストビューで具体的なベネフィットを提示する際は、以下のポイントを意識しましょう。

• ・数値やデータを用いた成果
• ・時間やコスト削減などのメリット
• ・他社との差別化ポイント
• ・リスクを軽減する要素

「92%のユーザーが2週間で効果を実感」などの数字をLPのファーストビューで示せば、読者の信頼を得やすくなります。「継続利用で年間30万円のコスト削減」などの長期的なメリットを組み合わせると、ファーストビューで多角的な訴求が可能です。

効果的なLPのファーストビューの具体例を以下の業種別に解説します。

医療・美容系LPのファーストビューで重要なポイントは、ユーザーの悩みや症状に直接訴えかける大見出しです。専門家の肩書きや医療機関の認定マークをファーストビューに配置すれば、LPの信頼性が高まります。LPのファーストビューにインパクトのあるBefore/After写真があると、サービスの効果を一目で伝えられます。

LPのファーストビューに載せるBefore/After写真は、業界の規制やガイドラインに従って提示してください。「初回50%オフ」といった特典情報は、LPのファーストビューの目立つ位置に配置しましょう。白や水色、淡いピンクといった配色のLPにすれば、ファーストビューで清潔感のあるイメージを印象付けられます。
» 厚生労働省「医療広告規制におけるウェブサイト等の事例解説書(第5版)」(外部サイト)

ITサービス・SaaS系LPのファーストビューは、業務の課題を解決する方法が伝わるキャッチコピーを用意しましょう。「請求書発行の手間を90％削減」などのキャッチコピーをLPのファーストビューに配置すると効果的です。

ITサービス・SaaS系LPのファーストビューに盛り込むべき内容は以下のとおりです。

• ・導入企業数や継続率などの実績データ
• ・有名企業のロゴを並べた導入実績
• ・メディア掲載や受賞歴のバッジ
• ・セキュリティや運用体制に関する情報

プロダクトのUIを見せるスクリーンショットや使い方の動画をファーストビューに配置すれば、実際の業務をイメージできます。ITサービス・SaaS系LPのファーストビューでは、信頼感と先進性を意識した配色(ネイビーや白など)が好まれます。

教育・セミナー系LPのファーストビューは、ユーザーの学習意欲を引き出す必要があります。明確な講座名や参加後に得られるスキル、受講生の成功事例をLPのファーストビューに盛り込むと効果的です。

教育・セミナー系LPのファーストビューでは、ユーザーが受講した後の状況を具体的にイメージさせる文章を考えましょう。「スキルを身に付けて年収が〇万円上がった受講生が○人います」などの具体的なメッセージをファーストビューで示すと有効です。

通販・EC系LPでは、ファーストビューの作り方が売上に直結します。通販・EC系LPのファーストビューで重要なポイントは、商品の魅力を瞬時に伝えることです。LPのファーストビューに商品画像を配置して視覚的なインパクトを与えると、商品の魅力がユーザーに伝わります。

通販・EC系LPのファーストビューに記載するべき内容は以下のとおりです。

• ・商品を購入するメリット
• ・期間限定の情報
• ・商品の基本情報
• ・購入や申し込みを促すCTAボタン

「残りわずか」「期間限定」といった緊急性をLPのファーストビューでアピールすれば、CVRの向上が期待できます。実際の口コミをファーストビューに記載しておくと、LPの信頼性が高まります。商品の詳細な特徴やユーザーの不安を解消する要素は、LPのファーストビュー以降に配置すると効果的です。

LPのファーストビューに最適なサイズを以下の項目に分けて解説します。

パソコンでLPを見る場合、ファーストビューのサイズには一般的な目安があります。さまざまな画面サイズのパソコンでLPのファーストビューを見られるため、多くの環境で表示できるサイズを意識しましょう。

パソコン向けのLPのファーストビューは以下の設定がおすすめです。

• ・画面横幅：1,000〜1,200ピクセル
• ・画面高さ：550〜650ピクセル

LPのファーストビューの背景画像は、横幅を1920ピクセル以上に設定すると多くの画面サイズに対応できます。LPのファーストビューの画面サイズを決める際は、スクロールしなくても必要な情報が見えるように意識してください。

スマホでLPのファーストビューを見る場合、横幅に合わせて大切な情報が見える工夫をしましょう。スマホはパソコンよりも画面が小さいため、LPのファーストビューでスクロールせずにユーザーの心をつかむ必要があります。

スマホの画面サイズに合わせてLPのファーストビューを作る際のサイズの目安は、以下のとおりです。

• ・画面横幅：340〜400ピクセル
• ・画面高さ：620〜900ピクセル

スマホの画面サイズは機種によって異なるため、目安よりもLPのファーストビューの高さが必要な場合もあります。キャッチコピーやCTAボタンなどの重要な要素は、LPのファーストビューの1画面内に収める必要があります。

写真などの画像ファイルはサイズを小さくして、LPのファーストビューがすぐに表示されるように工夫しましょう。

LPのファーストビューのサイズを調整するときは、レスポンシブデザインを採用することがおすすめです。レスポンシブデザインなら、利用デバイスによって文字の大きさや画像サイズ、レイアウトが自動で調整されます。パソコン画面では横長に表示していたファーストビューを、スマホでは縦長に表示するように設定できます。

スマホでファーストビューを表示する場合、CTAボタンを指で押しやすいサイズに変更しましょう。

LPのファーストビューを魅力的にするデザインのポイントは以下のとおりです。

ファーストビューの配色を決める際は、商品やサービスのブランドイメージに合うメインカラーとサブカラーを選択しましょう。ファーストビューの中で強調させたい部分は、背景色との差をはっきりさせて目立たせます。CTAボタンなどの重要な部分には、特別な色を使うと視線を引き付けやすくなります。

LPのファーストビューのレイアウトは、人が自然と目で追う順番を意識して設定することが大切です。パソコンでWebサイトを見る際には、人はZやFの形に視線を動かす傾向があります。スマホの場合は縦スクロールでの閲覧が基本になるため、LPのファーストビューは縦長に情報を配置しておくと効果的です。

LPの第一印象は一瞬で決まるため、ファーストビューを見たユーザーがすぐに理解できる配色とレイアウトを心がけてください。

LPのファーストビューに適切な余白を設けると、情報が見やすくなりユーザーが内容を理解しやすくなります。LPのファーストビューで余白を活用するメリットは以下のとおりです。

• ・情報のまとまりをわかりやすくする
• ・読みやすさが向上する
• ・重要な要素を強調できる
• ・視線を誘導できる
• ・操作性が向上する

文字だけでは伝わりにくい商品の魅力やサービスの雰囲気は、ファーストビューの画像や動画で直接的に伝えられます。LPのファーストビューには、商品やサービスを使った後の未来を想像できるような写真やイラストを使うことがおすすめです。

LPのファーストビューの写真に写っている人の視線をCTAボタンに向けておけば、自然とクリックを誘発できます。インターネット上の写真やイラストをファーストビューに使う際は、著作権や肖像権の問題も考慮する必要があります。

LPのファーストビューでよくある失敗は以下のとおりです。

ファーストビューの情報が多すぎると、ユーザーは何を見れば良いのかわからずLPから離脱してしまいます。ファーストビューにキャッチコピーや画像が多すぎると、LPのCTAボタンを発見できない可能性もあります。

LPのファーストビューを作る際、ユーザーに伝えたい情報は厳選しましょう。見てほしい要素だけをLPのファーストビューに配置すれば、ユーザーは目的のアクションを取りやすくなります。

LPのファーストビューでCTAボタンが見つからないと、商品やサービスに興味を持ってくれたユーザーに次の行動を促せません。ユーザーがLPのCTAボタンを見落としてしまう理由は以下のとおりです。

• ・背景色と同化している
• ・ボタンの言葉が悪い
• ・サイズが小さい
• ・配置場所が悪い
• ・ボタン周りの情報が多い
• ・CTAに関係ないボタンが多すぎる

LPのファーストビューでCTAボタンを目立たせるために、ボタン内の言葉には具体性を持たせてください。「送信」のようなありふれた言葉よりも具体的な行動を示す言葉の方がユーザーの注意を引きやすく、クリック率が高まります。

CTAボタンの配色やデザインを改善すれば、ユーザーの目を引くLPのファーストビューを作れます。

LPの表示速度が遅いと、ユーザーはファーストビューを見る前に離脱してしまいます。ユーザーはファーストビューの表示を待つことにストレスを感じるからです。ページの表示速度は、Googleが検索順位を決めるうえで大切にしている要素の一つです。

Googleの調査によるとページの表示に3秒以上かかった場合、ユーザーの53％が離脱します。スマホユーザーは場所によってインターネットのつながりやすさが変わるため、ページの表示速度には敏感になりがちです。LPのファーストビューで使う画像のファイルサイズを落とせば、ページの表示速度が早くなります。
» Google Adsense「モバイルページの読み込みを速くする」(外部サイト)

スマホでWebサイトを閲覧する人が増えているにもかかわらず、LPがスマホに最適化されていないケースも多くあります。スマホ表示に対応していないLPはユーザー体験を大きく損ない、CVRの低下につながります。スマホ表示に対応していないLPの特徴は以下のとおりです。

• ・テキストが読みづらい
• ・横にスクロールする必要がある
• ・CTAボタンが小さくてタップしづらい
• ・画像の読み込みに時間がかかる
• ・コンテンツが表示されない部分がある
• ・画面全体を覆うポップアップがある

スマホに最適化されたLPを作る場合、縦表示を考慮したレイアウト設計が必要です。LPにレスポンシブデザインを取り入れれば、利用デバイスに合わせて最適なレイアウトで表示されます。

LPのファーストビューを改善するための手法は以下のとおりです。

ヒートマップ解析を使えば、ユーザーがLPのファーストビューでどのように動いているかを把握可能です。ヒートマップ解析ではユーザーの視線やクリックした場所、離脱した場所が色を使ってわかりやすく表示されます。ヒートマップ解析によって、ファーストビューの中でユーザーが興味を持っていない部分もわかります。

ヒートマップ解析の結果からLPでユーザーが狙い通りに動いていない場所を見つけ出して、ファーストビューを改善しましょう。CTAボタンの位置やキャッチコピーの内容など、ヒートマップ解析を使うとファーストビューのさまざまな改善点が見つかります。

A/Bテストとは、複数のLPのパターンを用意して結果を比較する手法です。A/Bテストは実際のデータで成果を比較できるため、勘に頼らず効果的なファーストビューの改善ができます。LPのファーストビューを改善する際は、以下の手順でA/Bテストを進めていきましょう。

1. 1.LPのデザインパターンを複数用意する
2. 2.ユーザーを複数のLPにランダムに振り分ける
3. 3.複数のLPのCTR(クリック率)やCVRを比較する
4. 4.結果が良かったLPを採用する
5. 5.A/Bテストを継続してさらなる改善を進める

A/BテストではCTAボタンの配置やキャッチコピーなど、ファーストビューのさまざまな要素を比較可能です。
» 国立国会図書館「宣言的な可変性記述によるA/Bテストの自動化」(外部サイト)
» A/Bテストの基本とおすすめのA/Bテストツールを紹介！

LPのファーストビューを改善するために画像の最適化は必須です。LPに使われる画像はファイルサイズが大きい場合が多く、ページの表示速度が遅くなる要因となります。LPのファーストビューの画像を最適化する方法は以下のとおりです。

LPのファーストビューに関するよくある質問は以下のとおりです。

LPに訪れたユーザーがファーストビューで離脱する確率は業界によっても異なりますが、平均で約60～90%です。多くのユーザーはページを下にスクロールする前に、LPのファーストビューだけでページを読むかどうか判断します。離脱率の高さによって、ファーストビューがLP全体に与える影響の大きさがわかります。

LPのファーストビューでユーザーの心をつかめるかどうかが、目標達成の重要なポイントです。

LPに滞在時間の明確な基準はありません。目指すゴールや取り扱う商品によって、LPは適切な滞在時間が異なるからです。LPを訪れたユーザーがファーストビューで商品を購入してくれた場合、滞在時間が短くても目標を達成できます。

ユーザーがLPを開いて数秒で離脱した場合、ファーストビューのデザインや内容、顧客層の設定などが主な問題です。長時間LPに滞在していても、商品の購入につながらないケースもあります。LPの滞在時間の長さよりも、最終的に目標を達成できたかどうかを重視しましょう。

LPの表示は、基本的にスマホに合わせることをおすすめします。多くの人がスマホでインターネットを見ているからです。ただし、LPのターゲットがパソコンをよく使う場合、パソコンでの見え方も考えましょう。レスポンシブデザインの技術を使うとデバイスを選ばず、LPを見ているユーザーに対応できます。

スマホ表示を重視しつつレスポンシブデザインでパソコン表示にも対応することが、LPの作り方として一般的です。

LPのファーストビューは、ユーザーが画面をスクロールしない状態で見える部分のことです。ファーストビューの印象によって、LPの成果が大きく変わります。魅力的なファーストビューはユーザーの関心を引きつけ、商品やサービスの期待感を高める効果が得られます。

ヒートマップ解析を行い、A/Bテストを繰り返して改善を続けることで、効果的なLPのファーストビューを作成可能です。

SiTestなら、ヒートマップ・A/Bテスト・LPOまで一つのツールで対応可能です。LPのファーストビューの改善にもすぐに取り組めます。