LPを自作して公開する手順｜準備物と公開判定表

1. 一つの目的と公開条件を決める

目的の例は「特定サービスの見積もり相談を受け付ける」です。対象読者、扱う悩み、提供する内容、次の行動を一文ずつ書きます。複数の商品や採用情報など別の目的まで一枚に詰める前に、それぞれの行き先を分ける必要がないか考えてください。

公開日は、原稿・写真・受付窓口・管理権限がそろう日から逆算します。「見た目ができた」だけを完了にせず、実際のURLで開き、連絡を受け取れることまでを条件にします。

2. 制作前に材料と担当をそろえる

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

材料が未確定なら、デザイン上の仮文言に「未確定」と印を付けます。架空の顧客の声や実績で空白を埋めず、公開前に仮文言を検索して消してください。

3. 文章の骨組みから実装する

最初は見出し・説明・料金条件・問い合わせ先だけの原稿を作ります。LPの構成ガイドで情報の順序を考え、サービスの対応範囲が伝わるか確認します。装飾を足す前に、別の人が読んで何を依頼できるか分かる状態にします。

コードで作るなら小さなHTMLから始め、スマホ幅で長い見出しや表を確認します。ツールを使う場合は、独自ドメイン、フォーム、データの書き出し、契約終了時の扱いを確認します。ツールを契約しただけでは、LPは完成しません。学習が必要なら無料資料と学習用の本の選び方を参照できます。

4. 公開前に、合格と未確認を分ける

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

送信は通知先と担当者に了承を得て試します。画面に「完了」と出ても、管理者が受信しているかは別に確かめます。フォームの公開前テストで、入力・受付・通知の段階を分けて確認してください。

5. 公開後は、流入と受付のどこで止まるかを見る

URLを公開したら主要リンクと受付窓口をもう一度確認し、公開日・変更内容・検証した環境を残します。公開しただけで集客が始まるとは限らないので、告知や検索からの訪問と、フォームへの到達・受付を分けて見ます。

閲覧がほぼない段階では、ボタン色の小さな差を比べても判断が難しくなります。情報の欠落と操作不良を先に直し、問い合わせ導線の点検で一つずつ変更してください。大きく作り直すときも、元のファイルと原稿を残せば戻しやすくなります。

最小のHTMLを保存し、公開前の原稿を確かめる

初めてコードで作る場合は、装飾より先に「対象・対応範囲・受付前の準備」が読める1枚を作ります。下の無料ファイルは、仮の営業時間更新サービスを題材にした学習用HTMLです。実在のサービス・料金・受注実績ではありません。

学習用HTMLを保存する（TXT、外部通信なし）

1. テキストエディタで開き、UTF-8のindex.htmlとして自分の作業フォルダに保存します。
2. ブラウザで開き、見出しと説明文を自分の題材に書き換えます。
3. 「受付前の準備を見る」はページ内の準備欄へ移動します。問い合わせの送信機能ではありません。
4. 画面幅を狭め、Tabキーでリンクへ移動し、文字の拡大でも本文が読めるか確認します。

教材にはフォーム、決済、広告、計測タグ、外部画像を入れていません。検索に出さないためのnoindexも付けていますが、アクセス制限ではありません。教材のまま実際のサービスとして公開せず、受付方法、実際の提供条件、プライバシー案内を整えてから、本番の公開方針に合わせて設定を見直します。

HTMLの各要素はMDNのHTML基本構文で確認できます。テーマ購入や新しいサービス契約なしでも、まず原稿と画面幅の確認まで試せます。

LPの構成の例

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

順番は一例です。読者が判断に必要な情報を、知りたい順に並べることが大切です。

よくある失敗

• 伝えたいことを全部載せる：情報が多すぎると、読者が判断に必要な部分を見つけられません。目的に関係のない内容は、別のページに分けます。
• スマホで確認していない：パソコンで作ると、スマホでは文字や画像が大きすぎたり、ボタンが画面の下に隠れたりします。作りながらスマホでも確認します。
• 申し込みのあとを考えていない：フォームを送ったあとに何が起きるか（返信の目安、次の手順）を書いておかないと、読者が不安になります。自動返信の書き方は自動返信メールに何を書くかを参考にしてください。