LPの構成の作り方｜伝わる8ブロックの型とAIで下書きを作る手順 | デザナビ

※本記事にはアフィリエイトリンク（PR）が含まれる場合があります。

LPを作ろうとして、最初の1行から手が止まってしまう。そんな経験はありませんか。

LP（ランディングページ）は、1枚のページで商品やサービスを紹介し、申し込みや問い合わせにつなげるページです。見た目を整える前に、何をどの順番で見せるかという構成でつまずく人が多いところです。順番がずれていると、きれいなデザインでも読者は途中で離れてしまいます。

この記事では、LPの構成の作り方を3つに分けて整理します。基本となる8ブロックの役割、構成を作る前に決めておく3つの前提、そしてChatGPTなどのAIで構成の下書きを作る流れです。あわせて、AIが出した案をそのまま使わないためのチェック項目もまとめました。初めてLPを担当する人が、今日から手を動かせる形にしています。

LPの構成は「読者の気持ちの順番」で決まる
LPの構成の基本8ブロックと役割
構成を作る前に決める3つのこと
AIでLP構成の下書きを作る5ステップ
1. プロンプトに入れると精度が上がる要素
AIの下書きをそのまま使わないためのチェック
1. よくあるつまずきと対処
まとめ

LPの構成は「読者の気持ちの順番」で決まる

LPは上から下へ、一本道で読まれるページです。ブログやコーポレートサイトと違い、途中に別ページへの出口をあまり作りません。だからこそ、どの順番で何を見せるかが読まれ方に大きく影響します。

構成を考えるときは、デザインの前に読者の気持ちの流れを並べます。たとえば次のような順番です。

これは何のページ？（一瞬で理解したい）
自分に関係ある話？（共感したい）
どうやって解決するの？（方法を知りたい）
本当に大丈夫？（根拠を確かめたい）
面倒ではない？（手順を知りたい）
迷いが残っている（不安を消したい）
今申し込む理由は？（背中を押してほしい）

この気持ちの順にブロックを置くと、構成の骨組みはほぼ決まります。逆に、いきなり機能の説明や会社の沿革から始まると、読者は「自分には関係ない」と判断して離れやすくなります。

筆者はスマホLPなどのWeb制作・デザインを仕事にしています。デザインに入る前に、この順番をテキストで並べ直しておくと、後からの大きな作り直しを減らしやすくなります。見た目の調整より、順番の調整のほうが修正コストは小さいためです。

LPの構成の基本8ブロックと役割

ここからは、よく使われる8つのブロックを順番に見ていきます。すべてを入れる必要はありません。ゴールや商材によって省いたり、順番を入れ替えたりして使います。

1. ファーストビュー

スクロールせずに最初に見える範囲です。キャッチコピー、補足の一文、メインの画像、ボタンを置きます。ここで「誰向けの、何のページか」が伝わるかが分かれ目です。

対象者を言葉にする（例：初めての人向け、スマホだけで完結）
得られる結果や変化を一言で書く
スマホでは文字量を絞り、1画面に1メッセージ

2. 共感・問題提起

読者の悩みを、読者の言葉で書き出すブロックです。「こんなことで困っていませんか」という形で、箇条書きにすると読みやすくなります。ここが長すぎると不快に感じられるので、3〜5項目で十分です。

3. 解決策・サービスの紹介

悩みに対して「これで解決できます」とつなげる部分です。商品名より先に、どう解決するのかの仕組みを短く説明します。専門用語を使うときは、その場で一言の説明を添えます。

4. ベネフィット（得られる変化）

機能ではなく、読者の生活や仕事がどう変わるかを書きます。機能とベネフィットは次のように対応させて考えます。

機能：テンプレートが使える → ベネフィット：ゼロから考えずに形になる
機能：オンライン完結 → ベネフィット：移動時間をかけずに進められる

3つ前後に絞ると、記憶に残りやすくなります。

5. 根拠・信頼情報

読者の「本当に？」に答えるブロックです。利用者の声、導入実績、監修者、受賞歴、メディア掲載などが入ります。手元に素材がない場合は、無理に作らず、提供者から出せる情報を確認してください。数字や実績は、確認できたものだけを書くのが前提です。

6. 利用の流れ

申し込みから利用開始までを3〜5ステップで示します。「面倒そう」という心理的なハードルを下げる役割です。所要時間や準備物を書けると、さらに伝わりやすくなります。

7. よくある質問

価格以外の不安、解約や変更の条件、初心者でも大丈夫かといった疑問に答えます。問い合わせで実際に多かった質問を集めると、精度が上がります。料金の詳細は公式の案内に合わせ、ページ上の表記と矛盾させないようにします。

8. CTA（行動をお願いする部分）

ボタンとその周囲の文言です。何が起きるかが分かる言葉にします。

「送信」より「無料で資料を受け取る」
ボタン周りに安心情報を一言添える（所要時間、入力項目の数など）
長いLPでは、中盤と最後の複数箇所に置く

構成を作る前に決める3つのこと

構成が決まらない原因は、たいてい前提が決まっていないことにあります。次の3つを先に言葉にしておきます。

1. ターゲット

「30代女性」のような属性だけでは足りません。どんな場面で、何に困っていて、今どんな行動をとっているかまで書き出します。たとえば「副業でデザインを始めたいが、何から学ぶか決められない人」という粒度です。

2. ゴール

1つのLPで取ってほしい行動は1つに絞ります。資料請求と無料相談と購入を同じ重さで並べると、読者は選べずに離れやすくなります。サブの行動は、優先度を下げて小さく置きます。

3. 訴求軸

いちばん伝えたい強みを1つ決めます。安さ、速さ、サポート、実績など、候補が複数あっても軸は1本です。軸が決まると、ファーストビューのコピーもブロックの順番も決めやすくなります。

AIでLP構成の下書きを作る5ステップ

ここからが本題です。AIは真っ白な状態から構成を考える手間を減らすのに向いています。ただし、一度の指示で完成を狙わず、工程を分けるのがコツです。

前提を箇条書きで渡す。商材、ターゲット、ゴール、訴求軸、禁止事項をまとめて最初に入力します。前提が薄いと、どこにでもある一般的な案が返ってきます。
ブロック構成だけ先に出させる。本文を書かせる前に、「ブロック名／目的／入れる要素」の3点セットで一覧にしてもらいます。全体の順番を先に固めるためです。
ファーストビューの案を複数出させる。キャッチコピーは3〜5案まとめて出させ、気に入った表現だけを組み合わせます。1案だけだと比較ができません。
ブロックごとに中身を埋める。共感パート、ベネフィット、FAQなどを1ブロックずつ指示します。長いページを一度に書かせるより、精度が安定します。
役割を変えて指摘させる。「初めてこのページを見た読者」として読んで分かりにくい箇所を挙げてもらい、次に「添削者」として改善案を出してもらいます。

筆者は、AIツールにデザインを評価させて「なぜ良いのか、なぜ悪いのか」を言語化させる方法で学習しています。この考え方は構成にも使えます。出てきた案に対して理由を説明させると、自分の判断基準が整理されていきます。

プロンプトに入れると精度が上がる要素

読者の状況（悩み、知識レベル、閲覧デバイス）
ゴールとなる1つの行動
使ってはいけない表現（過度な断定や保証の言葉など）
出力形式（見出しと箇条書き、ブロックごとに区切る）
文字数の目安（ブロックあたり何文字程度か）

構成が固まると、必要なビジュアルも具体的になります。「どんな写真やイラストが必要か」が言葉になっている状態なら、素材の指示も出しやすくなります。筆者の場合、AI画像生成を使うようになってから、LP制作の素材探しにかかる時間が約5時間から約10分に短縮しました。構成を先に決めておくほど、この効果は出やすくなります。

AIの下書きをそのまま使わないためのチェック

AIが出した構成は、あくまで下書きです。公開前に次の点を自分の目で確認してください。

事実確認：実績、数字、受賞歴などをAIが補ってしまう場合があります。出典を確認できないものは削除します。
表現の確認：効果や収入を保証する言い回し、根拠のない最上級表現は避けます。健康や美容、金融などの分野では、表示に関するルールを提供者と一緒に確認してください。
自分の言葉になっているか：競合ページに似た言い回しは書き換えます。独自のエピソードや現場の言葉を足すと、ページの印象が変わります。
スマホでの見え方：ファーストビューの文字量、ボタンの位置、1画面に入る情報量を実機で確認します。Pinterestなどからの流入はスマホが中心になりがちです。
ゴールが1つか：途中でお願いする行動が増えていないかを見直します。