React 電子メール テンプレート: 美しいトランザクション電子メールを構築する
トランザクション電子メールの開封率は 45% で、これは平均的なマーケティング電子メールのほぼ 5 倍ですが、ほとんどの企業は、ブランド認知を損なう不適切な形式の HTML 電子メールを送信しています。 React Email は電子メールのデザインにコンポーネントベースの開発モデルを導入し、開発者が使い慣れた React パターンを使用して美しく応答性の高いテンプレートを構築できるようにします。
重要なポイント
- React Email コンポーネントは、クライアント間で互換性のある HTML にコンパイルされます -- Gmail、Outlook、Apple Mail
- コンポーネントベースのアーキテクチャにより、再利用可能なヘッダー、フッター、レイアウト パターンが可能
- ホット リロードを備えたローカル プレビュー サーバーにより、テンプレート開発が加速されます
- シームレスな NestJS 統合のためのレンダリング関数 (生のコンポーネントではない) のエクスポート
電子メールに反応する理由
電子メールの HTML は難しいことで有名です。クライアントが異なれば HTML のレンダリング方法も異なります。Outlook はレンダリング エンジンとして Word を使用し、Gmail はスタイル タグを削除し、モバイル クライアントではビューポートの処理が異なります。
React Email は、コンテナ (レスポンシブな幅)、セクション (テーブルベースのブロック)、行/列 (グリッド システム)、テキスト、見出し、ボタン (Outlook で機能)、画像、リンク、時間、およびプレビュー (非表示の受信ボックス テキスト) という事前構築済みコンポーネントでこれを抽象化します。
プロジェクトのセットアップ
@react-email/componentsとreact-emailをインストールします。テンプレートを、templates/、components/、およびレンダリング関数をエクスポートする render.ts ファイルを含む package/email-templates ディレクトリに整理します。
テンプレートの構築
共有レイアウトコンポーネント
ブランドを使用して再利用可能な EmailHeader コンポーネントと EmailFooter コンポーネントを作成します。これらにより、すべてのトランザクション電子メールにわたる一貫性が保証されます。
テンプレートの構造
各電子メール テンプレートは、型指定された props を受け取る React コンポーネントです。
import {
Html, Head, Body, Container, Section,
Text, Button, Hr,
} from "@react-email/components";
interface WelcomeEmailProps {
userName: string;
loginUrl: string;
}
export function WelcomeEmail({ userName, loginUrl }: WelcomeEmailProps) {
return (
<Html>
<Head />
<Body style={{ fontFamily: "Arial, sans-serif" }}>
<Container style={{ maxWidth: "600px", margin: "0 auto" }}>
<Text>Hi {userName},</Text>
<Text>Your account is ready.</Text>
<Button
href={loginUrl}
style={{ background: "#001834", color: "#fff", padding: "12px 24px" }}
>
Sign In
</Button>
</Container>
</Body>
</Html>
);
}
NestJS 統合のためのレンダリング
重要なパターン: 生のコンポーネントではなく、レンダリング関数をエクスポートします。 NestJS は JSX コンパイルなしで実行されるため、React コンポーネントを直接インポートするとエラーが発生します。
テンプレートをインポートし、非同期関数をエクスポートする render.ts ファイルを作成します。
import { render } from "@react-email/render";
import { WelcomeEmail } from "./templates/welcome";
export async function renderWelcomeEmail(props: {
userName: string;
loginUrl: string;
}) {
return render(WelcomeEmail(props));
}
NestJS で、render 関数を呼び出して HTML を取得し、電子メール トランスポーター経由で送信します。
開発ワークフロー
ローカルプレビュー
ホット リロードを使用してブラウザベースのプレビューを実行するには、npx react-email dev を実行します。変更は即座に反映されるため、反復が高速になります。
クロスクライアントテスト
Acid で Litmus または電子メールを使用してクライアント間でテストします。少なくともテスト: Gmail (Chrome)、Outlook (Windows)、Apple Mail、Gmail (iOS)、Apple Mail (iOS)、Yahoo Mail、Outlook.com。
スタイリングのベスト プラクティス
- インライン スタイルのみ: クライアントの互換性のために React Email はスタイルを自動的にインライン化します
- システム フォント: Arial、Georgia、Verdana を使用します。カスタム フォントのサポートは制限されています。
- 600px max width: Standard email width for desktop and mobile
- テーブルベースのレイアウト: React Email コンポーネントは Outlook との互換性のためにテーブルとしてレンダリングされます。
- ダーク モード: Apple Mail および Outlook ダーク モード サポートのメタ タグを含めます。
一般的なメール テンプレート
注文確認
注文番号、価格が記載された商品リスト、配送先住所、配達予定日、追跡リンクがある場合はその情報を含めます。項目リストにはテーブル レイアウトを使用します。
パスワードのリセット
簡潔な説明、期限付きリンクを含む目立つリセット ボタン、リンクを共有しないことに関するセキュリティ通知、サポート連絡先など、最小限に抑えてください。
請求書の電子メール
PDF の請求書を添付し、電子メールの本文に概要 (請求書番号、日付、期限、合計金額、オンラインで表示/支払いを行うためのボタン) を含めます。
発送通知
注文番号、配送業者名、クリック可能なリンク付きの追跡番号、配達予定日、発送される商品を含めます。
よくある質問
Q: ドラッグ アンド ドロップのメール ビルダーを使用してみてはいかがでしょうか?
ドラッグ アンド ドロップ ビルダーはマーケティング電子メールには機能しますが、トランザクション電子メールには動的コンテンツ機能がありません。注文確認書と請求書には、コードでより適切に処理できるデータ駆動型のテンプレートが必要です。
Q: React Email はどの送信サービスでも機能しますか?
はい。 Nodemailer、SendGrid、Postmark、AWS SES、Resend、または任意の SMTP サーバーと互換性のある標準 HTML 文字列を出力します。
Q: 電子メールのローカリゼーションはどのように処理すればよいですか?
ロケールと翻訳された文字列をテンプレートの小道具として渡します。レンダリング関数はすべてのテキストをパラメータとして受け取るため、翻訳はレンダリング前に i18n システムによって処理されます。
Q: 動的な画像やグラフを含めることはできますか?
URL でホストされているサーバー側で生成された画像を使用します。 QuickChart などのライブラリは、チャートを画像としてレンダリングします。埋め込み画像は避けてください -- 互換性のためにホストされた URL を使用してください。
次は何ですか
React Email は、トランザクション電子メール開発を、イライラするテーブル レイアウトの練習から最新のコンポーネント ベースのワークフローに変換します。
メール テンプレートの開発については ECOSIRE にお問い合わせ、統合されたメール ワークフローについては Odoo 実装サービス をご覧ください。
ECOSIRE が発行 -- エンタープライズ ソフトウェア ソリューションによるビジネスの拡大を支援します。
執筆者
ECOSIRE Research and Development Team
ECOSIREでエンタープライズグレードのデジタル製品を開発。Odoo統合、eコマース自動化、AI搭載ビジネスソリューションに関するインサイトを共有しています。
関連記事
Drizzle ORM と NestJS を使用した API の構築: 完全ガイド
Drizzle ORM と NestJS を使用してタイプセーフな API を構築します。実稼働アプリケーションのスキーマ定義、移行、クエリ構築、関係、トランザクション、およびテスト パターンについて学びます。
Next.js 国際化: next-intl を使用した完全な i18n ガイド
next-intl を使用して Next.js に国際化を実装します。ルーティング、翻訳、サーバー/クライアント コンポーネント、RTL サポート、SEO、展開をカバーする完全なガイド。