実績ゼロでも今夜1店分のwebデモサイトを公開する

AIで地元店のデモサイトを1店分、自分で公開する

Web受注の実績はゼロでした。コードは読めますが、書きません。

その状態から、地元の個人店1店分の「提案用デモサイト」を自分で公開するまでの手順だけを書きます。

使うのは Claude（Cowork可）＋静的HTML＋Vercelの無料枠。
読み終わったとき、手元に1店分のURLがある。それがこの記事のゴールです。

最初の夜にやるのは「決める・集める・1案目を出す」まで。目安90分。
公開と検証まで含めると、もう一晩見てください。

売る話は最小限です。営業の訪問①②③は次の記事に回します。
成功談より、詰まった場所と次の一手を多めに書きます。

プロンプト3本とSKILL全文は保存用に載せます。

0. 前提と用語（30秒）

結論：この記事は「作る手順」だけ。契約の事例は特殊なので、手順と混ぜません。

私が実際に契約を取ったのは、旧知の店主で、すでに前の業者にHP費用（月3万円×60か月）を払っていて不満があった、地方都市の自転車・原付販売修理店です。そこで作ったデモの手順を、あなたの「1店目」に置き換えて書きます。契約の取り方はこの事例から一般化できないので、この記事では扱いません。

用語を2つだけ。

• スキル：Claudeに読み込ませておく制作手順書。SKILL.md というファイル1枚。プロンプトで「スキル〇〇を使って」と書くと、その手順書どおりに動く

• デモをVercelに出す：Claudeが作ったHTMLをVercelに置いて、誰でも開けるURLにすること。提案用までなら無料枠で足りる

元記事の制作は、すべてClaudeのCowork（デスクトップ版の自律エージェント）に任せています。

1. 最初に決める4つ

結論：対象店・ページ数・料金の載せ方・写真の入手元。作る前に4行のメモにする。ここを飛ばすと、途中で必ず戻ってきます。

SKILL.mdの「0. 最初に決めること」がそのままこの4つです。Claudeも最初にこれを聞いてくるので、先に答えを用意しておくと速い。

対象店：実在店の「非公式デモ」を1店だけ

選択肢は「実在店の非公式デモ／依頼を受けた実案件／架空サンプル」の3つ。1店目は「実在店の非公式デモ」です。頼まれていない店のサイトを勝手に作るので、上部に「非公式デモ」のバーを出し、検索に載らない設定（noindex）にします。これは必ず守る。

店の選び方は次の記事に回しますが、最低限「公式の写真が手に入る」「閉業していない」の2つは確かめてから決めてください。

1ページか複数か：1ページ

元の1案目は1ページ構成でした。SKILLには飲食向けの複数ページ（5〜7枚）の型もありますが、1店目は1ページ。公開と検証まで一晩で行けるからです。

料金：実額か「店頭表示」か

確認できる数字だけ実額で載せる。確認できなければ「店頭表示」「お見積り」に逃がす。SKILLの言葉を借りると「確認できない数字は作らない」。古い記事の価格を拾ってくるのが一番危ない。

写真の入手元

「公式SNS・Googleオーナー提供のみ」か「本人から受領した資料」か。1店目は前者になります。詳しくは3章。

手元でやること：この4つを1行ずつ、メモに書く。あとでそのままClaudeに貼ります。

2. 店の一次情報の集め方

結論：公式Instagram → Googleビジネスプロフィール → それ以外、の順。全部に出典をつける。食い違ったら「最新の公式」を採用して、食い違い自体を「要確認」に残す。

SKILLの優先順位はこうです。

公式Instagram（プロフィール本文・ピン留め・ハイライトのメニュー表／月間営業カレンダー画像）＞ Googleビジネスプロフィール ＞ 公式LINE・Threads ＞ ホットペッパー ＞ 食べログ ＞ 地域メディア ＞ 個人ブログ

集める項目（すべて出典を記録）：店名と読み／住所／電話／緯度経度／営業時間・L.O.／定休日の規則（第1・3火曜など）／席・駐車場／支払い方法／予約ルール／価格（確認時点を添える）／評価と件数／開店日・沿革／SNSアカウント／口コミの頻出キーワード

つまずきやすい点が2つ。

• 緯度経度はGoogleマップURLの実座標を使う。郵便番号の代表点と混同すると、地図もルート案内もズレます。

• 価格は古い記事から取らない。確認できなければ「店頭表示」。

集めながら「提案材料」も拾っておきます。Googleの情報が古い、営業時間が未登録、予約ルールが伝わっていない、問い合わせ先が仮のまま。これがのちに「HPがあると何が解決するか」の一行になります。

出典の残し方は簡単で、「項目／値／出典（URL）／確認日」の4列で表にするだけ。Claudeに集めさせる場合も、この4列で出させる。出典のない値は、サイトに載せない。

自転車店のときは店主本人から聞けたので、ヒアリングメモを整理して使いました。1店目はそれができないので、公式情報だけで組みます。「店に聞かないと分からないこと」は捨てずに「要確認」欄へ。この欄は、あとで店に会うときの話の種になります。

手元でやること：4列の表を作り、埋まらない項目を「要確認」に書く。

3. 使ってよい写真／使ってはいけない写真

結論：店・公式が出した写真だけ使う。ユーザー投稿は使わない。これは「非公式デモ」を続けるための最低ラインです。

• 使える：公式Instagram、Googleマップ写真タブの「オーナー提供」、ホットペッパーの店舗提供、公式サイト、本人から受領した資料

• 使わない：食べログのユーザー投稿、Googleのユーザー投稿、ブロガー写真

細かい注意もSKILLにあります。

• テロップが焼き込まれたリール表紙は主役に使わない

• AI生成画像の透かし、個人情報はトリミング・ぼかし

• デプロイ前に全画像を1ページに並べてスクショし、キャプションと中身が一致しているか目視

もう1つ、解像度。自転車店では店主本人の写真が公式サイトにある374pxの画像しかなく、粗いまま出しました。反省は「外観・店内・スタッフの高解像度写真をヒアリングの時点で頼んでおくべきだった」です。1店目は頼める相手がいないので、粗い写真は大きく使わない配置にする、とClaudeに伝えておくと安全です。

フッターには写真の出典の注記を入れます。「非公式デモ」バー、出典注記、noindex。この3点セットは外さない。

手元でやること：使う写真を「使える」の出所から集め、1枚ごとに出所をメモする。

4. コンセプトを一行で書いてから作る

結論：作る前に、店の顔を一行で決める。「明朝＋生成り＋全面写真＋暗幕」はいつもの顔なので禁止。迷ったら明るい地。

15店分のデモを作ったとき、全部が「明朝＋生成り＋全面写真ヒーロー＋暗幕＋正方形グリッド」の同じ顔になりました。SKILLの4章はその反省です。

まず一行。例はこの3つ。

「果実の暦 ― 白い紙の上の菓子カタログ」／「煙と看板の、昭和からの焼肉屋」／「黒板と貼り紙の食堂」

一行が決まったら、次の5つを決めます。

要素決めること配色地の色＋墨＋差し色1〜2色。実物（看板・壁・表札・ロゴ）から取る書体Google Fonts。見出し／本文／欧文・数字を役割で分けるヒーロー全面写真＋暗幕以外も検討（見開き、看板そのもの、コラージュ、左テキスト右写真）写真の見せ方横スクロール棚、マソンリー、ポラロイド、貼り紙ボード、スライダー装飾語彙罫線、木札、焼き網の地紋、マスキングテープ、スタンプなど業態由来のもの

避けるもの：意味のない英字サブ見出し、角丸カード＋アイコンの羅列、絵文字、紫系グラデ、全要素フェードイン。

そして背景。自転車店の3案のうち2案を暗い背景で持って行き、店主に「見てて疲れる」と言われました。SKILLには「迷ったら明るい地」と書いてあります。1案目は明るい地で作ってください。かっこよさより、店主が見やすいかどうかです。

一行はどこから作るか。2章で集めた「実物」（看板の色、壁、口コミの頻出キーワード）から取ります。自転車店の場合、店主の言葉は「アットホームな色合い／目立つ／入りやすい」「近くの大学の学生に来てほしい」でした。それが「大学生向け・エディトリアル：紙色×墨×オレンジ、雑誌っぽい組み」という案になっています。

手元でやること：一行コンセプトと、配色（地・墨・差し色）だけ先に書く。

5. SKILL.mdの置き方

結論：SKILL.md をClaudeのスキルフォルダに置き、プロンプトの先頭で「スキル local-biz-demo-site を使って」と書く。それだけで調査→設計→制作→公開→検証→記録まで進みます。

使い方（貼る前に読む）

スキルとは何か。Claudeに「こういう手順で作れ」と読ませておく手順書です。毎回プロンプトに全部書かなくて済むようにする仕組みで、ファイル名は SKILL.md。

どこに置くか。元の記述は「Claudeのスキルフォルダに SKILL.md という名前でこの内容を置くだけ」まで。具体的なフォルダの場所は環境で違うので、お使いのClaudeの設定でスキルの置き場所を確認してください。

どう呼ぶか。P3の1行目のとおり「スキル local-biz-demo-site を使って」と書きます。この名前で置いておけば、あとは毎回同じ書き方で呼べます。

何が書いてあるか。手順書というより「二度と同じ失敗をしないためのリスト」です。15店が同じ顔になった、公式サイトがある店をリストに入れた、暗い背景は疲れると言われた。こういう失敗がそのまま禁止事項になっています。

どう育てるか。失敗するたびに1行足す。あなたが詰まったことをそのまま書き足していくと、あなたのスキルになります。

この記事との対応。SKILLの0章＝この記事の1章、2章＝2章、3章＝3章、4章＝4章、9章＝7章、10章＝8章。読んでいて分からない項目は、対応する章に戻ってください。

SKILL.md 全文（保存用）

下をそのまま SKILL.md として保存し、スキルフォルダに置く。

text

# 地元ビジネス向け 提案用デモサイト／LP 制作

目的は「本人に見せて受注する」こと。事実は裏取り、写真は公式のみ、見た目は店ごとに別の顔。

## 0. 最初に決めること（ユーザーに確認）
- 対象: 実在店の非公式デモ／依頼を受けた実案件／架空サンプル
- 構成: 1ページLP か 複数ページ（5〜8ページ）
- 料金の扱い: 実額を載せる／「店頭表示」「お見積り」に逃がす（確認できない数字は作らない）
- 素材: 公式SNS・Googleオーナー提供のみ／本人から受領した資料

プロジェクトに同じ店の記録があれば必ず先に読む。

## 1. 対象の選定（リード探しから頼まれた場合）
1. 独自ドメインの公式サイトがない（Instagram・食べログのみは可）。Googleマップの「ウェブサイト」欄で確認
2. チェーンでない（県内多店舗企業も除外）。運営会社は自治体の「食品営業許可施設一覧」CSVで特定できる
3. HPが効く業態: メニュー・価格・予約・仕出し・ケーキ予約など「調べてから行く」店。居酒屋は優先度低
4. 公式写真が手に入ること。写真ゼロの優良店は「撮影が必要」リストに分ける
5. 閉業報道・既存サイトの有無を最後に再確認（見落とした前例あり）

## 2. 調査（一次情報を出典つきで集める）
優先順位: 公式Instagram（プロフィール本文・ピン留め・ハイライトのメニュー表／月間営業カレンダー画像）＞ Googleビジネスプロフィール ＞ 公式LINE・Threads ＞ ホットペッパー ＞ 食べログ ＞ 地域メディア ＞ 個人ブログ

集める項目（すべて出典を記録）: 店名と読み／住所／電話／緯度経度（GoogleマップURLの実座標。郵便番号の代表点と混同しない）／営業時間・L.O.／定休日の規則（第1・3火曜など）／席・駐車場／支払い方法／予約ルール／価格（確認時点を添える）／評価と件数／開店日・沿革／SNSアカウント／口コミの頻出キーワード

- 情報源で食い違うものはサイトでは最も新しい公式情報を採用し、「要確認」に全部書き出す
- 価格は古い記事から取らない。確認できなければ「店頭表示」
- 提案材料を拾う: Googleの情報が古い／営業時間未登録／予約ルールが伝わっていない／問い合わせ先が仮のまま、など

## 3. 写真（ルール：店・公式が出したものだけ）
- 使える: 公式Instagram、Googleマップ写真タブの「オーナー提供」、ホットペッパーの店舗提供、公式サイト、本人から受領した資料
- 使わない: 食べログのユーザー投稿、Googleのユーザー投稿、ブロガー写真
- テロップが焼き込まれたリール表紙は主役に使わない
- AI生成画像の透かし、個人情報はトリミング・ぼかし
- デプロイ前に全画像を1ページに並べてスクショし、キャプションと中身が一致しているか目視

## 4. 設計：店ごとに「別の顔」にする
15店が「明朝＋生成り＋全面写真ヒーロー＋暗幕＋正方形グリッド」で同じ顔になった反省から、まずコンセプトを一行で書く。

例: 「果実の暦 ― 白い紙の上の菓子カタログ」／「煙と看板の、昭和からの焼肉屋」／「黒板と貼り紙の食堂」

コンセプトから次を決め、同時期に作った他サイトと被らないか表で比較する:
| 要素 | 決めること |
|---|---|
| 配色 | 地の色＋墨＋差し色1〜2色。実物（看板・壁・表札・ロゴ）から取る |
| 書体 | Google Fonts。見出し／本文／欧文・数字を役割で分ける（同じ明朝に固定しない）
| ヒーロー | 全面写真＋暗幕以外も検討（見開き、看板そのもの、コラージュ、左テキスト右写真）
| 写真の見せ方 | 横スクロール棚、マソンリー、ポラロイド、貼り紙ボード、スライダー
| 装飾語彙 | 罫線、木札、焼き網の地紋、マスキングテープ、スタンプなど業態由来のもの |

「AIっぽさ」を避ける: 意味のない英字サブ見出し、角丸カード＋アイコンの羅列、絵文字、紫系グラデ、全要素フェードインは使わない。
暗い全面背景は「見てて疲れる」と言われた前例あり。迷ったら明るい地。

## 5. ページ構成の型
飲食（複数ページ・5〜7枚）: index／menu／業態固有ページ／hajimete（はじめての方へ：流れ・FAQ 8〜10問）／access
士業・事務所（1ページLP）: ヒーロー／お困りごと／業務分野／代表あいさつ＋略歴／選ばれる理由／資格資料／相談の流れ＋費用／FAQ／アクセス＋地図／電話CTA
個人の受注LP: index／service／plans／flow／story／about／faq／contact

## 6. 必須の共通パーツ
- 本日の営業表示: 日本時間で判定（開店まであとN分／L.O.まで／定休日）。定休日規則をJSで実装
- Googleマップ埋め込み＋「現在地からルート案内」ボタン
- スマホ下部固定CTA（電話／予約／ルート、スクロールで出現）
- 外部導線カード: Instagram／ホットペッパー／Uber Eats／食べログ／公式LINE
- OGP画像とfaviconを生成
- 構造化データ（LocalBusiness系＋FAQPage）、reduced-motion対応
- スクロール演出はJS有効時だけ隠す＋フェイルセーフ（JSなしでも読める）
- 非公式デモの場合: 全ページ上部に「非公式デモ」バー、フッター注記（写真の出典）、noindex

## 7. 目玉機能を1〜2個作る（その店の「わかりにくさ」を潰す）
実例: 出張料金シミュレーター／予約ナビ（到着時刻→電話すべき時刻を逆算）／ケーキ受取日の逆算プランナー＋店休日カレンダー／宴会コース早見／弁当の締切判定・大口見積り／部位早見表／混雑時間帯チャート／昼夜で切り替わるメニュー

## 8. 制作
- 静的HTML＋共通CSS/JS。ページが多ければビルドスクリプトでヘッダー・フッターを共通化
- 画像は長辺1600px程度・JPEG q≈0.84に縮小
- 作り直すときは旧版を退避

## 9. 公開
- Vercelの無料枠に公開（提案用のみ。契約後は商用可の環境へ移す）
- デプロイと状態確認は別呼び出し（同じ呼び出しでポーリングするとタイムアウト）
- 小修正は本番HTMLを取得→文字列置換→ハッシュ一致を確認→再デプロイ

## 10. 検証（必ず）
- 公開URLの全ページをデスクトップ幅と約400px幅でスクショ
- コンソールエラー0（idの抜けでJSが止まり、営業時間表示まで死んだ前例）
- 画像とキャプションの一致、グリッドの穴、リンク切れ、電話番号・住所・座標の一致
- 営業日判定を定休日・祝日・時間帯境界の日付で試す

## 11. 記録と報告
店ごとの記録を保存。見出しの型:
公開URL／デザイン（コンセプト一行、配色・書体）／ページ構成と独自機能／店舗情報表（出典つき）／使った写真と出どころ／要確認（店に聞くこと）／詰まった点と対処／次の改善候補

ユーザーへの最終報告は、公開URL・目玉機能・店に確認すべき点を短く。

手元でやること：上の全文を SKILL.md として保存し、スキルフォルダに置く。

6. 1案目を出すプロンプト

結論：P3を投げる前に、1章の4行と2章の表を貼る。コンセプト一行を先に出させる。それで1案目が出ます。

下のP3は自転車店で使った型です。「必ず入れるもの」の1行目は、あなたの店用に書き換えてから投げる。出張料金シミュレーターをそのまま残すと、パン屋のサイトに走行距離が出ます。

P3. デモサイトの制作（1案目）【保存用】

この指示がやっていること：

• スキルを呼び、4つの前提（非公式デモ／1ページ／実額／公式写真のみ）を渡す

• 店固有の目玉機能と、共通パーツ（営業中表示・下部固定ボタン）を指定する

• 「いつもの顔」を禁止し、公開と「店に確認すべき点」の報告までを1回で頼む

text

スキル local-biz-demo-site を使って、この店の提案用デモサイトを作って。

対象：実在店の非公式デモ／1ページ構成／料金は確認できた実額だけ載せる（確認できない数字は「店頭表示」）／素材は公式SNS・Googleオーナー提供・公式サイトの写真のみ。
店の一次情報は添付の4列表のとおり。

必ず入れるもの：
- 【ここを店に合わせて書き換え】目玉機能を1〜2個。例：出張料金シミュレーター／予約ナビ／ケーキ受取日の逆算／宴会コース早見。思いつかなければこの行を削る
- 「今日は営業中？」の表示
- スマホ下部の固定ボタン（電話／経路案内／目玉機能）
- 料金・商品の表は、店側が後で差し替えやすい構造に

コンセプトを一行で先に書いてから作って。「明朝＋生成り＋全面写真＋暗幕」のいつもの顔は禁止。迷ったら明るい地。
公開まで行って、URLと「店に確認すべき点」を報告して。

参考：自転車店で実際に入れた目玉はこれです。確認した実額以外は書いていません。

• 出張料金シミュレーター（現在地 or 住所入力→店からの道のり距離→料金。当店購入は4kmまで無料、自転車220円/km、バイク330円/km）

• スマホ下部の固定ボタン（電話／経路案内／出張試算）

初心者向け注釈：

• 「対象：〜のみ」の1行は、1章で決めた4つです

• 1店目は店主に聞けないので、2章の4列表をそのまま貼る

• 「店側が後で差し替えやすい構造に」は残す。料金表や商品を店が自分で変えられないことが、前の業者への不満だったからです

• 「コンセプトを一行で先に書いてから作って」は消さない

• 「公開まで行って」でVercelに出ます。7章へ

返りが悪いとき、足す一文：

text

作る前に、一行コンセプトと配色・書体・ヒーローの型を表で出して止まって。私がOKと書いてから作って。

1案で足りないとき：P4. 3案並行制作【保存用】

3案は次の段階です。1店目は1案で公開まで行ってから、必要なら使ってください。

この指示がやっていること：

• 同じ店・同じ共通パーツで、顔だけ違う3案を別URLに出す

• 3案の配色・書体・ヒーロー・写真の見せ方を表で比較し、被りを消してから作らせる

• 画像を共通ホストに分けて、1案消しても他が壊れないようにする

text

同じ店で、コンセプトの違う3案を別URLで公開して。ヒアリング内容と共通パーツ（目玉機能・営業中表示・下部固定ボタン）は3案とも同じ。

① 大学生向け・エディトリアル：雑誌っぽい組み、紙色×墨×差し色1色
② プレミアム：three.jsを使ったヒーロー、上質感
③ 和モダン：和紙、朱、創業年数と件数のカウントアップ

配色・書体・ヒーローの型・写真の見せ方を3案で表にして、被っていないことを確認してから作って。
画像は共通のホストに分離して、1案を消しても他が壊れないようにして。
1案目と同じく、暗い全面背景は使わない。

返りが悪いとき、足す一文：

text

表で1つでも被っている要素があれば、作る前に差し替え案を出して。

直すとき：P5. 修正ラウンド【保存用】

この指示がやっていること：

• 店主の言葉を箇条書きで渡し、直す方向（明るい地／写真差し替え／機能の簡略化）を指定する

• 演出は消さずに「明るい背景用に色を変えて残す」と指示する

• 変更点の一覧と「まだ店に確認が要る項目」を出させる

下は自転車店で実際に投げた文面です。1店目で店主の声がないなら、自分で見た違和感を同じ形で書いてください。

text

フィードバック：
- 黒背景が見ていて疲れる → 明るい地に変える。演出は明るい背景用に色を変えて残す
- 整備士の写真を店主本人のものに差し替える（公式サイトにある写真）
- 目玉機能は地図なしで、「現在地ボタン」か「住所入力」だけにする

直して再公開。変更点の一覧と、まだ店に確認が要る項目を出して。

返りが悪いとき、足す一文：

text

変更前後を、案ごとに「変えた／残した」の2列で出して。

手元でやること：P3を1章・2章の内容で書き換えて投げる。返ってきた一行コンセプトを読んでから、作らせる。

7. 公開（Vercel。提案用のみ）

結論：Vercelの無料枠に出す。ただし提案用まで。契約したら商用利用可の環境（当時はCloudflare）へ移す。理由は、無料枠が商用不可だからです。最新の規約は要確認。

「デモをVercelに出す」とは、Claudeが作った静的HTMLをVercelに置いて、スマホで開けるURLにすることです。P3の「公開まで行って」で、Claudeがここまでやります。提案用のデモは原価ゼロでした。

SKILLの9章にある注意は3つ。

• Vercelの無料枠に公開（提案用のみ。契約後は商用可の環境へ移す）

• デプロイと状態確認は別呼び出し（同じ呼び出しでポーリングするとタイムアウト）

• 小修正は本番HTMLを取得→文字列置換→ハッシュ一致を確認→再デプロイ

2つ目は、Claudeが「公開しました」と言わずに止まったときの原因になりやすい。「デプロイと確認を分けて」と一言足すと動きます。

公開されると、だいたいこういう画面になります。

• 上部に「非公式デモ」のバー

• ヒーローの下に店の情報、「今日は営業中？」の表示、目玉機能

• 画面下に、スクロールで出てくる固定ボタン（電話／経路案内など）

• フッターに写真の出典注記

• 検索には出ない（noindex）

公開した画面があれば、この段落の下に貼ると分かりやすいです。

Vercelのアカウント作成やダッシュボード操作の手順は、環境で違うのでここには書きません。Claudeの報告にログインなどの指示が出たら、それに従ってください。

なぜ契約後に移すのか。Vercelの無料枠は商用不可、というのが当時の認識です。だから「提案用のデモは無料枠、契約したら商用可の環境へ移す」と最初から決めておきます。契約書の条項にも「デモは契約後に本番環境へ移転し旧URLは停止」と入れました。1店目の今は、無料枠で構いません。ただし、客のサイトを無料枠に置いたままにしない。これだけ覚えておいてください。

手元でやること：Claudeの報告からURLを受け取り、自分のスマホで開く。

8. 公開後の検証

結論：スクショ、コンソール、営業時間、画像とキャプション。4つ全部やる。これをやらないと、店の前でスマホを出したときに止まります。

SKILLの10章がそのまま検証項目です。Claudeにやらせて、結果を自分の目で見る。

• スクショ。 公開URLの全ページをデスクトップ幅と約400px幅で。「約400px幅」がスマホです。店主が見るのはこっちなので、スマホ側を優先して見る。

• コンソール。 エラー0にする。自転車店では、idの抜けでJSが止まり、営業時間の表示まで死んだ前例があります。「コンソールエラーが0か確認して、あれば直して」と頼む。

• 営業時間。 営業日判定を、定休日・祝日・時間帯境界の日付で試す。「第1・3火曜が定休」のような規則がある店ほど壊れやすい。「定休日の日付と、開店直前の時刻で表示を試して」と頼む。

• 画像とキャプション。 全画像を1ページに並べたスクショで、中身とキャプションが一致しているかを目視。あわせてグリッドの穴、リンク切れ、電話番号・住所・座標の一致。

検証で直ったら、SKILL11章の記録を残させます。公開URL／デザイン／ページ構成と独自機能／店舗情報表（出典つき）／使った写真と出どころ／要確認／詰まった点と対処／次の改善候補。この記録があると、2店目が楽になります。

手元でやること：スマホ幅のスクショを自分で全部見る。営業表示が今日の日付で正しいかを確認する。

9. よく止まる地点と対処

結論：止まる場所は4つに決まっています。暗い背景、情報の食い違い、粗い写真、JSで営業表示が死ぬ。全部、実際に起きたことです。

暗い背景で作ってきた

Claudeは放っておくと暗幕を敷きがちです。自転車店では3案中2案が暗く、店主に「見てて疲れる」と言われ、翌日直しました。

対処：P5の1行目をそのまま使う。「黒背景が見ていて疲れる → 明るい地に変える。演出は明るい背景用に色を変えて残す」。演出ごと消すと、案の個性も消えます。

情報源で情報が食い違う

Instagramの営業時間とGoogleの営業時間が違う、など。

対処：サイトでは最も新しい公式情報を採用し、食い違いは全部「要確認」に書き出す。価格は古い記事から取らない。確認できなければ「店頭表示」。緯度経度はGoogleマップURLの実座標。

写真が粗い

自転車店の店主写真は374pxしかなく、粗いまま出しました。

対処：外観・店内・スタッフの高解像度写真は、ヒアリングの時点で頼む。1店目で頼めないなら、粗い写真を大きく使わない配置にClaudeへ指示する。テロップ焼き込みのリール表紙も主役にしない。

JSで営業表示が死ぬ

idの抜けでJSが止まり、営業時間表示まで消えた前例。画面上は「営業中？」の欄が空白になります。

対処：コンソールエラー0を条件にする。SKILLの「スクロール演出はJS有効時だけ隠す＋フェイルセーフ（JSなしでも読める）」を守らせる。JSが死んでも、店の情報が読める状態にしておく。

おまけ：「公開した」と言わずに止まる

デプロイと状態確認を同じ呼び出しでやるとタイムアウト。「デプロイと確認を別々に」と足す。小修正は本番HTMLを取得→置換→ハッシュ一致→再デプロイの手順で。

手元でやること：止まったら、この章の見出しから探す。載っていない止まり方は、SKILLに1行足す。

10. まだ売らない。見せる前のチェックリスト

結論：URLができても、まだ売らない。下のチェックを全部通してから、誰に見せるかを考える。営業の訪問①②③は次の記事に書きます。

【保存用】見せる前のチェックリスト

• 上部に「非公式デモ」バー、フッターに写真の出典注記、noindex が入っている

• 写真は公式（公式Instagram／Googleオーナー提供／ホットペッパー店舗提供／公式サイト／本人受領）のみ

• 料金は確認できる実額のみ。確認できない数字は「店頭表示」

• 店舗情報表に出典がついている。食い違いは「要確認」に残っている

• コンセプト一行がある。明るい地。「明朝＋生成り＋全面写真＋暗幕」ではない

• スマホ幅（約400px）のスクショを自分の目で全部見た

• コンソールエラー0

• 営業表示を、定休日・祝日・時間帯境界の日付で試した

• 画像とキャプションが一致。リンク切れ・グリッドの穴なし。電話・住所・座標が一致

• 「店に確認すべき点」のリストが手元にある

• Vercelは提案用まで。契約したら商用可の環境へ移す、と決めてある

• SKILL.md に、今回詰まったことを1行足した

全部にチェックがついたら、1店目は完成です。手元には「実在店の、非公式の、公式写真だけで作った、明るい地の、検証済みのデモ」が1つあります。

このデモを誰に、どの順で見せたかは、次の記事に書きます。