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 が発行 -- エンタープライズソフトウェアソリューションによるビジネスの拡大を支援します。

React 電子メールテンプレート: 美しいトランザクション電子メールを構築する

重要なポイント

React Email コンポーネントは、クライアント間で互換性のある HTML にコンパイルされます -- Gmail、Outlook、Apple Mail

コンポーネントベースのアーキテクチャにより、再利用可能なヘッダー、フッター、レイアウトパターンが可能

ホットリロードを備えたローカルプレビューサーバーにより、テンプレート開発が加速されます

シームレスな NestJS 統合のためのレンダリング関数 (生のコンポーネントではない) のエクスポート

電子メールに反応する理由

プロジェクトのセットアップ

テンプレートの構築

共有レイアウトコンポーネント

テンプレートの構造

各電子メールテンプレートは、型指定された 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 統合のためのレンダリング

テンプレートをインポートし、非同期関数をエクスポートする 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 を取得し、電子メールトランスポーター経由で送信します。

開発ワークフロー

ローカルプレビュー

クロスクライアントテスト

スタイリングのベストプラクティス

インラインスタイルのみ: クライアントの互換性のために 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: 電子メールのローカリゼーションはどのように処理すればよいですか?

Q: 動的な画像やグラフを含めることはできますか?

次は何ですか

メールテンプレートの開発については ECOSIRE にお問い合わせ、統合されたメールワークフローについては Odoo 実装サービスをご覧ください。

ECOSIRE が発行 -- エンタープライズソフトウェアソリューションによるビジネスの拡大を支援します。

React 電子メール テンプレート: 美しいトランザクション電子メールを構築する

React 電子メール テンプレート: 美しいトランザクション電子メールを構築する

電子メールに反応する理由

プロジェクトのセットアップ

テンプレートの構築

共有レイアウトコンポーネント

テンプレートの構造

NestJS 統合のためのレンダリング

開発ワークフロー

ローカルプレビュー

クロスクライアントテスト

スタイリングのベスト プラクティス

一般的なメール テンプレート

注文確認

パスワードのリセット

請求書の電子メール

発送通知

よくある質問

次は何ですか

ECOSIRE でビジネスを成長させましょう

関連記事

NestJS 11 エンタープライズ API パターン

Next.js 16 アプリルーター: 制作パターンと落とし穴

React Query (TanStack): データ取得パターン

React 電子メール テンプレート: 美しいトランザクション電子メールを構築する

React 電子メール テンプレート: 美しいトランザクション電子メールを構築する

電子メールに反応する理由

プロジェクトのセットアップ

テンプレートの構築

共有レイアウトコンポーネント

テンプレートの構造

NestJS 統合のためのレンダリング

開発ワークフロー

ローカルプレビュー

クロスクライアントテスト

スタイリングのベスト プラクティス

一般的なメール テンプレート

注文確認

パスワードのリセット

請求書の電子メール

発送通知

よくある質問

次は何ですか

ECOSIRE でビジネスを成長させましょう

関連記事

NestJS 11 エンタープライズ API パターン

Next.js 16 アプリルーター: 制作パターンと落とし穴

React Query (TanStack): データ取得パターン

React 電子メールテンプレート: 美しいトランザクション電子メールを構築する

React 電子メールテンプレート: 美しいトランザクション電子メールを構築する

スタイリングのベストプラクティス

一般的なメールテンプレート

React 電子メールテンプレート: 美しいトランザクション電子メールを構築する

React 電子メールテンプレート: 美しいトランザクション電子メールを構築する

スタイリングのベストプラクティス

一般的なメールテンプレート