コード生成中級

HTML メールテンプレートを React Email へ移行

古い HTML/Inline CSS メールを react-email コンポーネントに置き換えるプロンプト。

監修: 平原尚樹

株式会社BlueAI 代表取締役CEO / ソフトウェアエンジニア / プロダクトエンジニア / Google Cloud Architect / 元AIスタートアップ(Doorkel)

監修: 酒井歩乃加

早稲田大学文化構想学部卒業 / フリーランス編集者・ライター / 元マイベスト編集ディレクター / SEO対策記事・取材記事執筆

こんな課題を解決

メールテンプレートが table タグだらけの古い HTML で、変更のたびに Gmail と Outlook 両方で崩れる。react-email に統一して保守性を上げたい。

プロンプト

Claude Code に入力

次の HTML メールを react-email に移植してください。

## 入力
- ファイル: emails/legacy/welcome.html（300 行、inline style）
- 利用変数: {{userName}}, {{verifyUrl}}, {{supportEmail}}

## 出力
1. emails/welcome.tsx に react-email コンポーネント
2. components/ 配下に Header / Footer / Button を切り出し
3. テンプレ変数は props で受け取り型を厳密化
4. プレビュー用に bun run email を実行できる scripts 追加

## 守ること
- レイアウトは元と同じ見た目を維持（幅 600px センター揃え）
- ダークモード対応（meta color-scheme + class 切替）
- Gmail / Outlook / iOS Mail で崩れないよう react-email のベストプラクティスに従う
- 不要な inline style は components/styles.ts に集約

実行結果の例

Claude Code が以下を返します。 - emails/welcome.tsx（90 行） - components/Header.tsx, Footer.tsx, Button.tsx - preview スクリプトの実行コマンド - 元 HTML から削除可能になったセクション一覧

コツ・ポイント

react-email の Tailwind support は限定的なので頼り切らない
テスト送信は Resend / Postmark の sandbox を活用
ロゴ画像は CDN に置いて URL を変数化
国際化が必要なら i18n 対応も同時に検討