LPのセクション構成とは?ワイヤーフレームで決める基本の並び順と理由

LPのセクション構成の基本

まずは、LPとはどんなページなのか、そしてLPがどんなセクションで、どんな順番に組み立てられているのかを押さえましょう。

LPとは

LPとは「ランディングページ(Landing Page)」の略で、もともとは、広告や検索結果のリンクから訪れた人が最初に着地(ランディング)するページのことです。

ただ、Web制作の現場で「LPを作る」という場合は、1つの商品やサービスについて、購入・申し込み・資料請求といった1つの行動をしてもらうために作る、縦に長い1枚のページを指すことがほとんどです。

この記事でも、後者の意味でLPという言葉を使います。

LPは、会社のホームページのように多くの情報から好きなものを選んでもらうページではなく、上から順番に読んでもらいながら、最後に1つの行動へ導くページです。

そのため、どんな話をどんな順番で見せるか、つまりセクション構成が、ページの成果を大きく左右します。

セクション構成とは

セクションとは、ページを話題ごとに区切ったひとまとまりのことで、「お悩み」「商品の特徴」「お客様の声」のように、1つのセクションで1つの話題を扱います。

セクション構成とは、これらのセクションを、どの順番で積み重ねるかを決めた設計のことです。

LPのセクションは、大きく次の3つのパートに分けて考えると整理しやすくなります。

• ファーストビュー
  ページを開いて、スクロールせずに最初に見える範囲です。
  「何のページか」「自分に関係があるか」をひと目で伝え、続きを読んでもらう役割を持ちます。
• ボディ
  ページの中盤です。
  悩みへの共感、解決策、商品の特徴、実績などを順番に伝え、「良さそうだ」「信じてよさそうだ」と納得してもらう役割を持ちます。
• クロージング
  ページの最後です。
  残った不安を取り除き、申し込みボタンなどで行動を後押しする役割を持ちます。

3つのパートの関係を、写真や飾りを入れずに、箱だけで配置を描いた図で見てみましょう(見本では、パートの違いが分かるように色分けしています)。

このように、配置や構成だけを箱と線で描いた設計図を「ワイヤーフレーム」と呼びます。

実際のワイヤーフレームは、灰色の四角を並べ、文章が入る部分は横線を引いて代わりにするくらいの、ラフなもので十分です。

最初からきれいに作り込む必要はなく、紙に鉛筆で四角を描くだけでも構いません。

見本Aのように、LPは上から「つかむ→納得してもらう→背中を押す」の順に積み重なっています。

見本Bは、そのうちファーストビューの中身を拡大したもので、短い言葉と画像で「何のページか」を伝え、すぐ申し込みたい人のためのボタンも置いています。

基本の並び順と、その理由

LPでよく使われるセクションの並び順は、次のとおりです。

1. ファーストビュー
   キャッチコピーとメイン画像で、何のページかを伝えます。
2. 悩み・共感
   「こんなことで困っていませんか」と、見る人の悩みを言葉にします。
3. 解決策(商品の紹介)
   その悩みを解決するものとして、商品やサービスを紹介します。
4. 特徴・ベネフィット
   選ばれる理由と、使うことで得られる良いこと(ベネフィット)を伝えます。
5. 実績・お客様の声
   利用者数や導入事例、利用者の感想などで、言っていることの裏付けを示します。
6. よくある質問
   料金や解約方法など、申し込む前に残りがちな疑問に答えます。
7. 申し込み(CTA)
   申し込みボタンやフォームを置き、行動を後押しします。
   CTAは「Call To Action(行動喚起)」の略で、「購入する」「無料で試す」「資料を請求する」のように、見る人に行動してもらうためのボタンなどのことです。

この順番は、ページを読み進める人の頭に浮かぶ疑問の順番に合わせたものです。

セクション	見る人の頭に浮かぶ疑問	セクションの役割
ファーストビュー	これは何のページ?自分に関係ある?	続きを読む理由を作る
悩み・共感	この商品は、自分の困りごとを分かってくれている?	「自分のための話だ」と感じてもらう
解決策	で、どうすれば解決できるの?	商品を「解決の手段」として紹介する
特徴・ベネフィット	ほかではなく、なぜこれなの?	選ぶ理由を示す
実績・お客様の声	言っていることは本当?	根拠を示して信頼してもらう
よくある質問	でも、料金や解約は大丈夫?	最後の不安を取り除く
申し込み(CTA)	では、どうやって申し込む?	迷わず行動できる場所を用意する

たとえば、いきなり商品のスペックから話し始めると、まだ「自分に関係がある」と感じていない人には、その良さが伝わりません。

反対に、悩みに共感してから解決策を示すと、同じスペックでも「自分の悩みを解決してくれるもの」として読んでもらえます。

つまり、LPのセクション構成は、見る人の疑問に、聞かれる順番どおりに答えていく並びだと考えると理解しやすくなります。

LPのワイヤーフレームでセクション構成を組み立てる

ここからは、LPのセクション構成を、実際にワイヤーフレームで組み立てる手順と、各セクションで気をつけることを見ていきます。

いきなりデザインツールで色や写真を入れ始めるのではなく、先に箱だけで構成を決めるのがポイントです。

ワイヤーフレームで構成を決める手順

LPの構成は、次の手順で決めると迷いにくくなります。

1. ゴールと相手を1つずつ決める
   「誰に」「何をしてもらうページか」(例: 「在宅で働く人に、無料体験に申し込んでもらう」)を一文で書きます(目的から配置を決める考え方は目的から逆算するレイアウトの決め方で解説しています)。
2. 相手の疑問を書き出す
   その人が申し込む前に知りたいこと、不安に思うことを、思いつくだけ書き出します。
3. 疑問を答える順番に並べ、セクションにする
   上の表を参考に、「何のページか」から「どう申し込むか」まで、聞かれる順に並べます。
4. 箱だけで描く
   紙やデザインツールに、セクションごとの箱を縦に並べ、それぞれに見出しと入れる要素(画像・文章・ボタンなど)をメモします。
5. 見出しだけを上から読んでみる
   各セクションの見出しを順番に読み、1つの話としてつながっているかを確かめます。

ワイヤーフレームの段階で色や写真を決めないのは、見た目に気を取られず、話の順番と情報の過不足だけに集中するためです。

色や写真を作り込んだあとで話の順番を入れ替えることになると、画像やレイアウトをまとめて作り直すことになり、手間が何倍にも増えてしまいます。

家を建てるときに、壁紙や家具を選ぶ前に間取り図を決めるのと同じで、構成が固まってから見た目を作れば、こうしたやり直しを減らせます。

同じ商品のLPを、話の順番を考えずに作ったワイヤーフレームと、基本の並び順で作ったワイヤーフレームで比べてみましょう。

NGの見本は、作る側が言いたい順番(会社の紹介→機能→料金)で並んでいるため、最初の数セクションで「自分には関係なさそう」と感じた人が読むのをやめてしまいます。

OKの見本は、ファーストビューで「誰のどんな悩みを解決するか」を示し、悩み、理由、利用者の声、料金と疑問への回答、申し込みの順に、見る人の疑問に沿って並べています。

入れている情報の量はほとんど同じでも、並べる順番だけで、最後まで読まれやすいページになります。

各セクションで押さえること

並び順が決まったら、各セクションに何を入れるかを考えます。

• ファーストビュー
  キャッチコピー・メイン画像・CTAボタンの3つを中心にし、情報を詰め込みすぎないようにします(3つの組み立て方はメインビジュアルとは?で解説しています)。
  読み始めの場所にボタンを置くのは、広告や紹介ですでに興味を持って来た人や、2回目以降に訪れた人のように、下まで読まずに申し込みたい人もいるためです。
  ボタンがあっても、じっくり読みたい人はそのままスクロールして読み進められます。
  広告から来たページなら、広告で見た内容とファーストビューの内容をそろえることも大切です。
  Googleも、広告をクリックした人にとってランディングページが関連性があり有益かどうかを「ランディングページの利便性」として評価しています(ランディング ページの利便性 – Google 広告 ヘルプ)。
• 悩み・共感
  「忙しい」のようなぼんやりした言葉ではなく、「仕事中に家族に話しかけられて集中が途切れる」のように、相手が自分のことだと感じられるくらい具体的に書きます。
• 特徴・ベネフィット
  特徴は商品そのものの性質(例: 「防音パネル付き」)、ベネフィットはそれによって得られる良いこと(例: 「家でも会議に集中できる」)です。
  ベネフィットは、「その商品を使った人の毎日や気持ちが、どう良く変わるか」と考えると見つけやすくなります。
  たとえば、「バッテリーが24時間もつ」が特徴なら、「充電器を持ち歩かずに、1日中安心して出かけられる」がベネフィットです。
  特徴を書いたら「だから、使う人はどうなるの?」と自分に問いかけると、ベネフィットにたどり着けます。
  特徴だけを並べると機能の説明書になってしまうので、特徴とベネフィットをセットで書きましょう。
• 実績・お客様の声
  数字や感想は、実際に調べた結果や、本人の許可を得た声だけを載せます。
  根拠のない「満足度No.1」のような表示は、景品表示法(商品やサービスの品質・価格などについて、実際よりも著しく良いと思わせる表示などを禁止する法律)の問題になることがあります(「No.1表示に関する実態調査報告書」の公表について – 消費者庁)。
  ワイヤーフレームの段階で仮に入れた「業界No.1」のような言葉が、根拠を確かめないまま公開まで残ってしまうこともあります。
  仮の文言は仮だと分かる書き方にしておき、根拠となる調査(調べた機関・時期・対象)を用意できない表示は、実際の利用者数などの確かな数字に置き換えましょう。
• よくある質問
  料金・解約・支払い方法・届くまでの日数など、申し込みの直前に迷いやすい点に答えます。
• 申し込み(CTA)
  何をすればよいかが一目で分かるボタンやフォームを置きます。
  CTAボタンはページの最後だけでなく、ファーストビューや中盤にも置くのが一般的です(置き場所の使い分けはCTAの配置とは?で、ボタンそのものの作り方はCTAボタンとは?で解説しています)。

商品に合わせてセクションを足し引きする

ここまで紹介した並び順は、あくまで基本の型です。

商品の値段や、申し込むまでに迷う時間の長さによって、必要なセクションの量は変わるためです。

たとえば、数百円で気軽に買える商品なら、悩み・特徴・申し込みだけの短いLPで十分なこともあります。

反対に、高額なサービスや、長く使い続ける契約のように慎重に選ばれるものでは、実績や導入事例、よくある質問を厚くしたり、他社との比較表や料金プランの説明を足したりします。

迷ったら、手順2で書き出した「相手の疑問」に戻り、答えていない疑問があればセクションを足し、どの疑問にも答えていないセクションがあれば削りましょう。

実践のポイント

LPのセクション構成で陥りやすい失敗と、よくある疑問をまとめます。

注意点・よくある間違い

• ファーストビューに、キャンペーン情報・機能・受賞歴・料金など、伝えたいことを全部詰め込んでしまうことがあります。
  何のページかが分からなくなるので、ファーストビューは「誰の、どんな悩みを解決するか」に絞り、細かい情報はボディに回しましょう。
• ボディが、商品の機能の説明を並べただけになってしまうことがあります。
  悩み→解決策→理由→根拠という話の流れになっているかを、見出しだけを読んで確かめましょう。
• 1つのLPに、ゴールを複数持たせてしまうことがあります。
  「購入」「資料請求」「メルマガ登録」のボタンが同じくらい目立つと、どれを押せばいいか迷わせてしまうので、一番してほしい行動を1つに決めましょう。
• セクションの区切りが分かりにくく、どこから次の話題なのかが伝わらないことがあります。
  セクションとセクションの間は、セクションの中の要素同士の間隔より広く空けましょう(詳しくはセクション間の余白とは?で解説しています)。
• パソコンの画面でだけ構成を考えてしまうことがあります。
  スマートフォンではページがさらに縦に長くなるので、スマホの画面幅でもワイヤーフレームを描き、長すぎて途中で疲れないかを確かめましょう。
  たとえば、パソコンでは「選ばれる3つの理由」を横に3つ並べていても、スマホでは縦に3つ積み重ねることになり、その分だけページが長くなります。
  長くなりすぎるときは、文章を短くしたり、画像を小さめにしたりして調整します(スマホから考える進め方はモバイルファーストとは?で解説しています)。

よくある質問

• Q. LPとホームページ(コーポレートサイト)は何が違う?
  A. ゴールの数と、読み方が違います。
  ホームページは、会社やサービスについてのいろいろな情報を、見る人が好きな順番で選んで読むためのサイトです(ホームページとLPの組み立ての違いはWebページの基本構造とは?で解説しています)。
  LPは、1つの商品やサービスについて、上から順番に読んでもらいながら1つの行動へ導くためのページです。
• Q. セクションはいくつくらいにすればいい?
  A. 決まった数はありません。
  この記事で紹介した7つは基本の型なので、商品の値段や、見る人の疑問の多さに合わせて足し引きしましょう。
  数よりも、「どのセクションも、見る人のどれかの疑問に答えているか」を基準にするのがおすすめです。
• Q. 縦に長いLPは、最後まで読まれないのでは?
  A. 全員に最後まで読んでもらうことは難しいと考えておきましょう。
  だからこそ、ファーストビューや中盤にもCTAボタンを置き、途中で「申し込もう」と決めた人がすぐ行動できるようにします。
  あわせて、セクションの見出しだけを流し読みしても話が分かるようにしておくと、途中で読むのをやめられにくくなります。
• Q. LPのワイヤーフレームは何で作ればいい?
  A. 最初は紙とペンで十分です。
  セクションの順番を決める段階では、箱を描いて並べ替えられれば目的を果たせるからです。
  構成が固まったら、Figmaなどのデザインツールで、実際の画面幅に合わせた箱を描いていきましょう。

まとめ

LPのセクション構成は、ファーストビュー・ボディ・クロージングの3つのパートに分かれ、基本は「ファーストビュー→悩み→解決策→特徴→実績→よくある質問→申し込み」の順に並びます。

この順番は、見る人の頭に浮かぶ疑問に、聞かれる順番どおりに答えるためのものなので、商品に合わせてセクションを足し引きするときも、「相手の疑問」を基準に考えましょう。

まずは自分が作りたいLPのゴールを一文で書き、見る人の疑問を5つ書き出して、それを答える順番に並べた箱だけのワイヤーフレームを紙に描いてみてください。