email-service-integration

メールサービスの統合

概要

注文確認、配送通知、パスワードリセット、アカウント通知などのトランザクションメールは、顧客との重要な接点であり、即時かつ確実に届く必要があります。このスキルでは、各プラットフォームでのメール配信の設定と、配信到達率を高める SPF／DKIM／DMARC の DNS レコード、再利用可能なテンプレート、バウンスや苦情の処理を含む、専用のトランザクションメールサービス（SendGrid、Amazon SES、Postmark）の統合について説明します。

このスキルを使用する場面

• 新しい e コマースストアでトランザクションメールを設定するとき
• SPF、DKIM、DMARC レコードがないため、メールが迷惑メールフォルダーに振り分けられているとき
• プラットフォーム標準のメールから、専用のトランザクションメールサービスに移行するとき
• ブランドのイメージに合ったカスタムメールテンプレートを作成するとき
• トランザクションメールの配信状況、開封率、バウンスを追跡するとき

基本的な手順

ステップ 1：プラットフォームと推奨される方法を確認する

プラットフォーム	標準のメール	推奨されるアップグレード
Shopify	Shopify Email（組み込みのブランド対応テンプレート、月 10K 通まで無料）	Settings → Notifications でテンプレートをカスタマイズします。大量配信や高度なフローには Klaviyo または Omnisend を使用します
WooCommerce	WordPress はホスティングサーバー経由で送信します（配信到達率が低い）	FluentSMTP（無料）をインストールして SendGrid／SES／Postmark 経由で配信します。ブランド対応テンプレートには WooCommerce Email Customizer（$49）を使用します
BigCommerce	BigCommerce 組み込みのトランザクションメール（基本的なテンプレート）	Marketing → Transactional Emails でテンプレートをカスタマイズします。高度なテンプレートには Klaviyo BigCommerce integration を使用します
カスタム／ヘッドレス	なし — 自分で構築します	SendGrid、Postmark、または Amazon SES を直接統合します。React Email でテンプレートを構築します。実装については以下を参照してください

ステップ 2：プラットフォームごとのメール設定

---

Shopify

組み込みのトランザクションメールをカスタマイズする：

1. Shopify 管理画面で Settings → Notifications に移動します
2. 通知の種類（注文確認、配送通知など）をクリックしてエディターを開きます
3. HTML／Liquid テンプレートを直接編集します。Shopify では注文データ用の Liquid 変数が用意されています
4. Online Store → Themes → Customize → Theme settings → Logo でロゴをアップロードします。通知メールに自動的に表示されます
5. Settings → General で送信者メールアドレスを設定します。Shopify が SPF／DKIM による認証を自動で行います

マーケティングフロー用に Shopify Email を設定する：

1. Apps → Shopify Email に移動します（無料。すべてのプランで月 10,000 通まで利用できます）
2. ドラッグ＆ドロップエディターで、注文確認、配送、購入後のフローを作成します
3. 高度な自動化（カート放棄シーケンス、顧客呼び戻しフロー）には、Shopify との統合機能が組み込まれた Klaviyo（500 件の連絡先まで無料）にアップグレードします

WooCommerce

FluentSMTP でメールの到達率を改善する：

1. FluentSMTP（無料、wordpress.org）をインストールします。WordPress に組み込まれている PHP メール機能を、専用の SMTP または API プロバイダーに置き換えます
2. FluentSMTP → Settings → Add New Connection に移動します
3. プロバイダーを選択します：SendGrid（無料枠：1 日あたり 100 通）、Mailgun（無料枠：1 か月あたり 1,000 通）、または Amazon SES（1,000 通あたり $0.10）
4. API キーを入力し、ドメインと一致するように From Name と From Email を設定します
5. FluentSMTP からテストメールを送信し、配信を確認します

送信ドメインの SPF と DKIM を設定する：

ほとんどのプロバイダーは、追加する DNS レコードを指定します。SendGrid の場合：

• SendGrid が提供する 2 つの CNAME レコードを DNS に追加します（通常はドメインレジストラーまたは Cloudflare で設定します）
• SendGrid でドメインを認証します。反映には最大 48 時間かかります
• 認証後、Gmail ではメールに「via sendgrid.net」ではなく「via yourdomain.com」と表示されます

WooCommerce のメールテンプレートをカスタマイズする：

1. ThemeHigh の Email Customizer for WooCommerce をインストールします（無料プランあり。Pro は $49 から）
2. WooCommerce → Email Customizer に移動し、各メールの種類にロゴ、色、フッターをドラッグ＆ドロップで追加します
3. または、ライブプレビューエディターを使える Kadence WooCommerce Email Designer（無料）をインストールします

---

BigCommerce

トランザクションメールのテンプレートをカスタマイズする：

1. BigCommerce の管理画面で Marketing → Transactional Emails に移動します
2. メールの種類（注文確認、発送通知など）をクリックし、Edit Template をクリックします
3. BigCommerce のテンプレート変数（例：%%ORDER_NUMBER%%、%%TOTAL_COST%%）を使って HTML テンプレートを編集します
4. Store Setup → Store Profile で、送信者名と返信先アドレスを設定します

高度なフローを利用するために Klaviyo を接続する：

1. BigCommerce App Marketplace から Klaviyo アプリをインストールします（インストール無料）
2. Klaviyo は BigCommerce の注文データと顧客データを自動的に同期します
3. Klaviyo に用意されている BigCommerce 向けフローを使って、注文確認、配送、カート放棄のメールを送信します

---

カスタム／ヘッドレス

まず、配信到達率を高めるために DNS を設定します — メールを受信トレイに届けるには、SPF、DKIM、DMARC の設定が必須です：

; SPF — authorize SendGrid to send on behalf of your domain
mystore.com.  IN TXT  "v=spf1 include:sendgrid.net ~all"

; DKIM — SendGrid provides two CNAME records:
s1._domainkey.mystore.com  IN CNAME  s1.domainkey.u12345.wl.sendgrid.net.
s2._domainkey.mystore.com  IN CNAME  s2.domainkey.u12345.wl.sendgrid.net.

; DMARC — start with p=none to monitor, then escalate to p=quarantine
_dmarc.mystore.com  IN TXT  "v=DMARC1; p=none; rua=mailto:[email protected]"

送信前に mxtoolbox.com/SuperTool.aspx で確認します。

SendGrid API の統合：

// lib/email/sendgrid.ts
import sgMail from '@sendgrid/mail';
sgMail.setApiKey(process.env.SENDGRID_API_KEY!);

export async function sendEmail(params: {
  to: string;
  subject: string;
  html: string;
  text: string;
}) {
  await sgMail.send({
    to: params.to,
    from: { email: '[email protected]', name: 'My Store' },
    subject: params.subject,
    html: params.html,
    text: params.text,
    trackingSettings: {
      clickTracking: { enable: false },  // Don't wrap links in transactional emails
      openTracking: { enable: true },
    },
  });
}

React Email でテンプレートを作成する（npm install @react-email/components）：

// emails/order-confirmation.tsx
import { Body, Container, Heading, Html, Img, Preview, Section, Text, Row, Column } from '@react-email/components';

export function OrderConfirmationEmail({ orderNumber, customerName, items, total, trackingUrl }) {
  return (
    <Html>
      <Preview>Your order #{orderNumber} is confirmed</Preview>
      <Body style={{ backgroundColor: '#f4f4f4', fontFamily: 'Arial, sans-serif' }}>
        <Container style={{ maxWidth: '600px', margin: '0 auto', backgroundColor: '#fff', padding: '20px' }}>
          <Heading>Order Confirmed</Heading>
          <Text>Hi {customerName}, your order #{orderNumber} has been received.</Text>
          {items.map((item, i) => (
            <Row key={i} style={{ borderBottom: '1px solid #eee', padding: '10px 0' }}>
              <Column style={{ width: '60px' }}>
                <Img src={item.imageUrl} width={50} height={50} alt={item.name} />
              </Column>
              <Column>
                <Text style={{ margin: 0, fontWeight: 'bold' }}>{item.name}</Text>
                <Text style={{ margin: 0, color: '#666' }}>Qty: {item.quantity}</Text>
              </Column>
              <Column style={{ textAlign: 'right' }}>
                <Text style={{ margin: 0 }}>{item.price}</Text>
              </Column>
            </Row>
          ))}
          <Section style={{ marginTop: '20px' }}>
            <Text style={{ fontWeight: 'bold', fontSize: '18px' }}>Total: {total}</Text>
          </Section>
        </Container>
      </Body>
    </Html>
  );
}

レンダリングして送信する：

import { render } from '@react-email/render';
import { OrderConfirmationEmail } from '../../emails/order-confirmation';
import { sendEmail } from './sendgrid';

export async function sendOrderConfirmation(order: Order) {
  const html = await render(OrderConfirmationEmail({ ...orderData }));
  const text = await render(OrderConfirmationEmail({ ...orderData }), { plainText: true });

  await sendEmail({
    to: order.customer.email,
    subject: `Your order #${order.number} is confirmed`,
    html,
    text,
  });
}

Webhook でバウンスと苦情に対処する：

// POST /api/webhooks/sendgrid
export async function POST(req: NextRequest) {
  const events = await req.json();
  for (const event of events) {
    if (event.event === 'bounce') {
      await db.emailSuppressions.upsert({ email: event.email, type: 'hard_bounce' });
    }
    if (event.event === 'spamreport') {
      await db.emailSuppressions.upsert({ email: event.email, type: 'spam_complaint' });
    }
  }
  return NextResponse.json({ received: true });
}

// Check suppression list before every send
export async function canSendEmail(email: string): Promise<boolean> {
  const suppression = await db.emailSuppressions.findByEmail(email.toLowerCase());
  return !suppression; // Never send to hard bounced or spam-complaint addresses
}

ベストプラクティス

• トランザクションメールとマーケティングメールでは、送信ドメインを分けます — マーケティングキャンペーンで発生したバウンスやスパムの苦情が、トランザクションメール用ドメインの評価に影響しないようにします
• 必ずプレーンテキスト版を含めます — プレーンテキスト版がないとスパムフィルターに引っかかる可能性があります。React Email は { plainText: true } を指定すると自動的に生成します
• ハードバウンスしたアドレスは直ちに送信対象から除外します — 存在しないアドレスに送信すると送信者の評価が損なわれます。送信のたびに、除外リストを保存して確認します
• トランザクションメールではクリックを追跡しません — リンク追跡では URL がリダイレクトで置き換えられるため、パスワードリセットや注文確認のメールで不審に見えることがあります
• さまざまなメールクライアントでの表示をテストします — Outlook、Gmail、Apple Mail では HTML の表示が大きく異なります。テンプレートをデプロイする前に Litmus または Email on Acid を使って検証します

よくある落とし穴

問題	解決策
WooCommerce のメールが迷惑メールに振り分けられる	FluentSMTP をインストールして、SendGrid または SES 経由で送信します。WordPress のデフォルトの PHP メールには SPF/DKIM が設定されていないため、ほとんどの場合、迷惑メールとしてマークされます
SES のサンドボックスによって配信がブロックされる	新しい AWS アカウントは SES のサンドボックスモードで開始されます。本番環境で利用する前に、AWS Support を通じて本番アクセスを申請します
注文確認メールが重複して送信される	冪等性のある送信を実装します。送信前に emailId = hash(orderId + 'order-confirmation') を生成し、確認します
SPF/DKIM を設定してもメールが迷惑メールに振り分けられる	DMARC のアライメントを確認します。From: ドメインは、DKIM の d= タグに指定されたドメインと一致している必要があります
React Email の CSS が Outlook で正しく表示されない	すべてにインラインスタイルを使用します。Outlook は <style> ブロックを無視します。組み込みコンポーネントでは @react-email/components が対応します

関連スキル

• @gdpr-ecommerce
• @webhook-architecture
• @analytics-integration