Asset Briefs

• Brand keywords: AI marketing, advanced and trustworthy, navy and purple, calm premium, no copied logos

hero

• 役割: ファーストビュー。商品名、対象者、得られる結果を一瞬で伝える。
• 推奨比率: 16:9 またはセクションに合わせた横長。スマホで切れても意味が残る構図。
• 入れる要素: 商品/人/画面/成果物/図解のうち、このセクションで必要なものだけ。
• 避けること: 読めない日本語文字、他社ロゴの無断使用、抽象的すぎる背景だけの画像。
• 生成プロンプト骨子:
• Create a premium website section visual for hero. Purpose: ファーストビュー。商品名、対象者、得られる結果を一瞬で伝える。. Brand: AI marketing, advanced and trustworthy, navy and purple, calm premium, no copied logos. Keep important text outside the image. Clean composition, no copied logos, high trust.

problem

• 役割: 受け手の現状の痛みを具体化する。
• 推奨比率: 16:9 またはセクションに合わせた横長。スマホで切れても意味が残る構図。
• 入れる要素: 商品/人/画面/成果物/図解のうち、このセクションで必要なものだけ。
• 避けること: 読めない日本語文字、他社ロゴの無断使用、抽象的すぎる背景だけの画像。
• 生成プロンプト骨子:
• Create a premium website section visual for problem. Purpose: 受け手の現状の痛みを具体化する。. Brand: AI marketing, advanced and trustworthy, navy and purple, calm premium, no copied logos. Keep important text outside the image. Clean composition, no copied logos, high trust.

solution

• 役割: 解決策の仕組みを図解する。
• 推奨比率: 16:9 またはセクションに合わせた横長。スマホで切れても意味が残る構図。
• 入れる要素: 商品/人/画面/成果物/図解のうち、このセクションで必要なものだけ。
• 避けること: 読めない日本語文字、他社ロゴの無断使用、抽象的すぎる背景だけの画像。
• 生成プロンプト骨子:
• Create a premium website section visual for solution. Purpose: 解決策の仕組みを図解する。. Brand: AI marketing, advanced and trustworthy, navy and purple, calm premium, no copied logos. Keep important text outside the image. Clean composition, no copied logos, high trust.

proof

• 役割: 実績、成果物、スクショ、数字を見せる。
• 推奨比率: 16:9 またはセクションに合わせた横長。スマホで切れても意味が残る構図。
• 入れる要素: 商品/人/画面/成果物/図解のうち、このセクションで必要なものだけ。
• 避けること: 読めない日本語文字、他社ロゴの無断使用、抽象的すぎる背景だけの画像。
• 生成プロンプト骨子:
• Create a premium website section visual for proof. Purpose: 実績、成果物、スクショ、数字を見せる。. Brand: AI marketing, advanced and trustworthy, navy and purple, calm premium, no copied logos. Keep important text outside the image. Clean composition, no copied logos, high trust.

curriculum

• 役割: 内容やステップを理解させる。
• 推奨比率: 16:9 またはセクションに合わせた横長。スマホで切れても意味が残る構図。
• 入れる要素: 商品/人/画面/成果物/図解のうち、このセクションで必要なものだけ。
• 避けること: 読めない日本語文字、他社ロゴの無断使用、抽象的すぎる背景だけの画像。
• 生成プロンプト骨子:
• Create a premium website section visual for curriculum. Purpose: 内容やステップを理解させる。. Brand: AI marketing, advanced and trustworthy, navy and purple, calm premium, no copied logos. Keep important text outside the image. Clean composition, no copied logos, high trust.

offer

• 役割: 料金、特典、保証、申込理由を見せる。
• 推奨比率: 16:9 またはセクションに合わせた横長。スマホで切れても意味が残る構図。
• 入れる要素: 商品/人/画面/成果物/図解のうち、このセクションで必要なものだけ。
• 避けること: 読めない日本語文字、他社ロゴの無断使用、抽象的すぎる背景だけの画像。
• 生成プロンプト骨子:
• Create a premium website section visual for offer. Purpose: 料金、特典、保証、申込理由を見せる。. Brand: AI marketing, advanced and trustworthy, navy and purple, calm premium, no copied logos. Keep important text outside the image. Clean composition, no copied logos, high trust.

cta

• 役割: 最後に行動してもらう。
• 推奨比率: 16:9 またはセクションに合わせた横長。スマホで切れても意味が残る構図。
• 入れる要素: 商品/人/画面/成果物/図解のうち、このセクションで必要なものだけ。
• 避けること: 読めない日本語文字、他社ロゴの無断使用、抽象的すぎる背景だけの画像。
• 生成プロンプト骨子:
• Create a premium website section visual for cta. Purpose: 最後に行動してもらう。. Brand: AI marketing, advanced and trustworthy, navy and purple, calm premium, no copied logos. Keep important text outside the image. Clean composition, no copied logos, high trust.

Design Directions: AIO Marketing OS

• Target: AIで集客・営業・制作を仕組み化したい中小企業・個人事業主
• Offer: AI社員構築とマーケ導線設計を8週間で整える支援プログラム（株式会社アイウエオ）

01. 黒基調・強い証拠・高単価向け (premium_dark)

• 方向性: 深い黒、白い余白、金/シルバーの細いアクセント。高単価講座、法人、専門家向け。
• 向いている場面: 高単価・信頼形成
• ヒーロー: 商品名/提供価値/証拠/CTAを1画面に入れる
• セクション: 問題提起 -> 理想 -> 解決策 -> 内容 -> 証拠 -> 料金 -> FAQ -> CTA
• 画像方針: 目的別にヒーロー、証拠、カリキュラム、CTA画像を分ける
• NG: ただカードを並べるだけ、抽象的なグラデーションだけ、CTAが弱い

02. SaaS/業務改善向け (clean_saas)

• 方向性: 白背景、薄い罫線、ダッシュボード風のUI、導入フローとFAQが読みやすい。
• 向いている場面: 教育・説明・申込導線
• ヒーロー: 商品名/提供価値/証拠/CTAを1画面に入れる
• セクション: 問題提起 -> 理想 -> 解決策 -> 内容 -> 証拠 -> 料金 -> FAQ -> CTA
• 画像方針: 目的別にヒーロー、証拠、カリキュラム、CTA画像を分ける
• NG: ただカードを並べるだけ、抽象的なグラデーションだけ、CTAが弱い

03. ストーリー訴求向け (editorial_story)

• 方向性: 写真と余白を大きく使い、体験談、問題提起、変化の物語で引き込む。
• 向いている場面: 教育・説明・申込導線
• ヒーロー: 商品名/提供価値/証拠/CTAを1画面に入れる
• セクション: 問題提起 -> 理想 -> 解決策 -> 内容 -> 証拠 -> 料金 -> FAQ -> CTA
• 画像方針: 目的別にヒーロー、証拠、カリキュラム、CTA画像を分ける
• NG: ただカードを並べるだけ、抽象的なグラデーションだけ、CTAが弱い

04. ローンチ・締切向け (bold_launch)

• 方向性: 太い見出し、カウントダウン、特典、締切、証拠を前面に出す。
• 向いている場面: 教育・説明・申込導線
• ヒーロー: 商品名/提供価値/証拠/CTAを1画面に入れる
• セクション: 問題提起 -> 理想 -> 解決策 -> 内容 -> 証拠 -> 料金 -> FAQ -> CTA
• 画像方針: 目的別にヒーロー、証拠、カリキュラム、CTA画像を分ける
• NG: ただカードを並べるだけ、抽象的なグラデーションだけ、CTAが弱い

05. 講座・スクール向け (education_calm)

• 方向性: 学習ステップ、カリキュラム、講師紹介、受講後成果が読みやすい。
• 向いている場面: 教育・説明・申込導線
• ヒーロー: 商品名/提供価値/証拠/CTAを1画面に入れる
• セクション: 問題提起 -> 理想 -> 解決策 -> 内容 -> 証拠 -> 料金 -> FAQ -> CTA
• 画像方針: 目的別にヒーロー、証拠、カリキュラム、CTA画像を分ける
• NG: ただカードを並べるだけ、抽象的なグラデーションだけ、CTAが弱い

06. コンサル/支援向け (luxury_consulting)

• 方向性: 余白多め、少ない色数、実績と個別支援の信頼感を強調。
• 向いている場面: 高単価・信頼形成
• ヒーロー: 商品名/提供価値/証拠/CTAを1画面に入れる
• セクション: 問題提起 -> 理想 -> 解決策 -> 内容 -> 証拠 -> 料金 -> FAQ -> CTA
• 画像方針: 目的別にヒーロー、証拠、カリキュラム、CTA画像を分ける
• NG: ただカードを並べるだけ、抽象的なグラデーションだけ、CTAが弱い

07. コミュニティ向け (community_energy)

• 方向性: 参加者の熱量、会話、成果共有、イベント感が伝わる構成。
• 向いている場面: 教育・説明・申込導線
• ヒーロー: 商品名/提供価値/証拠/CTAを1画面に入れる
• セクション: 問題提起 -> 理想 -> 解決策 -> 内容 -> 証拠 -> 料金 -> FAQ -> CTA
• 画像方針: 目的別にヒーロー、証拠、カリキュラム、CTA画像を分ける
• NG: ただカードを並べるだけ、抽象的なグラデーションだけ、CTAが弱い

08. 実績・成果物大量提示向け (visual_proof_wall)

• 方向性: スクショ壁、制作物一覧、数字、Before/Afterを密度高く見せる。
• 向いている場面: 教育・説明・申込導線
• ヒーロー: 商品名/提供価値/証拠/CTAを1画面に入れる
• セクション: 問題提起 -> 理想 -> 解決策 -> 内容 -> 証拠 -> 料金 -> FAQ -> CTA
• 画像方針: 目的別にヒーロー、証拠、カリキュラム、CTA画像を分ける
• NG: ただカードを並べるだけ、抽象的なグラデーションだけ、CTAが弱い

09. 短いLP・申込特化 (minimal_high_conversion)

• 方向性: 余計な装飾を削り、価値、証拠、料金、保証、CTAだけで押し切る。
• 向いている場面: 教育・説明・申込導線
• ヒーロー: 商品名/提供価値/証拠/CTAを1画面に入れる
• セクション: 問題提起 -> 理想 -> 解決策 -> 内容 -> 証拠 -> 料金 -> FAQ -> CTA
• 画像方針: 目的別にヒーロー、証拠、カリキュラム、CTA画像を分ける
• NG: ただカードを並べるだけ、抽象的なグラデーションだけ、CTAが弱い

10. ブランド世界観訴求 (brand_magazine)

• 方向性: タイポグラフィ、写真、思想、制作背景を強く出す。
• 向いている場面: 教育・説明・申込導線
• ヒーロー: 商品名/提供価値/証拠/CTAを1画面に入れる
• セクション: 問題提起 -> 理想 -> 解決策 -> 内容 -> 証拠 -> 料金 -> FAQ -> CTA
• 画像方針: 目的別にヒーロー、証拠、カリキュラム、CTA画像を分ける
• NG: ただカードを並べるだけ、抽象的なグラデーションだけ、CTAが弱い

qa-report.md — AIO Marketing OS LP 公開前チェック

採点日: 2026-06-15 / 担当: HP・LP作成AI社員（02-homepage-lp-builder）
このサイトは pack の engine スクリプトで生成 → 外部CSS化＋フォーム/フッター追記、の手順で作成。

1. 自動チェック（pack engine scripts/check_site_html.py）

実行コマンド:
```
python3 02-homepage-lp-builder/scripts/check_site_html.py \
_quality_audit/generated/02-homepage-lp-builder/index.html
```
結果: OK basic LP/HP checks（exit=0）
内訳: title / meta viewport / h1 / cta link / FAQキーワード / 料金キーワード をすべて検出。

2. 目視QA（headless Chrome 実スクショ）

撮影: /Applications/Google Chrome.app/.../Google Chrome --headless=new --window-size=…（ローカルhttpサーバ経由で外部CSS適用）

• screenshots/desktop-1280.png … 1280px幅・全ページ。ヒーロー2カラム、証拠3カラム、6バンド交互配色、料金3カラム、FAQ、最終CTA、フォーム、フッターまで崩れなし。
• screenshots/mobile-390.png … 390px幅・全ページ。すべて1カラムへ正しく折返し。

検出 → 修正した崩れ（390px）

1. ヒーローH1「AIO Marketing OS」が右端見切れ → モバイルでフォント縮小（clamp 30-40px）＋overflow-wrap:break-word。
2. バッジ「株式会社アイウエオ｜AIマーケティング支援」がはみ出し → white-space:normal＋12pxで折返し。
3. 固定56pxの料金/FAQ見出し、.final h2/.contact h2 が見切れ → モバイルで28-34pxへ縮小。
4. html,body{overflow-x:hidden} で横スクロール発生を遮断。

→ 再スクショで全て解消を確認（崩れ無）。

3. 完了条件チェック（SKILL.md）

• [x] ファーストビューで何のサイトか分かる（商品名H1＋価値リード＋CTA＋会社バッジ）
• [x] CTAが複数箇所にある（ヒーロー / 最終バンド / フォーム送信＝3箇所、すべて #contact 連動）
• [x] スマホで文字が潰れない（390px全ページで確認）
• [x] 他社素材を無断流用していない（画像0・ロゴ0・CSS自作・文言オリジナル）
• [x] 公開前チェックがある（本ファイル＋自動チェッカー）

4. リンク / レスポンシブ / フォーム

• 内部アンカー: CTA href="#contact" → id="contact" 実在（断線0）。
• レスポンシブ: 390 / 1280 で確認済み。
• フォーム: name/email/message。script.js がデモで preventDefault（実送信なし）→ 完了メッセージ表示のみ。実送信先は人間承認後に接続。

5. 安全

• 実名/実顧客/口座/電話/example.com以外メール: なし（grep 自動スキャンで clean）。
• 数字は架空前提（12社/月40h/8週間）のみ。満足度の具体数値は不使用。
• 画像生成（課金API）・公開デプロイ・メール送信・フォーム実送信: すべて未実行（人間承認前で停止）。

6. 残課題（すべて人間承認後）

• OGP/Twitter card 画像・favicon の追加（現engine版は未同梱）。
• asset-briefs.md に沿ったヒーロー/解決策/証拠画像の生成（課金・RUN_NOTE参照）。
• 無料診断の予約手段（フォーム/カレンダー/LINE）と所要時間の確定。
• フォーム送信先の接続・カスタムドメインへの公開デプロイ。

site-brief.md — AIO Marketing OS（無料診断獲得LP）

担当: HP・LP作成AI社員（02-homepage-lp-builder）
題材: SCENARIO.md の架空会社「株式会社アイウエオ / AIO Marketing OS」
すべて架空。連絡先は example.com のダミーのみ。外部送信・公開デプロイは未実行（ドラフトまで）。

0. 前提

• 目的: 「無料診断を予約する」の獲得を最大化するLP（問い合わせ＝申込導線）。
• 対象者: AIで集客・営業・制作を仕組み化したい中小企業・個人事業主。
• 使った素材: SCENARIO.md の架空一次情報のみ（株式会社アイウエオ / AIO Marketing OS / 498,000円税別 / 導入12社・月40h削減・8週間 / 無料診断・オンライン）。画像素材は使わず、CSSグラデーション・図解枠・比較リスト・タイムライン・FAQで成立させた。
• 仮定（一次情報が無い箇所を明記）:
• 無料診断は「約60分・オンライン」と仮置き（SCENARIOのセミナーが90分・無料・オンラインのため整合させた仮定）。
• 電話番号は実在化を避けて記載せず、「営業電話はしない（連絡はメール中心）」と本文・フォーム注記で代替。
• 満足度は「アンケートで好評」という傾向のみ。具体数値は使わない（SCENARIO禁止事項に準拠）。
• 導入12社・月40時間は「架空前提」と本文に明記して掲載（盛らない）。

1. 入力設計（事実 / 仮定の分離）

2. デザイン方針（10方向から選定）

scripts/create_design_directions.py が site-brief.json から10方向を生成（成果物 design-directions.md）。本案件では:

• 採用: #1 premium_dark（黒基調・強い証拠・高単価向け） をベースに #2 clean_saas の明快なCTA/FAQ/料金導線を混合。
• 理由: AIマーケ支援＝先進性＋信頼。黒のヒーローで信頼と高単価感、白の証拠/FAQバンドで読みやすさ、band.alt の交互配色でリズムを作る。
• 不採用例: editorial_story（写真前提でダミー画像になる）、bold_launch（締切煽りは無料診断のトーンに不一致）。

3. 構成（受け手の意思決定順）

ヒーロー → 証拠3点（数字バー）→ 問題提起 → 理想 → 解決策 → 8週間の進め方 → 受講後の声 → 保証（リスク解除）→ 料金 → FAQ → 最終CTA → 無料診断フォーム → フッター。

各バンドに「このセクションで信じてもらうこと」を1つ明記（site.json の各 body 末尾）。

4. リズム設計（カード並べだけにしない）

• 証拠: 数字3点の横バー（白背景）
• 問題/理想/解決/進め方/声/保証: band の2カラム箇条書き＋交互配色
• 料金: 3プラン（標準/無料診断/フォロー）カード
• FAQ: <details> ネイティブ・アコーディオン（JSで1つ開くと他を閉じる）
• 申込: 名前/メール/相談内容のフォーム（デモ・実送信なし）

5. 判断理由 / 固定化

• なぜこの順か: 「ツールを足す」不安→「役割を任せる」安心への転換を、問題→理想→解決で可視化。料金の直前に証拠と保証を置き、価格ショックをリスク解除で受け止める。
• 固定化したい型: ①ヒーロー内に商品名・価値・CTAを必ず同梱 ②料金の前後に証拠・保証を挟む ③FAQは反論処理（知識不要・業種・期間・追加費用・診断内容・営業有無）④CTAは複数箇所（ヒーロー/最終/フォーム）。
• 案件ごとに変える点: 配色（業種で10方向から選ぶ）、数字、Week区切り、FAQ項目、フォーム項目。

6. 完成物

• index.html … engine build_static_site.py で site.json から生成 → CSSを外部化＋無料診断フォーム/フッター/JSリンクを追記
• style.css … engine生成CSSを外部化 ＋ モバイル崩れ修正breakpoint（390px QAで確認）
• script.js … スムーススクロール / FAQアコーディオン / フォームはデモ（preventDefault・実送信なし）
• site-brief.json / site.json … 再生成用の入力（engineスクリプトで再現可能）
• design-directions.md / asset-briefs.md … engineスクリプト生成
• qa-report.md … 公開前チェック結果
• screenshots/ … 390 / 1280 のheadless Chrome実スクショ

7. 未確認事項 / 次アクション

• 未確認: 実際の診断時間・決済導線・特典・実素材（ロゴ/写真）。本番ではヒアリングで確定。
• 次アクション（すべて人間承認後）: ①OGP画像とfavicon追加 ②asset-briefs.md に沿った画像生成（課金API・RUN_NOTE記載）③フォーム送信先の接続 ④公開デプロイ。

8. 安全

• 実名・実顧客・口座・電話・example.com以外のメールは未掲載（grep自動チェックで担保）。
• 画像生成（課金）・メール送信・公開デプロイ・フォーム実送信はすべて未実行（人間承認前で停止）。