LPの構成｜成果が出る型とファーストビューの設計

「LPを作ってほしい」と頼まれて、何をどの順に載せればいいのか分からず固まったこと、ありませんか？

LPの構成には型があります。ゼロから発明するものではありません。
このレッスンでは、成果が出るLPの構成の型と、ファーストビューに入れる3つの要素を扱います。読み終わったら、好きなLPを型に当てはめて分解する練習までやりましょう。見た目の作り込みはLPデザインの実務で扱うので、今日は「順番」の話に集中します。

LPの構成が成果を決める

LP（ランディングページ）は、広告や検索から来た人を1つの行動に導くための縦長1ページです。行動は申込み・購入・資料請求・LINE登録など、ページごとに1つだけ。

そして構成は、「何を・どの順で載せるか」の設計図です。同じ商品、同じ写真でも、載せる順番が変わると成果が変わります。

LPはきれいさより順番です。読む人の気持ちが動く順に情報を並べるのが構成の仕事で、デザインはその順番を見やすくする仕事です。

成果が出る構成の型（FV→共感→解決→証拠→CTA）

基本の型はこの5段です。CTA（Call To Action）は、申込みボタンなど行動を促す部品のこと。上から順に、読む人の気持ちに沿って進みます。

順番に意味があります。悩みに共感する前に商品の特長を並べても、「自分には関係ない」と閉じられてしまいます。
この流れは、購買行動モデルで見た「注意→興味→欲求→行動」を1ページに畳んだものです。だから順番を入れ替えると効きが落ちるんですね💡

CTAは最後に1回ではなく、FV・証拠の後・ページ末尾など複数回置きます。読む人がどこで気持ちが固まるかは人それぞれだからです。

ファーストビューに入れる3つの要素

ファーストビューは、ページを開いた瞬間にスクロールなしで見える範囲です。ここで「自分向けではない」と判断した人は、下の力作セクションを一切読みません。だからLPの中で一番大事な場所です。

入れる要素は3つに絞ります。

• キャッチコピー：誰向けの何のページかが一目で分かる言葉。書き方は前のレッスンのとおり
• メインビジュアル：商品そのものか、使った後の良い状態が伝わる写真
• CTAボタン：この時点で気持ちが固まっている人の受け皿。1個で足ります

ファーストビューの判断基準は1つ。初めて見た人が3秒で「誰向けの・何の・ページか」を言えるかです。おしゃれかどうかは、その次の話です。

受賞歴・キャンペーン・SNSリンクなどを全部FVに入れたくなりますが、要素が増えるほど3秒で伝わらなくなります。迷ったら削って下のセクションへ回してください。

スマホで見られる前提で組む

LPの閲覧は多くの場合スマホが中心です。構成の段階から、スマホの画面幅で考えます。

• FVの要素3つが、スマホの1画面に収まるか
• 1セクション1メッセージになっているか（横並びの詰め込みはスマホで縦に崩れます）
• CTAボタンが親指で押せる大きさ・位置にあるか
• 長い文章を図や箇条書きに置き換えられないか

PCの広い画面で組んでからスマホに直すと、たいてい詰め込みすぎに気づきます。順番は逆、スマホから先です。

ミニ実践：好きなLPを型に振り分ける

15分の観察課題です。道具はブラウザと紙だけ◎

1. 気になる商品やサービスのLPを1本開きます。広告をクリックした先のページでも、LPまとめサイトで探しても構いません
2. 上から順にスクロールしながら、各セクションをFV・共感・解決・証拠・CTAの5つに振り分けてメモします
3. 型と違う部分を探します。「証拠が先に来ている」「共感がない」など
4. 最後にFVだけ見直して、「誰向けの・何の・ページか」を3秒で言えるか試します

3本ほど分解すると、売れているLPほど型に忠実なことが分かってきます。分解した経験は、自分が構成を組むときの引き出しにそのままなりますよ。

やってしまいがちな失敗

FVに情報を詰め込む

伝えたいことが多いほどFVが混みます。混むほど3秒で伝わらなくなります。
直し方は、FVは「コピー・ビジュアル・CTA」の3つだけと決めること。残りは下のセクションが受け持ちます。

証拠がない

特長とベネフィットだけで構成すると、「自分でそう言っているだけ」のページになります。
直し方は、数字・利用者の声・第三者の評価のどれか1つを必ず入れること。実績が少ないうちは、制作過程や運営者の顔を見せるだけでも疑いは減ります。

CTAの行き先が2つ以上ある

「購入」と「資料請求」と「SNSフォロー」が並ぶと、読む人は選べず、結局どれも押しません。
直し方は、ページの目的を1つに戻すこと。別の行動を促したいなら、LPをもう1本作ります。

よくある質問

LP構成とは何ですか？

LPに載せる情報の種類と順番を決めた設計図のことです。基本の型はファーストビュー→共感→解決→証拠→CTAの5段で、読む人の気持ちが動く順に並んでいます。デザインを始める前に決めます。

LPの構成要素の順番は変えてもいいですか？

基本は型のとおりをおすすめします。順番は読む人の気持ちの変化に沿って決まっているからです。
例外はあります。有名な商品で悩みの説明が不要なら共感を短くする、指名検索（商品名やサービス名そのもので調べること）で来る人が多いならFV直下に料金を置く、などです。変えるなら理由を言えるときだけにしてください。

LPの作り方の基本は？

順番は、目的とターゲットを決める→構成（このレッスンの型）を組む→コピーを書く→ワイヤーフレーム（枠と線だけで配置を決めた設計図）を作る→デザイン→コーディングまたはツールで公開、です。構成とコピーが先、見た目は後。ここが逆になると作り直しになります。

LPの長さはどのくらいが正解ですか？

決まった正解はありません。判断基準は「行動する前に読む人が知りたいことに、全部答えたか」です。高額な商品や初めて知る商品ほど疑問が多いので長くなり、安価で分かりやすい商品なら短くて足ります。長さは目的ではなく結果です。

次に学ぶこと

今回の要点です。

• LPは1ページ1行動。構成は「何を・どの順で載せるか」の設計図
• 型はFV→共感→解決→証拠→CTA。順番に意味がある
• FVは3要素だけ。3秒で「誰向けの・何の・ページか」
• スマホの画面幅から先に考える

次のレッスンは「CTAとマイクロコピー」。型の出口にあたるボタンを、文言・色・配置の3点から作り込みます。

あわせて読みたい

CTAボタンの文言・色・配置｜マイクロコピーで押される導線を作るページはきれいに作れたのに、ボタンが全然押されない。そんな経験ありませんか？ 押されるボタンと押されないボタンの差は、た…

コース全体の流れはデザインの基本コース目次から確認してください。