ランディングページ(LP)とは？構成の作り方や作成手順、おすすめの便利ツールまとめ

ランディングページ(LP)は、企業の売上を左右しかねないほどに大切なWebマーケティング手段です。

そんなランディングページの成功のカギを握るのは、ズバリ「構成」です。では、売れるランディングページとは一体どのような構成なのでしょうか。

今回の記事ではそんな悩みを解決するためにも、売れるランディングページの構成の作り方について記載します。

ランディングページとは、一体どのようなページなのでしょうか？ランディングページについては、ここでは以下の2つにまとめ紹介します。

ランディングページとは、商品やサービスに特化した紹介ページのことです。余計なリンクやコンテンツを取り除き、コンバージョンへスムーズにつながるように作られています。

Webサイトにはさまざまな種類がありますが、ランディングページはなかでも最もページ数が少なく、縦長のページになっています。

ランディングページでは企業がユーザーに訴求したい商品やサービスの訴求に特化しています。

ランディングページは、広告施策用に作ることが多く、各広告媒体からの遷移先として利用されます。

もちろん検索エンジンからの自然流入もありますが、広告を経由して訪問されることが多いです。その理由は、自然流入は短期的な結果を出すことが難しいからです。

その為、SEOをあまり気にせず多くの画像や動画などを使用し、コンテンツを作成していきます。

検索エンジンから大量のアクセスを集めるためには、SEO対策をおこなわなければなりません。しかしSEOで上位表示を目指して結果を出すにはサイト構造を工夫し、検索キーワードを盛り込むなどさまざまな工夫が必要です。

一方、広告を利用すれば、自然流入よりも簡単に上位表示が可能になります。

コストはかかりますが、短期的に結果を出すことができるので、アクセスを集めてユーザーに訴求することが可能なのです。 ランディングページの最大の目的は、購入や問い合わせにつなげることです。

ランディングページでは、商品やサービスの魅力についてダイレクトに訴求できます。そこでページに購入や問い合わせのためのボタンを設置しておきましょう。

広告を経由したユーザーが商品やサービスに魅力を感じたら、そのまま購入まで誘導できます。

ここでは、ランディングページの構成での基礎的な考え方を紹介します。ランディングページの構成で大切なことは以下の3点です。

ランディングページの構成で大切なことはストーリー性です。

ストーリー性を重要視するのであれば、「起･承･転・結」を意識した構成が大切だと思われがちです。もちろん「起･承･転・結」の構成でランディングページを制作している企業も数多くいるでしょう。

しかし、実は「起･承･転・結」ではユーザーにアプローチしにくいため、ランディングページの構成では良しとされていません。では、ランディングページではどのような構成が求められているのでしょうか？

それは「結･起･承･転」の構成です。

ランディングページの構成で「結･起･承･転」のように結論を頭に持ってくる理由は、導入部分でユーザーの疑問点にアプローチできるからです。

たとえば、ダイエットをしたいと考えるユーザーに向けたランディングページを構成したとしましょう。以下のような「起・承・転・結」の構成にするとします。

この構成ではユーザーが10キロ痩せたという効果を知るまでに、ページの一番下まで読み切る必要があります。

しかし、これでは導入部分のアプローチが弱くてユーザーが離脱してしまうでしょう。そのため、ランディングページの構成では導入部分でユーザーの心を掴むために、「結論」を頭に持ってくる方法が効果的です。

結論を頭に持ってくれば「ある方法で10キロ痩せた」という事実がユーザーにまず届きますので、思わず読み進めたくなるユーザーも増えます。ランディングページの滞在時間を増やしてCVR(コンバージョン率)やCTA(行動喚起)を上げるためにも、「結･起･承･転」の構成がランディングページでは大切です。

ランディングページに訪れるユーザーは、ぼんやりとした目的で訪れている場合が多いでしょう。そのようなユーザーに対して淡々と商品の紹介をしているだけでは、商品に興味が湧きません。

その曖昧な心理状態であるユーザーにアプローチするためには、ストーリー性のあるランディングページが効果的です。ストーリーさえ成り立っていれば、次が気になって読み進めるユーザーも増えます。

結果的にランディングページのCVRやCTAが上がる可能性が高まるでしょう。

ランディングページにユーザーが訪れる際には、そのページに何かしらの効果を期待しています。そのようなユーザーに対しては、具体的な数値を提示してあげるのが効果的です。

例えば、先ほどのダイエットをしたいと考えるユーザーのためのランディングページを例に考えてみましょう。

結論を頭に持ってきたとして、「10キロ痩せました」と記載されているのと「お腹周りがすっきりしました」と記載されているのではどちらが魅力的でしょうか？多くの場合は前者の方が魅力的だと感じるユーザーが多いはずです。

このように具体的な結論を提示してあげると、ユーザーはランディングページのメリットを実感しやすくなります。すると続きが気になり、ランディングページの滞在時間も増えていくという仕組みです。

ここでは実際の構成作りに役立つランディングページの基本構成を紹介します。 ランディングページの構成には、3つの構成に分類することができます。

それぞれの構成に盛り込むべき詳細がありますので、1つずつ紹介をしていきます。

ファーストビューには下記の4つが重要なポイントとなります。

ランディングページに訪問者した人が、ファーストビューで離脱する割合は、業種や商材により異なりますが、70%以上とも言われています。

離脱するかしないかは、たった3秒で判断しています。この3秒以内にターゲットの興味・関心をしっかりと掴まないとなりません。

そのためにキャッチコピーでターゲットが求めていることを的確に表現し、表現方法も工夫する必要があります。他社と類似していたり、ありきたりのキャッチコピーでは、興味・関心を持たせる力は弱いです。

また、アイキャッチとなる画像や動画で、「シズル」を表現できるかどうかも重要です。シズルとはもともと「肉がジュージューと音を立てて焼ける」という意味で、マーケティングにおいてはその商品やサービスの特に優れた質感・体感にフォーカスを当て、強調して表現することの意味として使われています。

画像や動画では、そのシズルを上手く表現するのが良いです。そして、動画やGIF画像など動きがある方がファーストビュー離脱率は下がります。

またどんなに魅力的なキャッチコピーやアイキャッチを表現したとしても、ターゲットは完全には信用をしません。

信用するには、権威付け・裏付けが必要になります。そのため、商品・サービスの権威付けもファーストビューに盛り込みましょう。

そして、いつでもすぐにアクションができるCTAボタンもあると良いです。

ボディに必要なものは下記の5つです。

ここで最も重要になってくるのは、「共感」です。共感があるかないかで、そのまま読み進めるかどうかに大きく差がでます。

ターゲットの悩みや課題を記載しましょう。ページ書かれている悩み・課題の提起が、ターゲットが持つものと同じであれば、ターゲットはより心を開き、ランディングページを読み込んでいきます。

その上で、悩みや課題の解決に、この商品・サービスがどれだけ適しているかを特徴を交えて伝えていきましょう。

そして、ターゲットが得られるベネフィットをピンポイントで説明します。ベネフィットとは、ターゲットが商品・サービスを通じて得られる利益・価値のことを指します。

ファーストビューのキャッチコピーやアイコン画像も、ベネフィットをベースにして作っていきますが、ボディ部分では、詳細を簡潔に伝えていきましょう。

次に、エビデンス、お客様の声、メディア紹介を掲載していきます。これらは、商品・サービスがもたらすベネフィットを裏付けるものとなります。

ターゲットは、必ず第三者の視点や評価を確認し、発信者情報の信ぴょう性を計ります。発信者の情報と、第三者の視点や評価のギャップが大きければ、信用性は逆に大きく下がることになります。

最後にクロージングです。

クロージングでは「差別化」がポイントになります。

想定しているターゲット（Customer）、競合サイト（Competitor）を分析し、自社（Company）のベネフィットと差別化ポイントを明確化します。

そして、この商品・サービスが、競合と比べてどのように優れているかという点と、この商品・サービスだからこそターゲットの悩み・課題が解決できるということを、しっかりと伝えていきましょう。

また、商品・サービスの導入前に、さまざまな疑問が出てきます。よくある質問と導入の流れを掲載し、疑問を無くしていくことが大切です。疑問が残ると購入を躊躇してしまいます。

更に、できれば保証やお試しを用意すると良いでしょう。返金保証や、期間限定無料、初回割引などを用意すると、ターゲットは安心をし、リスクも軽減できるので、決断をしやすくなります。

あとは、CTAをわかりやすく目立つように、色とサイズを考えて表示しましょう。アニメーションを使い動きを与えると、クリック率が高くなります。

ランディングページの構成を作るにあたって、そもそもどのように進めていけば良いのか分からないと悩む方は少なくありません。
ここからは、ランディングページの構成を作る手順について、具体的に解説していきます。

ランディングページの構成を作成する際、まずはターゲットと目的を明確にしましょう。そもそも誰に向けたランディングページなのか（例：30代女性／転職希望者）、そのページで何をしてもらいたいのか（例：無料相談の申込、資料請求）などが分からないと、サイトの制作を進められません。

実際、ターゲットや目的が漠然としていると、サイトのメッセージ性やデザインがぶれてしまい、どのユーザーからも反響を得られなくなってしまいます。結果的に、コンバージョンにもつながりにくくなるでしょう。

チームで作成する場合は、目的とターゲット像を共有し、全体の方向性を統一しておくことが重要です。

ターゲット及び目的を明確にしたら、ペルソナ（ユーザー像）を設定し、カスタマージャーニー（行動の流れ）を整理します。

たとえば、ペルソナであれば「40代男性」「地方在住」「転職活動中」といった詳細な部分まで設定してください。カスタマージャーニーは、「転職に悩む → ネット検索 → ランディングページを閲覧 → 安心感を得て無料相談申込」のような、行動を可視化します。

ペルソナやカスタマージャーニーをきちんと設定・整理することで、どのタイミングで何を伝えるべきかが明確になり、反響を得やすい構成を作れるでしょう。

ランディングページを実際に作り始める前に、必要なのがワイヤーフレームです。ワイヤーフレームとは、ページ内のレイアウトや要素の配置場所を図にした、設計図のようなものです。文章やデザインを決定する前に、ランディングページの全体像を可視化するために用います。

仮に、「ファーストビュー→サービス紹介→実績→お客様の声→CTA」といった順で構成したいときには、一度ワイヤーフレームに反映してみて、本当にこの構成がベストであるかを判断します。

なお、ワイヤーフレームは手書きでも、ツール（FigmaやXDなど）使用して設計しても問題ありません。チームで共有しやすい方法でワイヤーフレームを作成しましょう。

ワイヤーフレームを作成し、大まかに内容が決定したらCTAや訴求を盛り込む位置を決定しましょう。

CTAやセールスポイントの配置は、ユーザーのアクションを左右します。基本的には、ファーストビューに印象に残るような訴求文を入れ、ページ内では適度な間隔をあけてCTAを配置することが多いです。

CTAは、「今すぐ無料相談」や「資料をダウンロード」など、どのような行動を起こせば良いのかが分かるような内容が望ましいでしょう。読み進める中で自然とCTAにたどり着けるよう、コンテンツの構成と連動させて配置することが、コンバージョン率向上のためにも重要です。

ここではランディングページ構成の基本的な構成を紹介します。基本的なランディングページの構成は以下の3つのポイントが大切です。

ランディングページでまず大切なのが、ファーストビューで読者の心を掴むことです。ファーストビューこそがランディングページの結果を決めると言ってもよいでしょう。

ファーストビューとはランディングページ上部に当たる部分のことです。ファーストビューがなぜ大切かというと、ユーザーはランディングページに訪れたときに3秒間で離脱を決めるといわれているからです。

そのため、滞在時間を上げるためにもファーストビューでランディングページのメリットを提示しなくてはいけません。ファーストビューのデザイン方法や決める際の注意点につきましては、こちらの記事でも紹介しています。

ランディングページではシンプルでメリハリのあるデザインが効果的です。

冒頭部分の掴みでガッチリとユーザーの心を掴んでいたとしても、ランディングページ全体のデザインにメリハリがないと読者が離脱してしまいます。そのため、ユーザーの読みやすさを第一に考えたデザインでランディングページを構成するようにしてください。

例えば、ページ全体のカラーによって与える印象は異なります。

このように色によって与える印象が異なりますので、ランディングページのベネフィット(利益)やイメージに合わせたカラーを用いるようにしましょう。

シンプルなデザインが好まれるからといって、デザインを派手にして目立たせる方法もなしではありません。特に上記で紹介した赤や黄色などのカラーは、ユーザーにインパクトを与えやすいです。

また、写真を効果的に使うとランディングページ全体にインパクトを与えやすいでしょう。ファーストビューに目をひく人物の写真を設定することで読者にインパクトを与え、ページの世界へと引きずり込むのも効果的です。

ただし、派手すぎるランディングページはユーザーに嫌悪感を与える可能性もあります。他社との差別化を図りたい気持ちは分かりますが、あまり前衛的なデザインにしすぎないようにしましょう。

ここでは成功しやすいランディングページの構成条件を2つ紹介します。ランディングページ制作で失敗できない方はぜひ参考にしてみてください。

企画段階で設定していたゴール設定とランディングページの内容が解離していると、サイトの構成がバラバラになってしまいます。構成がまとまらないと、ランディングページのベネフィットやメリットが伝わりづらくなってしまい、ユーザーが離脱しやすいです。

構成しているランディングページが、ユーザーのニーズに応えられているかどうかもう一度確認してみてください。

ランディングページの目的はユーザーを自社の問い合わせにつなげることです。つまりはCVRやCTAを高めることを目的としています。

マーケティング会社のWoodStream社がおこなったアンケートによると、WebサイトのCVRは2~5%程度が平均とされています。そのため、5%以上のCVRを達成できれば優秀なランディングページといえます。

目標のCVRを達成するには導線の設置が必須です。導線がなければユーザーは行動を起こしづらく、CVRやCTAの向上にはつながりません。導線を設置する際にはユーザーの目線に立つようにして、行動を起こしやすい構成にしてください。

ランディングページの構成を作成する際に注意しておきたいポイントを3つ紹介します。

特に初心者が構成する際に起こりがちな注意点ですので、ランディングページ構成初心者の方は参考にしてください。

ランディングページを訪れるユーザーの属性は、動機が曖昧な方だけではありません。中にはすでにランディングページで紹介しているコンテンツを利用したいと考えている方もいます。

そのような方に向けて、申し込みボタンを適宜入れるようにしてください。明確な目的を持って訪れてくるユーザーに向けて、ファーストビューで申し込みボタンを入れておくのも効果的です。

商品の紹介や関連する情報をもっと知ってもらおうとして、別ページのリンクを貼ることは絶対にやめましょう。

理由としては、ランディングページの途中で、別ページに遷移するとターゲットの興味・関心は別ページの内容に移ってしまい、ランディングページに戻らず離脱する可能性があるからです。つまり、コンバージョンは下がってしまいます。

ランディングページの1Ｐでクロージングまで完結させるようにしましょう。

もしリンクをつけるとしても、ページの最下部に「会社概要」や「プライバシーポリシー」などの運営者情報を掲載するのみにしましょう。

コンバージョン率を上げることを考えると、複数のランディングページを作成するのがベストです。

ファーストビューは最低でも2つは用意し、A/Bテストをおこないましょう。直帰率を計測し、より直帰率が低いファーストビューを本採用しましょう。

ランディングページの長さも重要な要素です。長いページと短いページのどちらが良いかは、商品やサービス、ターゲットにより分かれるため、最適な長さを分析を進める中で判断しましょう。

ランディングページ内の情報で、ターゲットが興味を持つもの、持たないものが分かれてきます。それを分析できるのがヒートマップツールです。

ヒートマップツールで出た結果を元に、興味・関心を持つ情報はなるべく上に持っていき、ブラッシュアップをかけていきます。興味・関心が持たれない情報は削除することも考えていきましょう。

ヒートマップツールはファーストビューの分析にも活用できるので、LPOには欠かせないツールです。

ランディングページの構成は、全てがベース通りに当てはまるわけではありません。中にはユーザーの属性に合わせた結果、ベースとは異なるランディングページ構成になっていることも多々あります。

ランディングページの目的はベース通りに構成することではありません。あくまでも、ユーザーのCVRやCTAを高めることにあります。そのため、結果的にランディングページの構成がベースと異なっていても、結果さえ出せていればどのような構成でも問題ありません。

成果があげられないランディングページは、ユーザの目線に立てていない可能性があります。

たとえば、コンテンツの内容を伝えたい一心で情報を詰め込みすぎていたり、商品の紹介だけを書いていたりするランディングページはユーザーの目線に立てていません。

今一度ここまで紹介してきた内容を参考にした上で、ユーザーが読み進めたいと思うようなランディングページを制作するようにしてください。

ランディングページの作成で必須の構成は、さまざまな現場でよくみられる失敗があります。具体的に、どのような失敗があるのか、以下から見ていきましょう。

ランディングページの構成でよくある失敗として、まず挙げられるのが「ユーザーの導線が途中で途切れていること」です。

ランディングページは、ユーザーが「次に何をしたら良いのか」を常に理解できるような設計である必要があります。途中でランディングページの情報が途切れてしまい、次にどこを見ればよいのか分からない構成では、ユーザーは離脱してしまいます。

とくに多いのが、「サービスの特徴を紹介したあとに、急に料金表が出てきて説明が足りない」など、情報の飛びがあるケースです。

ランディングページの構成で導線のミスがあると、コンバージョンに影響してしまいます。ストーリーとして一貫した構成にし、「読んでいて自然に次の行動に進める」ことが重要です。

ランディングページにありがちな構成の失敗として、訴求の弱さが挙げられます。

いくらデザインが整っていても、訪問者の心を動かす訴求が弱ければ、ランディングページは成果を出せません。よくある失敗は、「他社と差別化できていない」「ユーザーの悩みに具体的に答えていない」といったケースです。

実際、「高品質なサービスを提供しています」といった抽象的な表現は響きにくく、「初回限定で全額返金保証」など、具体的かつユーザーにとってのメリットを強調した訴求が必要です。数値や事例を交えて説得力を持たせましょう。

ランディングページの構成を作成するにあたって、CTAが分散いてしまうといった失敗は少なくありません。1ページの中に複数のCTAがあると、ユーザーが「どれを選べば良いのか分からない」と混乱してしまいます。

これは、特に複数の目的を持つランディングページにありがちな構成ミスです。基本的には、目的をひとつに絞り、それに対応するCTAをメインに配置することが望ましいです。

補助的なCTAを設ける場合でも、視覚的に主従関係を明確にし、ユーザーの行動を迷わせないよう配慮しましょう。

ランディングページの構成におけるよくある失敗として、スマホに最適化していないことが挙げられます。

現代は、スマホでの閲覧が大半を占めるため、パソコン表示だけに対応したランディングページは好ましくありません。特に、以下のような失敗は致命的であるため注意してください。

スマホユーザーにとって不便な構成は離脱につながります。特に注意すべきは、CTAボタンがスクロールしないと見つからない配置になっていたり、重要な訴求が折り返しの下に隠れていたりすることです。

ランディングページの構成を作成する際には、スマホ表示での見え方を優先して設計しましょう。

ランディングページの構成を作成する際には、便利なツールを使うことがおすすめです。作業効率や品質の向上などにつながるため、積極的に活用しましょう。ここからは、ランディングページの構成作成でおすすめのツールを5選ご紹介します。

Googleスライドは、無料で使えるプレゼンテーションツールですが、ランディングページの構成設計にも非常に便利です。

リンク共有や招待など、他のメンバーとの共有が簡単なうえに方法も多岐に渡ります。さらに、同時編集も可能なため、チームでの共同作業に向いています。図形や画像も自由に配置できるため、ラフなワイヤーフレームや構成案の初期設計にも適しているでしょう。

また、コメント機能を使ってフィードバックを残すこともできるので、修正や改善のやり取りもスムーズです。直感で使用できるため、Web制作初心者にもおすすめのツールです。

PowerPointは、構成案を視覚的に分かりやすく整理する際に便利なツールです。ビジネスシーンでの使用率も高いため、使ったことがある方も多い傾向にあります。既に使用経験がある企業であれば、PowerPointは導入のハードルが低いでしょう。

PowerPointは、ページ構成やコンテンツの流れをスライド形式で整理できるため、資料としてもそのまま活用できます。

社内の承認プロセスがある場合や、提案書を兼ねた構成案を作りたい場合は、PowerPointはが便利です。スライドごとにセクション分けすることで、構成全体を俯瞰しやすくなるためおすすめです。

Figmaは、Webデザインに特化したクラウドベースのツールです。ランディングページの構成案やワイヤーフレームの作成に適しています。

ブラウザで動作するため、インストールの必要がなく、オンライン上で複数人が同時に作業できます。ページレイアウトを実際のデザインに近い形で設計でき、ボタンや画像の配置もリアルに再現することが可能です。

また、コンポーネント機能やテンプレートを活用すれば、効率的にページ全体を設計できます。デザイナーとディレクターの連携にも強い味方です。

Adobe XDは、プロトタイプ作成に特化したツールで、構成とデザインを同時に進めたいときに便利です。シンプルな操作感が特徴で、初めてでも直感的に理解しやすいのが魅力です。

また、Adobe XDはページ遷移の動きまで設定できるため、完成イメージを具体的に共有したい場面でも活用しやすいでしょう。

Adobe製品との連携性も高く、PhotoshopやIllustratorとの互換性があるのもポイントです。特にビジュアル面まで踏み込んで検討したい中〜上級者にとっては、頼りになるツールといえるでしょう。

Miroは、ホワイトボードのように自由にアイデアを整理・展開できるのが特徴です。構成案の整理だけでなく、ペルソナ設計やカスタマージャーニーの可視化にも向いています。

そのため、マーケターやプランナーが構想をまとめる際にもよく使われています。

Miroはドラッグ＆ドロップで直感的に操作でき、付箋やマインドマップを使って要素同士の関連を整理できるのが魅力です。チームで議論しながら構成を練りたい場合に便利なツールでしょう。

ここまでランディングページの構成に関する情報を以下の内容を中心に紹介しました。

売れるランディングページを制作するためには、ストーリー性のある構成が大切とされています。しかし、初心者がいきなりストーリー性のある構成を考えるのは難しいでしょう。