メールニュースレター
トピックまたはコンテンツ概要から、完成されたHTMLメールニュースレターを作成・デザインします。Loops、Mailchimp、Beehiiv、Resend、または任意の標準的なメールプラットフォームにそのまま貼り付け可能なHTMLを出力します。
重要なルール: テーブルベースのHTMLとインラインスタイルのみを使用すること。CSSクラス、flexbox、grid、<style>ブロックは一切使用禁止。すべての要素に直接style=""を記述すること。これは譲れない条件です。メールクライアントはそれ以外のものをすべて削除します。
ステップ1: 概要の受け取り
開始には3つの情報が必要です。メッセージ内に3つすべてが含まれている場合は、ステップ2に進んでください。
不足しているものがあれば、正確に以下のように質問してください：
「開始するにあたり、3つの情報が必要です：
- トピック -- このニュースレターは何についてですか？
- オーディエンス -- 誰が読みますか？（役職、企業規模、あなたとの関係性）
- プライマリCTA -- 読者にどのようなアクションを取ってもらいたいですか？」
続行する前に、3つすべての回答を待ちます。
ステップ2: 完全な情報収集
すべての質問をカテゴリ別にグループ化して、1つのメッセージで一度に質問してください。ユーザーはスキップ可能で、その場合はデフォルト値が適用されます。
「下書きの前にいくつか質問です。わかるものだけ答えてください。残りはスキップしても構いません：
コンテンツ
- 長さ -- 簡潔（300語、インパクト重視）/ 標準（500-700語）/ 詳細（800語以上）？
- フォーマット -- エディトリアル記事 / 番号付き解説 / 個人的なストーリー / データレポート？
- 発行のコンテキスト -- 単発送信 / 週刊シリーズの一部 / 月次ダイジェスト？
- 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 | 常に -- 配信停止リンク＋会社名 |
選択した構造を、セクションごとに一行の目的を添えた番号リストとして出力します：
提案される構造：
1. Header -- ロゴ + Issue #1 / [日付]
2. Hero -- 見出し + フック段落
3. Intro -- 短い個人的な枠組み
4. Main Content -- [トピック]の解説
5. Stat Callout -- ストーリーの重要なデータポイント
6. CTA -- [ctaテキスト]
7. Footer -- 配信停止 + 会社名
この構造で問題ないですか、それとも調整すべきセクションはありますか？
ステップ4に進む前に確認を待ちます。
ステップ4: コンテンツの下書き
各セクションのコピーを順番に書きます。まだHTMLは書きません。クリーンな散文のみです。
セクションごとのルール：
- Header: 発行番号＋日付。コピーは不要。
- Hero見出し: 最大8語、成果に焦点を当て、「私は/私たちは/私たちの」で始めない
- Heroフック: 1～2文、問題または好奇心のギャップで読者を引き込む
- Intro: 2～3文、個人的または文脈的、企業風ではない、短縮形OK
- Main content: 250～400語、スキャンしやすいように、重要なポイントは太字、短い段落（1～3行）、テキストの壁を作らない、箇条書きを多用しない
- Stat callout: 1つの統計または引用、最大20語、インパクト重視
- Product CTA: 2～3文、価値重視、「私たちの製品をチェックしてください」とは言わない -- それによって何が変わるかを伝える
- CTAボタンテキスト: 3～5語、行動動詞＋ベネフィット（「詳細な解説を読む」「席を確保する」「ガイドを入手する」）
- Footer: 配信停止リンクのプレースホルダー＋会社名
references/subject-line-formulas.md を読み、その後3つの件名オプションを書きます（ユーザーから件名が提供されていない場合）：
- オプションA: 好奇心ギャップの公式
- オプションB: 直接ベネフィットの公式
- オプション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 をベースとして使用：
- background = dark（または未指定）
- display font = Instrument Serif（または未指定）
- カスタム背景16進数コードが提供されていない
次のすべての条件を満たす場合、templates/light-newsletter.html をベースとして使用：
- background = light または tone = formal
- display font = Instrument Serif（または未指定）
- カスタム背景16進数コードが提供されていない
次のいずれかの条件を満たす場合、スクラッチからカスタムHTMLを生成：
- カスタム背景16進数コードが提供されている（dark、white以外）
- display font = モダンサンセリフまたはシステムフォントのみ
- 回答の組み合わせにより、どちらのテンプレートも対応できないデザインになる場合
カスタム生成の場合：references/design-system.md のカスタム生成ガイドを完全なトークン仕様として使用します。ユーザーの背景/フォント/ボタン/アクセントの選択を全体に適用します。
その後（テンプレートパスの場合）：
- テンプレートから必要なセクションのみを選択します（ステップ3の構造に基づく）
- すべての
[PLACEHOLDER]値をステップ4のコンテンツで埋めます - ブランドカラーの置換を適用します（下記参照）
- すべての
[UNSUBSCRIBE_URL]プレースホルダーがまだ存在することを確認します（プラットフォーム調整はステップ6で行います）
ブランドカラー置換ルール：
brand_color が提供された場合：
- ブランドストリップの
bgcolor（height:2px行内の#D8F90A）を brand_color に置き換える - stat callout の左ボーダーの色を brand_color に置き換える
- カテゴリラベルの色を brand_color に置き換える
- brand_color の輝度が高い場合（黄色、緑、オレンジ -- ほとんどのネオン系）：ステップバッジの
#D8F90Aも brand_color に置き換える - brand_color の輝度が低い場合（濃紺、フォレストグリーン、チャコール）：ステップバッジとCTAボタンは
#D8F90Aのままにし、ブランドカラーはストリップとステータスボーダーのみに使用する
brand_color が提供されなかった場合：すべての #D8F90A 値をそのまま維持します。
コンテンツ置換ルール（ステップ2の回答から）：
company_nameが提供された場合：すべての[YOUR BRAND]と[COMPANY NAME]プレースホルダーを置き換えるcity_countryが提供された場合：[CITY, COUNTRY]プレースホルダーを置き換えるtaglineが提供された場合：フッターの会社名の後にサブタイトル行として追加するcta_urlが提供された場合：すべての[CTA_URL]プレースホルダーを実際のURLに置き換えるpersonalization = first_nameの場合：heroの挨拶にプラットフォームに適したファーストネーム変数を追加する -- 例：BeehiivではHey %%first_name%%,、LoopsではHey {{first_name}},、MailchimpではHey *|FNAME|*,personalization = first_name + companyの場合：文脈的に適切な場所に両方の変数を追加する
ブランドカラーの視覚的テンションチェック（ダークメールの場合）：
ブランドカラーは #111111 の背景上で視覚的に映えますか？頭の中でテストしてください：2pxのストリップとして見えるでしょうか？
- 高彩度の色（紫、青、ティール、ピンク、黄、オレンジ、緑）：YES -- ストリップ＋ステータスボーダー＋カテゴリラベルに使用
- 低彩度／ほぼニュートラル（温かみのあるグレー、ベージュ、オフホワイト）：ストリップのみ；カテゴリラベルは
#555555に戻す - ほぼ黒（～
#2A2A2Aより暗い濃紺、フォレストグリーン、チャコール）：すべてのアクセント用途で brand_color をスキップし、すべての要素で#D8F90Aにフォールバックする
アクセント規律ルール： brand_color は最大3箇所にのみ表示：ブランドストリップ、ステータスボーダー、カテゴリラベル。本文、見出し、ボタン背景、セクション背景には決して使用しない。過剰なブランディングはプレミアム感を損なう。
CTAボタンテキストの色：
#D8F90Aのボタン背景上：常に#0A0A0Aのテキストを使用（薄い色です）#111111のボタン背景上（黄色のコールアウトカード内）：常に#F2F2F2のテキストを使用- brand_color のボタン上：ブランドが薄い色の場合は
#0A0A0A、ブランドが濃い色の場合は#FFFFFFを使用
背景色を持つすべての <td> に必須：
HTML属性の bgcolor= とインラインの background-color: スタイルの両方。例：
<td bgcolor="#D8F90A" style="background-color:#D8F90A;">
属性はOutlookを処理します。スタイルはそれ以外のすべてを処理します。片方だけを使用しないでください。
デザインエクセレンス（フロントエンドデザイン原則、メールに適用）：
メールのテーブル制約はデザインの野心を制限しません。その範囲内で押し進めてください：
-
タイポグラフィを極限まで：4～5語の見出し = 60px、
-0.04emトラッキング。6～7語の見出し = 56px、-0.03em。8語 = 48px。安全のためにサイズを小さくしないでください -- 見出しはポスターであり、ラベルではありません。統計引用のInstrument Serif斜体は、他のどの要素も達成できない文学的な重みを加えます。 -
密度のコントラストを技巧のシグナルに：Hero = 最大の余白（上部64px）。本文段落 = タイトで密集。CTAコールアウトカード = 再び最大の余白（64px）。余白 → タイト → 余白 のリズムは、テンプレート出力ではなく意図的なデザインとして読まれます。
-
セクションの交互配置による背景の奥行き（すべてメールセーフ）：
- Header:
#0A0A0A - Hero:
#111111 - Stat callout 外側:
#111111、内側の浮き上がったカード:#1A1A1A - 本文段落:
#161616（微妙な浮き上がりが色を使わずに奥行きを生み出す） - ステップカード:
#111111（本文とのコントラスト） - CTAコールアウトカード:
#D8F90A（唯一の明るい要素 -- 決して薄めない） - Footer:
#080808
- Header:
-
アクセントの希少性 = 高級感：ダークな海の中に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] を `* |
| Beehiiv | [UNSUBSCRIBE_URL] を %%unsubscribe_url%% に置き換える。[FIRST_NAME] を %%first_name%% に置き換える |
| Resend | [UNSUBSCRIBE_URL] を {unsubscribeUrl} に置き換える。注：React Email .tsx 出力はリクエストに応じて利用可能 |
| 汎用/その他 | [UNSUBSCRIBE_URL] を <!-- Replace with your unsubscribe link --> というコメント付きのプレースホルダーとして保持する |
ステップ7: 自己QA
出力前に生成されたHTMLをチェックします。見つかった問題はすべて修正します -- スキップしないでください。
レンダリングチェック：
- すべてのスタイルがインライン --
<style>ブロックやclass=属性がどこにもない - すべての
<table>にcellpadding="0" cellspacing="0" border="0"がある - 画像（ある場合）に
alt=""、border="0"、display:blockがスタイルにある - コンテナテーブルに最大幅600pxが適用されている
- CTAボタンは
<a>のdisplay:blockだけでなく、bgcolor=属性を持つ<table>+<td>構造を使用している - インラインスタイルに
flexbox、grid、position:、float:、CSS変数（--var）、min-height、max-heightがない -
border-radiusは<td>にのみ --<table>や<a>にはない（Outlookは<td>の半径をレンダリングする） - フッターにプラットフォーム正しい変数を持つ配信停止リンクがある
コンテンツチェック：
- Hero見出しが8語以下である
- CTAボタンテキストが3～5語である
- emダッシュがない（-- はOK、— はダメ）
- 禁止単語がない：「powerful」、「seamless」、「game-changing」、「leverage」、「innovative」、「unlock」、「transform」、「elevate」、…
ステップ8: 出力
すべての質問に対する完全な回答を含めます。出力には、プレーンテキスト版と件名オプションを含めます。
出力形式：
出力は常に、以下の見出しとセクションで構成します：
件名のオプション
- 件名A -- [説明]
- 件名B -- [説明]
- 件名C -- [説明]
プレーンテキスト版
[プレーンテキスト版]
HTML版
[完全なテーブルベースのHTMLメール]