ランディングページの構成に外せない7つの要素!重要な7つのポイントも解説

株式会社キネクト
監修者
株式会社キネクト 代表 小林 謙介
最終更新日:2024年03月04日
ランディングページの構成に外せない7つの要素!重要な7つのポイントも解説
この記事で解決できるお悩み
  • ランディングページの構成の作り方は?
  • ランディングページの具体的な構成要素は?
  • 売れるランディングページを構成するためのポイントは?

「成果が出るランディングページの構成の作り方は?」とお悩みの方は、必見です!ランディングページとはコンバージョン(成果)を獲得するためのページです。ユーザーにストレスを与えず、自然な流れでコンバージョンにつなげられるランディングページは、根拠のある構成案が必須です。

本記事では、ランディングページの基本的な構成と欠かせない7つの要素を詳しく解説します。最後まで読むと、成果につながるランディングページの構成がわかるでしょう。

ランディングページを作りたい方や構成を見直したい方は、ぜひ参考にしてください。

Web制作にお困りではありませんか?

もしも今現在、

  • どの制作会社に依頼したらいいかわからない
  • 実績豊富な会社に依頼したい
  • 制作会社の費用相場がわからない

上記のようなお困りがありましたら、比較ビズへお気軽にご相談ください。比較ビズでは、複数のWeb制作会社に一括で見積もりができ、相場感や各社の特色を把握したうえで業者を選定できます。見積もりしたからといって、必ずしも契約する必要はありません。まずはお気軽にご利用ください。

Web制作会社を一覧から探す

ランディングページの目的はコンバージョンへつなげること

ランディングページは問い合わせや購入、申し込みなどの成果の創出(コンバージョン)を目的として作成されるページです。LPと呼ばれることもあります。ホームページのように複数のコンテンツを組み合わせるのではなく、コンバージョンに向かって構成される1枚のページを指します。

ランディングページへの導線は検索エンジンやweb広告、バナー広告など複数ありますが、コンバージョンが唯一の出口であることを理解しましょう。ランディングページではコンバージョンをあげるために、商品やサービスの情報を簡潔かつ魅力的に伝える構成やデザインが求められます。

ランディングページの3つの基本構成

pixta_90859087_M (1)

ランディングページの基本構成は3項目で構成されます。

  1. ヘッダー(ファーストビュー)
  2. ボディ
  3. クロージング

各項目に明確な役割があるため、基本の構成を抑えることで離脱を防ぎ、コンバージョンを獲得することが可能です。

1. ヘッダー(ファーストビュー)

ヘッダーはユーザーがはじめに目に入る部分であり、ファーストビューともいわれます。ランディングページは1つのサービスや商品に絞ったページであるため、ユーザーが最も知りたい情報をヘッダーに盛り込むことが必要です。

ランディングページでは最初の3秒で続きを読むかどうかが判断され、直帰率(ページから離脱する確率)は70%以上ともいわれています。商品の魅力を伝えるためにも、ユーザーに必要な情報や目を引く画像で、魅力的なヘッダーを作成し離脱を防ぐ必要があります。

2. ボディ

ボディはオファーが、ユーザーへもたらすベネフィットを説明する部分です。不安や悩みへの共感、オファーが悩みを解決できる理由などを説明します。

ヘッダーで提案したオファーを、根拠をもとに説明し、ユーザーが得られるメリットとベネフィットを疑似的に体感してもらえることが重要です。

3. クロージング

クロージングはユーザーの疑問や不安を解消し、コンバージョンへつながるアクションへと促す部分です。商品やサービスの希少性や保証、特典などを訴えることで最後の一押しをする部分にもなります。

クロージングでは再度、ユーザーに向けてのベネフィットやよくある質問などによる不安の解消を念入りに行うことでコンバージョンへつなげます。

ランディングページに必要な7つの要素

名称未設定のデザイン - 2023-11-28T105055.165

ランディングページでは基本構成をベースに、以下の7つの要素を盛り込むことが重要といわれています。

  1. キャッチコピー&アイキャッチ
  2. CTA(Call to Action)ボタン
  3. 導入文
  4. 商品やサービスの情報
  5. 体験談やメディアへの掲載実績
  6. よくある質問・導入後の流れ
  7. 申し込み入力フォーム

7つの要素を順番にユーザーへ伝えることで、悩みや不安を解消し、訴求力を高めることが可能です。

1. キャッチコピー&アイキャッチ

1つ目はキャッチコピー&アイキャッチです。キャッチコピーとは商品やサービスの宣伝などで用いられるユーザーの注意を引くための短い宣伝文です。アイキャッチとはユーザーの目を引き付けるための画像やイラストのことを指します。

キャッチコピーとアイキャッチは、オファーの内容が直感的にわかるものでなければいけません。悩みを解決してくれるページであることを一目で理解してもらえるものを設定しましょう。

2. CTA(Call to Action)ボタン

2つ目の要素はCTA(Call to Action)ボタンです。CTAは行動喚起とも言い換えられ、ユーザーに行動を促すボタンのことを指します。申し込みや特典の受け取りなど、直接コンバージョンに直結するボタンになります。

CTAボタンはランディングページを閲覧している最中にいつでも申し込みできるように、画面内を追尾するようにすることが理想です。ボタンの色やサイズをいくつか用意するなどデザインを工夫し、目立つようにすることも重要でしょう。

CTAボタンの中に書かれるコピーはマイクロコピーと呼ばれます。マイクロコピーはユーザーが自分ごととしてイメージしやすいように動詞を使用しましょう。

3. 導入文

3つ目は導入文です。導入文は通常、ボディの1番上の部分にあたります。ヘッダーで引き込んだユーザーに対して、自分に必要な商品であると認識してもらえる文章を掲載しましょう。

具体的にはユーザーの悩みを代弁することで共感を得る手法が多く用いられます。ユーザーが抱えている悩みを的確に代弁し、悩みを解決できる提案をすることで商品の詳しい紹介へと誘導します。

4. 商品やサービスの情報

4つ目の要素は商品やサービスの情報を紹介することです。具体的な情報として以下が挙げられます。

スペック 商品やサービスの仕様のこと。形状や機能、性能、価格、特徴などを表す。
メリット 長所や価値のある特徴のこと。商品やサービスの価値を表す。
ベネフィット サービスを使うことで受けられる恩恵のこと。利用することでユーザーにもたらされるプラスの変化を表す。

商品の特徴やスペックを紹介する際は具体的な数値やデータを活用しましょう。顧客満足度をはじめとする実際に顧客で得たデータを紹介することは、ユーザーに対して自分にも効果があるのではないかと期待感を演出できるため効果的です。

メリットとベネフィットをあわせて紹介することで、ユーザーの体験価値を伝えられ、感情面に訴求できます。商品や独自性の紹介も重要ですが、ユーザー目線のメリットやベネフィットを掲載することでコンバージョンが得られやすくなります。

5. 体験談やメディアへの掲載実績

5つ目は体験談やメディアの掲載実績を紹介することです。実際の体験談や第三者に紹介された実績があることで、ユーザーへ信頼感を与えます。

体験談は企業目線ではなく、一般ユーザーの声を参考にできるため、読んでもらいやすくなることがメリットです。自分を投影して疑似体験してもらう体験の提供にもつながります。

掲載実績ではメディアの権威性によっては大きなエビデンスを獲得できるチャンスとなるため積極的に活用しましょう。

複数の体験談や掲載実績を紹介することで、たくさんの人に選ばれているため安心する「バンドワゴン効果」も期待できます。

6. よくある質問・導入後の流れ

6つ目はよくある質問・サービス導入後の流れを説明することです。先回りして掲載しておくことで、ユーザーの疑問や不安を取り除くことが目的です。あらかじめ不安を解消することで離脱を防ぎ、コンバージョンの増加が望めます。

同ジャンルの商品であるような、価格やサービス内容への質問、アフターサービスに関する質問を掲載するといいでしょう。電話やメールでのしつこい勧誘が無いことに関しての質問を掲載することも有効です。

導入後の流れを明確に記載しておくことで、追加料金の有無や契約から導入までの流れをイメージしやすくなります。

7. 申し込み入力フォーム

7つ目は申し込み入力フォームです。申し込み入力フォームでは可能な限り簡潔かつ手間を省くことを意識しましょう。ユーザーの多くが離脱する原因の1つに、入力項目の多さと手間があります。入力している最中に面倒くさくなり、申し込みの直前で離脱するユーザーも少なくありません。

入力フォームを作成する際は以下のことを意識してください。

  • 入力項目は最小限にする
  • 入力項目は可能な限り分割しない
  • エラーメッセージが都度表示されるようにする
  • 予測変換や選択式にする
  • 疑問が解決できるようにチャットボットを表示する

ランディングページの構成(ワイヤーフレーム)の作り方

名称未設定のデザイン - 2023-11-28T105211.962

ランディングページのワイヤーフレームの作り方を紹介します。ワイヤーフレームはランディングページにおける設計図です。ここまで紹介した要素をどこに配置するかを決定します。

1. ページレイアウトを決める

はじめにページレイアウトを決めましょう。ページレイアウトは画面におけるコマ割りのことです。レイアウトでは縦で区切られるまとまりのことをカラムと呼びます。レイアウトの種類は1カラムや2カラム(サイド固定)などが挙げられます。

カラム数が多くなり、複雑なレイアウトになるほど制作の難易度が上がります。初心者が作成する場合は1カラムもしくは2カラムまでがおすすめです。

2. レイアウトの要素を当てはめる

レイアウトが決定したら、レイアウトに沿って要素を当てはめましょう。先述しているヘッダー、ボディ、クロージングに各要素を当てはめていきます。基本構成に対して当てはめる要素は以下の表を参考にしてください。

ヘッダー ・キャッチコピー ・アイキャッチ ・CTAボタン(常時画面に表示されるようにする)
ボディ ・導入文 ・商品 ・サービスの情報 ・体験談やメディアの掲載実績
クロージング ・よくある質問 ・導入後の流れ ・申し込みフォーム

ワイヤーフレームの参考にできるサイト

ランディングページのレイアウトやデザインに迷った場合は、ランディングページのデザインを紹介しているwebページを参考にしましょう。

LP ARCHIVE

名称未設定のデザイン - 2023-11-28T105313.403

参照:LP ARCHIVE

LP ARCHIVEは国内の優れたランディングページだけを集めたポータルサイトです。毎日10ページ以上のデザインが追加され、トレンドも加味したコンバージョンがとれるランディングページを紹介しています。

商品やサービスのジャンルごとの紹介のほかに、カラーやイメージからランディングページを探すことも可能です。お気に入り機能により、気に入ったランディングページデザインをいつでも閲覧できます。

さまざまなジャンルのランディングページを閲覧できるため、カラム数の違いや要素の配置の仕方などを参考にすることが可能です。

ランディングページの構成で押さえておきたい7つのポイント

名称未設定のデザイン (34)

ランディングページを構成するときに押さえておきたい7つのポイントを紹介します。優れたランディングページは以下の7つのポイントを押さえていることが多いでしょう。

  1. ユーザーにベネフィットを想像させる
  2. 見出しで要点を押さえる
  3. 複数のランディングページで作成・テストをする
  4. ランディングページと広告を連動させる
  5. 事前リサーチを徹底的に行う
  6. 自社で微調整ができるようにしておく
  7. 他社のランディングページをむやみに真似しない

1. ユーザーにベネフィットを想像させる

1つ目はユーザーにベネフィットを想像させることです。ユーザーは広告をみて、悩みの解決方法を求めてランディングページにアクセスします。悩みを解決できないサービスであると判断した時点で離脱につながります。

ベネフィットを想像しやすいように、悩みの共感や解決の決め手をシンプルに伝えることが重要です。体験談や第三者の客観的データを活用しながら、契約して得られる未来のユーザーの姿を想像できるようなランディングページを作成しましょう。

2. 見出しで要点を押さえる

2つ目は見出しで要点を押さえることです。中身を読み始める前に目次や見出しで書いてある内容を判断するユーザーも少なくありません。見出しを見ただけでサービスの要点がわかるように、見出しを設定する必要があります。

ランディングページはコンバージョンが唯一の成果です。見出しだけでもコンバージョンにつなげられるベネフィットやお得感を演出するように意識しましょう。

3. 複数のランディングページで作成・テストする

3つ目は複数のランディングページで作成・テストすることです。扱うサービスによってコンバージョンにつながるランディングページは異なります。さまざまな長さのランディングページが存在しますが、コンバージョンをとれるランディングページこそが優秀といえるでしょう。

正解は1つではないため、複数のランディングページを作成しテストする必要があります。A/Bテストやヒートマップツールを使用しながらCTAボタンの位置や全体の長さ、デザインを調整しましょう。

4. ランディングページと広告を連動させる

4つ目はランディングページと広告を連動させることです。広告の内容とランディングページの内容が一見して同じでなければ、期待と違うページにきたと感じ、早期離脱につながります。広告とランディングページに一貫性があることで続きを読み進めるユーザーも少なくありません。

使用するアイキャッチやキャッチコピーなどを広告とランディングページでそろえると、直感的に関連性を感じ安心して読めます。

広告で問いかけた悩みに対して、キャッチコピーで答えて関連性をもたせる方法もあるため、複数のパターンでテストするといいでしょう。

5. 事前リサーチは徹底的に行う

5つ目は事前リサーチを徹底的に行うことです。ランディングページの構成を決める前に事前リサーチを行いましょう。ユーザーの悩みや他社にない強みを正確に把握しておくことで、ユーザーの共感を得られるランディングページを作成できます。

リサーチの方法は3C分析(顧客、自社、競合の分析)やSTP分析(市場細分化、市場の決定、自社の立ち位置の明確化)などがあります。的確なリサーチは専門的な知識や分析力が必要になるため、リサーチ方法に不安がある場合は専門業者への外部委託も検討しましょう。

6. 自社で微調整ができるようにしておく

6つ目は自社で微調整できるようにしておくことです。ランディングページの公開後は効果測定や分析しながら改善を繰り返し、優秀なランディングページを作りあげていく必要があるでしょう。ランディングページにおいて分析と改善を繰り返すことをLPO(ランディングページ最適化)といいます。

ユーザーの悩みや検索意図は時間の経過とともに変化します。デザインのトレンドやキャッチコピーなどで、コンバージョンに大きな差がでることも少なくありません。析結果をもとに素早く改善を繰り返すことで、優秀なランディングページを作るためにも自社で微調整が可能な体制を整えておく必要があります。

7. 他社のランディングページをむやみに真似しない

7つ目は他社のランディングページをむやみに真似しないことです。根拠なしに真似すると、実際にはコンバージョンが出ていないランディングページを参考にしかねません。

紹介するサービスが類似する場合でも、ターゲットが違うだけで期待する成果を出すことは難しいでしょう。優秀なランディングページを真似することは、コンバージョンを獲得する近道であることは確かです。真似をする際は基本的な構成や要素を網羅しているかどうかを必ず確認してください。

まとめ

効果的なランディングページを作成するには、構成要素の役割を理解したうえで、ユーザーの悩みの解決策を提示できているかが鍵になります。

ユーザー目線を意識して作成することで読者の行動を促し、コンバージョンにつなげることが可能です。有効に機能すると、24時間サービスを契約してくれる大きな役割を果たします。

ランディングページはリサーチや構成、LPOなど専門知識が必要であり、自社で作成することに不安を覚える方も多いでしょう。

比較ビズでは2〜3分の項目入力で複数の制作会社の見積もりを比較することが可能です。ぜひ比較ビズを利用して自社に最適な制作会社をみつけてください。

監修者のコメント
株式会社キネクト
代表 小林 謙介

1979年東京生まれ。東北芸術工科大学芸術学部を卒業後、美大進学の予備校に2年間勤めたのちフリーのデザイナーとして活動。飲食店のメニューや酒造メーカーのカタログなど、食に関連するクリエイティブ業務を開始。その後、インハウスデザイナーとして商品デザインの企画・制作を経験し、現在は株式会社キネクトを設立。グラフィックやWEBなどのデザイン制作をはじめ、広告事業や講演会など幅広い分野で活動している。

ランディングページは訪問者がどのような行動を取ってほしいのか、その目的が明確に存在しています。そのために、公開後は、そのランディングページの効果を定量的に測定し、必要に応じて改善を行うことが重要になります。

アクセス解析やABテストなどの手法を用いて、ページのパフォーマンスを評価し、さらにユーザーフィードバックを活用して適切な評価を行うことで、ユーザーエクスペリエンスを向上させることが期待できます。
比較ビズ編集部
執筆者

比較ビズ編集部では、BtoB向けに様々な業種の発注に役立つ情報を発信。「発注先の選び方を知りたい」「外注する際の費用相場を知りたい」といった疑問を編集部のメンバーが分かりやすく解説しています。

Web制作にお困りではありませんか?

もしも今現在、

  • どの制作会社に依頼したらいいかわからない
  • 実績豊富な会社に依頼したい
  • 制作会社の費用相場がわからない

上記のようなお困りがありましたら、比較ビズへお気軽にご相談ください。比較ビズでは、複数のWeb制作会社に一括で見積もりができ、相場感や各社の特色を把握したうえで業者を選定できます。見積もりしたからといって、必ずしも契約する必要はありません。まずはお気軽にご利用ください。

Web制作会社を一覧から探す