ランディングページは、ユーザーが最初に目にするパーツとなる”ファーストビュー”がとにかく大事です。ページを読み進めるかどうかは、ファーストビューを見てから3秒で決まるとも言われています。
この記事では、ランディングページ制作成否の鍵を握ると言っても過言ではない、ファーストビューの重要性や制作の際のコツをご紹介します。ぜひ、成果につながるランディングページ作りの参考にしてください。
この記事を読んだらわかること
・ファーストビューの10個のポイント
・参考になるファーストビューデザイン
ランディングページは、企画構成が重要で、これを怠ると思うような結果は出ません。
我々は数多くの制作実績から蓄積された経験と企画構成力で商材に合わせた売れるためのランディングページを提案できますので、お気軽にご相談ください！
ファーストビューとは？サイズ感も解説
ファーストビューとはユーザーがホームページにアクセスした際、最初に目にする冒頭画面のことで、スクロールなどの操作なく見渡せる一面を指します。画面サイズ的にはパソコンの場合なら縦600～700px横1,000～1,200px、スマートフォンサイズなら縦1,200px横720pxが標準的です。
ファーストビューが重要な理由
ユーザーは、ランディングページのファーストビューを一見しただけで7割ほどが離脱してしまいます。直帰率70%超えとなると、ランディングページ制作で気にかけるべきなのは、いかにファーストビューで離脱されないかです。
ユーザーがファーストビューの先を読みみたいと思うようなコピーやデザインで関心を引くことで、コンバージョンにつながる可能性が高まります。
ファーストビューにおける10つのポイント
ランディングページにおけるファーストビューの重要性をご理解いただいたところで、ここではファーストビュー作りで押さえておきたい10つのポイントをご紹介します。具体的な手法やデザイン面での工夫など実践レベルのコツばかり登場しますので、ぜひお役立てください。
ファーストビューのコピーに検索キーワードを入れる
ランディングページは、基本的にリスティング広告・ネイティブ広告などが流入経路となっています。つまり、ユーザーはそもそもあるキーワードを検索し、その結果表示された広告コピーを読み、気になればランディングページへ訪れるということになります、
せっかくキーワード検索した中から選んだサイトのファーストビューで、そのキーワードが見当たらなかったら、ユーザーは離脱するでしょう。そのため、ファーストビューのコピー内には絶対に検索キーワードを入れなければいけません。
申し込みボタンをファーストビューの範囲内に入れる
コンバージョンボタンはランディングページの下方にあるイメージですが、ターゲットユーザーの心理を考えれば、ファーストビューにも設置するのが有効です。広告から流入してくるユーザーは、商品に対してすでに並々ならぬ関心を持っているケースも少なくないため、サイト訪問後の初期段階で申し込みボタンをクリックすることも考えられます。
このような絶好のチャンスでコンバージョンへの動線がないと、せっかくの良機を逃しかねません。ファーストビューでコンバージョンに達するユーザーが多数派ではないにしても、可能性がある以上は必ず申し込みボタンを設置しておくようにしましょう。
申し込みボタンを周囲と比べて目立つ色にする
ファーストビューに限りませんが、申し込みボタンの色は目立つものを選びましょう。大きさやコピーも重要ですが、ユーザーがファーストビューをざっと見回す時間は長くはありません。人目を引くカラーを選択するようにしましょう。ランディングページは他のホームページに比べてデザインが凝っていたりカラーが派手だったりするので、熟慮して色選定を行うべきです。
ただし、目立つだけで配色バランスが悪いとセンスのない感じになってしまいかねないため、サイト全体の基調やメインカラーなどとの相性も考慮に入れる必要があります。
申し込みボタンはクリックできそうなデザインにする
申し込みボタンは、グラデーションカラーを使った浮き出て見えるような立体的デザインのものや、丸みを帯びた形のものなど、クリックしたくなるようなデザインがおすすです。また、ボタン上にはコピー以外にも矢印などをあしらうのも効果的です。一目でコンバージョンボタンが分かるデザインだと、ユーザーにも余計なストレスをかけずに済みます。
申し込みボタンは1つに絞る
商品の種類や購入方法など、推したい買い方はいろいろあるとは思いますが、ユーザー側は混乱や迷いが生じると、全部やめてしまおうという心理に陥りかねません。申し込みボタンという意味では、選択肢が少ない方が迷わずボタンを押せる傾向にあります。
したがって、ボタンの種類は1つに絞って設置すると効果的です。どうしても2つ設置する必要がある場合には、優先度の高いものをより目立つデザインにするよう心がけましょう。
TOP画像は商品・サービスの内容が伝わるものを使用する
ファーストビューの中でも最も目立つのがトップ画像です。
この画像は、商品のイメージが伝わりやすい画像を選び、ターゲットユーザーが商品に対して違和感ないものを選ぶと良いでしょう。
ただ、極端な例ですが、女性向けの商品ページなのに男性的なイメージの画像が目に飛び込んでいたら、大抵のユーザーは”場違い”と感じて離脱してしまうはずです。同じ商材画像でも、『自分が留まって良いサイト』であると感じてもらえるよう、ターゲット層の性別や年齢層などをしっかり考慮したものを使わなければなりません。
コピーはベネフィットを伝えるものにする
ファーストビューで使うコピーはきわめて重要です。単純にアピールポイントを文章化するだけでは、ユーザーは商品を購入した後のメリットを瞬時にイメージできませんが、この問題はコピー内にベネフィットを盛り込むことで解消できます。
ベネフィットとはユーザーが商品購入後に手に入れる物心両面のメリットで、特にメンタルの部分が重要とされています。具体例を挙げてみましょう。
・シミを緩和する成分○○を配合→有効成分○○の働きで5歳若見え肌
・業界初素材で見た目の良さと履き心地を実現→スリムなシルエットなのに履き心地ラクラク
事実だけを述べるのではなく、『購入して役立てる副産物的な何かがある』、『これまで苦労していた部分が解決する』といった具体性をイメージできるコピーが大切です。
数字による権威づけを入れる
ランディングページで扱っている商品が世間的にどのような評価を受けているかをユーザーは気にします。多くの人に支持されていたり、効果について専門家が太鼓判を押していたりすると、見た人は安心して購入意欲を持つようになるのです。メディアへの掲載実績や受賞歴なども大きな安心要素となり得ます。具体的な表記例を挙げてみましょう。
・9年連続△△賞受賞！
・□□ランキング13週連続トップ1！
・月刊誌全5誌掲載で大反響
・累計販売数15,000個突破！
数字は大雑把で切りの良いものよりも、なるべく具体的でリアリティのあるものがベター。さらに、受賞歴があるならそれが一目でわかる装飾を数字に加えるなどしても効果的です。
ユーザーが欲しているマスト情報を記載する
ファーストビューではアイキャッチになるような要素にばかり目が行ってしまい、意外と忘れがちなのが基本的な商品情報です。商品名・商品画像はもちろん、使用量や使用期間、キャンペーン価格並びに定価など、マスト情報は必ず掲載するようにしましょう。
商材のジャンルによって何がマストなのかは変わるので、数量・内容量・サイズなどの掲載が必須となる場合は、そのような数字的情報も忘れずに入れ込むよう注意が必要です。
購入へのハードルを下げる言葉を申し込みボタンの近くに入れる
購入ボタンだけがポツンとある場合、ユーザーにとってはそれをクリックするハードルが高まる場合もあります。例えば実店舗でショップ店員が『今だけこの価格なんですよ』と一言添えるのと同じように、申し込みボタンの近くに『期間限定価格○○円』『先着○名様まで』など、今購入する気持ちにさせる文言を添えておくと効果的です。
リリース後にすぐに運用できる体制を整えましょう。
ZERO式ランディングページ制作はこちら
参考になるファーストビューデザイン
ランディングページではファーストビューがきわめて大事であることをここまで解説してきましたが、ここではファーストビューを効果的に制作している具体的な好例をご紹介していきます。BtoB向けやBtoC向けなど、さまざまなターゲット層を対象としたものの中からピックアップしました。それぞれどのようにしてターゲットユーザー層に訴求しているかに注目してご覧くださいね。
リンクス（ネット風評対策）
https://rinkus.jp/
まず目に飛び込んでくるのが『ネガティブな情報を非表示』『依頼してよかった』『顧客満足度99%』といったコピーの数々。受けられるサービスや権威付けのための数字など、一目でユーザーを安心させてしまう要素を全てファーストビューに盛り込んでいます。
また、切羽詰まったユーザーが早速入力したくなる無料相談フォームがファーストビューに写り込んでおり、成功するファーストビューのお手本のような仕上がりが印象的。成果報酬プランなら成果がない場合は費用がないという表示も、問い合わせのハードルを下げる良案です。
アーク（害虫駆除）
https://pest.service-ark.com/
害虫駆除専門業者さんのランディングページですが、こちらのファーストビューでは、どのような害虫に対応でき、どのようなお得なポイントがある会社なのかが一目瞭然となっています。
また、対応エリアも明示し、無料相談ボタンや電話番号も目立つカラーで配されており、害虫で困っている人であれば、ファーストビューだけで事足りてしまいます。
ターゲット層も家庭の主婦であることが容易に想像され、非常にコンセプトが明確なサイトとなっています。
ダンゴネット（賃貸管理ソフト）
https://www.dangonet.co.jp/lp/chintai_meijin/
操作の簡便性が一番のアピールポイントだということが伝わってくるソフトウェアのランディングページです。商品名・サービス内容が盛り込まれているほか、販売実績やメディアでの紹介例など権威付けもばっちり。売れるランディングページの王道のような内容となっています。
ビジネスライクなデザインや基調が堅実な印象をもたらしているほか、コンバージョンボタンには『簡単1分資料請求』のコピーをつけて申し込みへのハードルをしっかり下げている点にも要注目です。
ミライホワイト（女性向け美白サプリ）
https://www.miraiwhite.jp/
『取り戻す肌本来の透明感』というコピーでベネフィットとともにターゲット層を明確にしているのが印象的です。特別価格による販売実施もファーストビューだけでお知らせできているほか、デザイン違いで2ヶ所に申し込みボタンを配し、ユーザーがボタンを押すのをためらわせない工夫が見られます。
『話題の美白サプリ』と商品内容もさりげなくおさらいしたうえで、アピールしたい成分の含有量を具体的な数字で明示し目立たせている点も参考になります。清潔感のあるデザインがお肌の曲がり角に悩む女性からいかにも支持されそうです。
まとめ：ファーストビューはLPの中で最も重要な箇所
ランディングページの顔であるファーストビューは、そのパーツだけでもコンバージョンに関わる重要な箇所であることがおわかりいただけたでしょうか？
狙ったターゲット層に好印象を抱かせるデザイン、必要十分な情報、信頼感を与える権威付けや実績アピールなど、盛り込みたい情報もいろいろありましたね。ファーストビューからコンバージョンボタンを設置しておくのも重要なポイントです。今回お伝えしたポイントを、ぜひ売りたい商材のランディングページ制作に生かしてください！
この記事のおさらいポイント
・ファーストビューには検索キーワード、申し込みボタンを入れる
・ファーストビューの申し込みボタンは目立つ色、クリックできそうなデザイン、1つに絞る
・ファーストビューは、サービスの内容が明確でコピーはベネフィットを伝える
・権威付があるとユーザーは安心する
ランディングページは、企画構成が重要で、これを怠ると思うような結果は出ません。
我々は数多くの制作実績から蓄積された経験と企画構成力で商材に合わせた売れるためのランディングページを提案できますので、お気軽にご相談ください！
