デモ制作 Claude依頼文テンプレート（参考HP→オリジナル化）

「デザインは参考、中身はガラッと変えて"真似と思われない"オリジナルデモ」を Claude Code に正確に依頼するための穴埋めテンプレ。
参考URL・業種・架空企業設定だけ差し替えれば毎回使える。

30秒で全体像

大前提：パクリ回避の法的・実務ライン

→ 「構造の考え方は学ぶ、表現はゼロから創る」。これを依頼文に必ず明示する（下テンプレに内蔵済み）。

2フェーズ全体像

[参考HPのURL]
   ↓ フェーズ1（このチャットで実行）
①架空お客様ヒアリングシート生成 ← 大串が毎回コピペする依頼文はコレ
   ↓ 出力されたシートを持って
②Claude Code でデモHP制作（フェーズ2の依頼文）

【フェーズ1】架空お客様ヒアリングシート作成依頼文 ← 毎回これを使う

参考HPのURLを差し替えて、このチャットに貼るだけ。同業種・完全オリジナルの架空顧客が出力される。

# 架空お客様ヒアリングシート作成依頼

下記の参考HPを見て、同じ業種の架空のお客様を1社設定し、
その会社が「TERASUにHP制作を依頼してきた」という体で、
ヒアリングシートを創作して出力してください。

## 参考HP（デザインの方向性＝この業種）
URL: 【ここに参考HPのURLを貼る】

## ルール（厳守）
- 業種は参考HPと同じにする
- 会社名・理念・サービス名・事業内容・強み・代表メッセージは
  すべて完全オリジナルで創作（参考HPの実在企業の情報は一切流用しない）
- 実在しそうだが実在しない、リアルな架空企業として作り込む
- 「お客様から実際にヒアリングした内容」のトーンで具体的に書く
- 抽象論でなく、デモサイトがすぐ作れる解像度で書く

## 出力フォーマット（この順で）
1. 会社名（架空・オリジナル）
2. 業種（=参考HPと同じ）
3. 事業内容
4. 企業理念 / ビジョン
5. サービス・商品の具体内容
6. 強み・差別化（3点）
7. ターゲット顧客（ペルソナ）
8. ブランドトーン（世界観・雰囲気）
9. 代表メッセージ
10. 会社概要（架空の設立・所在地・規模）
＋ HP制作の目的・ゴール
＋ 希望ページ構成
＋ お客様のこだわり・要望

## 補足（任意・あれば記入）
【特別な方向性の希望があればここに。なければ空欄でOK】

出力サンプル（業種=注文住宅工務店）

「お客様からヒアリングした体」の創作。社名・理念・サービス全てオリジナルなので同業種でも模倣にならない。

• 会社名: 株式会社 栞建築（しおりけんちく）／ブランド「栞の家」
• 理念: 「家は、家族の物語の続きを書く場所。」
• 事業: 神奈川県西部の自然素材注文住宅・年間25棟・地域密着
• サービス: フルオーダー注文住宅／規格プラン「栞ベーシック」／リノベ／30年メンテ
• 強み3点: 専属大工チーム制／暮らし設計士の伴走／30年サポート保証
• ペルソナ: 30後半〜40代子育て共働き世帯。規格は嫌だが設計事務所は不安な層
• トーン: 温かみ・誠実・手仕事感・静かな信頼
• 代表: 「"建てて終わり"をやめました。引き渡しが始まりです」栞原拓也（架空）
• 会社概要: 設立2009／神奈川県小田原市（架空）／18名（大工8）
• HP目的: 資料請求・来場予約獲得／料金透明性で不信払拭
• 希望構成: FV/家づくりの考え方/施工事例/商品/30年サポート/スタッフ/予約CTA

→ 参考HPが工務店なら毎回この粒度・この形式で出力する。

【フェーズ2】Claude Codeへのデモ制作依頼文（コピペして【】を埋める）

# TERASU デモHP制作依頼

## 1. 参考HP（デザインの考え方のみ抽出）
参考URL: 【https://参考HPのURL】

このサイトから「抽出してよい要素」だけを参考にしてください:
- レイアウトの骨格・セクション構成の流れ
- グリッド設計・余白の取り方・情報の優先順位
- 配色のトーン＆方向性（同一カラーコードのコピーではなく"系統"）
- タイポgrafィの方向性（フォント種別の傾向。同一フォント指定でなくてOK）
- UIパターン（CTA配置・ナビ挙動・カード/グリッドの見せ方）
- アニメーション/インタラクションの質感

## 2. 絶対にやらないこと（トレース回避・厳守）
- 元サイトのテキスト・キャッチコピー・マイクロコピーの流用/微改変は禁止（全文ゼロから創作）
- 元サイトの画像・イラスト・ロゴ・独自図版の使用禁止
- セクションの文言構成を「言い換えただけ」にしない（構成思想は参考、内容は別物）
- 一目で「あのサイトの模倣」とわかる固有のビジュアルモチーフの再現禁止
→ 第三者が両方を見て「真似」と感じない水準まで内容を変えること

## 3. 作るデモの設定（ここを毎回変える）
- 想定業種/事業: 【例: 都内の歯科クリニック / BtoB SaaS / 注文住宅工務店】
- 架空の企業名: 【例: 株式会社〇〇】
- ターゲット顧客: 【例: 30-40代ファミリー層 / 中小企業の情シス】
- 訴求したい価値: 【例: 痛みの少ない治療 / 導入30分で使える】
- トーン: 【例: 信頼感・清潔感 / 先進的・スピード感 / 温かみ・手仕事感】
- 必要セクション: 【例: FV / 強み3点 / 事例 / 料金 / よくある質問 / CTA / 会社概要】
- コピーライティング: 上記設定に基づき、キャッチ・本文・CTA文言を全て新規創作

## 4. 技術要件（TERASU標準）
- 静的HP（HTML/CSS/JS）。フレームワーク不要
- マルチファイル構成: index.html + css/ + js/ + images/（空スロット）+ fonts/
- レスポンシブ必須（SP/タブレット/PC）
- 画像は data-slot="img-N" の空スロット化（後日差し替え前提・ダミーは無地プレースホルダ）
- 文言はダミーではなく「3で設定した内容に基づく実コピー」を入れる（営業デモなので中身が伝わること）

## 5. 成果物
- 作業ディレクトリ: /Users/oogushiyuuki/株式会社SCALE/hp-demo-【案件名】/
- Cloudflare Pages デプロイ: project名 hp-demo-【案件名】
- 完了後: 本番URL（hp-demo-【案件名】.pages.dev）を提示
- デプロイ後チェック: 本番200 / コンソールエラー0 / レスポンシブ表示 / リンク導線

## 6. 守るルール
- グローバルCLAUDE.md + 制作事業部の既存ルール準拠
- 退化禁止フロー（Read→Edit / バックアップ / デプロイ後本番確認）
- 完成したら 41_制作事業部/HPデモ制作用コードまとめ.md に1行追記

記入例（歯科クリニックの場合）

## 3. 作るデモの設定
- 想定業種/事業: 都内の審美歯科クリニック
- 架空の企業名: 医療法人 ホワイトテラス歯科
- ターゲット顧客: 見た目を気にする20-40代女性
- 訴求したい価値: 痛みが少ない・通いやすい・仕上がりの美しさ
- トーン: 清潔感・上品・安心
- 必要セクション: FV / 選ばれる理由3点 / 治療メニュー / 症例 / 料金 / 医師紹介 / アクセス / 予約CTA
- コピーライティング: 上記に基づき全文新規創作（参考HPが工務店でも、歯科の文脈で完全に書き起こす）

→ 参考HPが「工務店」でも、出力は「歯科」。デザインの間の取り方は学び、中身は完全別業種。これが「真似と思われない」の核心。

使い方フロー

1. 良いと思った参考HPのURLを確保
2. このテンプレをコピー → 【】を案件情報で埋める
3. Claude Code に貼り付けて投入
4. 生成物の本番URLを確認（レスポンシブ/エラー0）
5. 第三者目線で「元サイトの模倣に見えないか」を最終チェック
6. HPデモ制作用コードまとめ.md に追記

納品前セルフチェック（真似判定）

• [ ] 元サイトと並べて見て、テキストの一致/酷似がゼロ
• [ ] 画像・ロゴ・イラストは元サイトのものを一切使っていない
• [ ] キャッチコピーは独自（言い換えコピーになっていない）
• [ ] 業種・ブランド世界観が元サイトと別物
• [ ] 「レイアウトの考え方は似てるが、別ブランドの別サイト」と言える状態

→ 1つでもNGなら内容をさらに変える。

/hp-template との使い分け

→ /hp-template で構造を掴んでから本テンプレで作り起こす、の2段使いも有効。

関連ノート

• HPデモ制作用コードまとめ
• HPデモ公開デプロイ設計依頼書
• 制作事業部
• HP制作プロンプト自動生成構想
• TERASU
• GitHub経営者向けガイド

改訂履歴