image-brief.md — HTMLメール用 画像ブリーフ

株式会社アイウエオ / AIO Marketing OS 集客メール（無料診断オファー）
画像はまだ存在しない前提。下記ブリーフでデザイナー or 画像生成AIに発注できる。
すべて架空。実在の人物・ロゴ・写真素材は使わない。

共通仕様

• 比率: 16:9（HERO と本文セクション画像とも）
• 推奨書き出し: 1200×675px（メール内は 600px / 520px に縮小表示）
• 形式: PNG または JPG（写真調なら JPG・85品質）
• 1枚あたり目安: 150KB 以下（メール総重量を軽く保つ。HERO+本文1枚で 300KB 未満を目標）
• 文字は画像に焼き込みすぎない（画像オフ環境でも alt で意味が通るようにする）
• ブランド色: パープル #7b6ce0 / #9b8cff、アクセント ピンク〜オレンジ #ec5b8a→#c87941→#e8b88a

画像1: HERO（メール最上部・必須）

• 役割: 件名「AI社員を1人雇うと、なぜ作業が消えて売上が残るのか」を視覚化
• 構図案: 左に「積み上がった手作業（書類・チェック・通知の山）」、右に「すっきりした机と上向きグラフ」。中央を矢印でつなぐ before→after 構図
• トーン: 清潔・余白多め・ビジネス向け。煽り感は出さない
• 文字焼き込み: 最小限（入れるなら「作業は渡す。売上は残す。」程度の短句のみ）
• alt（HTMLに記載済み）: 「AI社員を1人雇うと、なぜ作業が消えて売上が残るのか｜株式会社アイウエオ AIO Marketing OS」
• 差し込み先URL（プレースホルダ）: https://example.com/img/aiueo-hero-1200x675.png

画像2: 本文セクション「8週間で整える3つのこと」

• 役割: 提供内容の3ステップを一目で理解させる
• 構図案: 横3分割のステップ図

1. AI社員の設計（人とAIの役割分担アイコン）
2. マーケ導線の設計（入口→申込が一本につながる導線アイコン）
3. 運用の仕組み化（手順書＋チェックリストアイコン）

• トーン: フラットイラスト・線は細め・ブランドパープルを基調
• 文字焼き込み: 各ステップに短いラベル可
• alt（HTMLに記載済み）: 「8週間で整える3ステップ：AI社員の設計／マーケ導線の設計／運用の仕組み化」
• 差し込み先URL（プレースホルダ）: https://example.com/img/aiueo-3steps-1200x675.png

発注時の注意（人間承認ポイント）

• 画像は CDN / メール用ホスティングに置き、本番URLへ差し替えてから送信（現状は example.com プレースホルダ）。
• 実在企業ロゴ・有名人の顔・ストックの人物写真をそのまま使わない（権利・架空前提のため）。
• 生成画像に誤った数字や実績を焼き込まない（数字は本文の架空前提のみ）。

qa-report.md — HTMLメール作成AI社員 / 表示・配信前チェック

案件: 株式会社アイウエオ / AIO Marketing OS 集客メール（無料診断オファー・架空）
成果物: email.html / email.txt / image-brief.md
検証日: 2026-06-15

1. 前提

• すべて架空（SCENARIO.md準拠）。実在の人名・顧客名・口座・電話・メール（example.com以外）は不使用。
• HEROと本文セクション画像は未生成の前提で example.com のプレースホルダURLを使用。本番送信前に実URLへ差し替える（未確認事項）。
• 受信者名: 最終 email.html / email.txt では実体「ご担当者 様」に確定（engine素出力は {{name}} プレースホルダで、送信基盤の差し込みに渡す想定）。本文中の検証用注記「（架空の前提）」も最終版から除去済。

2. 判断理由（なぜこの作りか）

• 件名から【】と「無料」を外した：spam_check.py で件名ブラケット/「無料」が各 -5 になり、外すと 100/100 になったため（下記コマンド結果）。
• 本文中CTAと末尾CTAの計2か所をボタン化し、各ボタンの直下にURLテキストリンクを併記：画像/ボタン非表示環境やテキスト派の受信者でも確実にCTAへ到達させるため（SKILL「CTAボタンとテキストリンクを両方」）。
• engineテンプレ（brand_email.html）はフッターが ブランド/サンプルコミュニティ 固定だったため、配布安全と案件整合のためフッターを株式会社アイウエオ + example.com に書き換え。

3. 自動チェック結果（コマンドと出力）

3-1. engine: md→HTML 変換（実行: あり）

```
python3 17-html-email-designer/engine/html-newsletter/scripts/md_to_html.py \
--md engine-run/source.md --out-dir engine-run --slug aiueo-ai-marketing-1 \
--hero "https://example.com/img/aiueo-hero-1200x675.png" \
--img "https://example.com/img/aiueo-3steps-1200x675.png" --mode marketing
→ DONE → engine-run/aiueo-ai-marketing-1.html / aiueo-ai-marketing-1.txt (exit 0)
```
（engine生成物は engine-run/ に保存。最終 email.html はこれをベースにプリヘッダ追加・CTAラベル/フッターを案件用に補正した版）

3-2. engine: spam_check.py（実行: あり）

```
python3 .../spam_check.py --md engine-run/source.md
→ 📊 スコア: 100/100 ✅ SAFE (exit 0)
「無料」2回(許容内) / 画像1・CTA2マーカー / 本文760字(適切)
```
（件名改善前は 85/100。件名から【】と無料を除いて 100/100 に改善）

3-3. HTML静的チェック（Python・最終 email.html）

項目	結果
本文幅 600px テーブル / max-width:600px	OK
CSSはインラインのみ（<style>ブロックなし）	OK
プリヘッダー（display:none + mso-hide:all）	OK
viewport メタ（width=device-width）	OK
グラデCTAボタン数	2
ボタン直下のテキストリンクCTA	2
配信停止 mailto	OK
会社情報フッター（株式会社アイウエオ）	OK
img alt がすべて非空	OK（2枚とも内容を説明）
href ドメインは example.com のみ	OK
実在識別子の混入（実社名・実ドメイン・実メール・実SNSハンドル等）	検出なし（example.com / 架空社名のみ）

3-4. 目視QA（headless Chrome スクショ・実行: あり）

```
"Google Chrome" --headless --disable-gpu --force-device-scale-factor=1 --window-size=375,1400 --screenshot=screenshot-mobile-375.png file://.../email.html (exit 0)
"Google Chrome" --headless --disable-gpu --force-device-scale-factor=1 --window-size=640,1400 --screenshot=screenshot-desktop-640.png file://.../email.html (exit 0)
```

• screenshot-mobile-375.png（スマホ幅375px）: 1カラムで横スクロール無し。見出し/本文/eyebrow が読める。CTAボタン2つが中央でフル表示＋直下にテキストリンク。フッターに会社情報・配信停止あり。
• 画像はexample.comプレースホルダのため alt 表示（=alt検証も兼ねる）。本番URL差し替え後に再スクショ推奨。

4. Gmail/スマホ崩れ観点チェック

• レイアウトは table ベース + インラインCSS のみ（Gmailは <style>/外部CSSを制限するため）。→ OK
• 画像は width 属性 + width:100%;height:auto で可変。HEROは width="600"、本文画像 width="520"。→ スマホで縮小されOK。
• CTAボタンは <table>＋背景グラデの bulletproof 構造（Outlookでも面が残る形）。ただし linear-gradient 非対応クライアントでは単色フォールバックが無い → 軽微な改善余地（下記残課題）。
• 日本語フォントは system font スタック指定で文字化けリスク低（charset UTF-8）。

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

• [ ] 画像2枚の本番URL（CDN）への差し替え（現状 example.com プレースホルダ）。
• [ ] 送信ドメイン/SPF・DKIM・DMARC・配信基盤の状態確認（メール本体の責務外だが配信前必須）。
• [ ] 受信者名差し込み（{{name}}）の動作確認。
• [ ] 実画像差し替え後にスマホ/Gmail実機で再スクショ。

6. 承認ゲート（重要）

• 本成果物は ドラフトまで。実送信・予約配信・公開は行っていない。送信は人間承認後。