WEB

ランディングページ(LP)はファーストビューで決まる!直帰率を改善するポイントまとめ

ランディングページ(LP)はファーストビューで決まる!直帰率を改善するポイントまとめ

こんにちは、ソウルドアウト株式会社のモッチです。

ランディングページで売上アップ!のつもりが、あれ?思うように売れない……。なんてことはありませんか?
それは、ランディングページの基本中の基本が抜けてしまっているからかもしれません。

ランディングページでありがちなミスは?

図1-良くないランディングページの例

たとえば、こんなランディングページになっていませんか?

  • 企業側の言いたいことを詰め込んでいる
  • 商品・サービスと関係性の薄いメインビジュアルを使用している
  • そもそも何の商品・サービスなのかがわからない

今回は、ランディングページの顔であり、売上改善に大きなインパクトを与える「ファーストビュー」にフォーカスして、改善すべきポイントをご紹介していきます。ぜひ、参考にしてみてください。

売上改善のカギ「ファーストビュー」とは?

ファーストビューとは、Webページにアクセスした際に、スクロールせずに見えるブラウザの画面範囲のこと。
 

図2-1 ファーストビューとは(PC)

高さ550pxでPCユーザの80%をカバーできると言われています。
 

図2-2 ファーストビューとは(スマホ)

スマホであれば、iPhone5以降を基準とすると高さ460pxです。

ファーストビューの直帰率は70%以上!?

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

図3-自社サイトのファーストビューをヒットマップで確認した結果

つまり、ファーストビューでいかに商品が魅力的かをアピールでき、ユーザに「もっと知りたい!」と思わせることができるかが、購入率アップのカギとなるのです。

逆に言えば、ファーストビューさえ改善できれば、ランディングページをイチから作り直さなくても売上アップは見込めるということ。ファーストビューだけなら制作費もグッと抑えることができそうですね。

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

それでは早速、ファーストビューで押さえるべき基本ポイント9つをチェックしてみましょう!

1. お申込みボタンをファーストビューの範囲内に入れる

図4-1-お申込みボタンをファーストビューの範囲内に入れる(ボタンなし)

一般的にファーストビューで離脱してしまう人が多いので、少しでもユーザにアクションしてもらえるようにお申込みボタンをファーストビューの範囲内に入れておきましょう
 

図4-2-お申込みボタンをファーストビューの範囲内に入れる(ボタンあり)

既に購入へのモチベーションが高いユーザは、ファーストビューの情報次第ではそのままスムーズに購入へと進んでくれます。

 
実際、化粧品業界でファーストビューにお申込みボタンが入っていないオリジナル案と、入るように調整したB案とでABテストを実施した結果、ファーストビューにお申込みボタンが入っているB案の購入率が3.65%から5%に向上、オリジナル案の1.4倍にもなりました!

2. お申込みボタンは周囲とくらべて目立つ色にする

図5-1お申込みボタンは、周囲とくらべて目立つ色にする(目立たない場合)

せっかくファーストビューにお申込みボタンを入れ込んでも、気づいてもらえなければ意味がありませんよね。

 

図5-2お申込みボタンは、周囲とくらべて目立つ色にする(目立つ色を使った場合)

ボタンは目立つに越したことはないので、「ここだよ!」と存在感を出してあげましょう。
 

図5-3お申込みボタンが、目立つ色の組み合わせ

青が基調のページなら黄や赤系のもの、緑が基調のページなら赤やオレンジ系のもの、赤が基調のページなら緑や青系のもの、といった具合です。

3. お申込みボタンはクリッカブルにする

図6-1-お申込みボタンがクリッカブルではない例

ボタンがクリックできないように見えてしまうと、ユーザに気づいてもらえない可能性があります。
 

図6-2-お申込みボタンがクリッカブルな例

影をつけて立体的にする、グラデーションをかける、角丸をつける、矢印をつけるなどの工夫をして、クリックできるように見せましょう「ボタン 素材」などと検索すれば、さまざまなボタンデザインが見つかります。

 
逆に、リンク先のないものをクリッカブルにしてしまうと、間違えてクリックしたユーザにストレスを与えてしまいかねません。リンク先を設定するお申込みボタンのみ、クリッカブルに見えるようにしましょう。

4. お申込みボタンは1つに絞る

図7-1-お申込みボタンが複数の例

人間はなかなかに選択・決断ができない生き物なんだそうです。いくつも選択肢があると迷ってしまい、結局買わずじまい、なんてこともありえます。
 

図7-2-お申込みボタンは1つの例

迷わずスパッと決断してもらうためにも、ゴールは1つに絞りましょう
 
また、ゴールを2つ設定する場合は優先度の高いものが目立つようメリハリをつけましょう。
2つのゴールは、似通ったものではなく、ハードルの高いものと低いものを用意するのもポイントです。そうすると、「AかBなら、Bかな……?」とユーザを片方に誘導することができます。

ハードルが低い 無料、安い、面倒でない など
ハードルが高い 購入の必要がある、高い、
個人情報をたくさん記入する必要がある など

5. TOP画像は商品・サービスの内容が伝わるものを使用する

ユーザがそのページの情報に興味を持つか否かは、ファーストビューの印象で決まります。そして、ファーストビューの印象を左右するのがTOP画像です。
 

図8-1-TOP画像を見てもどんな商品・サービスかわからない例

そんな重要な役割を担うTOP画像が、パッと見で何の商品・サービスかわからなければ、ユーザは自分の求めている情報がないと感じてページから離脱してしまいます。
 

図8-2-TOP画像は商品・サービスの内容が伝わる例

ファーストビューには、商品・サービス内容が明確にわかる画像を使用しましょう。また、独自の強みが伝わるような画像なら、なおのこと良いでしょう。

6. コピーは“ユーザ目線(ベネフィット)”に言い換える

コピーを下記のようなものにしていませんか?

「美容成分を贅沢に配合」「医療機関が開発」「くせになる美味しさ」

……惜しい!
その強みをもうひと段階、ユーザ視点に落とし込めば、さらにユーザの気を惹くことができるでしょう。

ポイントは、その商品の強みによってユーザがどうなるのかを考えてみること。強みの後に「だから」と付け加えてみると、わかりやすいかもしれません。

  • 美容成分を贅沢に配合⇒だから⇒若々しさあふれる肌へ
  • 医療機関が開発⇒だから⇒ハリを実感
  • くせになる美味しさ⇒だから⇒続けられる

7. 数字による権威付けを、王冠やメダルで入れる

ユーザは誰でも購入・お申込みとなると慎重になりますが、安心できる情報があると一気に購入意欲が高まる傾向にあります。ポイントは、「数字」や「メダル・王冠」など。

図9-数字にによる権威付けを、王冠やメダルで入れる

受賞歴や実績などの権威付けは、具体的な数字があるとより信用度がアップします。また、メダル・王冠などの素材を使用することで、すごそう!と瞬間的に思わせることができます。

特に強い権威付けは、「No.1」訴求です。他より優れていると示せるわけですから、No.1と言えるものがあるのならば必ずアピースするべきです。

  • お客様満足度98.7%
  • 会員数50万人突破
  • 創業100年の歴史
  • 人気ランキングNo.1
  • 1秒に10個売れています
  • 美容成分160種類配合
  • 3カ月で-15kg

など

8. ユーザが欲している“マスト情報”を記載する

購入するにあたり、ユーザが欲しているであろう情報は必ず記載するようにしましょう。

▼マスト情報

商品名称 なんのための商品なのか
商品写真 どんな商品なのか(形状や素材、色など、イメージをつかめるもの)
内容量・個数 どのくらいのボリュームで、競合商品と比較したときの量は多いのか
使用期間 “3日間集中パック”や“たっぷり1週間お試し”など、どのくらいの期間使えるか
通常価格 定価よりどれくらいお得で、2回目以降の通常購入がどのくらいなのか(ユーザが2回目以降も買えるかどうかを判断するため)

▼番外編
業界特有のマスト情報もあります。

脱毛業界であれば、「施術可能部位」「選べる箇所数」「施術回数」「利用期限」など。

ユーザが必ずチェックする情報は、TOPに入れるべきでしょう。

9. 購入へのハードルを下げる言葉をお申込みボタンの近くに入れる

購入の一歩手前でまだ迷っているユーザの背中をひと押ししてあげるために、ユーザが購入をするための言い訳が必要です。
 

図10-購入へのハードルを下げる言葉をお申込みボタンの近くに入れる

「今しか買えないならこのタイミングで買わなきゃ!」といった言い訳をユーザは探しているので、「限定」や「割引」などの効果的な情報をお申込みボタンに近接させて入れましょう。

  • 今だけ33%OFF
  • 今なら送料無料
  • 100名様限定
  • 1000円クーポンプレゼント

など

また、「不安を払しょくする安心要素」があると、ユーザはさらに安心してお申込みすることができるでしょう。

  • ユーザ「しつこい勧誘で本契約を迫られるのでは……?」
    「無理な勧誘はいたしません」
  • ユーザ「全く効果がなかったらどうしよう……?」
    「効果がなければ全額返金いたします」

まとめ

ファーストビューだけでも押さえておくべきポイントがたくさんあるので、改善のための見直しにお役立に立てれば幸いです!

ソウルドアウトで運用しているWebマーケティングメディア「LISKUL(リスクル)」では、ランディングページの他にもさまざまなノウハウをお伝えしています。

また、「リスティング広告スタートアップガイド」など、これからリスティング広告を始めていきたい方向けの資料もご用意しておりますので、ご活用ください。

これからも日々の検証で得たランディングページ改善のノウハウをご紹介したいと思います。
それでは、また逢う日まで。

この記事を書いた人

モッチ
モッチ 外部ライター 東京
ソウルドアウト株式会社のクレラップこと、モッチです。
ひとの行動・心理をあれやこれやと考えるのが好きで、それが今、ランディングページ戦略に活きています。
趣味はストイック映画鑑賞。好きなものは、サザンとファンタジーと体育座り。
よろしくどうぞ。弊社メディア「LISKUL」もご贔屓に!