ホームページにアクセスした時に、最初に目に入る画面を「ファーストビュー」といいます。

ファーストビューは、ランディングページ（LP）においても非常に重要で、「サイトの顔」と言っても過言ではありません。

今回は、ランディングページの成果を左右するファーストビューについて解説します。

ランディングページ（LP）におけるファーストビューとは何か？

ランディングページ（LP）を開いた時に、スクロールなしで表示される部分のことをファーストビューと言います。

ファーストビューは、ランディングページにおいて最も重要な要素であり、ファーストビューがその後のユーザーの行動やランディングページの成果を大きく左右します。

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

ランディングページは、ファーストビュー・ボディコピー・クロージングコピーの3つで構成されます。

その中でも、ファーストビューは最も重要な要素だと言えます。

ファーストビューは、ランディングページの中で訪問者の目に最初に入る部分であり、ランディングページの第一印象を決定づけるためです。

ユーザーの興味をひきつけられるかどうかは、ファーストビューにかかっています。

ファーストビューが効果的であれば、ランディングページの最重要指標であるコンバージョン率（CVR）の向上に大きく寄与します。

ファーストビューにこだわり、ランディングページの成果を最大化しましょう。

ファーストビューの質で離脱率が変わる

ファーストビューの質は、ランディングページの離脱率に大きく影響します。

ファーストビューの内容がユーザーの興味を引き付けられなければ、離脱率は高まってしまうのです。

「ユーザーは3～4秒で離脱するか否かの判断をする」と言われていることからも、ファーストビューの質が重要だということが伺えます。

ファーストビューでWebサイトを離脱してしまうユーザーの割合（直帰率）は、ランディングページで70％以上、コーポレートサイトで40％〜60％と言われています。

すなわち、3秒以内にWebサイトを離脱するユーザーは、半分以上にのぼります。

このため、ファーストビューが最適化されると、ユーザーはサイト全体を閲覧する意欲が高まり、結果としてコンバージョン率も向上します。

ファーストビューは、単なるサイトの入り口という役割だけでなく、ランディングページの成果に大きな影響を与える重要な要素であると言えます。

ファーストビューでやりがちなミス

ファーストビューで多くの人がやりがちなミスは、情報を詰め込みすぎることです。

多くの情報を一度に伝えようとすると、視覚的に混乱を招き、訪問者が何をすべきか分からなくなるためです。

複数のキャッチコピー・画像・CTAボタンを一度に配置すると、どれが重要な情報なのかが曖昧になり、訪問者の関心を引けなくなります。

ファーストビューでは、何がサービスの特徴なのかという点を、シンプルで明確なメッセージで伝えて訪問者に次の行動を促すことが重要です。

また、インパクトのあるメインビジュアルを用意できないこともよくある失敗の一つです。

ファーストビューは訪問者の第一印象を決定する部分であるため、魅力的でメッセージが伝わりやすいメインビジュアルが必須です。

画質が悪かったり、文脈に合わない画像を使用したりすると、訪問者に不信感や不満を抱かせることがあります。

ファーストビューでやりがちなミスをしっかりと理解し、良いファーストビューの作成に生かしましょう。

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

ランディングページのファーストビューを構成する要素として、下記のようなものがあります。

• 写真や画像
• 実績
• キャッチコピー
• CTA

ファーストビューに必要な要素について詳細に説明します。

写真や画像

ランディングページのファーストビューに掲載される写真や画像は、「メインビジュアル」とも呼ばれます。

メインビジュアルという言葉からもわかる通り、ファーストビューの画像や写真は、LPの「顔」のような役割です。

そのため、ファーストビューの写真や画像にこだわることは非常に重要となります。

一般的には、商品・サービスの画像や、商品・サービスの広告を行っている著名人の写真などが掲載されることが多いです。

サービスの強みや特徴・ターゲットなどが、一目でわかる写真や画像を活用しましょう。

実績

『顧客満足度○位』や『累計登録者○人』などの定量的な実績がある場合は、必ずファーストビューに記載をしましょう。

定量的な実績を記載することで、訪問者に信頼を与えることが可能です。

また、BtoB企業であれば、導入企業のロゴを並べることも効果的です。

ユーザーは、初めて訪れるWebサイトやサービスに対して信頼性を求めます。

信頼性のあるサービスであることを瞬時に伝えることにより、訪問者は次のアクションへのハードルが下がります。

その結果、離脱率の低下やコンバージョン率の向上につなげることが可能となるのです。

ファーストビューは、ユーザーが最初に目にする重要な部分のため、その瞬間に信頼を獲得することができれば、ランディングページの成果が大きく向上する可能性があります。

キャッチコピー

キャッチコピーは、『わかりやすく、インパクトのある文言で』、ユーザーの興味を引きWebサイトから離脱させないことを目的として作成します。

まず、キャッチコピーを作成する前には、商品・サービスのターゲットを明確にしましょう。

ターゲットがあいまいだと、ユーザーの興味をひきつけることができず、離脱につながります。

LPのファーストビューには、よく以下のようなキャッチコピーが掲載されることが多いです。

• 商品やサービスを端的に訴求するキャッチコピー
• ユーザーの悩みやニーズを表すキャッチコピー
• 実績や割引などのキャンペーンをアピールするキャッチコピー

こういったパターンがありますので、自社のターゲットに応じて適切なパターンを選んで作成しましょう。

ランディングページのキャッチコピーに悩む場合は、複数のパターンを作り、A/Bテストをすることも有効です。

CTA

CTAとは、「Call To Action」の略であり、日本語では「行動喚起」と訳されます。

• 資料請求
• 問い合わせ
• 電話
• 予約
• 購入

こういった行動をユーザーに対して喚起するためのクリエイティブのことを、CTAと呼びます。

CTAは、ユーザーの視線に沿って適切な場所に配置すべきです。

そして、ユーザーがボタンやリンクだと認識できるような大きさにして、クリックできることがわかるデザインにしましょう。

CTAがユーザーに認識されず、クリックが発生しないという事象はよくある失敗例です。

CTAを設置する際は、下記を意識して設置をしましょう。

• 周囲と比較し、CTAを目立つ色にする
• クリックできることをわかりやすくする
• CTAを1つに絞る
• クリックのハードルを下げる言葉をCTAの近くに配置する

ランディングページ（LP）のファーストビューを制作する際のポイント

ここまで、ランディングページのファーストビューの重要性や盛り込むべき内容を解説しました。

ここからは、より良いファーストビューを制作する際のポイントについて解説します。

下記のようなポイントに気を付けて、ファーストビューを制作しましょう。

• ペルソナを明確にする
• わかりやすく短いキャッチコピーをつける
• CTAの設置を欠かさない
• ユーザーに刺さるオファーを掲載する
• 情報を詰め込みすぎない
• サイズを意識する

ペルソナを明確にする

ペルソナは、商品やサービスのターゲットユーザー像を指します。

年齢・性別・家族構成・趣味・悩みといったペルソナ設定を明確にし、訴求力を高めましょう。

ペルソナ設定を行うことで、ユーザーにどのようなデザインが刺さるのか、どんな文言であれば興味を引くことができるのかという点が見えてきます。

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

項目	特徴
名前	佐藤　徹
性別	男性
年齢	28歳
職業	不動産　営業
年収	600万円
家族構成	両親と二つ上の兄がひとり、現在は一人暮らし
趣味	サウナ、音楽鑑賞
悩み	業務量が増加し、帰宅時間が遅くなることが多い。結婚も控えており、ワークライフバランスを考えて働きたい。

上記のようなペルソナを定めることにより、万人に向けた訴求ではなく、ターゲットユーザーにピンポイントで刺さる訴求を行うことが可能です。

信頼できるサービスであることを伝える

ランディングページのファーストビューには、信頼できるサービスであることを照明する訴求をすることも重要な要素の一つです。

販売実績やメディア掲載歴などがあれば、積極的に掲載をしましょう。

その他にも権威付けにつながる要素があれば、必ずファーストビューに掲載すべきです。

具体的には、導入事例を掲載したり、導入企業に大手企業が多ければロゴを掲載したりするのも効果的です。

ユーザーの信頼感が高まると、その後のアクションに繋がりやすくなり、結果的にコンバージョン率（CVR）が向上します。

わかりやすく短いキャッチコピーをつける

キャッチコピーは、ランディングページの訪問者の心をつかむための文言であり、サービス内容に興味を持ってもらい、離脱をさせないための役割を果たします。

訪問者がページに興味を持った瞬間、すぐにその内容を理解できる短いキャッチコピーを提示できると、ユーザーの興味・関心が継続し、離脱率が下がり、結果としてコンバージョン率が向上します。

事前に決めているペルソナの視点に立ち、自社サービスのメリットや内容・ユーザーに提供できるベネフィットなどをわかりやすく短く訴求できるようなキャッチコピーを作成しましょう。

CTAの設置を欠かさない

ランディングページのファーストビューに、CTAを設置することを忘れないようにしましょう。

CTAボタンは、基本的にファーストビュー内に1つだけ設置するのがおすすめです。

CTAをいくつも設置してしまうと、クリックしてほしいCTAをクリックしてもらえない恐れがあります。

ランディングページのファーストビュー内に適切なCTAを設置し、訪問者に次に取ってほしい行動を明確にしましょう。

ユーザーに刺さるオファーを掲載する

ファーストビューで重要な要素として、「ユーザーに刺さるオファー」があります。

ユーザーに刺さる魅力的なオファーは、ランディングページでの購入や問い合わせなどの次のアクションを促進します。

例えば、『入会金無料』や『●％OFF』などの、ユーザーにとってメリットのある情報については、積極的にファーストビュー内に記載をしましょう。

ユーザーに刺さるオファーを提供することで、劇的にランディングページのコンバージョンが改善される可能性があります。

情報を詰め込みすぎない

ランディングページのファーストビューにおいては、情報を詰め込みすぎないことが非常に重要です。

情報が多すぎると、ユーザーが混乱する可能性があり、ページからの離脱率が上昇する可能性があります。

例えば、様々なサービスの特徴、料金、ユーザーレビューを全てファーストビューに詰め込むと、ユーザーはどこに注目すべきかわからなくなります。

ファーストビューでは、最も重要なポイントだけに絞るのが効果的です。

キャッチコピーや主要なベネフィット、シンプルなCTAなど、訪問者がページを開いた瞬間に理解できる情報を中心に配置しましょう。

サイズを意識する

画像や写真のサイズは、ランディングページのファーストビューを作成するうえで意識するべきポイントの一つです。

ページの表示速度という観点と、視認性という観点から適切なサイズを意識して作成しましょう。

画像や写真のサイズが重くなりすぎると、ページの表示速度に悪影響を及ぼします。

ページの表示速度が遅くなると広告品質スコアに大きく影響を与えます。

広告品質スコアとは、GoogleやYahoo!JAPANなどで使用されている広告の『品質』の目安を表示する診断指標です。

広告品質スコアが悪化すると、広告が上位に表示されない・単価が高くなるなどのデメリットがあります。

スマートフォンページでは、表示速度が3秒以上かかった場合53％ものユーザーが離脱することも報告されています。

また、視認性という観点でも画像サイズは重要となります。

PCやスマートフォンなど、それぞれのデバイスによって視認性の良いサイズが異なります。

日本でよく使用されるパソコンの画面の大きさは「1920×1080px」です。

またタブレットの場合は「768×1024px」です。

パソコンの場合、ランディングページにおけるファーストビューのサイズは「幅1000〜1200px、高さ550〜650px」程度を目安としましょう。

スマートフォンでは画面の大きさは、「375×667px」です。

スマートフォンの場合、ランディングページにおけるファーストビューのサイズは「幅350〜365px、高さ600〜650px」程度を目安としましょう。

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

デザインの参考になるファーストビューの例

ファーストビューは、ランディングページにおいて非常に重要な要素です。

ユーザーが最初に目にする部分であり、ここでいかに魅力的な印象を与えられるかがランディングページの成果を分けます。

以下に、実際にデザインの参考になるファーストビューの例をいくつか紹介します。

具体的なデザイン例として、「タイミー」、「テンプスタッフ」、「CodeCamp」のファーストビューを見てみましょう。

これらの企業はそれぞれ異なる特徴を持ちながらも、共通してユーザーの目を引く工夫が施されています。

それぞれがどういったポイントで優れているのかを解説していきます。

タイミー

参照：https://business.timee.co.jp/

タイミーの法人向けの広告ランディングページ（LP）について解説します。

良い点は下記のような点が挙げられます。

• ファーストビューで何のサービスなのかわかりやすい
• CTAが検討度の高さによって2つ設置されている
• 権威性の訴求がされている
• 導入メリットがわかりやすく訴求されている

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

CTAについても、アカウント開設と資料請求という2つが用意されています。

おそらくアカウントをいきなり開設するのに抵抗がある事業者向けに、少しハードルの低い資料請求というCTAを用意しているのでしょう。

このようにペルソナにマッチするようなCTAであれば、2つ以上設置するのも問題はありません。

また、CTAのマイクロメッセージとして、『最短7分で求人掲載』というものがあり、すぐにでも働き手を探したいという事業者のニーズに応えた訴求となっています。

導入企業や『700万人の働き手』という権威性の要素もしっかりと盛り込まれています。

テンプスタッフ

参照：https://www.tempstaff.co.jp/

テンプスタッフの求職者向けのランディングページ（LP）について解説します。

テンプスタッフのランディングページの主な良い点は下記の通りです。

• メインビジュアルがテンプスタッフのペルソナ像とあっている
• 動画のメインビジュアルも存在する
• CTAが1つでわかりやすい
• 権威性の訴求がされている

テンプスタッフのランディングページの中でも、特に参考になるものは「CTA」です。

CTAがわかりやすく、ランディングページ内全てのCTAの色が統一されています。

このようにCTAを統一することにより、ユーザーはどれがクリックできるボタンなのかを明確に把握することができ、誤クリックによるユーザビリティの低下を防ぐことが可能です。

また、メインビジュアルを複数個用意しており、画像のメインビジュアルや動画のメインビジュアルなどがあります。

このことから、様々な職種の特徴を捉えたメインビジュアルの設計となっているのが見て取れます。

ファーストビュー内に権威性を訴求する文面もあり、ユーザーへの安心感を与えられるデザインとなっています。

CodeCamp

参照：https://codecamp.jp/

コードキャンプのランディングページについて解説します。

良い点としては、以下の通りです。

• 権威性の訴求がされている
• ユーザーにメリットのあるオファーを提示している
• 明確に何のサービスなのかがわかりやすい

コードキャンプのランディングページは、ファーストビューを見ただけで何のサービスかが非常にわかりやすい、という点が参考になるポイントです。

ファーストビューを見たほとんどの人が「プログラミングレッスンのサービスであること」をすぐに理解するでしょう。

このようにわかりやすいキャッチコピーでまとめることが、ファーストビューにおいては重要です。

また、コードキャンプに登録し、無料カウンセリングを受けるメリットを明確に提示している点もコンバージョンレート（CVR）が向上する一因になっているでしょう。

このような『●％OFF』というようなオファーは、キャンペーンが存在している場合は必ずファーストビューに盛り込みましょう。

ファーストビューを改善するための方法

ファーストビューは一度作成して終わりではなく、各指標を見ながら改善することが重要となります。

ここでは、ファーストビューを改善するための具体的な下記の方法について解説します。

• A/Bテストを繰り返す
• 定性分析・定量分析を行う

A/Bテストを繰り返す

A/Bテストを繰り返すことは、ファーストビューの最適化を図るうえで非常に重要な手法です。

同じランディングページでも、ユーザーの反応は同じではないため、複数のファーストビューを作成して実際のユーザーの行動を観察しながら、最適なデザインやコンテンツを見つけ出す必要があります。

ファーストビューを構成する要素を理解し、何をA/Bテストするべきなのかを理解する必要があります。

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

• メインビジュアル
• キャチコピー
• 補足情報
• CTA
• 全体デザイン

ヒートマップやA/Bテストツールを活用し、いくつかのパターンで試してみて、最も数値の良いものを最終的に選択しましょう。

定性分析・定量分析を行う

ファーストビューの改善には、定性分析と定量分析の両方を行うことが重要です。

定性分析は、数値化できないデータ（質的データ）をもとに行う分析手法で、ユーザーの感情や意見を理解するために行われます。

例えば、ユーザーインタビューやアンケートを実施することで、ページを訪れたユーザーがどのように感じているか、何を求めているかを把握することができます。

一方、定量分析は数値データ（量的データ）を元に行う分析手法で、ユーザーの大まかな傾向を把握するなど全体像を捉えるために行われます。

例えば、Google Analyticsなどのツールを使用して、サイトへの訪問者数、離脱率、コンバージョン率などのデータを解析することが挙げられます。

定量的なデータは、ファーストビューが実際にどの程度の効果を上げているか、数値で明確に示してくれるため、改善の方向性を定める根拠となります。

定性分析と定量分析を組み合わせつつ改善を続け、ファーストビューの質をより高めていき、ユーザーのエンゲージメントを向上させましょう。

データの裏付けを得ながらユーザーの声に耳を傾け、実際の改善を繰り返すことで、精度の高いPDCAサイクルを回すことが可能となり、最終的には売上やコンバージョンの向上につながります。

ファーストビューの制作には「pochily」がおすすめ

ランディングページのファーストビューの作成には、Webデザインに関する仕事を効率化できるサービス「pochily」がおすすめです。

「pochily」では、IllustratorやPhotoshopで編集可能なデザインパーツが豊富に用意されているため、ファーストビューを制作するための素材として最適です。

「pochily」を使えば、ランディングページのファーストビューを一から作る必要がなくなるため、作業の効率化が実現します。

効率良くWebデザインの案件をこなしたい方にとって、「pochily」はこの上なく大きな味方となるでしょう。

ランディングページのファーストビューの作成を効率化したい方は、是非「pochily」の公式サイトをご覧ください。

まとめ

本記事では、ランディングページのファーストビューの重要性とその具体的な改善方法について詳しく説明しました。

ファーストビューは、ランディングページの中でも非常に重要な役割を持っています。

したがって、「ファーストビューを作成して終わり」と片づけるのではなく、A/Bテストなどを繰り返しながら定期的に改善していきましょう。