LPの作り方｜相談サービスを例に、原稿・構成・公開までを順に進める

こんにちは。バナナデスクです。

LPを作ろうとすると、まずテンプレートを選びたくなります。でも、そのページで受け付けるのは「相談の希望」なのか「料金を支払う正式な申込」なのか、決まっているでしょうか。

ここが曖昧だと、ボタンに何を書くかも、送信後に何を案内するかも変わります。今回は、架空の相談サービスを使い、相談希望を受け付ける一枚のLPを、原稿から受付まで順に作ります。

執筆：バナナデスク｜WEBビジネスの設計・集客・改善

最初に、ボタンを押した後の状態を決める

見本は「サービス説明整理相談」です。60分のオンライン相談で、対象・提供内容・申込条件を整理し、構成メモ一枚を渡す設定にします。料金は33,000円（税込）。広告運用、ページ実装、売上や検索順位の保証は含みません。

LPで受け付けるのは、相談希望と対象ページの情報です。送信だけで契約や日程は確定しません。内容を確認して対応可否と候補日時を連絡し、条件に合意してから正式に受け付ける流れです。架空例なので、このサービスを実際に募集するものではありません。

「親身に相談します」のような姿勢だけでなく、何を扱い、何が残るかを素材へ書きます。この情報が、見出しにも料金説明にも使えます。

ページへ入れる全原稿を先に書く

見出し：サービスの内容が伝わる順番を、一枚に整理します。

導入：料金、対応範囲、申込方法を何度も説明している方へ。60分のオンライン相談で、案内ページに必要な情報を整理し、構成メモ一枚にまとめます。

対象：すでに提供しているサービスが一つあり、説明の原稿やWEBページを見直したい方。商品そのものが決まっていない場合は、この相談の対象外です。

扱うこと：誰に向けたサービスか、何を渡すか、料金に何を含むか、申込前に何を確認するか。この四点を元の資料と照合します。

完成物：見出しの順序、各節で伝える要点、追加確認が必要な事実を、構成メモ一枚にしてお渡しします。ページのデザイン・実装や広告運用は含みません。

進め方：相談希望を送信→対応範囲と日程を確認→条件合意後に正式受付→事前資料の共有→60分の相談→3営業日以内に構成メモをお渡し。

料金：33,000円（税込）。サービス一つと相談一回が対象です。メモ到着後7日以内に、事実の誤りや抜けをまとめて一度お知らせください。新しいサービスの追加や構成の作り直しは含みません。

よくある質問：文章が途中でも相談できますか。はい。提供するものと料金など、確定している条件をご用意ください。集客や売上は保証されますか。保証は行いません。説明の材料と構成を整理する相談です。

受付前：送信は相談希望の受付です。契約と日程は確定しません。2営業日以内に対応可否と候補日時をご連絡します。

ボタン：相談希望を送る。

実績がまだないサービスでも、存在しない顧客の声を足す必要はありません。どのようなメモを渡すかという見本と、扱う範囲を具体的に示します。本人や顧客の実績を掲載するなら、確認できる資料と利用許可を用意してください。

原稿を、判断に必要な順に配置する

見本では、冒頭の対象と完成物の見本、範囲、料金、進め方、受付の順へ置きます。料金を隠して長く読ませるのではなく、内容に合うかを確認してから条件を読める配置です。見出しは文字で配置し、画像の中へ原稿全体を閉じ込めません。

PCでは説明と完成物の見本を横に並べ、狭い画面では一列にします。横に並べた方が常に良いという意味ではありません。読む順序と、スマホで本文が小さくならないことを優先します。

フォームを作ったら、受付側の記録までつなぐ

MDNのフォーム送信の解説では、HTMLフォームはサーバーへデータを送るHTTP要求を構成すると説明しています。ボタンを置いただけでは、そのデータを受け取り保存する先までは作れません。

この見本のフォームは、表示名、返信用メール、相談したい内容を受け付けます。電話対応をしない設定なので電話番号は求めません。必要な項目を決める時は、GOV.UKが示す、各質問の用途を先に整理する考え方も参考になります。

用意したHTML見本は、外部へメールを送らないローカルのテスト受付に接続する設計です。本番の決済・メール配信・顧客管理が完成したものではありません。実際の公開先では、そのサービスの受信記録と通知も別に確認します。

このローカル見本では、編集時にブラウザから架空の入力を送り、確認欄が未選択なら送信されず、選択して送信すると受付IDと保存記録が一件できることを確認しました。同じ画面で再度送信しても同じ受付IDを返し、記録は一件のままでした。表示は1280×900の二列と375×667の一列で確認し、ページ全体の横へのはみ出しや、画面外へ出る入力欄・ボタンはありませんでした。これはローカル受付の観測であり、メール到達や本番環境の重複防止まで確認したものではありません。

公開前の最終確認と、変更記録を残す

1. 原稿、料金、対象、ボタン後の案内が一致しているか読む。
2. PCとスマホ幅で、文字・画像・表・フォームの順序を確認する。
3. 架空の入力で送信し、受付IDと保存記録を照合する。
4. 入力不備、重複送信、受付側で処理できない場合の案内を確かめる。
5. 本番で使う通知、返信担当、個人情報の扱いを公開条件に合わせて確認する。

公開後は、版、変更日、変えた箇所と理由を残します。訪問、ボタンクリック、フォーム開始、受付、正式申込は別の段階です。受付が増えたかを見る前に文章を何度も入れ替えると、どの条件で比較したかが分からなくなります。

最初のLPは、原稿を飾るだけで完成しません。何を受け付け、何を渡し、送信後にどう進むか。その約束が一枚のページと受付の両方で一致するところまで作ってください。

配布するZIPは、レイアウトと原稿を見るためのHTML見本です。展開してHTMLをブラウザで開いてください。受付用のサーバーは含めていないため、ZIPを開いただけでは送信・保存は動作しません。実際の顧客情報を入力する必要はありません。

相談LPのレイアウト・原稿見本（ZIP）

関連記事：LPにアクセスはあるのに申し込みがない原因と改善チェックリスト