Sincere
HP制作の進め方
デモHPで受注する型
構成案 × デザイン画像（Codex） × Claude Code
構成案 × デザイン画像（Codex） × Claude Code
この資料は「受注前」のフェーズを解説する。営業の詳細は資料②で。
最初の1業種に絞ることで、リサーチもデモHP制作も営業文も精度が上がる。地元・知人に多い業種なら強い。
🎯 推奨4業種：客単価が高く比較検討される業種を厳選。HP需要も高い。慣れてきたら別業種にも展開できる。
1業種に絞ったら、その業種で「古いHPを持っている／HPがない」会社をGoogle Mapで探す。最初は5件あれば十分。
口コミ評価が高い＝HPに投資する余裕がある可能性大
HPなし＝新規ニーズ。古いHP＝リニューアル提案の余地大
地域密着＝Google検索流入を意識する業種ほどHP価値を理解している
📘 リサーチの詳細手順は資料②「営業の進め方と管理」で解説。
💡 以前はテンプレ生成型（Claude Design方式）も使っていましたが、今はデザインの独自性が出る画像起点の作り方に一本化しています。
💡 リサーチで集めた口コミ・強みをもとに、AIと対話しながら構成案にまとめる。ここで方向性を決めておくと、後のデザイン画像生成・コーディングがブレない。
📹 実機の操作画面は 解説動画ページ で公開予定。
📹 実機の操作画面は 解説動画ページ で公開予定。
🎯 使い分けの目安：デモHPは反応を見るためのものなので手早く作ってよい。受注後の本番制作はデザイン重視で丁寧に時間をかける。
AIが生成した骨格は信用してそのまま使う（80%）。表面（配色・コピー・写真等）を案件ごとに差し替え（20%）。
骨格80% + 表面カスタム20% = テンプレ感ゼロ
| 症状 | 原因 | 対処法 |
|---|---|---|
| デザイン画像とコーディング結果が違う | AIが画像を参考程度にしか見ていない | AIに「画像に忠実に、レイアウト・配色・余白まで再現して」と指示し直す |
| Codexの画像が毎回違う | 同じプロンプトでも生成は確率的 | 気に入ったら即「同じ雰囲気で別パターンを3つ」と指示。シード保存 |
| 見た目（色・余白）が崩れる | AIが古い書き方と新しい書き方を混ぜてしまった | AIに「教科書通りの基本の書き方で全部書き直して」と一言伝える |
| 公開後に日本語が文字化け | 日本語を表示する設定が抜けている | AIに「公開しても日本語が崩れない設定をつけて」とお願いする |
| 「サンプル○○」のまま納品しそう | テンプレに残った仮の会社名を直し忘れ | AIに「『サンプル』『仮』『見本』が残っていないか最後に全部チェックして」と頼む |
| 公開ボタンを押すとエラー | AIが書いたコードのバージョンが合っていない | エラー文をそのままコピーしてAIに貼り「これを直して」と伝える |
| 営業メールが迷惑メール扱い | 件名に「無料」「絶対」、URLを短縮アプリで縮めすぎ | 件名は「○○様へのご提案」など具体的に。短縮URLは使わず、そのままのURLを貼る |
💡 詰まったらリベシティ専用チャットルームへ。仲間が同じ症状で先に詰まってる可能性大。
💡 Cloudflare Pagesは無料・高速・独自ドメイン対応。「貴社のデモHPはこちら：URL」と営業文で送れば、相手はクリック1つで自社用HPを体験できる。これが反応率の鍵。
📗 営業の詳細手順（営業文の5パート構成・NG表現リスト・反応後の動き方）は資料②「営業の進め方と管理」で。10件送って1反応が標準値。
案件規模に応じて3プラン提示。「迷ったらスタンダード」が決まりやすい。
誇大表現は使わない
都度画面を共有
納品後1ヶ月OK
更新動画＋PDF