仕上げ・STEP 7
「その会社専用」に仕上げる
テンプレ感を消して「その会社専用」に見えるよう仕上げます。詰まりやすいポイントの対処法も。
📚 このSTEPで学べること：必ず差し替える5項目と黄金比 / テンプレ感を消すNGライン / 初心者が詰まる7選と対処法
細部カスタムで 「その会社専用」 に仕上げる
必ず案件ごとに差し替える 5項目
- 配色（メインカラー1色変えるだけでも印象激変）
- キャッチコピー（その会社の強みに焦点）
- 写真（実店舗 or 業種別 AI 生成画像）
- お客様の声（口コミから抽出して反映）
- 実績（無いなら「制作実績」表記でOK）
仕上げの黄金比
AIが生成した 骨格は信用してそのまま使う（80%）。表面（配色・コピー・写真等）を案件ごとに差し替え （20%）。
骨格80% + 表面カスタム20% = テンプレ感ゼロ
テンプレ感を消す NGライン
❌ NG（営業先に刺さらない）
- 配色をテンプレのまま
- キャッチコピーが業種一般論
- 写真がフリー素材で地域感ゼロ
- 「お客様の声」が無記名・仮名
- 会社名・連絡先が仮のまま
→
✅ OK（その会社専用に見える）
- メインカラーを1色変える
- キャッチを「その会社の強み」に
- 写真は実店舗 or AI 生成で業種別
- 口コミから訴求軸を抽出して反映
- 会社名・住所・電話は実情報で
初心者が 詰まる7選 と対処法
| 症状 | 原因 | 対処法 |
|---|---|---|
| Claude Design でエラー | プロンプトが長すぎ／添付画像が多すぎ | プロンプトを300字以内に。画像は1-2枚まで |
| ChatGPT 画像が毎回違う | 同じプロンプトでも生成は確率的 | 気に入ったら即「同じ雰囲気で別パターンを3つ」と指示。シード保存 |
| Tailwind クラスが効かない | Claude Code が存在しないクラス名を出力 | 「Tailwind v3.4 の標準クラスのみ使用」と明記 |
| 日本語が崩れる | Cloudflare デプロイ後、Web フォント未読み込み | Google Fonts（Noto Sans JP）を head に必ず追加 |
| 顧客情報の置換漏れ | テンプレの「サンプル工務店」等が残ったまま納品 | 納品前に grep -r "サンプル" でチェック |
| Cloudflare ビルドエラー | Node バージョン不一致 / package-lock.json 不整合 | Cloudflare 設定で Node 20 指定。.nvmrc も追加 |
| 営業メールが迷惑判定 | 件名に「無料」「絶対」、URL が短縮されすぎ | 件名は具体的に。URL は pages.dev 正規ドメインで送信 |
💡 詰まったらリベシティ専用チャットルームへ。仲間が同じ症状で先に詰まってる可能性大。
✅ このSTEPの完了チェック
差し替え5項目を反映した
NGラインに該当していないか確認した
詰まる7選の対処法を把握した
🚧 準備中コンテンツ一覧
以下は今後追加予定のコンテンツです。元資料で「公開予定」とされている項目で、リンクをクリックするとここに移動します。完成し次第、通常ページとして公開されます。
🚧 今後追加予定
📹 解説動画ページ（実機の操作画面）
Claude Design方式・画像生成方式の実機の操作画面を動画で解説予定のページです。元資料内で「公開予定」とされています。
関連STEP：STEP5・STEP6
追加予定内容：デモHP制作の手順を、画面を見ながら追えるようにする