LPの構成を決める方法｜原稿の記入例と公開前チェック

仮のサービスを1枚の原稿表にする

以下は原稿を作る練習用の「店舗サイトの営業時間更新」の例です。実在の依頼、顧客の声、当サイトの固定料金プランを示すものではありません。自社の提供条件を決める前に、そのまま公開しないでください。

表は横にスクロールできます。

「高品質」「すぐに解決」だけの見出しを、この表のどの情報へ置き換えるか考えます。受付後に追加質問が必要なら、最初から個人情報を大量に求めず、判断に不可欠なURLと変更希望を中心にします。

本文の順序はこの表が唯一の正解ではありません。料金を最初に知りたい訪問者なら、提供範囲の直後へ料金条件を置きます。公開判定は、別の人が原稿だけを読んで「頼めること・頼めないこと・送信後の流れ」を説明できるかで確かめます。実装と公開の準備、ボタン配置の確認は別記事に分けています。

最初に決めるのは、LPでしてほしい一つの行動

LPは、情報を広く案内するホームページとは違い、特定の人に特定の行動をしてもらうためのページです。問い合わせ、予約、資料請求、無料相談など、最終的にしてほしいことを一つ決めます。

行動が複数あると、見出しもボタンも散らかりやすくなります。最初は「このページを読み終えた人に何をしてほしいか」を一つに絞り、その行動に必要な情報だけを並べると作りやすくなります。

ファーストビューでは、対象・価値・次の一歩を伝える

ファーストビューは、訪問者が続きを読むかを決める場所です。メインコピーを格好よく見せることより、誰向けで、何が変わり、次に何をすればよいかが一目で分かることを優先します。

補足の説明や料金目安を添える場合も、主役のメッセージを邪魔しない量に抑えます。スマホで開いたときに、最初の画面だけで意味が通じるかを確認しましょう。

悩みを言語化してから、解決策を見せる

読み手は、サービスの説明より先に「自分の困りごとを分かってもらえているか」を確かめています。よくある不安、手間、失敗しやすい点を具体的に示し、そのあとで解決策を案内すると、説明を自分ごととして読んでもらいやすくなります。

悩みを増やしすぎる必要はありません。実際に相談されやすい内容を3つ前後に絞り、「こういう状態なら、このサービスでここまで対応する」とつなげると読みやすくなります。

強みは、比較ではなく判断材料として伝える

「高品質」「丁寧」といった言葉だけでは、初めての人は具体的に判断しにくいものです。対応範囲、進め方、納期の考え方、利用できる人・できない人など、相談前に知りたい情報を具体的に置きます。

• 何をどこまで対応するか。
• 依頼から公開までの進め方。
• 料金の目安と、追加費用が発生しやすい条件。
• 対応できないことや、事前に準備してほしいもの。

実績を載せる場合は、件数だけでなく、どのような目的で何を整えたかを簡潔に添えると、相手が自分の状況と重ねやすくなります。

信頼につながる情報を、問い合わせ前に置く

LPを読んでいても、初めての依頼には不安が残ります。実績、プロフィール、対応範囲、よくある質問、プライバシーへの配慮などを、問い合わせ直前ではなく、検討中に見られる位置に用意します。

特に小規模なサービスでは、誰が対応するか、どのように進むか、断りにくい営業をされないかが気にされやすいポイントです。無理な約束をせず、できることとできないことを正直に書く方が、相談内容の質も上がります。

CTAは「読み終えたとき」と「不安が解消したとき」に置く

CTAはページの一番下だけに置く必要はありません。サービスの価値が伝わった直後、料金や対応範囲で不安が解消した直後、最後のまとめの3か所程度に置くと、読み手の判断に合わせやすくなります。

ただし、ボタンを増やしすぎると選びにくくなります。LP内で最も重要な行動は一つにそろえ、文言も「無料相談をする」「制作について問い合わせる」のように、押した後に起きることが分かる言葉にします。

公開前にスマホで確認するチェックリスト

1. 最初の画面: 対象者、提供内容、CTAがスクロールせずに分かるかを確認します。
2. 本文の流れ: 見出しだけ追っても、悩みから解決、行動までの流れが通じるかを見ます。
3. ボタン: 押しやすい大きさで、意図したページやフォームへ移動できるかを確認します。
4. フォーム: 必須項目が多すぎず、送信後に正常に届くかをテストします。

最初から完成形を目指すより、公開後に見出しやCTAを変えられるようにしておく方が現実的です。計測を見ながら、一度に一つずつ改善しましょう。

構成を決めたら、小さく実装してみる

自分でコードを書く場合は、見出し・本文・ボタンだけの練習用ページを作り、スマホで余白や文字の大きさを確認してみましょう。最初から完成したLPを丸ごと再現する必要はありません。

調べたい箇所が明確なら無料資料、基礎から順に学びたいなら入門書の目次を確認する、という分け方ができます。無料資料とHTML・CSS入門書の選び分けに、学ぶ目的ごとの判断表と書籍候補をまとめています。リンク先にはAmazonの広告を含みますが、購入を前提に進める必要はありません。