LPの構成の作り方｜広告訴求からワイヤーフレームに落とす実践例

構成を作る前に、入口と出口を一文で決める

最初に「来訪者」「入口」「そのページで完了してほしい行動」を決めます。新規の資料請求、既存顧客の追加購入、採用候補者の応募では、必要な説明が違います。どの程度サービスを知っている人かまで整理しましょう。

この記事では、架空の法人向け収納備品サービスを一つの例にして、コピー・構成表・PCとスマートフォンのワイヤーフレームをつなげます。地域、提供範囲、金額、運用条件も教材用に設定したものです。

設計メモ：移転準備中の総務担当者が「オフィス収納の見積相談」を案内する検索広告から来て、設置条件と費用の考え方を確認し、見積相談へ進む。対象は東京都23区内のオフィスという設定です。

主な行動は「設置条件を相談する」にそろえ、まだ比較したい人には料金と相談後の流れを先に確認できる導線を用意します。広告の文言も、この対象・サービス・行動から作ります。

読者の疑問を集め、掲載する順番を決める

営業で聞かれる質問、問い合わせ内容、商品資料、既存広告の反応を並べます。想像だけで長い人物像を作るより、実際に購入を止めている疑問を見つける方が構成に役立ちます。

疑問は、広告を見てすぐ確認するもの、比較段階で気になるもの、申し込む直前の不安に分けます。その順番が、構成案の骨格になります。商品をすでに知る指名検索向けなら、価格・在庫・申込条件を早めに置くなど調整します。

8ブロックを実際のコピーと素材へ落とす

ワイヤーフレームは、色や装飾を作り込む前に、内容と配置を合意する設計図です。「メリット」「実績」とだけ書かれた箱では、原稿も撮影も進めにくくなります。見出し、本文の要点、必要素材、主張の根拠まで対応させます。

料金と条件は一つのブロックで読み切れるようにし、CTAは相談後の説明とそろえます。根拠がない実績欄は作らず、この例では検討方法が分かる架空の配置図を置きます。実在の導入事例が用意できたときは、同じ場所を許諾済みの写真と条件説明へ差し替えます。

完成例｜PCとスマートフォンのワイヤーフレーム

下の見本は、表の8ブロックに実際の原稿を入れたものです。PCでは冒頭の文章と配置図を隣に置き、スマートフォンでは一列へ並べます。PC表示とスマートフォン表示は同じ内容で、図・条件・フォームの関係を比べられます。

①冒頭は対象・サービス・対応条件を短く示す、④図は検討方法を説明する、⑤料金と追加条件は離さない、⑧フォームの直前に送信後の連絡方法を置く。この四点を優先し、飾りは後から検討します。

構成を渡すときの、表現方針の記入例

この収納相談LPでは、情報の順番を合意してから印象を調整します。次のように欄を分けると、「雰囲気を変える」という依頼で構成まで作り直す手戻りを防げます。

訴求

移転先の寸法と収納物を整理し、候補を選ぶための相談ができること。「必ず期日に間に合う」とは約束しない。

レイアウト

対象を示す見出し→設置場面と検討方法→料金・条件→相談後の流れ→CTA。上の8ブロックをこの役割に対応させる。

トンマナ

落ち着いた実用感。図面・寸法・条件を探しやすくし、装飾より情報の区切りを優先する。

参考から使う点・変える点

見本の「料金と追加条件を近づける」関係を使う。配置図は相談対象のオフィスへ置き換え、別商材の写真や販売条件は流用しない。

固定・変更可

正式サービス名、対象エリア、見積項目、相談後の案内は固定。背景色・写真の切り取り方は提案可。情報の順序を変える案は、構成担当へ理由を戻して確認する。

原稿入りのワイヤーフレームです。架空のサービス、条件、金額を使用しています。見本のCTAとフォームは配置を示すもので、申込はできません。狭い画面ではPC見本も一列に再配置されます。

実画面を構成表へ読み替える｜CONCの使用場面

実制作物を見るときも、「画像がある」で止めず、その画像が答える疑問を書きます。CONCの記事LPには、目元・口元へ商品を当てる寄りの画像があり、商品先端が触れる位置を確認できます。使用場面を具体化する役割として読むと、構成表の「必要素材」まで落とせます。

掲載画面はSunday ParkのCONC公開制作事例からの抜粋です。商品説明・価格等は制作時点のクリエイティブで、現在の商品情報や効能の推奨ではありません。画面の役割は観察に基づく編集上の考察で、成果を測定した結論ではありません。画像内の注記も含めて掲載しています。

CONCは美容商品の記事LPです。上の法人向け見積LPとは読者の疑問も申込の重さも異なります。転用するのは文章の順番や表現そのものではなく、「この判断には何の説明と素材が必要か」を決める方法です。

コピーして使える、8ブロックの構成テンプレート

先に入口・出口を一文で書き、各ブロックへ「見出し／本文／素材と出典／行動／確認担当」を入れます。完成例と同じ8項目なので、抜けている材料を制作前に確認できます。不要なブロックは理由を書いて省いてください。

一度埋めたら、見出しだけを上から読みます。「対象→できること→判断材料→費用→手順→相談」が追えない箇所があれば、装飾の前に順序を直しましょう。次に、原稿を見た担当者が必要な写真や図を具体的に挙げられるかを確認します。

ファーストビューで、対象・内容・次の行動を伝える

最初の画面では、サービス名だけでなく、誰にとってどんな検討ができるページかを伝えます。「課題をすべて解決」のような大きい言葉より、「移転先の寸法に合わせて選ぶ」の方が、ページで確認できる内容を予想できます。

写真は、雰囲気だけで選ばず、説明を補うものを用意します。収納の例なら、製品の寄りだけでなく設置状態が分かる写真が役立ちます。人物を使うLPなら、視線、余白、商品が見える位置をデザイン前に共有します。スマートフォンでトリミングすると商品が隠れないかも確認しましょう。

ボタンは「送信」「詳しく」だけでなく、行き先が分かる言葉にします。見積相談なのに「今すぐ購入」、資料請求なのに「無料診断」と表示すると、送信後の体験がずれます。無料・限定・最短などの条件は実際に提供できる場合に限って記載します。

冒頭で伝える情報を絞るには、LPファーストビューの点検で対象・便益・根拠・次の行動を確認します。

根拠を、主張の近くへ置く

比較されるLPでは、特徴を並べるだけでなく、その特徴を確かめる情報が必要です。仕様なら寸法や対応条件、実績なら対象と担当範囲、顧客の声なら実際の発言と許諾を確認します。

数字を載せる場合は、対象期間、集計対象、算出方法を追えるようにします。引用元の違う数字を比較したり、利用者の一例を全員に期待できる結果のように見せたりしないことが重要です。広告と判別しにくい体験談の扱いは、消費者庁のステルスマーケティングの案内も参照してください。

根拠資料がないときは、飾りの実績欄を埋めるために数字を作らず、実際の作業内容、提供条件、商品写真、依頼から納品までの説明を充実させます。

スマートフォンで、読む・押す・入力するを確認する

PC用の構成を単に縦一列へ並べても、スマートフォンでは重要な情報が離れすぎることがあります。料金の注記を表のずっと下へ置いたり、画面を覆う追従ボタンで入力欄を隠したりしないように確認します。

• 見出しだけ読んでも、検討に必要な話の流れが追えるか
• 画像の中の重要な文字が拡大しなくても読めるか
• 比較表が画面からはみ出さず、必要なら横へ動かせるか
• ボタンと本文リンクが見分けられ、押し間違いにくいか
• フォームのラベル、必須表示、エラーの理由が分かるか
• 戻ったり入力を間違えたりしても、内容が無駄に消えないか

テストは、制作者が正しい操作をするだけで終えず、未入力、長い会社名、スマートフォンのキーボード表示、送信失敗も含めます。

構成がスマートフォンで読めるかを確かめるには、LP本文のデザイン改善で情報のまとまりと操作しやすさを見直します。

公開前のレビューと、公開後の改善をつなぐ

構成案を承認するときに、何を測るかも決めます。見積相談の例なら、ボタンのクリック、フォームの開始、送信完了、有効な相談を分けます。クリック数だけ増えて相談の質が落ちた場合は、誘導文や条件の伝え方を見直します。

Google アナリティクスのキーイベントのような仕組みを使う場合も、重要な成果の定義を先に決めてから設定します。ページの一部を直す際は、仮説・変更箇所・開始日・結果を残してください。

構成をつくる順番は、入口と出口、疑問、判断材料、配置、実装、検証です。制作費の整理はLP制作の費用相場へ。構成・コピーから相談したい方はSunday Parkの制作サービスをご覧ください。

参考情報・出典

• Google アナリティクス：キーイベント重要行動と計測の定義／確認：2026-10-04
• 消費者庁：ステルスマーケティング規制広告・体験談の表示／確認：2026-10-04
• Sunday Park：サービス一覧構成・コピー・デザイン・実装の提供案内／確認：2026-10-04
• Sunday Park：ユーグレナ CONC支援事例公開記事LPの使用場面と担当範囲。役割の解釈は本記事の考察。／確認：2026-10-04