レスポンシブWebデザイン、CSSフレームワークなど、Webフロントエンド開発に関するBLOGです。
※SYMMETRIC公式BLOGと統合し、ブログ名称を変更しました

スマホのランディングページの基本構成

ランディングページは通常のWebサイトのトップページとは異なります。ランディングページは1ページ内で集客したユーザーを特定のアクションへ導くために作り込まれたページになります。これからランディングページを作成する時にどのような構成にすると良いか迷った時に抑えたい基本構成をここにまとめます。

しかも、BtoB向けにも増えてきたスマホ向けのランディングページを想定し、ユーザーが縦一直線にコンテンツを辿ることをイメージした構成とします。

ファーストビュー(キャッチコピー、画像、CVボタン)

検索結果やニュースアプリやSNSなどの広告から最初にランディングした時に表示される領域がファーストビューです。

何よりもこのファーストビューで表示される内容でユーザーの心を掴まないとそれより下を見てくれません。

ファーストビューに構成すべき要素としては以下があります。

キャッチコピー

何と言っても、このランディングページで紹介する商品・サービスの特徴・メリット・ユーザーニーズを示す端的なコピーが重要です。スマホの場合、キャッチコピーを目立たせたいなら長くとも20文字以内におさめた方が良いでしょう。1つ忘れちゃいけないのは、流入前に見た広告のコピーとの関連性が全くないとユーザーは間違ったページに来たと思い込み、離脱に繋がるので気をつけましょう。

メイン画像

スマホの場合、ファーストビュー全面に画像を配置することも多いです。商品であれば、商品画像自体を、サービスであればサービスを連想させるような画像をメイン画像に持ってくると良いでしょう。

コンバージョンボタン

広告からランディングしたばかりのユーザーでも商品・サービス情報を別のチャネルで知った上でLPにランディングするケースもあります。また、「資料請求」などのコンバージョンであれば、キャッチコピーや画像に惹かれて、すぐにアクションを起こしたいユーザーもいます。そういうユーザーを気持ちよくコンバージョンさせるようにファーストビューにはコンバージョンボタンを設けるようにしましょう。

商品・サービスのさらなる訴求

ファーストビューで興味を抱いたユーザーが次に目にするのが商品・サービスのさらなる訴求です。なぜ、ユーザーがさらに下を見ようとしたのかを考え、あなたに向けたサービスですよ!あなたにとってこんなにメリットがありますよ!とユーザーの心を踊らせるような訴求を行います。

このエリアはよく以下の構成で組まれています。

こんなことで困ってませんか?

商品・サービスが解決してくれる悩み事を列挙し、ユーザーの共感を得るようにします。同時に、潜在的なニーズの顕在化を促進します。

〇〇とは?

悩み事を受けて、それを解決する商品・サービスが何であるかを具体的に説明します。

ポイント

その商品・サービスが類似商品と比べてどのような違いがあるかを端的にまとめます。このポイントが多すぎるとコンテンツも長くなるので、多くとも4つぐらいにすると良いでしょう。

疑問と不安の解消エリア

商品やサービスのさらなる訴求を受けて、さらに下へとコンテンツを進めたユーザーには疑問点や不安に思うことを解消するエリアで安心感を提供する必要があります。

商品やサービスを魅力的だと感じても、「本当にここに書いてあることを信じても良いのだろうか?」、「こんな魅力があるなら何か裏があるのではないか?」など慎重になる面があります。

そんな時に設けておくコンテンツとしては以下があります。

お客様の声(事例・実績)

同様のニーズを持ったお客様が実際に商品・サービスを利用した声を記載することで大きな安心感を与えます。売り始めたばかりの商品やサービスであってもテストマーケティングやモニターを実施していれば、その時の内容などをコンテンツにするのも1つです。

FAQ or よくある質問

想定される質問と回答を用意することで、不安要素を取り除けます。具体的な質問から多少抽象的な質問も設け、気になることを少しでも解消できるようにすると良いです。ただ、ここもポイントコンテンツと同様にあまり多くのQAを記載しすぎるのは避けましょう。

会社紹介

お客様の声などが設けられない場合は商品やサービスを提供する会社を紹介することで、安心感を提供します。野菜や果物の製造者の顔表示みたいに担当者や会社の代表の顔写真などが有効な時もあります。

迷いを無くし、アクションへ

ここまで読み進めてくれたユーザーに対しては、次に起こすべきアクションを明確にしたり、この先のフローを提示して迷いを無くすことが大事です。

利用までのフロー

サービスを申し込んでから利用開始するまでのフローを提示したり、「資料請求」や「問い合わせ」をした後にどのような流れで進むのかを提示します。

コンバージョンボタン

実際にユーザーに起こして欲しいアクションをボタンなどにして配置します。フォームを同一のページ内で設ける場合は、入力項目が多くなりすぎないようにしましょう。また、スマホの場合は電話もすぐにできるので、フォーム入力だけでなく電話アクションも行えるように併設しておくと良いでしょう。

まとめ

いかがでしょうか。ランディングページは1ページで完結させるページなので、ユーザーの気持ちになって、コンテンツの順番を決めていくことが大事です。特にスマホ向けLPの場合は上から下に進んでいくので、どのようにユーザーの心境が変化するかを予想しながら、構成していくことが大事です。

弊社では「スマホからLP制作」というランディングページ制作サービスを行っております。上記のような情報単位で、伝えたい内容を箇条書きしていただくと、スマホ向けランディングページのワイヤー構成から制作まで10万円~で出来てしまいます。PC向けランディングページも追加料金なしで提供します。

ランディングページの制作依頼をご検討の方はご参考ください。

Page Top