自分のWebページを インターネットに公開する！

# 入力欄
以下の情報をもとに、A4縦の商業印刷品質チラシを1枚生成してください。

## 必須入力
- 業種／サービス内容：
  
- サービス名／屋号：
  
- 最終アクション／訴求したいキャンペーン：
  
## 任意入力
※空欄の場合は、業界の定石・ターゲット心理・購買行動を踏まえて最適化してください。

- ターゲット：
  {空欄可}

- 強み・実績・価格など特記事項：
  {空欄可}

- 連絡先表記：
  {空欄可。未入力なら「詳しくは店頭または公式サイトへ」と自然に補完}

- QRコード配置：
  あり。実在QRではなく、後から差し替え可能なQR配置余白を確保する。

---

# 役割
あなたは、受賞歴のある日本のグラフィックデザイナー兼アートディレクター兼コピーライターです。

最小限の入力情報から、
購買行動を喚起する商業印刷品質のA4チラシを完成させてください。

不足情報は、
- 業界のベストプラクティス
- ターゲット心理
- 店舗型サービス広告の定石
- 一瞬で伝わる視覚優先順位

を踏まえて、プロとして自動補完してください。

---

# 実行手順

## STEP 1｜訴求設計を内部確定
画像生成前に、以下を一貫した方針で内部決定してください。

1. メインコピー
   - 初見3秒でベネフィットが伝わる短い一文
   - 抽象語や冗長表現は禁止
   - ターゲットの悩みまたは欲求を直接突く

2. サブコピー
   - メインコピーの意味を補強し、サービス内容を具体化する
   - 「24時間365日営業」の強みを自然に活かす

3. USP 3つ
   - 競合に埋もれない切り口にする
   - 入力された強みがあれば最大限活用
   - なければ業種の定石から最も訴求力の高い内容を選ぶ

4. カラーパレット
   - メインカラー
   - アクセントカラー
   - ベースカラー
   - 必要に応じて黒・白を補助使用
   - 後でテキスト報告できるようHEXで整理

5. トンマナ
   - 業種とターゲットに合う世界観を選定
   - 例：信頼感、躍動感、親しみ、高級感、清潔感など
   - 全体で一貫させる

6. キービジュアル方針
   - 写真／イラスト／抽象表現のうち最も訴求力の高いものを選ぶ
   - ジムらしさとキャンペーン訴求が一目で伝わるものにする

7. レイアウト
   - A4縦で視線が
     上部 → 中部 → 下部CTA
     に自然に流れる構成にする

---

# STEP 2｜A4縦チラシ画像を生成

## 出力形式
- A4縦
- aspect ratio 1:1.414
- 商業印刷品質を想定
- 高解像感
- 1枚完結のチラシ画像
- 余白を十分に確保
- 日本語タイポグラフィを中心とした完成デザイン

---

# レイアウト構成
必ず以下の3分割構成にしてください。

## 上部 1/3
- キービジュアル
- メインコピー
- 最も強い視覚インパクト
- サービスの魅力が直感的に伝わる構成

## 中部 1/3
- サブコピー
- USP 3つ
- アイコン、数字、短い見出しなどを使い、理解しやすく可視化
- 情報は詰め込みすぎず、整理して見せる

## 下部 1/3
- 最終アクション
  - 「新規登録で日焼け止め1年分プレゼント」を最も目立つ形で訴求
- サービス名
- 連絡先または案内文
- QRコード差し替え用の余白
- 行動喚起が明確な締め

---

# デザイン要件

## タイポグラフィ
- 日本語の可読性を最優先
- 見出しと本文で明確な階層を作る
- 明朝体とゴシック体を適切に使い分ける
- メインコピーは力強く、可読性重視
- 本文や補足情報は整理して読ませる
- 小さすぎる文字は禁止

## 配色
- 色数は最大4色
  - メインカラー
  - アクセントカラー
  - 白
  - 黒
- 業種の信頼性と躍動感を損なわない
- CTAは背景色や囲みで強く目立たせる
- コントラスト不足は禁止

## 余白・情報量
- 外周マージンを十分に取る
- 要素同士を詰め込みすぎない
- 情報優先順位が一瞬で分かるようにする
- 重要情報ほど大きく・強く・視線上位に置く

## 装飾
- 意味のない装飾は禁止
- すべての線・図形・色面・アイコンに情報整理上の役割を持たせる
- ジムらしい躍動感は出しつつ、広告としての信頼感を損なわない

---

# 画像生成時の重要指定

- 日本語テキストは自然で読みやすく配置する
- 誤字脱字や文字化けが起きないよう最大限配慮する
- 文字は装飾ではなく、実際に読める情報として扱う
- 極端に細かい長文を画像内へ詰め込まない
- QRコードは実在コードを作らず、差し替え前提の四角い配置スペースのみ確保する
- チラシ全体を1枚の完成デザインとして出力する
- 複数案の比較画像、4分割、モックアップ、掲示風合成は禁止
- 紙が机に置かれている写真や印刷物モックアップではなく、正面から見た完成チラシそのものを出力する

---

# 最終セルフチェック
生成前に、以下を満たす構成にしてください。

1. 初見3秒で
   - 誰向けか
   - 何のサービスか
   - どんな得があるか
   が伝わるか

2. 視線誘導が
   - 上部の強い訴求
   - 中部の納得材料
   - 下部のCTA
   に自然につながっているか

3. 配色が
   - 信頼性
   - 可読性
   - 購買意欲
   を損なっていないか

4. 最終アクション
   「新規登録で日焼け止め1年分プレゼント」
   が十分に強調されているか

---

# 出力
以下の順で出力してください。

## 1. A4縦チラシ画像
完成したチラシ画像を1枚生成してください。

## 2. 後工程用のテキスト報告
画像生成後、以下を整理して報告してください。

- 自動決定したメインコピー
- 自動決定したサブコピー
- USP 3つ
- カラーパレット
  - メインカラー HEX
  - アクセントカラー HEX
  - ベースカラー HEX
- トンマナ
- キービジュアル方針
- レイアウト設計の意図

この報告は、後工程のLPデザインで世界観を継承するために使います。

# 入力欄

## 必須入力 1｜元になるチラシ画像
{チラシ画像を添付}

## 必須入力 2｜チラシ制作時に確定した情報
以下を貼り付けてください。

- サービス名：
- 業種／サービス内容：
- ターゲット：
- メインコピー：
- サブコピー：
- USP 3つ：
- 最終アクション／CTA：
- カラーパレット HEX：
- トンマナ：
- キービジュアル方針：

{ここに貼付}

## 任意入力
- LPで追加したい訴求：
  {空欄可}
- 料金・営業時間・所在地・対象者などの補足：
  {空欄可}
- LPで特に強調したい要素：
  {空欄可}
- 入れてほしいセクション：
  {空欄可}

---

# 役割
あなたは、受賞歴のある日本のWebアートディレクター兼LP構成設計者兼コピーライターです。

添付されたチラシ画像と、すでに確定しているコピー・USP・配色・トンマナをもとに、
後工程で

1. LP基準画像生成
2. LP素材画像生成
3. LP設計書生成
4. HTML実装

へ正確に引き渡すための正式ドキュメント

`lp-visual-anchor.md`

を作成してください。

---

# 最重要指示
この工程の主成果物は、
`lp-visual-anchor.md` というMarkdownファイルです。

画像は生成しないでください。

---

# 必須内容
以下の章構成で完全に作成してください。

1. プロジェクト概要
2. 想定ターゲット
3. 訴求コンセプト
4. 確定コピー整理
5. LP全体構成
6. 視線誘導設計
7. カラーパレット
8. トンマナ
9. LP Style DNA
10. LP基準画像生成時の指針
11. 後工程で必要になる画像素材カテゴリ
12. 後工程への引き渡しメモ

---

# 完了時の出力
- `lp-visual-anchor.md` を作成したこと
- 次工程の Step 3 にそのまま使えること
のみを簡潔に報告してください。

# 入力欄

## 必須入力 1｜チラシ画像
{Step 1で生成したチラシ画像を添付}

## 必須入力 2｜lp-visual-anchor.md
{Step 2で作成した lp-visual-anchor.md を添付、または本文を貼付}

---

# 役割
あなたは超一流のWebアートディレクター兼LPビジュアル設計者です。

チラシ画像を「世界観の起点」として扱い、
lp-visual-anchor.md に定義された内容を忠実に反映しながら、
縦長のLP基準画像を1枚生成してください。

---

# 重要ルール
- チラシ画像は雰囲気・配色・訴求の参考とする
- そのままコピーしない
- LP全体の完成イメージとして見える1枚を作る
- これはLP素材ではなく、LP全体の基準画像である
- スマホファーストで考えるが、PCでも成立する構成にする
- UIとして自然なLP見た目にする
- 画像生成は1枚だけ
- 比較画像、4分割、モックアップは禁止

---

# 必須反映
- メインコピー
- サブコピー
- CTA
- USP
- 共感パート
- サービス詳細
- 利用フロー
- お客様の声
- FAQ
- 最終CTA
- フッター

---

# 出力
縦長のLP基準画像を1枚生成してください。

# 入力欄

## 必須入力 1｜LP基準画像
{Step 3で生成したLP基準画像を添付}

## 必須入力 2｜lp-visual-anchor.md
{Step 2で作成した lp-visual-anchor.md を添付、または本文を貼付}

---

# 役割
あなたは、超一流のWebアートディレクター兼LPアセット設計者です。

添付された

- LP基準画像
- lp-visual-anchor.md

を分析し、
後工程でLP素材画像を1件ずつ正確に生成するための正式資料

1. `asset-manifest.md`
2. `assets-prompts.md`

を作成してください。

---

# 最重要指示
この工程では画像生成を行わず、
`asset-manifest.md` と `assets-prompts.md` を作成してください。

---

# asset-manifest.md に必ず含める内容
- 命名規則
- アセット一覧表

表の列は必ず以下を含める：
| ID | ファイル名 | 用途 | 配置セクション | サイズ(PC) | サイズ(SP) | アスペクト比 | 被写体（1行で具体描写） | 背景仕様 | 必須/任意 |

背景仕様は必ず次のいずれか：
- 通常背景あり
- 単色背景あり
- 室内背景あり
- 風景背景あり
- 透過背景指定

---

# 偽透過防止ルール
## 透過背景指定アセット
- true transparent background
- alpha transparency
- 市松模様禁止
- checkerboard background 禁止
- transparency grid 禁止
- faux transparent background 禁止
- PNG preview grid 禁止

## 非透過アセット
- 透明背景禁止
- 偽透過禁止
- checkerboard background 禁止
- transparency grid 禁止

---

# assets-prompts.md に必ず含める内容
各アセットについて以下を記載する：

## A01｜filename.png
- 用途：
- 配置セクション：
- 想定サイズ：
- アスペクト比：
- 背景仕様：
- 被写体：
- 生成プロンプト：
- ネガティブプロンプト：

---

# 生成プロンプトの必須条件
- 1アセット = 1画像
- 複数素材を1枚にまとめない
- シート化しない
- UI化しない
- LP全体画像にしない
- 被写体を正確に書く
- 背景仕様を守る
- Style DNA を守る
- 偽透過を防ぐ
- クロップ流用ではなく新規生成する

---

# 完了時の出力
`asset-manifest.md` と `assets-prompts.md` を作成したことだけを簡潔に報告してください。

# 入力欄

## 必須入力 1｜asset-manifest.md
{Step 4で作成した asset-manifest.md を添付、または本文を貼付}

## 必須入力 2｜assets-prompts.md
{Step 4で作成した assets-prompts.md を添付、または本文を貼付}

## 任意入力 1｜優先度の個別指定
{空欄可}

---

# 役割
あなたは、
画像生成ワークフローを設計する
超一流のアートディレクター兼制作進行管理者兼アセット運用設計者です。

asset-manifest.md と assets-prompts.md を唯一の正として、
ChatGPTで運用しやすい
「分割実行パック」
を作成してください。

---

# 最重要指示
以下のMarkdownファイルを作成してください。

- `pack-index.md`
- `batch-pack-01.md`
- `batch-pack-02.md`
- 以降必要数

---

# 分割条件
- 1パックあたり10件
- 最終パックのみ10件未満可
- 重要度順に並べてから10件ずつ区切る

---

# 優先順位ルール
## Priority A
- FVヒーロー
- FV背景
- CTA背景
- 主サービス画像
- ロゴ
- OGP
- favicon

## Priority B
- USPアイコン
- USP画像
- サービス説明画像
- 利用フロー図解
- problem補助素材

## Priority C
- voiceサムネイル
- FAQ補助
- company系補助
- price系補助

## Priority D
- 汎用装飾
- 補助背景
- 任意素材

---

# pack-index.md に必須の内容
- パック一覧表
- 全アセット対応表
- 実行順
- 優先順位ルール

---

# 各 batch-pack-XX.md に必須の内容
1. パック対象範囲
2. 優先度帯
3. このパックを先に実行する理由
4. 共通絶対ルール
5. 偽透過防止ルール
6. JOB一覧
7. 不合格条件
8. 再生成ルール
9. 完了判定表
10. 実行時の最終命令

---

# 各JOBの形式
## JOB A01
- アセットID：
- ファイル名：
- 用途：
- 配置セクション：
- サイズ：
- アスペクト比：
- 背景仕様：
- 被写体：
- 優先度：
- 使用する生成プロンプト：
- 使用するネガティブプロンプト：
- 出力要件：
  - 独立画像1枚
  - 他素材混在なし
  - シート化禁止
  - 指定背景準拠
  - Style DNA準拠
  - 同一ファイル名維持
  - 偽透過禁止
  - 透過指定時は実アルファ透過

---

# 偽透過防止ルール（必須）
## 透過背景指定アセット
- true transparent background / alpha transparency
- checkerboard background 禁止
- transparency grid 禁止
- PNG preview grid 禁止
- fake cutout preview 禁止

## 非透過アセット
- transparent background 禁止
- faux transparent background 禁止
- checkerboard background 禁止
- transparency grid 禁止

---

# 完了時の出力
- 作成したパック一覧
- 各パックの件数
- 重要度順で並べたこと
- 偽透過防止ルールを反映したこと
のみを報告してください。

# 入力欄

## 必須入力 1｜分割実行パック
{batch-pack-01.md などを添付、または本文を貼付}

## 必須入力 2｜今回生成する対象JOB
{例：A01}
※未指定の場合は、分割実行パック内の先頭JOBを対象にする

---

# 役割
あなたは、
LP実装用素材を高精度に生成する
プロの画像生成オペレーター兼アートディレクターです。

添付された分割実行パックを唯一の正として、
指定された1つのJOBだけを正確に生成してください。

---

# 最重要命令
対象JOBの

1. 使用する生成プロンプト
2. 使用するネガティブプロンプト
3. 出力要件

を、
省略せず・要約せず・言い換えず
そのまま画像生成条件として使用してください。

---

# 絶対禁止
- JOB内容の要約
- 被写体指定の省略
- 構図指定の省略
- 背景仕様の省略
- Style DNA の省略
- ネガティブプロンプトの省略
- 独自解釈で別シーンを作ること
- 雰囲気だけ近い別画像にすること

---

# STEP 1｜対象JOBの厳密抽出
以下を抽出してください。

- アセットID
- ファイル名
- 用途
- 配置セクション
- 背景仕様
- 被写体
- 使用する生成プロンプト全文
- 使用するネガティブプロンプト全文

---

# STEP 2｜生成前確認
以下を表示してください。

## 生成前確認
- アセットID：
- ファイル名：
- 背景仕様：
- 主被写体：
- 絶対に入れる要素：
- 絶対に避ける要素：

---

# STEP 3｜画像生成
対象JOBの「使用する生成プロンプト」全文と
「使用するネガティブプロンプト」全文を
そのまま使って1枚生成してください。

---

# STEP 4｜保存ラベル
「この画像は『ファイル名』として保存してください」

---

# STEP 5｜品質チェック
以下を厳密に確認してください。

- 被写体が一致しているか
- 背景仕様が一致しているか
- 必須人物が存在するか
- 必須動作が再現されているか
- 指定構図が概ね守られているか
- Style DNA と一致しているか
- 文字混入がないか
- UI化していないか
- 複数素材が混在していないか
- シート化していないか
- 偽透過が混入していないか

---

# 不合格条件
- JOBの主被写体と違う
- 必須人物が欠けている
- 必須動作が欠けている
- 背景仕様が違う
- 指定シーンと違う
- Style DNA と乖離している
- 文字やロゴが不要に入っている
- 偽透過や市松模様が混入している

---

# 再生成ルール
不合格の場合は、最大2回まで新規再生成してください。

再生成時は、不足した要素を明示的に補強してください。

---

# 最終出力順
1. 生成前確認
2. 画像生成
3. 保存ラベル
4. 品質チェック
5. 必要時のみ再生成
6. 最終合否

# 入力欄

## 必須入力 1｜LP基準画像
{Step 3で生成したLP基準画像を添付}

## 必須入力 2｜lp-visual-anchor.md
{Step 2で作成した lp-visual-anchor.md を添付}

## 必須入力 3｜asset-manifest.md
{Step 4で作成した asset-manifest.md を添付}

## 必須入力 4｜assets-prompts.md
{Step 4で作成した assets-prompts.md を添付}

## 必須入力 5｜生成済み素材画像一式
{Step 6で生成した画像をすべて添付}

---

# 役割
あなたは、
超一流のWebディレクター兼デザインシステム設計者兼実装仕様書作成者です。

これから渡す資料をもとに、
Claudeへ引き渡してHTML実装するための
正式なLP設計書一式を完成させてください。

---

# 作成するファイル
1. `design-spec.md`
2. `sections.md`
3. `implementation-brief.md`
4. `README.md`
5. `claude-handoff-checklist.md`

---

# 必須方針
- asset-manifest.md を画像ファイル名の唯一の正とする
- 画像ファイル名は絶対に変更しない
- LP基準画像の見た目を忠実に設計書へ翻訳する
- 素材が不足している場合は勝手に新素材を作らない
- ClaudeがHTMLを25MB以下で実装しやすいよう明記する

---

# フォルダ構成
project-handoff/
├── 01-reference/
│   ├── lp-reference.png
│   └── lp-visual-anchor.md
├── 02-docs/
│   ├── design-spec.md
│   ├── sections.md
│   ├── implementation-brief.md
│   ├── asset-manifest.md
│   └── assets-prompts.md
├── 03-assets/
│   └── images/
│       └── 生成済み画像一式
└── 04-handoff/
    ├── README.md
    └── claude-handoff-checklist.md

可能なら `project-handoff.zip` を作成してください。

---

# 完了時の出力
- 作成したファイル一覧
- フォルダ整理完了
- zip化の有無
のみ簡潔に報告してください。

# 入力欄

## 必須入力｜project-handoff.zip
{Step 7で作成した引き渡し一式}

---

# 役割
あなたは、受賞歴のあるフロントエンド実装者兼Webデザイナーです。

添付された
- LP基準画像
- 設計書一式
- 素材画像一式

を唯一の正として、
見た目の品質を落とさず、
HTMLファイル全体を25MB以下に抑えたLPを実装してください。

---

# 最重要指示
- LP基準画像の見た目に忠実であること
- design-spec.md / sections.md / implementation-brief.md に忠実であること
- asset-manifest.md のファイル名を変更しないこと
- 画像を勝手に作り直さないこと
- HTMLは25MB以下に抑えること

---

# 容量制御ルール
- base64大量埋め込み禁止
- 画像は相対パス参照優先
- 同一画像の重複埋め込み禁止
- 外部ライブラリ乱用禁止
- Webフォントの大容量埋め込み禁止
- CSSとJSの重複禁止
- 品質を落とさず軽量化する
- 画像数を減らすのではなく、配置と最適化で容量管理する

---

# 実装要件
- スマホファースト
- レスポンシブ対応
- セクション順は sections.md に従う
- コピーは勝手に改変しない
- alt / aria を適切に付与
- OGP / meta / JSON-LD を実装
- パフォーマンスとアクセシビリティに配慮

---

# 出力
- 実装済みHTML一式
- 必要なファイル構成
- 容量管理上の注意点

Googleフォームで【○○の予約／参加確認／申込／アンケート】ページを作りたいです。
以下の情報を聞き出すための質問項目を、入力タイプ（記述／選択／日付など）と必須有無を含めて10項目以内で提案してください。

【目的】 例：BBQの参加確認／カフェの席予約／ワークショップ申込/サービス満足度調査
【最低限聞きたいこと】 名前、人数、希望日時、連絡先
【任意で聞きたいこと】 アレルギー、要望、紹介者、知ったきっかけ

【出力形式】
1. 質問文
   - 入力タイプ：（記述式／段落／ラジオボタン／チェックボックス／プルダウン／日付／時刻など）
   - 必須：（はい／いいえ）
   - 補足説明（必要に応じて）

【最終確認】
- 質問の順番は、回答者の負担が軽い順（短い・選択肢式）→重い順（記述）にしてください
- 個人情報の質問は最後にまとめてください
- 任意質問は明示してください