email-newsletter

メールニュースレター

トピックまたはコンテンツの概要をもとに、完全な HTML メールニュースレターを作成し、デザインします。Loops、Mailchimp、Beehiiv、Resend、または標準的なメールプラットフォームにそのまま貼り付けて使えます。

---

重要なルール： テーブルベースの HTML とインラインスタイルのみを使用します。CSS クラス、フレックスボックス、グリッド、<style> ブロックは使用しません。すべての要素に style="" を直接指定します。これは任意ではありません。メールクライアントはそれ以外のものをすべて削除します。

---

ステップ 1：概要の確認

開始するには、次の 3 点が必要です。メッセージに 3 点すべてが含まれている場合は、ステップ 2 に進みます。

不足している項目がある場合は、次の内容をそのまま尋ねてください。

"開始するにあたり、次の 3 点を教えてください。

1. トピック -- このニュースレターのテーマは何ですか？
2. 読者 -- 誰が読みますか？（役職、会社の規模、あなたを知ったきっかけ）
3. 主な CTA -- 読者に取ってほしい行動を 1 つ教えてください。"

3 点すべてがそろうまで待ちます。

---

ステップ 2：詳細の確認

すべての質問を 1 つのメッセージにまとめ、カテゴリ別に分けて尋ねます。ユーザーはどの項目も省略できます。省略された場合はデフォルトを適用します。

"下書きを作成する前に、いくつか質問があります。わかる範囲で回答し、わからない項目は省略してください。

コンテンツ

1. 長さ -- 短め（300 語、簡潔）／標準（500～700 語）／詳細（800 語以上）？
2. 形式 -- 編集記事／番号付きの解説／個人的なストーリー／データレポート？
3. 配信の位置づけ -- 単発配信／週刊シリーズの一部／月刊ダイジェスト？
4. CTA URL -- 実際のリンクは何ですか？（指定がなければプレースホルダーを使用します）

ブランド 5. 会社名／ブランド名 -- ヘッダーとフッター用 6. タグライン -- 1 行の説明（任意、フッター用） 7. 都市と国 -- フッター用（例：「San Francisco, US」） 8. ブランドのメインカラー -- 16 進数カラーコードはありますか？（例：#856FE6） 9. サブアクセントカラー -- デフォルトの黄緑（#D8F90A）を使用／ブランドカラーを使用／その他？

デザイン 10. 背景 -- ダーク（エディトリアル／SaaS）／ライト（すっきり／コーポレート）／カスタムの 16 進数カラーコード？ 11. ディスプレイフォント -- エディトリアルなセリフ体（Instrument Serif）／すっきりしたモダンなサンセリフ体／システムフォントのみ？ 12. ボタンのスタイル -- ピル型（丸みが強い）／やや丸みを付ける／角を直角にする？ 13. ビジュアルスタイル -- エディトリアル／技術・データ系／温かみのある創業者向け／大胆なキャンペーン調？

プラットフォームと技術 14. プラットフォーム -- Loops／Mailchimp／Beehiiv／Resend／その他？ 15. トーン -- 教育的／会話調／大胆で直接的／フォーマル／遊び心のあるトーン？ 16. パーソナライズ -- なし／名／名＋会社名？ 17. 件名 -- 既にありますか？／候補を 3 つ作成しますか？ 18. 追加セクション -- スポンサーブロック／製品紹介／イベント／クイックリンク／なし？ 19. プレーンテキスト版 -- 作成する（推奨）／作成しない？"

省略された場合のデフォルト：

質問	デフォルト
長さ	標準（500～700 語）
形式	編集記事
配信の位置づけ	単発配信
CTA URL	[CTA_URL] プレースホルダー
会社名	[YOUR BRAND] プレースホルダー
タグライン	なし
都市と国	[CITY, COUNTRY] プレースホルダー
ブランドカラー	なし（すべてのアクセントに #D8F90A を使用）
サブアクセントカラー	#D8F90A（デフォルトの黄緑）
背景	ダーク
ディスプレイフォント	Instrument Serif（エディトリアルなセリフ体）
ボタンのスタイル	ピル型
ビジュアルスタイル	エディトリアル
プラットフォーム	汎用
トーン	会話調
パーソナライズ	なし
件名	候補を 3 つ作成
追加セクション	なし
プレーンテキスト	作成する

---

ステップ 2.5：デザインの方向性（内部用 -- ユーザーには表示しない）

ステップ 2 の回答をもとに、次を決定します。

• ビジュアルの特徴（質問 13 の回答を使用。省略された場合は、トーンと形式から推測）
• ひと目で伝わる要素を 1 つ -- ステップ 3 の前に特定する
• テンプレートのパス（ステップ 5 を参照）

質問 13 が省略された場合の特徴のデフォルト：

• 教育的／フォーマルなトーン：エディトリアル
• 数値が中心のコンテンツ（統計、ベンチマーク、レポート）：技術／データ重視
• 製品発表、イベント、キャンペーン：大胆なキャンペーン調

デザインの方向性を別途ユーザーに尋ねないでください。回答から導き出してください。

---

ステップ 3：構成の設計

セクションを選ぶ前に、レイアウトのルールについて references/html-email-guide.md を読んでください。

トピック＋対象読者＋CTA＋指定された追加セクションに基づいて、この一覧からセクションを選びます。

セクション	含める条件
header	常に含めます。ロゴのプレースホルダー＋号数または日付
hero	常に含めます。大きな見出し＋1～2文の導入文
intro	会話調または教育的なトーンの場合。短い個人的なメッセージ
main-content	主な記事または知見（テキスト中心）
stat-callout	注目に値する統計、引用、またはデータがある場合
secondary-section	追加のCTAが指定された場合
product-cta	ブランドの文脈があり、さりげない製品紹介が適している場合
sponsor-block	スポンサーセクションが指定された場合
quick-links	厳選リンクのセクションが指定された場合
footer	常に含めます。配信停止リンク＋会社名

選んだ構成を、各セクションの目的を一行で添えた番号付きリストとして出力します。

Proposed structure:
1. Header -- logo + Issue #1 / [date]
2. Hero -- headline + hook paragraph
3. Intro -- short personal framing
4. Main Content -- [topic] breakdown
5. Stat Callout -- key data point from the story
6. CTA -- [cta text]
7. Footer -- unsubscribe + company

Does this structure work, or should I adjust any sections?

ステップ 4 に進む前に、確認を待ってください。

---

ステップ 4：コンテンツの下書き

各セクションのコピーを順番に作成します。まだ HTML は使わず、読みやすい文章のみで作成してください。

セクションごとのルール：

• Header：号数＋日付。コピーは不要です。
• Hero headline：最大 8 語。成果を重視し、「I／We／Our」で始めないでください。
• Hero hook：1～2 文。問題や好奇心をかき立てる要素を含め、読者を引き込んでください。
• Intro：2～3 文。個人的または文脈に沿った内容にし、企業的な言い回しは避けてください。短縮形も使用できます。
• Main content：250～400 語。読みやすさを重視し、重要な箇所には 太字のフレーズ を使い、段落は短く（1～3 行）、長い文章の塊や箇条書きの多用は避けてください。
• Stat callout：統計または引用を 1 つ。最大 20 語で、印象的な表現にしてください。
• Product CTA：2～3 文。価値を前面に出し、「製品をぜひご覧ください」ではなく、読者にどのような変化がもたらされるかを伝えてください。
• CTA button text：3～5 語。行動を表す動詞＋メリット（「詳しい分析を読む」「席を確保する」「ガイドを入手する」など）
• Footer：配信停止リンクのプレースホルダー＋会社名

references/subject-line-formulas.md を読んでから、ユーザーが件名を指定していない場合は、件名の候補を 3 つ作成してください。

• Option A：好奇心をかき立てる形式
• Option B：メリットを直接伝える形式
• Option C：数字／リスト形式

em ダッシュは使用しないでください。次の語句は使用しないでください：「powerful」「seamless」「game-changing」「leverage」「innovative」「unlock」「transform」「elevate」「cutting-edge」「robust」。

---

ステップ 5：HTML の生成

HTML を生成する前に、references/design-system.md と references/html-email-guide.md を読んでください。

テンプレートを使うか、カスタムで作成するかは、ステップ 2 の回答に基づいて決めてください。

次の条件をすべて満たす場合は、ベースとして templates/dark-newsletter.html を使用します。

• 背景が暗色（または未指定）
• ディスプレイフォントが Instrument Serif（または未指定）
• カスタム背景の HEX カラーが指定されていない

次の条件をすべて満たす場合は、ベースとして templates/light-newsletter.html を使用します。

• 背景が明色、またはトーンがフォーマル
• ディスプレイフォントが Instrument Serif（または未指定）
• カスタム背景の HEX カラーが指定されていない

次のいずれかに当てはまる場合は、HTML を一からカスタムで生成します。

• カスタム背景の HEX カラーが指定されている（暗色でも白色でもない）
• ディスプレイフォントがモダンサンセリフ、またはシステムフォントのみ
• 回答の組み合わせに、どちらのテンプレートも適さないデザインが含まれている

カスタム生成では、完全なトークン仕様として references/design-system.md の Custom Generation Guide を使用してください。背景、フォント、ボタン、アクセントに関するユーザーの選択を全体に反映してください。

その後（テンプレートを使う場合）：

1. ステップ 3 の構成に基づき、テンプレートから必要なセクションのみを選びます。
2. ステップ 4 のコンテンツを使って、すべての [PLACEHOLDER] を埋めます。
3. ブランドカラーの置き換えを適用します（下記参照）。
4. すべての [UNSUBSCRIBE_URL] プレースホルダーが残っていることを確認します（プラットフォームに合わせた調整はステップ 6 で行います）。

ブランドカラーの置き換えルール： brand_color が指定されている場合：

• ブランドストリップの bgcolor（height:2px の行にある #D8F90A）を brand_color に置き換えます
• 統計コールアウトの左ボーダーの色を brand_color に置き換えます
• カテゴリーラベルの色を brand_color に置き換えます
• brand_color の輝度が高い場合（黄色、緑、オレンジなど、多くのネオンカラー）：ステップバッジの #D8F90A も brand_color に置き換えます
• brand_color の輝度が低い場合（ダークネイビー、フォレストグリーン、チャコール）：ステップバッジと CTA ボタンは #D8F90A のままにし、ストリップと統計ボーダーにのみ brand_color を使用します

brand_color が指定されていない場合：すべての #D8F90A の値をそのままにします。

コンテンツ置換ルール（ステップ 2 の回答に基づく）：

• company_name が指定されている場合：すべての [YOUR BRAND] と [COMPANY NAME] のプレースホルダーを置き換えます
• city_country が指定されている場合：[CITY, COUNTRY] のプレースホルダーを置き換えます
• tagline が指定されている場合：会社名の後にフッターのサブタイトル行として追加します
• cta_url が指定されている場合：すべての [CTA_URL] のプレースホルダーを実際の URL に置き換えます
• personalization = first_name の場合：ヒーローの挨拶に、プラットフォームに適した名の変数を追加します。例：Beehiiv では Hey %%first_name%%,、Loops では Hey {{first_name}},、Mailchimp では Hey *|FNAME|*,
• personalization = first_name + company の場合：文脈に応じて適切な箇所に両方の変数を追加します

ブランドカラーの視覚的なコントラスト確認（ダークなメールの場合）：

ブランドカラーは #111111 上で視覚的に映えますか？2px のストリップとして見えるか、頭の中で確認してください。

• 彩度の高い色（紫、青、ティール、ピンク、黄色、オレンジ、緑）：はい。ストリップ、統計ボーダー、カテゴリーラベルに使用します
• 彩度が低い色／無彩色に近い色（ウォームグレー、ベージュ、オフホワイト）：ストリップのみに使用し、カテゴリーラベルは #555555 に戻します
• 黒に近い色（#2A2A2A より暗いダークネイビー、フォレストグリーン、チャコール）：すべてのアクセントで brand_color の使用を避け、すべての要素を #D8F90A に戻します

アクセントの節度に関するルール： brand_color の使用箇所は最大 3 か所です。ブランドストリップ、統計ボーダー、カテゴリーラベルに限ります。本文、見出し、ボタンの背景、セクションの背景には決して使用しないでください。ブランドカラーを使いすぎると、高級感が損なわれます。

CTA ボタンのテキスト色：

• 背景が #D8F90A のボタン：テキストには常に #0A0A0A を使用します（明るい色のため）
• 背景が #111111 のボタン（黄色のコールアウトカード内）：テキストには常に #F2F2F2 を使用します
• 背景が brand_color のボタン：ブランドカラーが明るい場合は #0A0A0A、暗い場合は #FFFFFF を使用します

背景色を持つすべての <td> で必須： bgcolor= HTML 属性とインラインの background-color: スタイルの両方を指定します。例：

<td bgcolor="#D8F90A" style="background-color:#D8F90A;">

属性は Outlook に対応し、スタイルはそれ以外の環境に対応します。どちらか一方だけを使うことは避けてください。

優れたデザイン（フロントエンドデザインの原則をメール向けに応用）：

メールのテーブルによる制約が、デザインの追求を妨げることはありません。その範囲内で最大限に工夫してください。

• タイポグラフィを極限まで追求する：4～5 語の見出しは 60px、字間は -0.04em。6～7 語の見出しは 56px、字間は -0.03em。8 語の見出しは 48px。安全のためにサイズを小さくしないでください。見出しはラベルではなくポスターです。統計の引用文に使う Instrument Serif のイタリック体は、ほかのどの要素にも出せない文学的な重みを加えます。

• 密度のコントラストで巧みさを示す：ヒーローは最大限に余白を広く取ります（上部 64px）。本文の段落は詰めて密度を高くします。CTA コールアウトカードでは再び最大限に余白を広く取ります（64px）。広く → 詰めて → 広く、というリズムが、テンプレートの出力ではなく意図的なデザインとして伝わります。

• セクションの切り替えで背景に奥行きを出す（すべてメールで安全な色です）：

  • ヘッダー：#0A0A0A
  • ヒーロー：#111111
  • 統計コールアウトの外側：#111111、内側の浮き上がったカード：#1A1A1A
  • 本文の段落：#161616（控えめな浮き上がりで、色を使わずに奥行きを作ります）
  • ステップカード：#111111（本文とのコントラスト）
  • CTA コールアウトカード：#D8F90A（唯一の明るい要素。決して弱めないでください）
  • フッター：#080808

• アクセントを絞るほど高級感が増す：暗い背景の中に黄色のコールアウトカードが 1 つあると、高級感が生まれます。黄色が 6 か所にあると、安っぽく見えます。CTA カードの力は、暗いメールの中で唯一の明るい要素であることから生まれます。

• 忘れられないテスト: 保存する前に、読者が 3 時間後に同僚にどう説明するかを一文で述べてください。それが曖昧なら（「暗くてすっきりしていた」など）、ビジュアルアンカーが十分に強くありません。具体的にしましょう（「大きなセリフ体の見出しが付いた黄色いカード」など）。

• 編集的なプルクオートとしての統計コールアウト: 左ボーダー 4px（3px ではない）。引用テキストには 26px イタリックの Instrument Serif。内側パディング 32px。これはメールが雑誌のプルクオートに最も近づける表現です。プルクオートと同じように扱ってください。

---

ステップ 6: プラットフォームの調整

references/platform-compat.md を読み、プラットフォーム固有の調整を適用します:

プラットフォーム	対応
Loops	[UNSUBSCRIBE_URL] を {{unsubscribe_url}} に置き換えます。[FIRST_NAME] 参照を {{first_name}} に置き換えます
Mailchimp	[UNSUBSCRIBE_URL] を *|UNSUB|* に置き換えます。編集可能な <td> ブロックに mc:edit="[section-name]" を追加します
Beehiiv	[UNSUBSCRIBE_URL] を %%unsubscribe_url%% に置き換えます。[FIRST_NAME] を %%first_name%% に置き換えます
Resend	[UNSUBSCRIBE_URL] を {unsubscribeUrl} に置き換えます。注: React Email の .tsx 出力はリクエストに応じて利用可能です
Generic/Other	[UNSUBSCRIBE_URL] をコメント付きのプレースホルダーとして保持します: ``

---

ステップ 7: セルフ QA

出力する前に生成された HTML を確認します。見つかった問題はすべて修正してください -- 省略しないでください。

レンダリングチェック:

• すべてのスタイルがインライン -- <style> ブロックなし、どこにも class= 属性なし
• すべての <table> に cellpadding="0" cellspacing="0" border="0" がある
• 画像（ある場合）に alt=""、border="0"、style に display:block がある
• コンテナテーブルで最大幅 600px が適用されている
• CTA ボタンが bgcolor= 属性付きの <table> + <td> 構造を使用しており、display:block 付きの <a> だけではない
• インライン style に flexbox、grid、position:、float:、CSS 変数（--var）、min-height、max-height がない
• border-radius は <td> のみ -- <table> や <a> にはない（Outlook は <td> の radius をレンダリングします）
• フッターにプラットフォームに合った変数を使った配信停止リンクがある

コンテンツチェック:

• ヒーロー見出しが 8 語以下
• CTA ボタンのテキストが 3〜5 語
• em ダッシュがない（-- は可、-- は不可）
• 禁止ワードがない: "powerful"、"seamless"、"game-changing"、"leverage"、"innovative"、"unlock"、"transform"、"elevate"、"cutting-edge"、"robust"
• プレーンテキスト版がすべての HTML をきれいに除去している（要求された場合）

デザイン品質チェック:

• ステップ 2.5 の 1 つの見逃せない要素が視覚的に支配的 -- 同じ重みのセクションの間に埋もれていない
• タイポグラフィの階層が明確: H1 >> H2 >> 本文 -- 各レベルのサイズコントラストが少なくとも 2:1
• すべての余白値が有効なリズムのみ: 8 / 16 / 20 / 24 / 32 / 40 / 52 / 64px -- 任意の値（18px、22px、30px、45px など）がない
• ブランドカラーが 3 か所以下に登場 -- 出現回数を数え、それより多い場合は最も優先度の低い要素から削除
• メールスロップパターンがない -- references/design-system.md のスロップリストと照合して確認

いずれかのチェックが失敗した場合: インラインで修正し、その後チェックリストをもう一度頭の中で実行してください。

---

ステップ 8: 件名の提示

3 つの件名オプションが生成された場合、推奨とともに提示します:

**Subject Line Options**

A. [subject] -- [formula used, best for what audience/context]
B. [subject] -- [formula used]
C. [subject] -- [formula used]

Recommendation: [A/B/C] -- [one sentence reason based on audience and tone]

ユーザーが自分の件名を提供した場合は、このステップをスキップします。

---

ステップ 9: ファイルの保存 + サマリーの提示

まず HTML をファイルに保存してください -- チャットにそのまま貼り付けないでください。

mkdir -p docs/newsletters

完全な HTML を以下に書き込みます: docs/newsletters/[topic-slug]-[YYYY-MM-DD].html

ここで [topic-slug] はトピックを小文字にし、スペースをハイフンに置き換えたものです（例: "AI B2B Sales" → ai-b2b-sales）。

プレーンテキスト版が要求された場合は、以下にも書き込みます: docs/newsletters/[topic-slug]-[YYYY-MM-DD].txt

次に、このサマリーをチャットで提示します（HTML コードフェンスなし）:

## Newsletter: [topic slug]
Date: [today's date] | Platform: [platform] | Tone: [tone]

Saved to: docs/newsletters/[topic-slug]-[YYYY-MM-DD].html

---

### Subject Lines
A. [subject A] -- [formula]
B. [subject B] -- [formula]
C. [subject C] -- [formula]
Recommended: [letter] -- [one-sentence reason]

---

### Send Checklist
- [ ] Replace [CTA_URL] with your actual link
- [ ] Replace [COMPANY NAME] and [CITY, COUNTRY] in footer
- [ ] Replace [YOUR BRAND] in header with your brand name (or swap in a logo image)
- [ ] Verify unsubscribe variable works in [platform]
- [ ] Send a test email to yourself before launching

チャットに HTML を出力しないでください。ファイルパスがユーザーにどこで見つけられるかを伝えます。

---

セクションの参考

セクション	目的
header	ロゴ + 発行番号または日付
hero	大きな見出し + 1～2文の導入文
intro	短い個人的なメモまたは背景
main-content	主要な記事または知見（テキスト中心）
image-block	全幅の画像 + キャプション
stat-callout	ボックス内で強調する統計情報または引用
secondary-section	2つ目のストーリーまたは特集
product-cta	控えめな製品紹介または機能のハイライト
sponsor-block	スポンサーコンテンツ（明確に表示）
quick-links	厳選リンクのセクション（3～5件）
footer	配信停止リンク、会社情報、法的情報

出力形式（リクエストに応じて）

• 標準 HTML（デフォルト）：インラインスタイル、テーブルベースで、あらゆる環境で動作します
• React Email：.tsx コンポーネント出力――明示的なリクエストが必要です。Resend + 開発チームに適しています
• プレーンテキスト：ユーザーが除外を希望しない限り、常にフォールバックとして含まれます