EmailJSテンプレート設定ガイド

📋 このガイドの目的

診断レポート送信と予約詳細レポート送信の2つのEmailJSテンプレートを作成し、アプリに設定する手順を説明します。

🎯 作成するテンプレート

診断レポート送信用テンプレート - ユーザーが「診断レポートを取得する」を選択した時に使用
予約詳細レポート用テンプレート - 来店予約が完了した時に使用

ステップ1: EmailJSダッシュボードにアクセス

https://www.emailjs.com/ にアクセス
ログイン（既にアカウント作成済みの場合）
ダッシュボードが表示されます

ステップ2: 診断レポート送信用テンプレートの作成

2-1. テンプレート作成画面を開く

左メニューから 「Email Templates」 をクリック
「Create New Template」 ボタンをクリック

2-2. テンプレートの基本設定

テンプレート名:

Regalis診断レポート送信

Service（サービス）:

既に設定済みのサービスを選択（例: regalis_contact）

To Email（送信先）:

`` と入力（ユーザーのメールアドレスに送信）

From Name（送信者名）:

Regalis Japan Group

Reply To（返信先）:

店舗のメールアドレスを入力（例: info@regalis.co.jp）

2-3. 件名（Subject）の設定

【Regalis】スーツ診断レポート -

2-4. 本文（Content）の設定

以下のHTMLテンプレートを使用してください：

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <style>
    body { font-family: 'Hiragino Kaku Gothic ProN', 'Hiragino Sans', Meiryo, sans-serif; line-height: 1.6; color: #333; }
    .container { max-width: 600px; margin: 0 auto; padding: 20px; }
    .header { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; padding: 30px; text-align: center; border-radius: 10px 10px 0 0; }
    .content { background: #f9f9f9; padding: 30px; border-radius: 0 0 10px 10px; }
    .section { margin-bottom: 25px; }
    .section-title { font-size: 18px; font-weight: bold; color: #667eea; border-bottom: 2px solid #667eea; padding-bottom: 5px; margin-bottom: 15px; }
    .info-box { background: white; padding: 15px; border-radius: 5px; border-left: 4px solid #667eea; margin: 10px 0; }
    .footer { text-align: center; color: #666; font-size: 12px; margin-top: 30px; padding-top: 20px; border-top: 1px solid #ddd; }
    pre { background: #f5f5f5; padding: 15px; border-radius: 5px; overflow-x: auto; white-space: pre-wrap; font-size: 12px; }
  </style>
</head>
<body>
  <div class="container">
    <div class="header">
      <h1 style="margin: 0;">Regalis Japan Group</h1>
      <p style="margin: 10px 0 0 0;">スーツ診断レポート</p>
    </div>
    
    <div class="content">
      <p>この度は、Regalis Japan Groupのスーツ診断をご利用いただき、ありがとうございます。</p>
      
      <div class="section">
        <div class="section-title">📋 診断結果</div>
        <div class="info-box">
          <p><strong>診断ID:</strong> </p>
          <p><strong>アーキタイプ:</strong> </p>
          <p><strong>体型タイプ:</strong> </p>
        </div>
      </div>
      
      <div class="section">
        <div class="section-title">💰 推奨プラン</div>
        <div class="info-box">
          <p><strong>プラン名:</strong> </p>
          <p><strong>お見積もり:</strong> </p>
        </div>
      </div>
      
      <div class="section">
        <div class="section-title">📄 詳細レポート</div>
        <pre></pre>
      </div>
      
      <div class="section">
        <p>このレポートは、診断結果と回答内容をまとめたものです。</p>
        <p>ご不明な点がございましたら、お気軽にお問い合わせください。</p>
      </div>
    </div>
    
    <div class="footer">
      <p>Regalis Japan Group</p>
      <p>このメールは自動送信されています。</p>
    </div>
  </div>
</body>
</html>

2-5. テンプレートを保存

「Save」 ボタンをクリック
テンプレートIDをコピー（例: template_abc123）
- テンプレート一覧に表示されるIDをメモしてください

ステップ3: 予約詳細レポート用テンプレートの作成

3-1. 新しいテンプレートを作成

「Email Templates」 ページで 「Create New Template」 をクリック

3-2. テンプレートの基本設定

テンプレート名:

Regalis予約詳細レポート送信

Service（サービス）:

同じサービスを選択

To Email（送信先）:

`` と入力

From Name（送信者名）:

Regalis Japan Group

Reply To（返信先）:

店舗のメールアドレスを入力

3-3. 件名（Subject）の設定

【Regalis】予約確認レポート -

3-4. 本文（Content）の設定

以下のHTMLテンプレートを使用してください：

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <style>
    body { font-family: 'Hiragino Kaku Gothic ProN', 'Hiragino Sans', Meiryo, sans-serif; line-height: 1.6; color: #333; }
    .container { max-width: 600px; margin: 0 auto; padding: 20px; }
    .header { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; padding: 30px; text-align: center; border-radius: 10px 10px 0 0; }
    .content { background: #f9f9f9; padding: 30px; border-radius: 0 0 10px 10px; }
    .section { margin-bottom: 25px; }
    .section-title { font-size: 18px; font-weight: bold; color: #667eea; border-bottom: 2px solid #667eea; padding-bottom: 5px; margin-bottom: 15px; }
    .info-box { background: white; padding: 15px; border-radius: 5px; border-left: 4px solid #667eea; margin: 10px 0; }
    .step-box { background: white; padding: 15px; border-radius: 5px; margin: 10px 0; border-left: 4px solid #10b981; }
    .footer { text-align: center; color: #666; font-size: 12px; margin-top: 30px; padding-top: 20px; border-top: 1px solid #ddd; }
    pre { background: #f5f5f5; padding: 15px; border-radius: 5px; overflow-x: auto; white-space: pre-wrap; font-size: 12px; }
    .highlight { background: #fef3c7; padding: 2px 6px; border-radius: 3px; font-weight: bold; }
  </style>
</head>
<body>
  <div class="container">
    <div class="header">
      <h1 style="margin: 0;">Regalis Japan Group</h1>
      <p style="margin: 10px 0 0 0;">予約確認レポート</p>
    </div>
    
    <div class="content">
      <p> 様</p>
      <p>この度は、Regalis Japan Groupへのご予約ありがとうございます。</p>
      <p>予約が正常に受け付けられました。詳細レポートをお送りいたします。</p>
      
      <div class="section">
        <div class="section-title">📋 予約情報</div>
        <div class="info-box">
          <p><strong>予約ID:</strong> </p>
          <p><strong>お名前:</strong>  様</p>
          <p><strong>メールアドレス:</strong> </p>
        </div>
      </div>
      
      <div class="section">
        <div class="section-title">📄 詳細レポート</div>
        <pre></pre>
      </div>
      
      <div class="section">
        <p>ご来店をお待ちしております。</p>
        <p>ご不明な点がございましたら、お気軽にお問い合わせください。</p>
      </div>
    </div>
    
    <div class="footer">
      <p>Regalis Japan Group</p>
      <p>このメールは自動送信されています。</p>
    </div>
  </div>
</body>
</html>

3-5. テンプレートを保存

「Save」 ボタンをクリック
テンプレートIDをコピー（例: template_xyz789）

ステップ4: App.tsxにテンプレートIDを設定

4-1. App.tsxを開く

エディタで suit-mbti-app/src/App.tsx を開きます。

4-2. テンプレートIDを更新

ファイルの20-24行目あたりにある以下の部分を、取得したテンプレートIDに置き換えます：

// EmailJS設定
const EMAILJS_SERVICE_ID = 'service_eknowod'; // 既に設定済み
const EMAILJS_TEMPLATE_ID = 'template_xvgcres'; // 既に設定済み（予約通知用）
const EMAILJS_PUBLIC_KEY = 't_2xYv1Fj4qOBuUXS'; // 既に設定済み
const EMAILJS_REPORT_TEMPLATE_ID = 'template_abc123'; // ← ステップ2で取得したIDに置き換え
const EMAILJS_BOOKING_TEMPLATE_ID = 'template_xyz789'; // ← ステップ3で取得したIDに置き換え

例:

const EMAILJS_REPORT_TEMPLATE_ID = 'template_abc123'; // 診断レポート送信用
const EMAILJS_BOOKING_TEMPLATE_ID = 'template_xyz789'; // 予約詳細レポート用

4-3. ファイルを保存

変更を保存します。

ステップ5: 動作確認

5-1. 開発サーバーを起動

cd suit-mbti-app
npm run dev

5-2. 診断レポート送信のテスト

ブラウザで http://localhost:5173 を開く
診断を最後まで進める
結果画面で 「診断レポートを取得する」 をクリック
メールアドレスを入力して送信
メールボックスを確認してレポートが届くことを確認

5-3. 予約詳細レポート送信のテスト

診断結果画面で 「来店予約をする」 をクリック
予約フォームに情報を入力して送信
抽選画面が表示される
メールボックスを確認して予約詳細レポートが届くことを確認

5-4. EmailJSダッシュボードで確認

EmailJSダッシュボードの 「Logs」 を確認
送信履歴が表示されることを確認
エラーがないか確認

🔍 トラブルシューティング

メールが届かない

EmailJSのLogsを確認
- ダッシュボードの「Logs」でエラーを確認
- エラーメッセージを確認
テンプレートIDが正しいか確認
- App.tsxのテンプレートIDが正しいか確認
- テンプレート一覧でIDを再確認
変数名が正しいか確認
- テンプレート内の変数名（``など）が正しいか確認
- 大文字小文字を確認

レポート内容が表示されない

変数名の確認
- ``がテンプレートに含まれているか確認
- HTMLテンプレートの<pre>タグ内に``があるか確認
コードの確認
- App.tsxのgenerateReport関数とgenerateBookingReport関数が正しく動作しているか確認
- ブラウザのコンソールでエラーを確認

テンプレートが保存できない

必須項目の確認
- Service、To Email、From Nameが設定されているか確認
- テンプレート名が入力されているか確認
HTMLの確認
- HTMLテンプレートに構文エラーがないか確認
- 特殊文字がエスケープされているか確認

✅ チェックリスト

テンプレート作成

診断レポート送信用テンプレートを作成した
予約詳細レポート用テンプレートを作成した
両方のテンプレートIDをメモした

App.tsx設定

EMAILJS_REPORT_TEMPLATE_IDを設定した
EMAILJS_BOOKING_TEMPLATE_IDを設定した
ファイルを保存した

動作確認

診断レポート送信が成功した
予約詳細レポート送信が成功した
メールの内容が正しく表示される
EmailJSのLogsでエラーがない

📝 補足情報

使用される変数一覧

診断レポート送信テンプレート:

`` - 顧客のメールアドレス
`` - 診断ID
`` - アーキタイプ名
`` - 体型タイプ名
`` - 選択プラン名
`` - 合計金額
`` - レポート本文（重要）

予約詳細レポート送信テンプレート:

`` - 顧客のメールアドレス
`` - 顧客名
`` - 予約ID
`` - レポート本文（重要）

テンプレートのカスタマイズ

HTMLとCSSを自由に編集できます
ブランドカラーやロゴを追加できます
レイアウトを変更できます
``変数は必ず含めてください（レポート本文が表示されます）

🎉 完了！

すべての設定が完了したら、アプリケーションは完全に動作するようになります！

問題が発生した場合は、EmailJSの公式ドキュメント（https://www.emailjs.com/docs/）を参照するか、お問い合わせください。