# 通知設計書 11-新機能リリース

## 概要

本ドキュメントは、Giselleプロダクトの新機能がリリースされた際にユーザーに送信される告知メールの設計仕様を定義する。

### 本通知の処理概要

この通知は、Giselleに新しい機能がリリースされた際に、ユーザーに対して新機能の内容と使い方を告知するマーケティングメールを送信する処理である。

**業務上の目的・背景**：プロダクトの継続的な改善と新機能追加をユーザーに周知することで、ユーザーエンゲージメントを高め、新機能の採用率を向上させることを目的としている。新機能のリリースは開発チームの成果物であり、ユーザーに価値を届けるためには適切な告知が不可欠である。また、ユーザーが新機能を認知し活用することで、プロダクトの価値を最大限に享受できるようになる。

**通知の送信タイミング**：プロダクトマネージャーまたはマーケティングチームが新機能リリースを決定し、メールキャンペーンをトリガーした際に送信される。通常はリリース日またはリリース直後に一括送信される。

**通知の受信者**：Giselleにサインアップ済みの全ユーザー、または特定のセグメント（アクティブユーザー、プレミアムユーザー等）に送信される。受信者リストはマーケティングプラットフォームで管理される。

**通知内容の概要**：新機能の名称、概要説明、主要な機能ポイント、使用開始へのCTA（Call To Action）リンクが含まれる。「Giselle Times」という新聞スタイルのデザインで、視覚的にインパクトのある告知となっている。

**期待されるアクション**：受信者がメール内のリンクをクリックしてGiselle Studioにアクセスし、新機能を試用・活用することが期待される。

## 通知種別

メール（マーケティングメール）

## 送信仕様

### 基本情報

| 項目 | 内容 |
|-----|------|
| 送信方式 | 非同期（バッチ送信） |
| 優先度 | 中 |
| リトライ | 有・3回 |

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

マーケティングプラットフォーム（想定：Resend、SendGrid等）で管理されるメーリングリストに基づき、対象ユーザーのメールアドレスに送信される。セグメンテーションはマーケティングツール側で制御される。

## 通知テンプレート

### メール通知の場合

| 項目 | 内容 |
|-----|------|
| 送信元アドレス | noreply@giselles.ai（想定） |
| 送信元名称 | Giselle |
| 件名 | New in Giselle: {featureName} |
| 形式 | HTML |

### 本文テンプレート

```
[Giselle Timesヘッダー画像]

©️2025 Giselle | NEW FEATURE RELEASE | {date}

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

Breaking: {featureName} Launches Today

A faster, simpler, more visual way to build AI agents.

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

[機能画像]

We're excited to announce the launch of {featureName}, a visual
interface that lets you design and orchestrate AI agents — no code
required.

Build your first workflow, connect models, and deploy instantly.

Here's what's new:
• {機能ポイント1}
• {機能ポイント2}
• {機能ポイント3}

Try it today → [Open in Giselle Studio]

—
The Giselle Team
https://giselles.ai

[フッター：Product / Blog / Documentation リンク]
[ソーシャルアイコン：GitHub, LinkedIn, Facebook, X, Instagram, YouTube]
© 2025 Giselle
```

### 添付ファイル

| ファイル名 | 形式 | 条件 | 説明 |
|----------|------|------|------|
| なし | - | - | 添付ファイルなし |

## テンプレート変数

| 変数名 | 説明 | データ取得元 | 必須 |
|--------|------|-------------|-----|
| userName | ユーザー名（未使用、デフォルト: "there"） | ユーザーDB | No |
| featureName | 新機能の名称 | キャンペーン設定 | Yes |
| date | リリース日 | キャンペーン設定または自動生成 | Yes |
| viewUpdateUrl | Giselle StudioへのリンクURL | 固定値またはキャンペーン設定 | Yes |

## 送信トリガー・条件

### トリガー一覧

| トリガー種別 | トリガーイベント | 送信条件 | 説明 |
|------------|----------------|---------|------|
| 手動操作 | マーケティングキャンペーン実行 | 対象ユーザーリストが存在すること | マーケティングチームがキャンペーンを開始 |
| スケジュール | 事前設定された日時 | キャンペーンがスケジュール済み | 新機能リリース日に合わせた送信 |

### 送信抑止条件

| 条件 | 説明 |
|-----|------|
| 配信停止済みユーザー | マーケティングメールの配信を停止しているユーザーには送信しない |
| 無効なメールアドレス | バウンス履歴のあるメールアドレスには送信しない |

## 処理フロー

### 送信フロー

```mermaid
flowchart TD
    A[マーケティングキャンペーン開始] --> B[対象ユーザーリスト取得]
    B --> C[配信停止ユーザー除外]
    C --> D[テンプレート変数セット]
    D --> E[Reactメールコンポーネントレンダリング]
    E --> F[メール送信サービスへ送信]
    F --> G{送信結果}
    G -->|成功| H[送信ログ記録]
    G -->|失敗| I[リトライキューへ追加]
    H --> J[終了]
    I --> K{リトライ上限?}
    K -->|No| F
    K -->|Yes| L[エラーログ記録]
    L --> J
```

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

### 参照テーブル一覧

| テーブル名 | 用途 | 備考 |
|-----------|------|------|
| users | ユーザー情報取得 | メールアドレス、名前等 |
| email_preferences | 配信設定確認 | マーケティングメール配信可否 |

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

#### users

| 参照項目（カラム名） | 用途 | 取得条件 |
|-------------------|------|---------|
| email | 送信先メールアドレス | アクティブユーザー |
| name | ユーザー名（オプション） | - |

### 更新テーブル一覧

| テーブル名 | 操作 | 概要 |
|-----------|------|------|
| email_send_logs | INSERT | 送信履歴の記録 |

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

| 操作 | 項目（カラム名） | 更新値 | 備考 |
|-----|-----------------|-------|------|
| INSERT | email_type | 'new_feature_release' | 通知種別 |
| INSERT | recipient_email | {送信先} | 受信者メール |
| INSERT | sent_at | CURRENT_TIMESTAMP | 送信日時 |
| INSERT | status | 'sent' / 'failed' | 送信結果 |

## エラー処理

### エラーケース一覧

| エラー種別 | 発生条件 | 対処方法 |
|----------|---------|---------|
| 送信失敗 | メールサーバー接続エラー | 指数バックオフでリトライ |
| テンプレートエラー | 必須変数の欠落 | エラーログ記録、管理者通知 |
| 宛先不正 | 無効なメールアドレス形式 | スキップしてログ記録 |

### リトライ仕様

| 項目 | 内容 |
|-----|------|
| リトライ回数 | 3回 |
| リトライ間隔 | 指数バックオフ（1分、5分、15分） |
| リトライ対象エラー | 一時的なサーバーエラー（5xx）、タイムアウト |

## 配信設定

### レート制限

| 項目 | 内容 |
|-----|------|
| 1分あたり上限 | メールサービスプロバイダーの制限に準拠 |
| 1日あたり上限 | キャンペーン設定による |

### 配信時間帯

マーケティングキャンペーンの設定に基づく。通常、ユーザーのタイムゾーンを考慮した最適な時間帯に送信される。

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

- メール本文に個人情報（パスワード等）を含めない
- 配信停止リンクをフッターに含める（CAN-SPAM法準拠）
- メール送信はTLS暗号化された接続を使用
- ユーザー名は表示しない設計（プライバシー保護）

## 備考

- React Emailライブラリを使用してテンプレートをコンポーネント化
- 「Giselle Times」新聞スタイルのデザインで視覚的なインパクトを重視
- PreviewProps機能でメールプレビューが可能

---

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

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

### 推奨読解順序

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

まず、メールテンプレートに渡されるプロパティ（Props）の構造を理解することが重要。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 1-1 | new-feature-release.tsx | `apps/studio.giselles.ai/emails/marketing/product-updates/new-feature-release.tsx` | 31-36行目：`NewFeatureReleaseEmailProps`インターフェースで必要なプロパティを確認 |

**読解のコツ**: TypeScriptのインターフェース定義で、オプショナルプロパティ（`?`付き）とデフォルト値の関係を理解する。

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

処理の起点となるReactコンポーネントを特定。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 2-1 | new-feature-release.tsx | `apps/studio.giselles.ai/emails/marketing/product-updates/new-feature-release.tsx` | 38-148行目：`NewFeatureReleaseEmail`コンポーネントの全体構造を理解 |

**主要処理フロー**:
1. **38-47行目**: Props受け取りとデフォルト値設定
2. **48-49行目**: 画像アセットURLの取得
3. **50-147行目**: JSXによるメール本文のレンダリング

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

メールの共通部品（ヘッダー、フッター）の構造を理解。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 3-1 | email-header.tsx | `apps/studio.giselles.ai/emails/components/email-header.tsx` | EmailHeaderコンポーネントの構造（ロゴ、見出し） |
| 3-2 | email-footer.tsx | `apps/studio.giselles.ai/emails/components/email-footer.tsx` | EmailFooterコンポーネント（フッターリンク、ソーシャルアイコン） |
| 3-3 | index.ts | `apps/studio.giselles.ai/emails/components/index.ts` | 共通スタイルとユーティリティのエクスポート |

**主要処理フロー**:
- **email-header.tsx 10-18行目**: ロゴとオプションの見出し表示
- **email-footer.tsx 5-122行目**: フッター全体のレンダリング（リンク、SNSアイコン、著作権表示）

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

```
NewFeatureReleaseEmail (メインコンポーネント)
    │
    ├─ getEmailAssetUrl() ─── 画像URL生成
    │
    ├─ EmailHeader ─── ヘッダー部品
    │      └─ getEmailAssetUrl() ─── ロゴ画像URL
    │
    ├─ Section/Row/Column ─── レイアウト構成
    │
    └─ EmailFooter ─── フッター部品
           └─ getEmailAssetUrl() ─── SNSアイコン画像URL
```

### データフロー図

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

キャンペーン設定  ───▶  NewFeatureReleaseEmail    ───▶  HTMLメール
├── featureName              コンポーネント                    │
├── date                           │                          │
└── viewUpdateUrl                  │                          │
                                   ▼                          │
                      React Email レンダリング ───────────────┘
```

### 関連ファイル一覧

| ファイル | パス | 種別 | 役割 |
|---------|------|------|------|
| new-feature-release.tsx | `apps/studio.giselles.ai/emails/marketing/product-updates/new-feature-release.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` | ソース | 共通フッターコンポーネント |
| index.ts | `apps/studio.giselles.ai/emails/components/index.ts` | ソース | 共通コンポーネント・スタイルのエクスポート |
| giselletimes.png | `（アセットディレクトリ）` | 画像 | Giselle Timesヘッダーバナー |
| new-feature-release-sample.jpg | `（アセットディレクトリ）` | 画像 | 機能紹介画像 |
