ランディングページの順番と必須要素を徹底解説！

ユーザーへの訴求力が高いランディングページですが、一般的なサイトのWebページとは作り方が異なります。

本記事では「ランディングページの具体的な作り方を知りたい」という担当者さんに向けて、ランディングページに必要な要素と具体的な作成方法を紹介していきます。

内製・外注で迷っている人もぜひ参考にしてください。

ランディングページに必要な要素を、ページ上部から順に並べると下記のようになります。

以下にてくわしく解説します。

ユーザーが持つ悩みや課題を冒頭に記載することで、「自分が持っている悩みだ」「いまの自分の課題だ」などといった共感を生み、ユーザー自らがLPに書かれている内容を自分事化します。

ユーザーが自分事化することで、下までスクロールしてくれる可能性が一気に高くなるのです。逆に、冒頭の悩みや課題がユーザーと一致していない場合は、離脱率の上昇につながってしまいます。

そのため、悩み・課題を記載する際は、ターゲットの調査をしっかりと行い「どういった悩みや課題を持っているのか」を明確にしておく必要があります。

たとえば、水素商品をLP上で販売する場合、ターゲットは下記のような悩みを抱えているかもしれません。

どういった商品を売るかによって、記載するべき悩みや課題は異なりますので、あくまでも参考程度に見てください。

CTAボタンとは、Call To Action(コール トゥ アクション)の略で「行動喚起」と訳されます。ランディングページでは、ユーザーに行動を促すためのボタンという意味で使用されることが多いです。ネットサーフィンをしていて「登録はこちら」「問い合わせはこちら」といったCTAボタンを見たことがある人も多いのではないでしょうか。

また、CTAボタンは基本的にクロージングとして使用されるため、ページの最下部付近に設置することが多いですが、中盤に設置するケースもあります。この場合は、中盤付近で「購入したい」と思ったユーザーを逃がさないために設置することが多いです。

ユーザーを逃がさないためには設置する箇所も大切ですが、ボタンに記載する文言も重要になります。たとえばボタンをユーザー視点での動詞にすることで自分事と感じてくれるため、クリック率が高くなります。

加えて、CTAボタンを設置する際は、ランディングページに馴染みすぎないようにすこし目立たせることが大切です。ランディングページに馴染みすぎるとボタンがどこにあるか分かりにくくなり、ユーザーにストレスを与えてしまう可能性があるためです。ユーザーにストレスを与えてしまうと離脱率の上昇につながりやすくなるため注意しましょう。

悩みや課題と同じように、共感を入れることでユーザーの離脱率をおさえることが可能です。

ユーザーはページを読み進めていく中で、必ず何かの疑問を抱きます。ユーザーの疑問をそのままにしてしまうと最終的に購入にはつながりにくくなってしまうでしょう。そこで重要なのが共感です。

共感を入れることで、ユーザーは「そう！それについて知りたい！」「この疑問が解決されるなら購入したい」などと思い、ページを下にスクロールしてくれやすくなります。

共感パートを設置したあとに疑問を解決することで、ユーザーの「自分が求めていた商品だ」という思いを加速させることができるのです。なお、こういった画像に使用する文字は、できるだけ目立ちやすい色を使用しましょう。

ベネフィットとは、自社が提供する商品やサービスによって得られる効果や利益です。メリットと混同してしまいがちですが、厳密にいうと異なります。

ベネフィットとメリットのちがいについて、先ほどの水素商品の例でみてみましょう。

まずはメリットです。

これらが水素商品を購入するメリットだとした場合、ベネフィットは下記のようになります。

ご覧のとおり、メリットはその商品の特徴を述べているのに対し、ベネフィットでは「商品を購入することでどういった変化があるのか」を述べていることが分かります。

ユーザーに購入後のイメージを植え付けることを意識するとよいでしょう。

お得感の強いベネフィットを紹介することで、「何か裏があるのではないか？」と考えるユーザーもいるでしょう。

「本当に効果があるのか」「注文したら別の商品が届くのではないか」など、マイナス面を考慮するのが人の心理です。

とくに情報リテラシーが上がっている昨今の日本人ならば当然だといえるでしょう。実際、皆さんもAmazonで商品を購入する際、必ずといってよいほど口コミを見ているのではないでしょうか。まさに、そのAmazonの口コミにあたる部分が事例紹介です。

事例紹介とは、すでに商品・サービスを利用した個人や法人の声などをランディングページに掲載することです。実際に購入した人の声をコンテンツとして掲載することで、ランディングページの信ぴょう性を上げることができ、ユーザーに安心感を与えられます。

ただし、自作した口コミはユーザーにバレる可能性が高いので注意してください。先ほども述べたとおり、昨今のユーザーは情報リテラシーが高いためです。口コミを使用する際は客観的にみて、リアリティの高い情報を提示する必要があります。

商品の詳細を知るにつれ、次にユーザーが気になるのはサービス活用までの流れです。

具体的には「購入後すぐに活用できるのか」「商品はどういった手順で使うのか」「操作は難しくないか」などといった疑問を抱きます。

そのため、ランディングページ内で商品やサービスを活用するまでの流れを簡潔に説明しましょう。取扱説明書のようにくわしく書きすぎると「難しいのでは」という印象を与えてしまうため、できるだけ分かりやすくまとめるようにしてください。

ランディングページを作成する際の手順は下記のとおりです。

手順ごとにくわしく解説していきます。これからランディングページの作成を検討している人は、ぜひ参考にしてください。

まずはランディングページの目的を明確にしましょう。

具体的な例は下記のとおりです。

目的を設定する前に考えておきたいのが心理的ハードルについてです。資料請求やお問い合わせなどは、心理的はハードルが低いためコンバージョンしやすい傾向にありますが、商品の購入や会員登録などは心理的ハードルが高いためコンバージョンしにくいです。

そのため、顧客育成を前提にするのであれば、商品購入ではなく「メルマガ登録」「資料請求」などを目的にしてもよいでしょう。ただその場合、顧客育成のフローを考える必要があるため注意してください。

目的が決まったあとはターゲットを絞りましょう。ターゲットを絞る方法はたくさんありますが、基本的にはペルソナを設定します。

ペルソナとは、自社のターゲット像を具体的に書き起こしたひとりの人物像です。「家族構成」「年収」「趣味」など、ひとりの人物が目に浮かぶレベルまで詳細に設定します。

なお、ペルソナを設定する際は、自社にとって理想的な人物像にならないように注意してください。

たとえば、水素商品を取り扱う場合「良い水素商品が見つからなくて困っている」「水素商品に興味をもっている」などと設定するのはNGです。TwitterやInstagramなどでしっかりとリサーチを行い、自社のターゲット像を明確にしていきましょう。

ペルソナの設定を行ったら、構成の作成を始めます。

構成を作成する際は、先ほど紹介した「ランディングページに必要な要素」を参考にしてください。また販売する商品やサービスによっては下記の要素を組み込みましょう。

もちろん、すべての要素を入れる必要は全くありません。構成を作成する際のポイントは「どの順番にすれば商品・サービスの魅力が伝わりやすいか」にあるためです。

一度構成を作成したらユーザーの立場に立ってページ上部から順番に見てみましょう。不要だと感じた要素は削除し、逆に説明不足だと感じた場合は要素を追加するなどして全体を調整します。

ランディングページの構成については下記の記事にて詳しく紹介しておりますので、あわせてご覧ください。

構成が決まったらコンテンツ（本文）の作成を始めます。

「どこに画像を挿入するか」「どういったキャッチコピーを入れるか」などを決め、コンテンツ作りを進めます。

とくに、ファーストビュー離脱率に大きく影響するため、どういったコンテンツを配置するかは重要です。画像とキャッチコピーを掛け合わすなどして、インパクトにあるファーストビューを考えましょう。

コンテンツを作成する際のポイントは下記のような点にもあります。

ランディングページは、サクサク読める内容が好まれるため、画像ベースにするのもポイントの一つです。

次にデザインを設定していきます。

デザインをする際のポイントは下記のとおりです。

また、ランディングページはPCで作ることが多いかと思いますが、プレビューなどを利用してスマートフォンでの見た目に気を使うことが大切です。「PCではキレイに見えるのにスマートフォンではキレイに表示されていない」といった現象はよくあるため、必ずチェックするようにしましょう。

コーディングとは、作成したコンテンツをWeb上に公開するのに必要な作業で、コーダーやエンジニアが行います。

コーディングの際に、ランディングページのURLやお問い合わせ先のメールアドレスなども設定しましょう。なお、WordPressなどのCMSでランディングページを作る場合、コーディングは不要です。

自社にコーダーやエンジニアがいない場合は、制作会社に外注するのが一般的ですが、当然費用が発生するため慎重に検討しましょう。

また、自社にエンジニアがいなくても、LP作成ツールやWordPressを利用することでランディングページを作成することも可能です。しかし、コンバージョンを獲得できるランディングページを作るためには、キャッチコピーを考えるスキルやライティング力が必須になります。

自社で対応が難しい場合は一度制作会社に相談してみましょう。

ランディングページのコーディングについては下記の記事にて詳しく紹介しておりますので、あわせてご覧ください。

コンテンツの作成が完了したら、テストアップを行います。

テストアップの段階で下記をチェックしておきましょう。

ランディングページは、基本的にGoogleからの評価を気にする必要がありませんが、リンクや画像の不備はユーザビリティの低下につながるため必ずチェックしておきましょう。

テストアップで不備がないかを確認したら、いよいよページを公開します。

公開したあともテストアップで確認した項目を確認しておきましょう。前述のとおり、ランディングページは基本的にGoogleからの評価を気にする必要がないため、公開後であっても焦らずに修正してください。

問題がなければWeb広告やSNS広告と同期します。同期が完了したあとは、広告媒体でもしっかり確認しましょう。

ランディングページは、コンテンツ作成と同じくらい効果検証と改善が重要になります。

とくに、さまざまな広告がWeb上に溢れている昨今においては、いかにスピーディーな検証と修正ができるかが成功のカギを握っています。検証や改善にもノウハウがあるため、不安な人は制作会社への外注を検討しましょう。

公開したランディングページを効果検証するためには、Googleアナリティクス、Googleサーチコンソール、ヒートマップなどといったツールとの同期が欠かせません。

ランディングページを運用しながらツールを確認し、CVRの低下につながっていると感じた箇所は迅速に修正します。同時に、広告面の効果検証やABテストも行わなければなりません。

また、改善と調整を重ねていくなかで良好な変化があった場合は自社のノウハウとして書き留めてくとよいです。

ランディングページを作成する際の注意点は下記のとおりです。

上記の3点は、ランディングページでユーザーをコンバージョンにつなげるための重要ポイントとなっています。以下にてくわしく見ていきましょう。

CVRを向上させるためには、魅力的なファーストビューが重要になります。

ただその前に「広告とファーストビューの整合性をとる」という最低限のチェックは行っておきましょう。ランディングページの流入元である広告と整合性がとれてないファーストビューになっていると、ページの離脱率が上昇してしまうためです。

ファーストビューと広告の整合性がとれたら、ターゲットが下へスクロールしたくなるような魅力的なキャッチコピーを作成しましょう。

ランディングページの構成は、ユーザーの行動を考えながら作成する必要があります。

一般的なホームページであれば、サイドバーやページ内リンクがあるため、回遊率の上昇を目指します。しかし、ランディングページは基本的に1カラムであるため、下へのスクロールが前提です。そのため、下へ物語を作るようにして構成を作る必要があります。

したがって、ランディングページでは、ユーザーが読み進めていくなかで抱く疑問や不安などを解消するような構成作りが求められます。

CVポイント（コンバージョンにつなげたい箇所）は、目立つ場所に配置しましょう。

なぜなら、ユーザーが「購入したい」と思っても購入ボタンが目立つ位置になければ、CVを逃してしまう可能性があるためです。

また、CVポイントは基本的に3カ所あることを覚えておきましょう。「ファーストビュー下」「ページ中盤」「ページ終盤」の3カ所です。

ファーストビュー下のCVポイントは、広告を見て購入したいと思ったユーザーのCVを促したい際に用います。

ランディングページは、一般的なサイトの記事より訴求力が高いため、売上拡大のきっかけなる可能性を多分に秘めています。広告との相性が良ければ数十倍の売上増加につながることもあるでしょう。

とはいえ、専門性が高い分野ということもあり、分からないことも多いかと思いますので、まずはお気軽にご相談ください。