Regalis Japan Group株式会社 Logo

EmailJS設定 - ステップバイステップガイド

📋 全体の流れ

  1. EmailJSアカウント作成
  2. メールサービス（Gmail等）を接続
  3. メールテンプレートを作成
  4. 公開キーを取得
  5. アプリに設定を反映

ステップ1: EmailJSアカウントの作成

  1. EmailJS公式サイトにアクセス
    • https://www.emailjs.com/ を開く
  2. アカウント作成
    • 右上の「Sign Up」をクリック
    • Googleアカウントまたはメールアドレスで登録
    • 無料プランで開始（月200通まで無料）
  3. ダッシュボードにログイン
    • 登録後、自動的にダッシュボードに移動します

ステップ2: メールサービスの設定

2-1. サービスを追加

  1. ダッシュボードの左メニューから 「Email Services」 をクリック
  2. 「Add New Service」 ボタンをクリック
  3. 使用するメールサービスを選択：
    • Gmail（推奨）: 個人のGmailアカウントを使用
    • Outlook: Outlookアカウントを使用
    • SendGrid: より多くのメールを送信したい場合

2-2. Gmailの場合の設定例

  1. 「Gmail」を選択
  2. サービス名を入力（例: regalis_contact）
  3. 「Connect Account」をクリック
  4. Googleアカウントでログインして認証
  5. 「Create Service」をクリック

2-3. サービスIDを確認

設定完了後、サービス一覧に表示されます。

ステップ3: メールテンプレートの作成

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

  1. 左メニューから 「Email Templates」 をクリック
  2. 「Create New Template」 をクリック

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

テンプレート名:

Regalis予約通知

件名（Subject）:

新しい予約が入りました -

本文（Content）:

新しい予約が入りました。

【顧客情報】
名前: 
メールアドレス: 
電話番号: 
年齢: 

【診断結果】
診断ID: 
アーキタイプ: 
体型タイプ: 
選択プラン: 
合計金額: 円

【メッセージ】


---
このメールは自動送信されています。
Regalis Japan Group

3-3. 送信先の設定

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

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

ステップ4: 公開キーの取得

  1. 左メニューから 「Account」 → 「General」 をクリック
  2. 「Public Key」 の欄にある文字列をコピー（例: abcdefghijklmnop）

ステップ5: アプリに設定を反映

5-1. App.tsxを開く

# エディタで開く
code suit-mbti-app/src/App.tsx

または、お好みのエディタで suit-mbti-app/src/App.tsx を開きます。

5-2. 定数を更新

ファイルの19-22行目あたりにある以下の部分を、取得した値に置き換えます：

// EmailJS設定
const EMAILJS_SERVICE_ID = 'service_abc123'; // ステップ2で取得したサービスID
const EMAILJS_TEMPLATE_ID = 'template_xyz789'; // ステップ3で取得したテンプレートID
const EMAILJS_PUBLIC_KEY = 'abcdefghijklmnop'; // ステップ4で取得した公開キー

5-3. 保存

ファイルを保存します。

ステップ6: 動作確認

6-1. 開発サーバーを起動（まだ起動していない場合）

cd suit-mbti-app
npm run dev

6-2. ブラウザでテスト

  1. http://localhost:5173 を開く
  2. 診断を最後まで進める
  3. 予約フォームに情報を入力して送信
  4. 設定したメールアドレスにメールが届くことを確認

6-3. エラーが発生した場合

✅ 設定完了チェックリスト

🔍 よくある質問

Q: メールが届かない

A: EmailJSダッシュボードの「Logs」でエラーを確認してください。サービスIDやテンプレートIDが間違っている可能性があります。

Q: 無料プランの制限は？

A: 月200通まで無料です。それ以上は有料プラン（$15/月から）が必要です。

Q: 複数のメールアドレスに送信したい

A: EmailJSのテンプレートで「To Email」に複数のアドレスをカンマ区切りで入力できます。

Q: 顧客にも確認メールを送りたい

A: 別のテンプレートを作成し、to_email変数を使用して顧客のメールアドレスに送信できます。

📞 サポート

EmailJSの公式ドキュメント: https://www.emailjs.com/docs/