# Demo Site Sales

> Googleマップ上で見つけた「ホームページがない/古い」店舗向けに、無料試作のデモサイト(HTML)と営業文面(DM・電話スクリプト・メール)を自動生成し、Web制作の新規開拓営業を準備するスキル。1店舗ずつの生成だけでなく、業種+エリアを指定した複数店舗の一括ターゲット探索・量産にも対応する。ユーザーが「デモサイト作って」「営業サイト作って」「{業種}でサイト営業したい」「Web制作の新規開拓やりたい」「店舗にホームページ営業かけたい」「{業種}のターゲットを探して」「まとめて作って」「/demo-site-sales」と言った時、または店舗名・住所・電話番号・GoogleマップリンクからWebサイトのモックアップを作ってアウトリーチしたい文脈で必ず使うこと。単にHTMLページを作りたいだけの一般的な依頼（個人ブログ・自分の会社サイト等）には使わない。

- Skill: `fukukei23/demo-site-sales` (Agent Skill, multi-file: 6 files)
- Install (CLI): `npx skillmds add fukukei23/demo-site-sales`
- Raw SKILL.md: https://api.skillmd.com/api/skills/fukukei23/demo-site-sales/raw
- Safety review: pending (external: skill-scanner PASS, skillspector PASS)
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: fukukei23 (https://skillmd.com/u/fukukei23)
- Updated: 2026-08-19
- Page: https://skillmd.com/skills/fukukei23/demo-site-sales

---


> ⚠️ 画像確認時は `00_SYSTEM/共通ルール/画像読込運用規約.md` 準拠（Read base64廃止・browser_snapshot/ビューポート分割/別窓1枚）

# デモサイト営業スキル

Web制作の新規開拓営業の「営業準備」フェーズを自動化する。具体的には、ホームページを持たない店舗に対して「無料で試作しました」と見せて契約に繋げる営業手法（実物提示型のコールドアウトリーチ）に使うデモサイトと文面を作る。

## なぜこの手法が効くか

ゼロから「ホームページ作りませんか」と売り込むより、すでに試作品がある状態で見せる方が依頼への心理的ハードルが低い。このスキルはその「試作品づくり」を素早く済ませ、営業文面まで一気通貫で用意する。

## このスキルが自動化する範囲（重要な境界線）

このスキルは「生成」までを自動化し、「実際の送信」は自動化しない。具体的には:

- ✅ 自動化する: ターゲット探索、デモサイト生成、営業文面生成、ターゲット管理表への記録、送信前レビューシートの作成
- ❌ 自動化しない: 実際に電話をかける、DM・メール・問い合わせフォームを実際に送信する操作そのもの

理由は2つある。1つは、知らない相手に営業メッセージを無断で連投する行為が各SNSの利用規約やスパム判定に触れるリスクがあること。もう1つは、相手の同意なく営業接触する行為そのものに人間の最終判断を必ず介在させるべきという考え方である。生成物はあくまで「人が送信ボタンを押すための準備」として扱う。

## テンプレートの選び方

業種によって響くポイントが違うため、テンプレートを2種類用意している。業種が以下のいずれかに該当する場合は専門性訴求型を使う。それ以外は汎用型を使う。

- **汎用型**（`references/demo_template.html`）: クリーニング・美容室・飲食店・工務店など、料金の分かりやすさと「すぐ頼める安心感」が刺さる業種
- **専門性訴求型**（`references/demo_template_clinic.html`）: クリニック・整体院・歯科・士業（弁護士・税理士・社労士等）・コンサルなど、資格・実績・専門性そのものが選定理由になる業種。資格バッジ・経験年数・対応件数などの実績数値、予約フォーム中心の構成になっている

判断に迷う場合はユーザーに直接「この業種は実績・専門性を重視するタイプですか、それとも料金の分かりやすさを重視するタイプですか」と聞いてよい。

## モードA: 1店舗ずつ生成（情報が既にある場合）

### 入力として必要な情報

最低限これだけ集める（店舗名・住所・電話番号があれば動ける。Googleマップ共有リンクが提供された場合はそこから住所・電話番号・営業時間を読み取れるならそれを使う。読み取れない場合はユーザーに直接聞く）：

- 店舗名
- 業種
- 住所
- 電話番号
- 営業時間・定休日
- 最寄駅（任意）
- 提供サービスと料金イメージ（3つ程度。わからなければ業種から一般的な相場を仮置きし、その旨を出力に明記する）
- 専門性訴求型を使う場合は追加で: 資格・専門名、経験年数、累計対応件数やリピート率などの実績数値（不明な場合は本人に確認するか、出力内で「要確認」と明記する）

### 処理の流れ

1. **テンプレートを選ぶ**: 上記の基準で `references/demo_template.html` か `references/demo_template_clinic.html` を選ぶ。

2. **情報を埋める**: 選んだテンプレートを読み、`{{変数}}` 部分を集めた情報で埋めて `~/projects/demo-site-sales/output/{店舗名}/index.html` として保存する。Googleマップの埋め込みURLが分かる場合は `{{GoogleマップEmbedURL}}` も埋める。分からなければiframe部分はコメントアウトする。

   > 🔒 **値の埋め込み時のセキュリティ（XSS防止・必須）**
   > テンプレートはプレースホルダ単純置換方式（変換スクリプトなし）のため、生成時に以下を必ず守る。
   > - **HTML本文の変数**（`{{店舗名}}` / `{{キャッチコピー}}` / `{{サービス説明}}` / `{{住所}}` / `{{資格・専門名}}` 等）: 値に `&` `<` `>` `"` `'` が含まれる場合は **HTMLエンティティにエスケープ**して埋める（`&`→`&amp;`、`<`→`&lt;`、`>`→`&gt;`、`"`→`&quot;`、`'`→`&#x27;`）。店舗名に `&` や記号が含まれることは実在するため、表示崩れ防止にも必須。
   > - **iframeの `{{GoogleマップEmbedURL}}`**: `https://www.google.com/maps/embed?...` または `https://maps.google.com/...` 形式のみ許可。他ドメイン・`javascript:` 等の別スキームは絶対に埋め込まず、その場合はiframeをコメントアウトする。
   > - **tel: の `{{電話番号}}`**: 数字・`+`・`-`・半角スペース・`()` のみ許可。それ以外の文字は除去してから埋める（`tel:` へのインジェクション防止）。

3. **営業文面を作る**: `references/outreach_template.md` の3パターン（DM・電話・メール）を同じ情報で埋めて `~/projects/demo-site-sales/output/{店舗名}/outreach.md` として保存する。専門性訴求型の場合は文面にも資格・実績への言及を一言加える。

4. **ターゲット管理表に追記**: `~/projects/demo-site-sales/output/targets.csv` が無ければ `references/targets_template.csv` をコピーして作り、今回の店舗を1行追記する。

5. **結果を報告**: どちらのテンプレートを使ったか、生成したファイルパス、次にやるべきアクション（送付・追跡）を簡潔に伝える。

## モードB: 業種+エリアからの一括ターゲット探索・量産

ユーザーが「{業種}で{エリア}のターゲットを探して」「まとめて作って」のように、特定の店舗情報を渡さずに複数件を求めた場合に使う。

### 手順

1. **候補を探す**: WebSearchで「{エリア} {業種} 一覧」のように検索し、複数の店舗候補を見つける。クリーニング生活衛生同業組合のような業界団体の加盟店リストは、自社サイトを持たない個人経営店が多く含まれるため有効な手がかりになる。

2. **サイトの有無を判定する**: 候補ごとに店名・電話番号でWebSearchし、検索結果が組合の登録ページ・電話帳サイト・地図サイトのまとめ記事しか出てこない場合は「自社サイトなし」と判定してターゲットにする。逆に独自ドメインの公式サイトが出てくる場合はターゲットから外す（これは新規開拓ではなく、すでにサイトを持つ店に的外れな営業をかけることになるため）。

3. **情報を補完する**: 各ターゲットについてWebSearch/WebFetchで住所・電話番号・営業時間を集める。可能であれば連絡先メールアドレス・問い合わせフォームURLも探す（見つからなくても構わない。電話のみの営業文面にすればよい）。WebSearchで公開されている店舗の代表番号・代表メール以外（個人名・個人のSNSアカウント等）は収集しない。

4. **各ターゲットについてモードAと同じ生成処理を行う**（テンプレート選択→HTML生成→outreach.md生成）。

5. **ターゲット管理表に一括追記**: `targets.csv` に今回見つけた全件を追記する。

6. **送信前レビューシートを作る**: `~/projects/demo-site-sales/output/review_YYYY-MM-DD.md` に、今回生成した全店舗のチェックリストを1ファイルでまとめる。フォーマット:

```markdown
# 送信前レビュー（YYYY-MM-DD作成）

## 1. {{店舗名}}
- 業種: {{業種}}
- デモサイト: output/{{店舗名}}/index.html
- 営業文面: output/{{店舗名}}/outreach.md
- 連絡先: 電話 {{電話番号}} / メール {{連絡先メールor「未確認」}}
- [ ] 内容を確認した
- [ ] 送信した（日付: ____）

## 2. {{店舗名}}
...
```

7. **結果を報告**: 何件見つけて何件生成したか、レビューシートのパスを伝える。

### 量産モードでも変わらない制約

- 1回の一括処理で生成する件数は常識的な範囲に留める（目安5〜10件程度。それ以上を求められたら本当に必要か確認する）。
- 生成はすべて自動化してよいが、実際の送信（電話をかける・DMを送る・メールを送信する）は必ず人間が最終確認・実行する。レビューシートのチェックボックスは送信が完了したことを人間が記録するためのものであり、Claude自身がチェックを入れて完了とみなしてはいけない。

## 厳守ルール（必ず守ること。理由も併せて踏まえて判断する）

- **生成したデモサイトを無断でインターネット上に一般公開しない。** 店舗名・ロゴ・写真などを許可なく公開し続けると、商標・著作権・なりすまし表示のトラブルになりうるため、あくまで「営業相手に直接URLやファイルを見せるだけの試作」として扱う。HTMLには自動で「DEMO（試作版・未公開）」のバッジを表示する（テンプレートに既に含まれている）。
- **効果・実績を誇張しない。** 「必ず売上が上がる」「業界No.1」のような表現は景品表示法上のリスクがあるため、営業文面に含めない。専門性訴求型で実績数値が不明な場合、推測の数字を作り出さず「要確認」と明記する（資格・実績は特に正確性が重要）。
- **送付件数に常識的な上限を意識する。** 1日に大量送付すると迷惑行為化するリスクがあるため、ユーザーが量産を依頼してきた場合は「1日◯件程度に抑えることを推奨します」と一言添える。
- **実際の送信操作は代行しない。** 上記「このスキルが自動化する範囲」を参照。
- 料金は具体的な数字が分からない場合、業種相場から仮の数字を入れてよいが、出力の中で「仮の料金です。実際の相場に合わせて調整してください」と明記する。

## ファイル構成

```
references/
  demo_template.html        - 汎用型デモサイトHTML（{{変数}}埋め込み式）
  demo_template_clinic.html - 専門性訴求型デモサイトHTML（クリニック・士業向け）
  outreach_template.md      - DM/電話/メールの営業文面テンプレート
  targets_template.csv      - ターゲット店舗管理表のテンプレート（連絡先メール・フォームURL列を含む）
  tracking_template.csv     - 送付・反応の追跡表のテンプレート
```

生成物は `~/projects/demo-site-sales/output/{店舗名}/` 以下に保存する。一括処理時のレビューシートは `~/projects/demo-site-sales/output/review_YYYY-MM-DD.md` に保存する。