HTML email はメールクライアントで生き残るメールを構築します。古いレンダラーが必要とするテーブル構造・インラインスタイルのマークアップで、メールクライアント幅でチェックされ、送信可能な状態でエクスポートされます。モダン CSS が死にゆくフォーマット用のテンプレートです。
メール実行が構築するもの
キャンペーンのようにブリーフを書きます。「新ティアのローンチメール: 見出し、3 つの機能、1 つのボタン、フッター」と書けば、エージェントがメールを構築します。ヘッダー、本文ブロック、コールトゥアクション、フッター、すべてクライアント対応マークアップです。結果は email viewer で開きます。レンダリングされるとおりの、メールクライアント幅のメッセージです。
メールクライアントはブラウザではありません。Outlook はいまだに Word HTML をレンダリングし、Gmail は長いメールを切り詰め、ダークモードはあなたが設定しなかった色を反転します。テンプレートはその現実に合わせて構築します。flexbox よりテーブル、スタイルシートよりインラインスタイル、機能よりフォールバックです。
HTML email · Devin · e2e · gate PASS
The Launch Email — The announcement email for this very product — one clear CTA, inlined tables, dark-mode safe.
▸ the prompt that made it▾ the prompt that made it
“Design an HTML email: a launch announcement for a desktop design tool — one clear CTA.”
クライアント幅チェック
ビューアは実際のクライアントが使う幅でメッセージを表示します。狭い受信トレイペイン、モバイルメールアプリなど。デザインが実際に読まれるサイズで読めます。ゲートはメールルールをチェックします。画像フォールバック、テーブル構造、安全なフォントです。
メールのステアリング
他の結果と同じステアリングです。
- ⌥-click でブロックを選び、正確な場所にコメント(「ボタンはもっと重い感じに」)
- 追記 で構造を調整(「フッター下に PS を追加」)
- Tweaks でパラメータ(アクセントカラー、密度、画像サイズ)を調整
- Versions — 1 案はヒーロー画像あり、1 案はテキスト主体
得意なこと
- ローンチ・キャンペーンメール — 正しく見えるべき告知
- ニュースレター — あらゆるクライアントで読める繰り返し使うレイアウト
- トランザクショナルデザイン — ブランドを運ぶ領収書やウェルカムメール
- メールテンプレート — キャンペーンシリーズのベース
エクスポート
メールは HTML としてエクスポートします。送信ツールに貼り付けられるクライアント対応マークアップです。目視確認やデザイン資料用に PNG も。ファイルはプロジェクトに残り、次のキャンペーンや次の案に使えます。
ヒント: テンプレートが強制していても、ブリーフに「client-safe」と書きましょう。どうせ Outlook のレンダラーが剥がすモダン CSS へ、追記が戻りすぎるのを防ぎます。