LP（ランディングページ）を制作するとき、「どんな順番で内容を配置すればいいのか分からない」と悩む方は多いのではないでしょうか。
LPは、単純に商品画像や説明文を上から順番に並べればよいわけではありません。
ユーザーがページを訪れてから、
「これは自分に関係がありそう」
↓
「確かにこの悩みがある」
↓
「この商品なら解決できそう」
↓
「他の商品より良さそう」
↓
「信頼できそう」
↓
「買ってみよう」
と気持ちが変化していくことを想定し、それに合わせて情報を配置することが重要です。
どれだけデザインがおしゃれでも、ユーザーが知りたい情報が適切な順番で掲載されていなければ、途中で離脱される可能性があります。
逆に、構成がしっかり設計されていれば、派手なデザインでなくても商品の魅力が伝わりやすくなります。
この記事では、LP制作を行うWEBデザイナーの視点から、成果につながるLPの基本構成と、それぞれのセクションを作る際のポイントを分かりやすく解説します。
これからLPを制作する方はもちろん、「LPを作ったけれど思ったように成果が出ない」という方も、現在のLPと比較しながらチェックしてみてください。
LPの構成とは？
LPの構成とは、ページ内で「何を・どの順番で伝えるか」を設計することです。
一般的なWEBサイトでは、トップページから会社概要、サービス紹介、料金、問い合わせなど、複数のページへユーザーを誘導します。
一方、LPは基本的に1ページの中で商品やサービスについて説明し、購入・申し込み・問い合わせ・資料請求など、特定の行動へユーザーを導きます。
そのためLPでは、ページの上から下までの情報の流れが非常に重要です。
LPは大きく分けると、
・ファーストビュー
・ボディ
・クロージング
という3つのパートで考えることができます。
さらに細かくすると、問題提起、商品紹介、ベネフィット、実績、お客様の声、FAQ、CTAなど、さまざまなセクションによって構成されます。
重要なのは、「LPには必ずこの順番で配置しなければならない」という決まりがあるわけではないということです。
商品・サービスの特徴や価格、ターゲット、ユーザーが購入するまでに抱える不安などによって、必要な情報や適切な順番は変わります。
基本構成を理解したうえで、商品に合わせて調整することが大切です。
成果につながるLPの基本構成
商品やサービスによって構成は変わりますが、基本形としては次の流れが使いやすいでしょう。
- ファーストビュー
- 問題提起・共感
- 商品・サービスによる解決策
- ベネフィット
- 商品の特徴・選ばれる理由
- 実績・お客様の声
- FAQ・不安の解消
- クロージング・CTA
それぞれの役割を詳しく見ていきましょう。
1. ファーストビューで「何の商品なのか」を伝える
ファーストビューとは、ユーザーがLPを開いたときに最初に表示される部分です。
LPの中でも特に重要なエリアで、ここで商品やサービスに興味を持ってもらえなければ、その後にどれだけ詳しい説明を書いても読んでもらえません。
ファーストビューでは最低限、
・何の商品・サービスなのか
・誰に向けたものなのか
・どんなメリットがあるのか
・次に何をすればよいのか
が直感的に伝わるようにしましょう。
基本的な構成としては、
「キャッチコピー＋サブコピー＋メインビジュアル＋CTA」
という組み合わせが使いやすいです。
商品販売LPであれば、商品画像を大きく見せることで、ユーザーがページを開いた瞬間に「何の商品なのか」を理解できます。
逆に、キャッチコピーを目立たせることだけを考えて商品画像を小さくしてしまうと、何を販売しているページなのか分かりにくくなる場合があります。
ファーストビューは「かっこいいデザインにする場所」ではなく、「商品の価値を瞬時に理解してもらう場所」と考えることが重要です。
※ファーストビューについては「LPのファーストビューの作り方｜成果につながるデザイン7つのポイント」で詳しく解説しています。
2. 問題提起・共感で「自分のための商品」と感じてもらう
ファーストビューで興味を持ったユーザーに対して、次に行うのが問題提起です。
よく使われるのが、
「こんなお悩みありませんか？」
というセクションです。
例えば美容商品なら、
・最近、肌の乾燥が気になる
・今までのスキンケアでは満足できない
・毎日のケアに時間をかけられない
といった悩みを掲載します。
ここで重要なのは、企業側が伝えたいことではなく、ユーザーが実際に感じている悩みを書くことです。
ユーザーが「これ、自分のことだ」と感じれば、その後の商品説明にも興味を持ってもらいやすくなります。
ただし、必要以上に不安を煽る表現はおすすめできません。
ユーザーの悩みを正しく理解し、自然に共感してもらえる内容にしましょう。
3. 商品・サービスを「解決策」として提示する
ユーザーの悩みに共感してもらったら、その悩みを解決する方法として商品やサービスを紹介します。
例えば、
「そんな悩みを解決するために開発されたのが○○です」
という流れです。
ここで初めて商品を詳しく紹介することで、
「悩み → 解決策」
という自然なストーリーを作ることができます。
このセクションでは商品名だけではなく、
・どんな商品なのか
・何をするための商品なのか
・どのような仕組みなのか
を簡潔に説明しましょう。
専門的な商品ほど、メーカー側が機能やスペックを詳しく説明したくなります。
しかし、ユーザーが最初に知りたいのは細かなスペックではなく、「自分の悩みを解決できる商品なのか」ということです。
まず全体像を理解してもらい、詳細な機能はその後に説明すると読みやすくなります。
4. 機能ではなくベネフィットを伝える
LP制作で非常に重要なのが「ベネフィット」です。
ベネフィットとは、その商品を使うことでユーザーが得られる価値や変化のことです。
例えばモバイルバッテリーで、
「容量10,000mAh」
と書くのは商品の機能・スペックです。
一方、
「外出先でもスマートフォンの充電切れを気にせず使える」
と伝えるのがベネフィットです。
ユーザーは商品そのものが欲しいのではなく、商品を使うことで得られる便利さや快適さ、悩みの解消を求めています。
そのため、
「この商品には○○という機能があります」
だけで終わらず、
「だから○○できます」
まで伝えることが大切です。
5. 商品の特徴・選ばれる理由を説明する
ベネフィットを伝えたら、「なぜその商品なら実現できるのか」を説明します。
ここでは商品の特徴や強みを紹介します。
例えば、
POINT 01 独自技術
POINT 02 コンパクト設計
POINT 03 簡単操作
のように、3〜5個程度のポイントに整理すると分かりやすくなります。
このとき注意したいのが、特徴を大量に並べすぎないことです。
メーカー側からするとすべて重要な機能でも、ユーザーにとって重要度は同じではありません。
商品の購入理由になりやすい特徴から優先的に見せましょう。
また、文章だけで説明するよりも、
「見出し＋写真＋短い説明」
の組み合わせにすると、スクロールしながらでも内容を把握しやすくなります。
6. 実績・お客様の声で信頼性を高める
商品が魅力的でも、初めて見る会社や商品であれば、
「本当に大丈夫？」
「実際に使っている人はいる？」
「この会社を信用していい？」
といった不安が生まれます。
そこで有効なのが、実績やお客様の声などの「信頼につながる情報」です。
例えば、
・販売実績
・導入企業数
・受賞歴
・メディア掲載実績
・専門家からの評価
・利用者レビュー
・お客様の声
などがあります。
「高品質です」「多くのお客様に選ばれています」と企業側が説明するだけではなく、具体的な数字や第三者の評価を掲載することで説得力を高められます。
ただし、実績の数字や口コミを掲載する場合は、根拠のある正確な情報を使用しましょう。
7. FAQで購入前の不安を解消する
LPを最後まで読んでも、ユーザーにはさまざまな疑問が残ります。
例えば、
「送料はいくら？」
「返品できる？」
「初心者でも使える？」
「申し込み後いつ届く？」
「解約方法は？」
などです。
こうした疑問が残った状態では、ユーザーはCTAボタンの直前まで来ても購入をためらう可能性があります。
そこでクロージング付近にFAQを配置し、ユーザーが行動する直前の不安を解消します。
FAQを考える際は、企業側が説明したい内容ではなく、「ユーザーが購入を迷う理由」を考えるのがポイントです。
実際に問い合わせが多い質問がある場合は、優先的に掲載するとよいでしょう。
8. 最後はCTAでユーザーの行動を促す
LPの最終目的は、ユーザーに何らかの行動を起こしてもらうことです。
商品販売なら「購入」、サービスなら「問い合わせ」「資料請求」「無料相談」などがコンバージョンになります。
そのためLPの最後には、ユーザーが次に何をすればよいのかが明確に分かるCTAを配置します。
例えば、
「今すぐ購入する」
「無料で資料請求する」
「無料相談を予約する」
など、クリック後の行動が分かる文言がおすすめです。
「詳しくはこちら」のような曖昧な表現より、具体的なアクションを示した方がユーザーは判断しやすくなります。
また、縦に長いLPの場合、CTAをページ最下部だけに配置する必要はありません。
ファーストビューや商品説明後など、ユーザーが「欲しい」「申し込みたい」と感じる可能性がある場所にもCTAを設置しておくと、スムーズに行動できます。
LP構成を作るときは最初にワイヤーフレームを作る
LP制作では、いきなりPhotoshopやFigmaなどでデザインを始めるのではなく、最初に構成を整理することをおすすめします。
そこで使用するのがワイヤーフレームです。
ワイヤーフレームでは、
「ここにキャッチコピー」
「ここに商品画像」
「次に悩みを掲載」
「ここで商品の特徴を説明」
「最後にCTA」
というように、ページ全体の情報を簡単な図で整理します。
この段階では色やフォント、装飾などを細かく決める必要はありません。
重要なのは「情報の順番」です。
デザインを作り込んだ後に構成を変更すると、大幅な修正が必要になります。
先にワイヤーフレームでページ全体の流れを確認しておけば、デザイン作業もスムーズになります。
LPの構成でよくある失敗
最後に、LPの構成を作る際によくある失敗も確認しておきましょう。
商品説明から始めてしまう
企業側は商品について詳しく知っているため、すぐに機能や特徴を説明したくなります。
しかし、初めてページを見るユーザーは、まだ商品に興味を持っていない可能性があります。
まずは「自分に関係がある」と感じてもらい、その後に商品説明へ進む流れを意識しましょう。
情報を詰め込みすぎる
LPは情報量が多くなりやすいですが、すべての情報を同じ強さで見せると、何が重要なのか分からなくなります。
見出し、画像、余白などを使って情報に優先順位を付けましょう。
CTAが最後にしかない
ユーザーが購入したいと思うタイミングは人によって違います。
すでに商品を知っているユーザーなら、ファーストビューを見ただけで購入を決める可能性もあります。
そのため、ページの途中にも適切にCTAを配置しておきましょう。
スマホでの見え方を考えていない
現在のLP制作ではスマートフォンでの表示を無視できません。
PCではきれいに見えていても、スマホでは文字が小さい、画像内の文字が読めない、CTAが見つけにくいといった問題が起こることがあります。
LPの構成を考える段階から、スマホではどの順番で情報が表示されるのか確認しておきましょう。
まとめ｜LPはユーザーの心理に合わせて構成する
LPの構成で重要なのは、企業が伝えたい情報を一方的に並べるのではなく、ユーザーが知りたい情報を適切な順番で伝えることです。
基本的には、
ファーストビュー
↓
問題提起・共感
↓
商品・サービスによる解決策
↓
ベネフィット
↓
商品の特徴・選ばれる理由
↓
実績・お客様の声
↓
FAQ
↓
CTA
という流れをベースにすると、LP全体を整理しやすくなります。
ただし、すべてのLPを同じ構成にする必要はありません。
商品の認知度、価格、ターゲット、購入までに必要な検討時間などによって、ユーザーが求める情報は変わります。
大切なのは、「この情報を載せたい」ではなく、
「ユーザーはこの時点で何を知りたいのか？」
を考えながら構成することです。
デザインを始める前にページ全体の構成を整理し、ユーザーが迷うことなくCTAまで進める流れを作りましょう。
【テンプレートを使って簡単にデザインをしたい方はAdobe Express】
関連記事
LPの商品画像の作り方｜売れるデザインに共通する7つのポイント
LPのファーストビューの作り方｜成果につながるデザイン7つのポイント
Photoshopで画像の被写体を切り抜く方法【初心者〜プロまで解説】
Photoshopでガラス割れエフェクトを作る方法【初心者向け】リアルなひび割れ加工を簡単解説
ペイントツールのスタンダード【CLIP STUDIO PAINT PRO】