ホームページ

【注目】LPのファストビューデザイン解説と改善ポイント10選

今回のテーマは、ランディングページの要素として非常に重要な要素である「 ファーストビュー 」。

その理由は、ランディングページにたどり着いたユーザーは、たったの3秒でそのページを立ち去るか、下ヘスクロールして続きを読み進めるかを判断すると言われているからです。

それに加え、ランディングページを最初から最後まで全て読んでくれているユーザーは、5人に1人ほどの割合だと言われています。

しかし、それを逆手にとって考えると、あなたがファーストビューを改善することで、最後まで読んでくれる人の数が5人に1人だったのを2人へと増やすことができ、結果的に成約率をアップさせることもできるということです!

そこで本記事では、ファーストビューに関する基礎知識と、訴求するターゲット別に分類したランディングページのファーストビューの事例をまとめてみました。

また記事の最後には、改善の際に参考となる改善ポイントを10項目紹介しています。

ランディングページでなかなかコンバージョン( 成約 )を獲得できていない場合は、本記事を参考にしてまずはファーストビューの改善を考えてみてください。

ファーストビューとはpcとスマホ

「 ファーストビュー 」とはその言葉通り、ユーザーがランディングページを訪れた際に最初になる画面のことを言います。そのため、スクロールしなければ見られない部分は一般的にファーストビューの一部とは言いません。

画面サイズ的には、パソコンの場合は縦600~700px横1,000~1,200px、スマートフォンの場合は縦1,200px横720pxが標準です。そのため、スクロールしなければ見られない部分は一般的にファーストビューの一部とは言いません。

ランディングページにおけるファーストビューの役割は、バナー広告やキーワード検索などで興味を持って訪れてくれたユーザーに、「 このランディングページ内で重要な情報 」を一目で理解してもらうというものです。

言い換えると、ユーザーにその商品・サービスの魅力を端的に伝え、一瞬で心を掴むことがファーストビューの仕事になります。

ファーストビューが重要な理由

携帯を持ち、驚いた表情を見せる女性

実は、ファーストビューですぐにランディングページを去ってしまうユーザーの割合( 直帰率 )は、なんと70%以上と言われています。

すなわち、ファーストビューから下にスクロールする人の割合が、すでに半分以下になってしまうということです。

つまり、いかにファーストビューで離脱されないかを考えることが、ランディングページ作成において重要になります。

これは逆に言えば、ファーストビューさえ改善できれば、ランディングページをゼロの状態から作り直す必要もなく、売上アップが見込めるということです。

そのため、その他のコンテンツを細かく見直していく前に、この記事をしっかり読み込んでファーストビューの改善に力を入れましょう!

ファーストビュー3つの構成要素

星が5つ描かれている画像制作したいランディングページのイメージによっても異なりますが、ファーストビューには大きく3つの要素が含まれています。


その要素が次の3つです。

・メイン画像
・キャッチコピー/
サブテキスト
・ボタンやナビゲーション

しかし、「 どのようなユーザー 」に対して「 何を訴求するのか 」というランディングページそのもののコンセプトがあることが大前提です。

何の狙いもなくただ3つの要素を組み合わせてみたところで、たとえデザインは良くても、ターゲットとしているユーザーに響かなければ何の意味もありません。

自社のコンセプトに3つの構成要素とデザインが連動することによって初めて、ユーザーを3秒で惹きつけるファーストビューが完成します。

それではここから、皆さんがよりイメージしやすいように実際のランディングページの事例を見ていただきたいと思います。

1.法人向けランディングページの事例

◆HP制作会社のランディングページ( 比較biz )

比較biz

引用|https://www.biz.ne.jp/servicelp/web3/hp-design/


【 このランディングページの訴求内容 】
HP制作会社を探している人に、一括見積もりで簡単に比較できることを伝えています。また、多くの人が知っているような大手企業も利用している「 メジャーなサイト 」であることも訴えています。

【 このランディングページの構成要素 】
・サービスのイメージ写真
・キャッチコピー
・実績(運営歴15年目、利用者数10万社、満足度98%、利用した企業の紹介)
・会社名
・一括見積もりボタン

【 このデザインから伝わること 】
明るい女性の写真にオレンジとネイビーを基調とした色使いで、しっかりと訴求しながらも誠実さの伝わるデザインです。オレンジのボタンは実際にサイトで見ると、キラッと光るアニメーションが付いており、視覚的に上手く誘導できています。

◆企業向けの社内報システム( ウィズワークス株式会社 )

ウィズワークス株式会社

引用|https://shanaiho-app.jp

【 このランディングページの訴求内容 】
社員全員への情報共有などで困っている企業向けに、「 知識がなくても簡単に 」「 リアルタイムで 」「 社員全員一人一人に 」届けたい情報が伝えられるということを訴求しています。

【 このランディングページの構成要素 】
・サービスのイメージイラスト
・キャッチコピー
・メリット/ベネフィット
・会社名
・資料請求・問い合わせボタン

【 このデザインから伝わること 】
「 社内報アプリ 」の遊び心あるフォントや、写真ではなくイラストを使ったポップなデザインで、新しい画期的なサービスであることが伝わってきます。

サービスの特徴に吹き出しを利用することで、スッキリ見せつつしっかりとユーザーのポイントアップを稼いでいます。

2.一般消費者向けランディングページの事例

◆スマートフォンアプリ( 大分銀行 )

大分銀行
引用|https://www.oitabank.co.jp/rewards/app/lp/


【 このランディングページの訴求内容 】
「無料な上に、アプリを利用することで口座管理がとても便利になる 」ということをシンプルかつストレートに伝えています。

【 このランディングページの構成要素 】
・サービスのイメージ画像(女性・スマホ画面・マイメロディ)
・キャッチコピー
・メリット/ベネフィット
・会社名
・アプリダウンロードボタン

【 このデザインから伝わること 】
銀行をイメージするような無駄のない信頼感のあるデザインですが、「 女性×マイメロディ 」というイメージ画像の組み合わせから、「 女性にダウンロードしてもらう 」という目的に絞っていることが伺えます。

◆美容サプリメント( mirai white )

mirai white

引用|https://www.miraiwhite.jp

【 このランディングページの訴求内容 】
肌本来の透明感を、サプリメントにより引き出すことができるという「 新常識 」を打ち出し、初回のみ特別価格で購入できることを訴求しています。

【 このランディングページの構成要素 】
・サービスのイメージ画像(女性・サプリメント)
・キャッチコピー
・実績(ホワイトケアサプリ部門受賞)
・商品の成分(アミノ酸・ビタミンC・ROC配合)
・会社名
・特別価格での申し込みボタン

【 このデザインから伝わること 】
爽やかなブルーと白のグラデーション背景、そして涼しげな女性から、サプリメントの効果である「透明感の肌をゲットできる 」というベネフィットを得られることが伝わります。

また、右の申し込みボタンはナビゲーションで、下にスクロールしても常に表示されているため、コンバージョンを逃しません。

◆男性向けスキンケアクリーム( MIRACELEB )

MIRACELEB

引用|https://rdlp.jp/archives/otherdesign/lp/91301?cash_c=1&sort_order=recommend

【 このランディングページの訴求内容 】
95%の満足度で、多くの男性に起こりうるシェービング後の肌荒れの悩みを解決しており、初回限定のお試し価格で申し込むことができることを訴求しています。

【 このランディングページの構成要素 】
・サービスのイメージ画像(男性・スキンケアクリーム)
・キャッチコピー
・実績(満足度95%)
・商品の情報(製薬会社と共同開発)
・会社名
・特別価格での申し込みボタン

【 このデザインから伝わること 】
外国人男性がイメージモデルとなり、かっこいい男性になれることを印象付けています。また、落ち着いたダークトーン背景やホワイト、ゴールドのテキストはユーザーに信頼感を与えることができます。

ユーザーがファーストビューで判断するポイント

メモを取りながら話をする男女

ランディングページに辿り着いたユーザーは、具体的にファーストビューのどこを見てその先読み続けるかどうかを判断するのでしょうか。そのポイントは3つあります。

・このページは自分に当てはまるものなのか
・その商品について読み進めるメリットはあるか
・このページから得られるお得な情報はあるか

さて、ではこの3つのポイントを3秒以内にクリアするためには、何をしなくてはいけないのでしょう。

ここからは、3秒ルールを突破できるファーストビューを作る際の重要ポイントを10つ解説します。

あなたの作成したランディングページでそれらのポイントが抑えられているかどうかをぜひチェックしてみてください!

ファーストビューにおける10つのポイント

携帯を見て笑顔を見せる男性

引用|https://promotionalhandling.co.uk/sustainability-down-the-supply-chain/

①検索キーワードをファーストビューに入れる

ユーザーの流入経路はランディングページの特性上、基本的にリスティング広告からになります。つまり、ユーザーが検索したキーワードに関連する商品として自社の広告が表示され、気になったからランディングページへ訪れた、という流れは想像できますよね。

キーワード検索をして辿り着いたその先に、そのキーワードが見当たらなかったら、ユーザーはどう思うでしょうか?

おそらく、探していたものと違うと判断して離脱してしまいます。こうした理由から、ファーストビュー内に検索キーワードを入れることは必須とされています。

②トップ画像は商品・サービスの内容が伝わるものを選ぶ

ファーストビューの中でも、視覚的に特に強い印象を与えるのはトップ画像です。そのため、トップ画像は商品のイメージが伝わりやすいものを選びましょう。

もしパッと見たときに何の商品・サービスか分からないと思われてしまうと、ユーザーの離脱に繋がります。

それだけでなく、商品の内容は伝わっても、モデルとなっている人物が自分の年齢とかけ離れていたりすると、「 ちょっと違うかも 」と感じてしまいこれも離脱に繋がります。

その商品やサービス内容が伝わりやすいものというポイント以外にも、ターゲットとなる性別や年齢層などを考慮することが大切です。

③メリットではなくベネフィットを伝える

ファーストビューに掲載するコピーは、ユーザーの心を掴むためにもきわめて重要です。単純に商品のアピールポイントを並べるだけでは少し足りません。

「 商品の優れているところ」ではなく、「 ユーザーにとってプラスとなること 」、すなわち「 その商品を利用したらどんな良いことが起こるのか 」を提示し、ユーザーの問題を解決しましょう。

これらはメリットではなく「 ベネフィット 」と呼ばれます。ユーザーは常にベネフィットを求めて商品を購入する、ということを覚えておきましょう。

例) ×美容成分92%配合!

     ○美容成分92%配合で、一日中しっとり肌!

④具体的な数字ですごさが伝わる権威付けを入れる

私たちは人間なので、購入したり申し込む場面では慎重になりますが、そこに安心できる情報材料がある場合、アクションをすることへのハードルが低くなる傾向にあります。

効果的なのは、受賞歴などで「 数字 」を利用したり、「 メダル・王冠 」などの素材を利用することです。内容例としては、下記のようなものが挙げられます。

スキンケア部門3年連続No.1!
・お客様満足度98.3%!

・日本で1秒に10個売れています!

中でも特に効果のある権威付けは、「 No.1 」という訴求です。キーワード検索で似たような商品を探していた場合、たどり着いたランディングページで紹介されている商品がその業界内でNo.1だと分かれば、必ず興味を持ってもらえるはずです。

⑤ユーザーが最低限知っておきたいマスト情報を記載する

ファーストビューでは、ユーザーに興味をもってもらおうとするあまり、基本的な商品情報のことを忘れてしまいがちです。

「 商品名 」「 商品の画像 」はもちろん、「 使用量・使用期間 」や「 サイズ 」も重要な情報です。その他にも、キャンペーン価格を設定している場合はその価格並びに定価を必ず掲載するようにしましょう。

また、商材のジャンルによって重要とされる商品情報は異なります。例えば脱毛クリニックのファーストビューであれば、「 施術回数 」「利用期限 」「施術可能部位」「 選べる箇所数 」などがマストな情報と言えるでしょう。

⑥申し込みボタンをファーストビューの範囲内に設置する

一般的にファーストビューで離脱してしまう人が多いというデータが既にあるので、少しでも初めの時点でコンバージョンを獲得できる確率を増やすためにも、申込みボタンは範囲内に設置するようにしましょう。

というのも、広告から流入してくるユーザーは、商品に対してすでに大きな関心を持っていることも少なくないため、ランディングページへ到着した段階で申込みボタンをクリックすることも実際にあります。

現に検証をして、ファーストビューに申込みボタンを設置した場合の方がコンバージョン率が1.3倍に上がったという結果が出たランディングページもあるようです。

もちろんファーストビューでコンバージョンに達するユーザーばかりではありませんが、可能性がある以上は実行して損することはありません!

⑦申し込みボタンを目立たせる

これはファーストビューだけに限ったことではありませんが、ユーザーに気づいてもらえるよう、申し込みボタンの色は目立つものを選びましょう。

例えば、もし青が基調となっているページであれば、黄色や赤を選ぶなど、背景に馴染んでしまわない人目を引くカラーを選ぶといいでしょう。

しかしここで注意していただきたいのが、目立たせるだけではダメだということです。全体との配色バランスを考えないと、申し込みボタンのせいでセンスのないランディングページになってしまう可能性があります。

事例サイトなどで、似たようなメインカラーを使用している他社のランディングページを参考にすると良いでしょう。

⑧申し込みボタンはクリックできそうなデザインにする

もし申し込みボタンがクリックできないように見えてしまうと、ユーザーがスルーしてしまう可能性も大いにあります。

影をつけて立体的にしたり、角丸をつけたり、グラデーションにしたりと工夫をして、「 これはボタンで、クリックできます! 」ということが一目瞭然になるようにしましょう。

逆にボタン以外の要素に関しては、ユーザーの混乱を招かないよう、クリックができるような立体的なデザインは避けるようにするのが無難でしょう。

⑨申し込みボタンは1つだけにする

いくつか選択肢がある時、「 なかなかどれを選んでいいか決められない・・・ 」という経験、皆さんにもあるのではないでしょうか。それは皆さんだけではなく、ほとんどの人に起こりうる現象です。

悩んで購入すること自体をやめてしまうなんてことになる前に、申し込みボタンは1つに絞りましょう。

また、どうしても2つ設置する必要がある場合は、優先度の高いものをより目立たせるようにすると、決断するユーザー側の負担もそこまで大きくなりません。

⑩限定・保証に関する言葉を申し込みボタンの近くに入れる

あと一歩購入に踏み込めていないユーザーの背中を最後にひと押ししてあげるために、今このタイミングで買わないと!と思わせるような「 限定性 」のある情報を申し込みボタンの近くに置きましょう。

例えば、

今だけお試しキャンペーン価格!
・今なら送料無料!

・150名様限定販売!

というような感じです。こうした限定をするのとしないのとでは、その場でのコンバージョンの獲得件数は大きく変化するでしょう。

また、「 保証 」や「 返金 」が可能であることを提示し、失敗しても問題ないですよ!とユーザーの不安を取り除くことも効果絶大です。

「 ご満足いただけなければ全額返金! 」「 もし期間中に達成できなければ成果が出るまで保証します! 」などといった情報も、申し込みボタンの近くに入れるようにしましょう。

まとめ

携帯と比較しながら構想を考えている画像

いかがでしたでしょうか?

ファーストビューが、ランディングページ上でコンバージョンに大きく関わるコンテンツであることがおわかりいただけと思います。

ファーストビューの事例に関しては一部だけしか紹介しておりませんので、ランディングページの事例まとめサイトなどからカテゴリを絞り込んで検索し、自社と類似するランディングページをたくさんみて研究してみてください。

▼おすすめのランディングデザインサイトまとめはこちらから
【完全版】おしゃれなランディングページが作れる!参考になるLPデザインサイトおすすめ10選

そして何度も繰り返しになりますが、「 どのようなターゲット 」に向けて「 何をファーストビューで訴求すべきなのか 」を明確にすることがまず先です。

そのコンセプトを基に効果的なファーストビューを作れるよう、ぜひこの記事を参考にしてみてください!

Her'sにお任せください!

Webコンサル

Web集客に特化した弊社には優秀なエンジニアやマーケターが多く在籍しているためHP/LP製作、広告、コンサルを1社で完結させることができます!

Wantedly運用代行

Her'sには「WEBx採用」に特化したWebマーケターが多く在籍し、Wantedlyの運用を行っています。会社ランキング6位になった実績を持つ弊社が責任を持って運用します!

MEO対策

MEO対策は、SEO対策より短期間で上位表示が可能で集客効果が高いです。費用もリーズナブルですのでぜひHer'sにお任せください!

            お問い合わせはこちら

Her'sにお任せください!

Webコンサル

Web集客に特化した弊社には優秀なエンジニアやマーケターが多く在籍しているためHP/LP製作、広告、コンサルを1社で完結させることができます!

Wantedly運用代行

Her'sには「WEBx採用」に特化したWebマーケターが多く在籍し、Wantedlyの運用を行っています。会社ランキング6位になった実績を持つ弊社が責任を持って運用します!

MEO対策

MEO対策は、SEO対策より短期間で上位表示が可能で集客効果が高いです。費用もリーズナブルですのでぜひHer'sにお任せください!

            お問い合わせはこちら



Facebook


Twitter


LINE


はてなブログ


RSS