お問い合わせ

ランディングページのファーストビューを最適化する4つの鉄則【コンバージョン率を上げる】

ランディングページをクリックしても、約90%のユーザーが10秒以内に離脱され、8秒以内にその後も読み進めるか否かを決めるといわれています。

つまりユーザーはランディングページのファーストビューによって、商品の印象を一瞬で判断しているのです。

コンバージョン率を上げるランディングページを作るには、まずファーストビューを効果的なレイアウトに設計する必要があります。

この記事ではランディングページにおけるファーストビューの4つの鉄則を中心に、ファーストビューの重要性や注意点をお伝えします。

ファーストビューとはなにか

ファーストビューとは、ユーザーがWebページや広告、ランディングページなどをアクセスした際、最初に画面に表示される部分を指します。

ユーザーがスクロールせず表示される範囲であり、最初の印象を左右する非常に重要な部分です。

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

一般的にユーザーが広告やランディングページをクリックした場合、8秒以内にその後も読み進めるか判断し、約90%ものユーザーが10秒以内に離脱するとされています。

このようにユーザーは一瞬でランディングページを読み進めるか、閉じるかの判断を行っているのです。容易に離脱されることから、ファーストビューでいかにユーザーの心を掴むかが重要です。

ランディングページのファーストビューの4つの鉄則

レスポンス率が高く効果的なランディングページを作成するために、以下の4つの鉄則を踏まえたファーストビュー作成を心がけましょう。

鉄則①ファーストビューに入れるべき3つの要素

1つ目の鉄則は、ファーストビューには「キャッチコピー・写真・申込アイコン」の3つの要素を必ず入れることです。

過去の【A/Bテスト】の結果を踏まえても、上記3つの要素が入れられたファーストビューは高いコンバージョン率を記録しています。

最近ではおしゃれで自由度の高いファーストビューのページを作成する単品通販(D2C)会社も増え、多様性が広がっています。

しかし何百回も検証を行い、結局は3つの要素を踏まえたファーストビューが、効果が高いという結果が出ているのです。

ファーストビューにはたくさんの要素を詰め込みすぎず、3つの要素に留め、シンプルかつわかりやすい設計を心がけましょう。

鉄則②ファーストビューのレイアウト

2つ目の鉄則は、「キャッチコピー」は左側、「写真」は右側、「申込アイコン」はその下に大きく入れることです。

このレイアウトに設定することで、ユーザーに無理なく自然と商品の魅力を伝えることができます。

またPC・スマートフォン、タブレット、いずれの画面でも適切なレイアウトになっているか、必ず確認するようにしましょう。

鉄則③キャッチコピーと写真を連動させる

3つ目の鉄則は、広告原稿とランディングページにおけるキャッチコピーと写真を連動させることです。

良い広告原稿を作成し高いクリック率を出しても、そこから誘導するランディングページでコンバージョンに繋げられなければ意味がありません。

広告原稿とランディングページを連動させるために、両者でキャッチコピーと写真は統一させましょう。

もし両者で違うキャッチコピーと写真を使用していた場合、お客様は違和感を抱きすぐに離脱してしまいます。

凝った広告原稿やランディングページを作成しようとして、あえて違うキャッチコピーと写真を起用する単品通販(D2C)会社もありますが、逆効果ですので今すぐ統一すべきです。

逆にキャッチコピーと写真が統一されていると、ユーザーは安心して読み進めることができ、コンバージョン率も高められるでしょう。

広告を見てランディングページをクリックしたユーザーの熱量を下げないためにも、見当違いのコンテンツで冷めさせないように注意してください。

さらに付け加えると、キャッチコピーや写真だけでなく、ボディコピー(本文)もキャッチコピーごとに合わせて調節をする方が効果的です。

複数のキャッチコピーや写真で広告を出稿した場合、その広告原稿と同じ種類だけキャッチコピーと写真を連動させたランディングページを作成しましょう。

関連記事:クリエイティブの作り方【最適化してクリック率を上げる】

鉄則④申込アイコン

4つ目の鉄則は、申込アイコンの色や動きを工夫することです。

意外と軽視されがちな申込アイコンですが、実際にユーザーが申込アイコンをクリックしないとコンバージョンは発生しないことから重要な要素です。

また申込アイコンといえば、注目させる効果を狙ってか「赤色」を使用する単品通販(D2C)会社が目立ちます。

しかし過去の【A/Bテスト】の結果を踏まえると、申込アイコンの色は「緑色」にする方が高いコンバージョン率となるという結果が出ています。また世界規模の調査でも「緑色」のアイコンが効果的であるという結果が出ています。

さらに申込アイコンにプルンプルンと動きをつけると、大幅にコンバージョン率を高められました。ランディングページでは、申込アイコンに思いっきり自己主張させる方が注目されやすく効果的です。

またユーザーが申込アイコンをマウスオーバー(カーソルを合わせた画像やファイルがリンクであることを知らせる視覚効果)した際に音が鳴る、申込アイコンが拡大するといった工夫をすると、より効果を実感できるでしょう。

このように申込アイコン1つとっても、色や動きで大幅にコンバージョン率が変化するため、ぜひ取り入れてみてください。

関連記事:CTAボタンとは?クリック率を上げてコンバージョン率アップ

ランディングページのファーストビューを設計する注意点

ファーストビューのレイアウトを作成する上では、とにかく一瞬でユーザーの心を掴む必要があります。

広告をクリックしても、90%のユーザーは10秒以内に離脱してしまいます。これだけたくさんの情報が溢れる中で、ユーザーは自分に関係がないものと判断すると一瞬で離脱し、その後再訪することはほとんどないでしょう。

そんな中離脱するユーザーを減らし、コンバージョン率を高めるには、ファーストビューはシンプルかつわかりやすく、ユーザーが自分事として捉えられやすいレイアウトに設計するのがポイントです。

ユーザーに「自分にとって必要であり有益な情報が載っている」と感じてもらえるよう、ファーストビューの設計を心がけましょう。

またファーストビューが表示されるまでの時間についても配慮が必要です。

たしかに申込アイコンに動きをつけるなど、ある程度の工夫は効果的です。しかしデータが重すぎてそもそも表示されない、遅すぎる場合、ユーザー側にとってストレスになり、すぐに閉じられてしまいます。

こうした機会損失を生じさせないためにも、あまりデータが重くなりすぎないように気を付けてください。

まとめ:ランディングページのファーストビューを改善してコンバージョン率アップ

これまでランディングページにおけるファーストビューの4つの鉄則を中心に、ファーストビューの重要性や注意点をお伝えしました。

ユーザーはランディングページのファーストビューによって、商品の印象を一瞬で判断しているからこそ、ファーストビュー設計はランディングページ作成の中核だといえます。

コンバージョン率を上げるランディングページを作るためにも、まずは今回お伝えした鉄則を参考にしてファーストビューを効果的なレイアウトに設計しましょう。

フォームに必要事項をご記入していただくと、
無料で資料請求が可能です。

必須項目が10項目あります。
残り9項目
ご希望のノウハウ資料 (必須)




会社名 (必須)
【全角】 例)株式会社売れるネット広告社
ご担当者名 (必須) 姓:
名:
【全角】 例)加藤 公一レオ
ふりがな (必須) せい:
めい:
【全角】 例)かとう こういちれお
所在地 (必須)
【選択形式】 例)東京都
電話番号 (必須) -
-

【半角数字】 例)092-000-0000
メールアドレス (必須)
【半角英数】 例)info@ureru.co.jp

メールアドレスに誤りがありますと、お客様にメールが届きません。今一度ご確認ください。

メールアドレス(確認) (必須)

【半角英数】 例)info@ureru.co.jp

メールアドレスに誤りがありますと、お客様にメールが届きません。今一度ご確認ください。

個人情報の取扱いについて (必須)
(必須)
必須項目を入力してください。