LP（ランディングページ）の基本的な構成や要素を図解付きで解説【テンプレートあり】

LP（ランディングページ）は、成果を出すために欠かせない重要なWebページです。

ですが「どんな構成にすればいいのか」「必要な要素は何か」と迷う方も多いのではないでしょうか。

本記事では、LPを作る際に押さえておきたい基本構成や必須の7つの要素、さらに作り方のポイントを解説します。

これからLPを制作する方はもちろん、既存のLPを改善したい方にも役立つ内容です。この記事を参考に、ユーザーのニーズに合った効果的なLPを作成してみてください。

>LPのテンプレートはこちら

LP（ランディングページ）とは

LPとは「Landing Page（ランディングページ）」の略語です。語源は英語の「Landing（着陸、上陸）」で、訪問者がホームページに着地するイメージからきています。

Webマーケティングにおいて、商品やサービス訴求に特化したWebページのことを指すことが多いです。

1ページで商品・サービスの訴求、内容の説明、申し込みまで完結するページであるため、縦長のページになることが一般的です。

LPの基本構成

LPの基本的な構成は次のとおりです。

• ファーストビュー

• ボディ

• クロージング

順番に解説します。

ファーストビュー

ファーストビューはLPにアクセスしたユーザーがはじめに目にする箇所で、ユーザーの注意を引くための重要な部分です。ここで、LPを先に読み進めてもらえるかが大きく左右されるといえるでしょう。

ファーストビューでのポイントは、LPで伝えたいコンセプトやベネフィットを魅力的なキャッチコピーや画像で訴求することです。

ユーザーの視認率がもっとも高い箇所のため、「お問い合わせはこちら」などのCTA（Call to Actionの略語で、行動喚起のこと）ボタンもファーストビューに配置すると非常に効果的です。

ボディ

ボディは、LPで紹介する商品・サービスの特徴や料金などを知ってもらうための部分です。商品やサービスの使用方法や悩みの解決方法を示し、ユーザーが得られるベネフィットを強調しましょう。

ユーザーに信頼を与えるための実績や統計データ、調査結果などを入れるとLPの信頼性が増します。競合との差別化ポイントなども記載できればなおよいでしょう。

このあとの章で紹介する、LPに必要な要素のうち、「商品やサービスの情報」、「第三者の証言」などがこのボディ部分にあたります。

クロージング

クロージングは、ユーザーに行動を促すための部分です。ユーザーの疑問に先回りして答えたり、利用者の声を掲載したりして購入を迷っている人の不安を払拭し、成約につなげます。

要素として、申し込みにつなげるCTAボタンも必要です。ユーザーにわかりやすいように、ボタンの色や大きさ、キャッチコピーも工夫するとよいでしょう。

クロージングでは、ユーザーの疑問点を解決できるようにFAQ（Frequently Asked Questionsの略。「よくある質問」のこと）を設けたり、返金保証や安心できるサービスの提供を伝えたりする方法がよく使われます。

ユーザーの心理的負担をやわらげるために「期間限定割引」「〇種類の特典付き」などのオファーも効果的です。

LPの構成に必要な7つの要素

LPの構成に必要な要素として、以下の7つが挙げられます。

• キャッチコピー＆アイキャッチ画像

• CTA（アクション喚起）ボタン

• 導入文

• 商品やサービスの情報

• 第三者の証言

• よくある質問

• 申し込みフォーム

それぞれ見ていきましょう。

1.キャッチコピー＆アイキャッチ画像

キャッチコピーとアイキャッチは、LPの内容を一目であらわすテキストや画像のことです。ファーストビューの部分でユーザーがはじめに目にする部分のため、非常に重要な要素といえるでしょう。

▼キャッチコピー＆アイキャッチ画像の例

参考テンプレート: Sprinkle Mini | Studio Store

上記画像のLP「Sprinkle Mini」では、食材管理をイメージさせるキャッチコピーと、写真が使われています。

ファーストビューではユーザーに興味を持ってもらえるような魅力的なキャッチコピーや、わかりやすいベネフィットを提示することがポイントです。

キャッチコピーや画像を変えるだけで成約率が大きく変動することも多いため、ABテストなどを実施しながら適切なパターンを決定するとよいでしょう。

2.CTA（アクション喚起）ボタン

CTA（Call to Action）とは、ユーザーに行動を促すボタンやリンクのことです。たとえば、「今すぐ購入」や「お問い合わせ」などが該当するでしょう。

▼CTAボタンの例

参考テンプレート: Studio Store｜Sprinkle Mini

「Sprinkle Mini」のLPでは、アプリのダウンロードを促すCTAが配置されています。

CTAボタンは大きさや文言など、わかりやすいものがよいでしょう。ボタンがわかりにくいものだと、意欲のあるユーザーでもどこから申し込んでよいかわからず、成約を取りこぼしてしまう可能性があるためです。

＜例＞

• 「〇〇の販売ページはこちら」→申し込めるか不明

• 「〇〇を購入」→申し込めることが明確

また、CTAボタンはユーザーがもっとも多いファーストビューに配置すると効果的です。

「初回限定〇％OFF」などの魅力的なオファーも活用すれば、成約率の向上が期待できるでしょう。

ユーザーが申し込みたいと思ったときすぐボタンが押せるように、複数の箇所にCTAを配置することも重要なポイントです。

3.導入文

導入文では、得られるベネフィットをわかりやすく提示するとよいでしょう。

LP内で紹介する商品・サービスが、ユーザーの問題を楽に解決できることがわかれば、CV（コンバージョン。成約のこと）につながる可能性が高くなるためです

▼導入文の例

参考テンプレート: Studio Store｜Sprinkle Mini

上記のLPでは「食材管理が簡単になる」という点をベネフィットとして使用しています。

また、共感文の記載も効果的です。

「〇〇を〇〇したい」「〇〇に悩んでいて、辛い」のように、ユーザーの潜在ニーズや感情を言語化しましょう。ユーザーに自分事として認識してもらいやすくなり、ページのスクロールにつながります。

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

LPで訴求したい商品・サービスの内容はとくに必要な要素です。

LPで取り扱っている商品がなぜユーザーの悩みを解決できるのか、根拠とともに商品の情報、料金、ベネフィットなどを書きましょう。

ベネフィットとは「商品によってユーザーが得られる利益」のことです。情報とベネフィットの違いは、以下のようなものです。

例

• 情報：この商品の重さは約60gです

• ベネフィット：持ち運びがしやすいため、外出先で使用できます

このように、商品の情報とベネフィットを両方伝えることで、ユーザーへの訴求力が高まります。また、以下のように、料金プランがある場合は金額と内容の詳細を記載しましょう。

▼商品やサービス情報の例

参考テンプレート: Studio Store｜Sprinkle Mini

説明に不透明な部分があると離脱につながります。商品・サービスの情報はできる限り詳しく記載しましょう。

5.第三者の証言

第三者の証言は、利用者の声や導入実績、感想などを掲載することで訴求する商品・サービスの信憑性を高めるための要素です。

▼第三者の証言の例

参考テンプレート: Studio Store｜Sprinkle Mini

可能であれば、氏名、居住地、年齢、成果の具体的な数値なども掲載できるとよいでしょう。

信憑性を高めるための第三者の証言としては、以下のようなものが挙げられます。

• レビューや口コミ（顧客の声、評価、体験談など）

• 事例紹介（実際に商品やサービスを使った顧客の成功事例やストーリー）

• 専門家やメディアからの意見（メディアで紹介された情報やその道の専門家の意見）

ほかにもSSL対応（Secure Sockets Layerの略。インターネット上のデータのやりとりを、暗号化する技術のこと）や、「特定商取引法」にもとづく表記などもLPに追加しておくと、コンテンツの信頼性向上につながるでしょう。

6.よくある質問

よくある質問は、ユーザーの疑問点に先回りして答えることで不安を払拭し、申し込みへの最後の一押しや、離脱を防ぐことが目的の部分です。

「本当に初回無料なのか」「途中解約しても違約金は発生しないか」など、ユーザーの不安点を解決できるようなQ&Aを配置しておきます。

▼よくある質問の例

参考テンプレート: Studio Store｜Sprinkle Mini

ほかにも、自社の強みをアピールできるような質問を用意するのも効果的です。

Q&Aの例として、以下のようなものがあります。

• 他社の類似サービス（商品）と比べて、どこが違うのですか？

• 他社と比べてなぜ、値段が格段に安いのですか？

• 独自の配合成分〇〇の効果を詳しく教えてください。

• 購入（契約）後のサポート体制はどうなっていますか？

ほかの箇所で満たせないような、細かいユーザーのニーズを解決するときに適している要素です。

7.申し込みフォーム

申し込みフォームは、商品・サービスを購入、契約するユーザーのための入力フォームです。CTAボタンがクリックされるとここに遷移します。

入力フォームでは、次のような項目がよく使われます。

• 名前

• 住所

• メールアドレス

• 電話番号

• 支払情報の入力

入力自体がしにくいとユーザーはストレスを感じ、離脱率も上がります。なるべく入力項目を少なくするなどの工夫が必要です。

▼申し込みフォームの例

参考テンプレート: コーポレート｜測量設計事務所 | Studio Store

とくに、支払情報の入力段階での離脱は多いといわれています。

クレジットカードやスマホ決済、後払いなどさまざまな方法を提示したり、安心して入力いただけるようSSLサーバ証明書を記載したりと重点的に対策を行いましょう。

LPの構成案（ワイヤーフレーム）の作り方

ワイヤーフレームとは、LPの構成や内容をテキストボックスや図形で簡易的にあらわしたもので、LPを作るための設計図のようなものです。

ワイヤーフレームを作成しておくことで、LPを作る際に要素の抜け漏れを防いだり、完成イメージを共有しやすくなったりと複数のメリットがあります。

ワイヤーフレームの作成手順は、おおむね以下のとおりです。

1. LPの目的とターゲットを明確にする

2. ユーザー目線で伝える

3. LPに入れる要素を整理する

4. レイアウトを決める

5. ワイヤーフレームを作成する

6. 検討・改善をする

順番に解説します。

1.LPの目的とターゲットを明確にする

LPはCV（コンバージョン）に特化するためのWebページであり、「申し込み」「問い合わせ」「資料請求」などの目的や、性別、年齢、職業などターゲットによって最適な訴求が変わります。

まず目的を明確にすることで、ユーザーに最適化したLPがどのようなものかがイメージできるのです。

2.ユーザー目線で伝える

LPで伝える内容は、ユーザー目線で考えましょう。ページの内容に押し付け感が出てしまうと、離脱の原因になります。

ページの上から下に進むにつれて、ユーザーの心情を自然にCVに持っていけるような流れが理想です。

CTAボタンの文言でも「お問い合わせはこちら」よりも「お問い合わせをする」などユーザー主体の文体にしたほうが効果が高いこともあるため、工夫してみるとよいでしょう。

3.LPに入れる要素を整理する

次に行うことはLPに入れる要素の整理です。

LPの内容に情報の抜け漏れや、曖昧な部分があるとユーザーに不信感を持たれてしまいます。

キャッチコピーや商品の説明、具体的なベネフィット、明確なCTAといった各要素をリストアップし、必要な情報が抜け落ちないよう整理しましょう。

CV（コンバージョン）への導線設計も重要なポイントです。

ユーザー心理に沿った流れでスクロールを促し、ファーストビューの最適化やCTAボタンを目立たせるデザインにするなどの施策も重要になります。

4.レイアウトを決める

この手順では、掲載する商品・サービスによってどのような配置や大きさでLPを作るとよいかを決めていきます。

PCとスマートフォンでは画面サイズや縦横比が大きく異なるため、両方のデバイスでの見え方を考慮したレイアウト設計も重要なポイントです。

5.ワイヤーフレームを作成する

レイアウトが決まったら、ワイヤーフレームを作成してみましょう。

手書きやPowerPointでも作成できますが、ワイヤーフレーム作成ツールを使うとテンプレートが用意されていたり、チームで共同編集できたりして便利です。

6.検討・改善をする

ワイヤーフレームが作成できたら、チーム内での相談や検討を行い改善しましょう。

同じ構成でもキャッチコピーの文言や、CTAボタンの配置などで成約率が大きく変わってきます。すでに結果を出している競合のLPや、参考になりそうな自社のデータがあれば活用するとよいでしょう。

LPの作成方法

ワイヤーフレームが作成できたら、LPの作成に入りましょう。行うのはコンテンツ、デザイン制作、コーディングといった作業です。

ワイヤーフレームで設計したレイアウトに、テキストや画像をつけていきましょう。

Studioで制作できるLP構成の例

ノーコードWeb制作プラットフォームのStudioでは、テンプレートを活用するだけで以下のようなLPが作成できます。

参考テンプレート: Studio Store｜Sprinkle Mini

商品の魅力、購入手順を画像やキャッチコピーであらわした、シンプルで訴求力のあるLPです。イメージがわきにくい方は、こちらのような構成を使ってみてもよいでしょう。

参考テンプレート: サービスLPモバイルファースト | Studio Store

一方、こちらはスマホユーザー向けに最適化されたLPです。

左側にイメージのつきやすいメインビジュアルを配置し、右側のみスクロールしてサービスの内容や料金プランなどの詳細が閲覧できるようになっています。

モバイルファーストのLPを作りたいときにおすすめの構成です。

そのほかにも、Studioでは魅力的なLPのテンプレートが豊富に用意されています。

LP制作・構成におけるよくある質問

LP制作・構成についての、よくある質問にお答えします。

Q1.LPを自作する場合の費用目安を教えてください

ページの規模や使うツールにもよりますが、自社で作る場合は数万円ほどで済む場合がほとんどです。

Q2.LPを外注する場合の費用目安を教えてください

簡易的な構成なら30万円〜50万円ほどが目安です。ただし、戦略設計・競合調査・公開後の運用改善なども含めると60万円以上になるケースもあります。

Q3.プログラミングの知識がなくても、LPの構成は作成可能でしょうか

ノーコードWeb制作プラットフォーム「Studio」を使えば、プログラミングの知識がなくてもLPやワイヤーフレームが作成できます。

必要な要素を揃えて、成果の出るLPの構成を目指そう

構成する要素を理解し、目的、ターゲットに合わせた適切な流れで制作すれば効果的なLPが作れます。

LPの内容を、わかりやすいキャッチコピーやレイアウトで伝えられるように構成を作ってみましょう。

Studioでは無料のテンプレートも多く提供しているので、ぜひLPの構成作りの参考にしてみてください。

また、LP作成を外注したい方は、Web制作のエキスパートを探せる「Studio Experts」をおすすめします。Studioのコンサルタントに相談しながら、課題や予算に合わせて作成可能です。