# 通知設計書 8-ウェルカムメール

## 概要

本ドキュメントは、Giselleプラットフォームにおけるウェルカムメール通知の設計仕様を定義するものである。ユーザーがサインアップ完了後に送信されるウェルカムメールの送信仕様、テンプレート構造、処理フローを記載する。

### 本通知の処理概要

本通知は、新規ユーザーがGiselleプラットフォームへのサインアップを完了した後に、サービス紹介と次のステップへの案内を送信する機能である。

**業務上の目的・背景**：新規ユーザーのオンボーディングを促進し、サービスの価値を早期に体験してもらうことを目的とする。Stage（AIエージェントを試せる環境）やワークスペース作成への導線を提供し、ユーザーのエンゲージメントを高める。マーケティングメールシリーズの最初のメールとして、継続的なコミュニケーションの起点となる。

**通知の送信タイミング**：ユーザーがサインアップを完了し、メールアドレスの確認が完了した後に自動送信される。オンボーディングメールシリーズの第1通目。

**通知の受信者**：サインアップを完了した新規ユーザー。確認済みのメールアドレス宛に送信される。

**通知内容の概要**：ユーザー名への挨拶、Stageの紹介、ワークスペース作成への案内、サポート連絡先、エグザンプルギャラリーへのリンク、Giselleチームからの署名が含まれる。

**期待されるアクション**：受信者は「The stage awaits」ボタンをクリックしてStageを体験するか、「Create your workspace」ボタンをクリックしてワークスペースを作成する。サービスの利用を開始することが期待される。

## 通知種別

メール（マーケティングメール / オンボーディング）

## 送信仕様

### 基本情報

| 項目 | 内容 |
|-----|------|
| 送信方式 | 非同期 |
| 優先度 | 中 |
| リトライ | アプリケーション設定に依存 |

### 送信先決定ロジック

サインアップ完了後、メールアドレスが確認済みのユーザーに対して送信される。ユーザー名はアカウント情報から取得される。

## 通知テンプレート

### メール通知の場合

| 項目 | 内容 |
|-----|------|
| 送信元アドレス | noreply@giselles.ai（アプリケーション設定に依存） |
| 送信元名称 | Giselle |
| 件名 | Welcome to Giselle -- your AI workspace starts here |
| 形式 | HTML |

### 本文テンプレート

```
[Giselleロゴ]
Welcome to Giselle.
Your journey to build AI agents begins here.
---
Hi {ユーザー名},

Your account is ready, and you can now explore Giselle's Stage — your personal environment to test and run your AI agents instantly.

Select an agent, input parameters, and watch it perform. No setup required — just start testing.

Or express your ideas by creating your first workspace.

[The stage awaits ボタン]
[Create your workspace ボタン]

Need inspiration? Visit our examples gallery or contact us anytime at support@giselles.ai.

If you didn't sign up for Giselle, you can safely ignore this email.

—
The Giselle Team
https://giselles.ai
---
[フッター：Product / Blog / Documentation リンク、SNSアイコン、著作権表示]
```

### 添付ファイル

| ファイル名 | 形式 | 条件 | 説明 |
|----------|------|------|------|
| なし | - | - | 本通知には添付ファイルなし |

## テンプレート変数

| 変数名 | 説明 | データ取得元 | 必須 |
|--------|------|-------------|-----|
| userName | ユーザー名（デフォルト: "there"） | ユーザープロファイル | No |
| stageUrl | Stage画面のURL | アプリケーション設定 | No |
| createWorkspaceUrl | ワークスペース作成画面のURL | アプリケーション設定 | No |
| examplesGalleryUrl | エグザンプルギャラリーのURL | アプリケーション設定 | No |

## 送信トリガー・条件

### トリガー一覧

| トリガー種別 | トリガーイベント | 送信条件 | 説明 |
|------------|----------------|---------|------|
| イベント | サインアップ完了・メール確認完了 | マーケティングメール受信可 | 新規ユーザー登録完了時 |

### 送信抑止条件

| 条件 | 説明 |
|-----|------|
| マーケティングメール拒否 | ユーザーがマーケティングメールの受信を拒否している場合 |
| メールアドレス未確認 | メールアドレスの確認が完了していない場合 |

## 処理フロー

### 送信フロー

```mermaid
flowchart TD
    A[ユーザーがサインアップ完了] --> B[メールアドレス確認完了]
    B --> C{マーケティングメール受信可?}
    C -->|はい| D[ユーザー情報取得]
    C -->|いいえ| E[送信スキップ]
    D --> F[メールテンプレート展開]
    F --> G[メール送信実行]
    G --> H{送信結果}
    H -->|成功| I[送信ログ記録]
    H -->|失敗| J[エラーログ記録・リトライ]
    I --> K[終了]
    J --> K
    E --> K
```

## データベース参照・更新仕様

### 参照テーブル一覧

| テーブル名 | 用途 | 備考 |
|-----------|------|------|
| auth.users | ユーザー情報取得 | Supabase管理テーブル |
| user_profiles | ユーザー名取得 | アプリケーション管理テーブル |
| user_preferences | マーケティングメール設定確認 | アプリケーション管理テーブル |

### テーブル別参照項目詳細

#### auth.users

| 参照項目（カラム名） | 用途 | 取得条件 |
|-------------------|------|---------|
| email | 送信先メールアドレス | サインアップ完了ユーザー |
| email_confirmed_at | メール確認状態 | NOT NULL で確認済み |

#### user_profiles

| 参照項目（カラム名） | 用途 | 取得条件 |
|-------------------|------|---------|
| display_name | ユーザー名表示 | user_id で指定 |

### 更新テーブル一覧

| テーブル名 | 操作 | 概要 |
|-----------|------|------|
| email_logs | INSERT | 送信ログ記録 |

#### 送信ログテーブル

| 操作 | 項目（カラム名） | 更新値 | 備考 |
|-----|-----------------|-------|------|
| INSERT | type | welcome | メール種別 |
| INSERT | status | sent/failed | 送信結果 |
| INSERT | sent_at | CURRENT_TIMESTAMP | 送信日時 |

## エラー処理

### エラーケース一覧

| エラー種別 | 発生条件 | 対処方法 |
|----------|---------|---------|
| 送信失敗 | SMTPサーバー接続エラー | リトライ処理を実行 |
| テンプレートエラー | テンプレート変数の展開失敗 | エラーログに記録 |
| ユーザー情報不足 | プロファイル情報が取得できない | デフォルト値を使用 |

### リトライ仕様

| 項目 | 内容 |
|-----|------|
| リトライ回数 | アプリケーション設定に依存 |
| リトライ間隔 | アプリケーション設定に依存 |
| リトライ対象エラー | 一時的な送信エラー |

## 配信設定

### レート制限

| 項目 | 内容 |
|-----|------|
| 1分あたり上限 | アプリケーション設定に依存 |
| 1日あたり上限 | アプリケーション設定に依存 |

### 配信時間帯

制限なし（サインアップ完了後即時送信）

## セキュリティ考慮事項

- TLS暗号化によりメール送信時のデータ保護を実施
- マーケティングメールの配信停止オプションをフッターに含める（CAN-SPAM準拠）
- ユーザー名がない場合はデフォルト値「there」を使用し、個人情報漏洩リスクを軽減

## 備考

- 本通知はオンボーディングメールシリーズの第1通目（01-welcome）
- テンプレートはReact Emailを使用して実装されている
- 2つのCTAボタン（Stage / ワークスペース作成）を配置し、ユーザーの選択肢を提供

---

## コードリーディングガイド

本通知を理解するために参照すべきファイルと、推奨する読み解き順序を以下に示す。

### 推奨読解順序

#### Step 1: データ構造を理解する

メールテンプレートに渡されるPropsの構造を理解することで、通知に必要なデータを把握できる。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 1-1 | 01-welcome.tsx | `apps/studio.giselles.ai/emails/marketing/onboarding/01-welcome.tsx` | WelcomeEmailPropsインターフェース（28-33行目）でuserName、stageUrl、createWorkspaceUrl、examplesGalleryUrlプロパティを確認 |

**読解のコツ**: デフォルト値が設定されていることに注意。userNameのデフォルトは"there"、各URLのデフォルトは本番環境URLが設定されている。

#### Step 2: エントリーポイントを理解する

メールテンプレートコンポーネントの構造を理解する。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 2-1 | 01-welcome.tsx | `apps/studio.giselles.ai/emails/marketing/onboarding/01-welcome.tsx` | WelcomeEmailコンポーネント（35-109行目）の構造 |

**主要処理フロー**:
1. **35-40行目**: propsをデフォルト値付きで受け取る
2. **46行目**: Previewにウェルカムメッセージを設定
3. **49-52行目**: EmailHeaderに見出しとサブ見出しを設定
4. **57-69行目**: 本文テキスト（ユーザー名、Stage紹介、ワークスペース案内）
5. **71-76行目**: 2つのCTAボタン（Stage / ワークスペース作成）
6. **77-86行目**: サポート情報とエグザンプルギャラリーへのリンク

#### Step 3: 共通コンポーネントを理解する

メールの共通レイアウトとスタイルを理解する。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 3-1 | email-header.tsx | `apps/studio.giselles.ai/emails/components/email-header.tsx` | ヘッダーコンポーネント（見出し・サブ見出し表示） |
| 3-2 | email-footer.tsx | `apps/studio.giselles.ai/emails/components/email-footer.tsx` | フッターコンポーネント |
| 3-3 | email-styles.ts | `apps/studio.giselles.ai/emails/components/email-styles.ts` | buttonスタイル、textスタイル、linkスタイル |

**主要処理フロー**:
- **01-welcome.tsx 88-90行目**: 不正サインアップ時の案内（signatureTextスタイル）
- **01-welcome.tsx 92-99行目**: 署名セクション

### プログラム呼び出し階層図

```
WelcomeEmail (01-welcome.tsx)
    │
    ├─ EmailFonts (email-fonts.tsx)
    │      └─ フォント読み込み設定
    │
    ├─ EmailHeader (email-header.tsx)
    │      ├─ ロゴ表示
    │      ├─ 見出し: "Welcome to Giselle."
    │      └─ サブ見出し: "Your journey to build AI agents begins here."
    │
    ├─ 本文セクション
    │      ├─ 挨拶テキスト（ユーザー名含む）
    │      ├─ Stage紹介テキスト
    │      ├─ ワークスペース案内テキスト
    │      ├─ "The stage awaits"ボタン（buttonスタイル適用）
    │      ├─ "Create your workspace"ボタン（buttonスタイル適用）
    │      ├─ サポート情報（examples gallery、support@giselles.ai）
    │      ├─ 不正サインアップ時の案内
    │      └─ 署名セクション（signatureTextスタイル適用）
    │
    └─ EmailFooter (email-footer.tsx)
           └─ リンク、SNSアイコン、著作権表示
```

### データフロー図

```
[入力]                              [処理]                         [出力]

アプリケーションからの
userName + stageUrl ───▶ WelcomeEmail ───▶ HTMLメール
+ createWorkspaceUrl     コンポーネント      （新規ユーザー宛に
+ examplesGalleryUrl                          アプリ経由で送信）
```

### 関連ファイル一覧

| ファイル | パス | 種別 | 役割 |
|---------|------|------|------|
| 01-welcome.tsx | `apps/studio.giselles.ai/emails/marketing/onboarding/01-welcome.tsx` | ソース | ウェルカムメールテンプレート |
| email-header.tsx | `apps/studio.giselles.ai/emails/components/email-header.tsx` | ソース | メールヘッダーコンポーネント |
| email-footer.tsx | `apps/studio.giselles.ai/emails/components/email-footer.tsx` | ソース | メールフッターコンポーネント |
| email-fonts.tsx | `apps/studio.giselles.ai/emails/components/email-fonts.tsx` | ソース | フォント設定コンポーネント |
| email-styles.ts | `apps/studio.giselles.ai/emails/components/email-styles.ts` | ソース | 共通スタイル定義 |
