Lesson 05：ホームページ受注・一撃納品 — Premium

LESSON 05

ホームページ受注・一撃納品

LPとHPの違いを正しく理解し、複数ページ構成のホームページを一撃生成。「デモを見せてその場で受注」する30万円案件の完全フローを習得します。

Step 1：LPとホームページの違いを理解する

「LPでいいのか、ホームページが必要なのか」を正しく判断することが、受注金額と提案精度を左右します。まず両者の違いを完全に理解しましょう。

LP（ランディングページ）

1ページ完結型

ページ数：1枚
目的：1サービスへの問い合わせ獲得
訪問経路：広告・SNS・メールのリンク先
相場：3〜10万円

こんな顧客に提案：

「広告を出したいがリンク先がない」
「1サービスの問い合わせを増やしたい」
「キャンペーンページを作りたい」

ホームページ

複数ページ構成型

ページ数：5〜10ページ以上
目的：会社全体の信頼獲得・複数サービス紹介
訪問経路：Google検索・名刺・チラシ
相場：20〜50万円

こんな顧客に提案：

「会社のHPがない・古い」
「名刺に載せるURLが欲しい」
「複数サービスを紹介したい」

💡 判断に迷ったときの一言

顧客に「今ホームページはありますか？」と聞いてください。「ない」または「10年以上更新していない」なら、HP制作の提案が刺さります。「ある」なら、LP追加（広告用）が刺さります。

Step 2：生成されるページ構成を理解する

本スキルで生成されるホームページは標準5ページ構成です。各ページの役割を把握しておくと、顧客への説明がスムーズになります。

生成されるページ一覧

必須

index.html（トップページ） — 訪問者が最初に見るページ。キャッチコピー・強み・サービス概要・問い合わせボタンを配置。

必須

service.html（サービス詳細） — 各サービスの説明・価格帯・特徴を詳しく紹介。「詳しく知りたい」人の受け皿。

必須

contact.html（お問い合わせ） — 電話番号・フォーム・営業時間を掲載。すべてのページから誘導される最終ゴール。

標準

works.html（施工事例・実績） — ビフォーアフター・お客様の声・件数を掲載。「本当に大丈夫か」という不安を消す信頼ページ。

標準

about.html（会社概要） — 代表メッセージ・スタッフ・沿革・受賞歴を掲載。「どんな人がやっているか」を伝える安心ページ。

生成後のフォルダ構造はこのようになります。

output/[顧客名]_HP_[日付]/ ├── index.html ← トップページ ├── service.html ← サービス詳細 ├── works.html ← 施工事例 ├── about.html ← 会社概要 ├── contact.html ← お問い合わせ ├── index_isolated.html ← WordPress用（自動生成） └── ...（全ページ分）

Step 3：ホームページを一撃生成する

顧客データ（ビジネスDNA）が登録済みであれば、コマンド1つで全ページが揃います。Lesson 02〜03を先に完了させてから実行してください。

# 基本的な使い方（標準5ページを生成） [顧客名]のホームページを作って。

# ページ数を指定したい場合（3ページに絞る例） [顧客名]のホームページを作って。トップ・サービス・お問い合わせの3ページで。

# テンプレートを指定したい場合 [顧客名]のホームページを作って。クリニック用のデザインで。

💡 ビジネスDNAがまだない場合は？

「[顧客名]のホームページを作って」と話しかけると、AIが自動でビジネスDNAの有無を確認します。未登録の場合はその場で登録フローに案内してくれます。別途コマンドを打つ必要はありません。

✅ 完了の確認

AIが「output/[顧客名]_HP_[日付]/ に保存しました」と言えばOKです。index.html をブラウザで開くと完成したホームページが確認できます。WordPressへの組み込みには _isolated.html を使います。

Step 4：ブラウザでデモを確認・修正する

生成したHTMLをブラウザで開いて仕上がりを確認します。修正が必要な場合もAIに話しかけるだけで対応できます。

確認の手順

output/[顧客名]_HP_[日付]/ フォルダを開く
index.html をダブルクリックしてブラウザで開く
ナビゲーションのリンクをクリックして全ページを確認する
スマートフォン表示も確認する（ブラウザの開発者ツール → Ctrl+Shift+M）

修正が必要な場合はAIに話しかける

「トップページのキャッチコピーをもっと強くして」
「サービスページに料金表を追加して」
「会社概要ページの代表メッセージを書き直して」
「全ページのメインカラーを青から緑に変えて」

⚠️ デモ確認でよくあるチェックポイント

全ページのナビリンクが正しく繋がっているか
スマホで崩れていないか
電話番号・住所が正しく入っているか
お問い合わせフォームの送信先が設定されているか（実運用にはFormspreeなどの外部サービスが必要です）

Step 5：WordPressへの組み込み

顧客サイトがWordPressの場合、生成したHTMLをそのまま入れるとデザインが崩れます。隔離処理済みの _isolated.html ファイルを使います。

💡 隔離処理とは？（Lesson 01の復習）

WordPressのテーマCSSが生成HTMLのデザインを上書きしてしまう問題を防ぐ仕組みです。生成時に自動で _isolated.html が作られるので、それをそのまま使うだけでOKです。

WordPress組み込みの手順

WordPress管理画面 → 「固定ページ」→「新規追加」
ページタイトルを入力（例：「トップページ」「サービス」）
エディタを「カスタムHTML」ブロックに切り替える
index_isolated.html の中身を全選択してコピー&ペースト
「公開」する
全ページ分（service・works・about・contact）同様に繰り返す

Step 6：「デモを見せて30万円受注」の提案フロー

本スキルの最大の強みは「商談前にデモが用意できること」です。実際に見せながら受注するフローを身につけましょう。

商談前：30分でデモHPを生成しておく 顧客のホームページURLや業種情報をもとにビジネスDNAを作成し、HPを生成。「御社のホームページを試しに作ってみました」と言えるものを準備する。

商談中：PCの画面を見せながら話す 「実際の仕上がりイメージです。内容はいくらでも変えられます」とデモを見せる。スマホ表示も見せると効果的。競合はイメージ図しか見せられないが、こちらは実物を見せられる。

その場で修正してみせる（オプション） 「このキャッチコピーを変えてほしい」と言われたら、AIに話しかけて30秒で修正して見せる。「え、こんなに早く直せるの？」という驚きが成約につながる。

受注・契約：料金と納期を提示する 「本日契約いただければ、今週中に納品できます」と具体的な納期を提示。スピード感が他社との最大の差別化になる。

納品：WordPress組み込みまで1日で完了 修正・確認・組み込みを行い納品。「通常2ヶ月かかる作業を1週間で」という驚きが口コミにつながる。

💬 商談中の提案トーク例

デモを見せる瞬間

「御社のことを事前に調べて、試しにホームページを作ってみました。これが実際の仕上がりイメージです。もちろんこれはたたき台なので、内容はいくらでも変えられます。いかがでしょうか？」

月額保守への誘導

「ホームページは作っただけでは集客になりません。Googleマップの定期更新がセットで初めて効果が出ます。月5万円の保守プランをつけていただくと、毎月の更新をすべて代行します。」

料金設計の目安

HP制作の相場と、本スキルを使った場合のあなたの実働時間を踏まえた料金設定の参考例です。

ライト

15万円

3ページ構成

トップ・サービス・お問い合わせ
WordPress組み込み込み
修正2回まで
実働：半日〜1日