# 画面設計書 8-Zen紹介ページ

## 概要

本ドキュメントは、OpenCodeウェブサイトのZenサービス紹介ページの設計仕様を定義する。

### 本画面の処理概要

Zen紹介ページは、OpenCodeのZenサービス（プロキシ型AIモデルアクセスサービス）を紹介するマーケティングページである。サービスの特徴、料金体系、プライバシーポリシー、ユーザーの声などを表示し、サービスへの登録を促す。

**業務上の目的・背景**：Zenは、複数のAIモデル（Claude、GPT-4、Gemini等）へのアクセスを統一的に提供するサービスである。ユーザーは個別のAPI契約をせずに、Zenを通じてさまざまなモデルを利用できる。このページは、Zenサービスの価値を伝え、新規ユーザーの獲得を目的とする。

**画面へのアクセス方法**：ランディングページのZenリンク、またはURL `/zen` に直接アクセス。

**主要な操作・処理内容**：
1. Zenサービスの概要表示
2. 対応モデル一覧の表示
3. 料金情報の表示
4. 比較動画の自動再生
5. 利用方法の説明
6. プライバシーポリシーへの誘導
7. ユーザーの声（テスティモニアル）の表示
8. FAQ（よくある質問）の表示
9. 認証ページへの誘導

**画面遷移**：
- 遷移元：ランディングページ、各種リンク
- 遷移先：認証ページ（/auth）、ドキュメントページ、ワークスペース（ログイン済みの場合）

**権限による表示制御**：ログイン済みの場合はワークスペースページにリダイレクト。

## 関連機能

| 機能No | 機能名 | 関連種別 | 関連する操作・処理 |
|--------|--------|----------|------------------|
| 56 | 国際化 | 主機能 | 多言語対応（i18n.t関数による翻訳） |

## 画面種別

公開ページ / マーケティング

## URL/ルーティング

`/zen` - Zen紹介ページ

## 入出力項目

| 項目名 | 入力/出力 | 型 | 必須 | 説明 |
|--------|----------|------|------|------|
| - | - | - | - | この画面では入力項目なし |

## 表示項目

| 項目名 | 型 | 説明 |
|--------|------|------|
| ヘッダー | コンポーネント | Zenブランディング用ヘッダー |
| Zenロゴ | 画像 | Zenサービスのロゴ（ライト/ダークモード対応） |
| ヒーローテキスト | テキスト | サービス紹介タイトル |
| モデルロゴ一覧 | アイコン群 | 対応AIモデルのロゴ |
| 開始ボタン | リンク | 認証ページへのリンク |
| 料金情報 | テキスト | 料金体系の説明 |
| 比較動画 | ビデオ | サービス比較動画（自動再生・ループ） |
| 問題提起セクション | セクション | 従来のAI利用における課題 |
| 利用方法セクション | セクション | Zenの使い方（3ステップ） |
| プライバシーセクション | セクション | プライバシーポリシーへの誘導 |
| テスティモニアルセクション | セクション | ユーザーの声 |
| FAQセクション | アコーディオン | よくある質問と回答 |
| メール登録フォーム | フォーム | ニュースレター登録 |
| フッター | コンポーネント | サイトフッター |

## イベント仕様

### 1-ログイン状態チェック

ページ読み込み時にログイン状態を確認する処理。

処理フロー：
1. サーバーサイドで `checkLoggedIn` クエリを実行
2. `getLastSeenWorkspaceID()` でワークスペースIDを取得
3. ログイン済み（ワークスペースIDあり）の場合、`/workspace/{id}` にリダイレクト
4. 未ログインの場合、ページを表示

### 2-認証ページ遷移

「開始する」ボタンをクリックした際の処理。

処理フロー：
1. `/auth` へのリンクをクリック
2. 認証ページに遷移

## データベース更新仕様

### 操作別データベース影響一覧

| 操作（イベント） | 対象テーブル | 操作種別 | 概要 |
|----------------|-------------|---------|------|
| - | - | - | この画面ではデータベース更新は行わない |

## メッセージ仕様

| メッセージID | 種別 | メッセージ内容 | 表示条件 |
|-------------|------|--------------|----------|
| zen.title | タイトル | ページタイトル | 常時 |
| zen.hero.title | 見出し | ヒーロータイトル | 常時 |
| zen.hero.body | 説明 | ヒーロー本文 | 常時 |
| zen.cta.start | ボタン | 開始ボタンテキスト | 常時 |
| zen.pricing.title | 見出し | 料金タイトル | 常時 |
| zen.pricing.fee | 情報 | 料金情報 | 常時 |
| zen.pricing.body | 説明 | 料金説明 | 常時 |
| zen.problem.title | 見出し | 問題提起タイトル | 常時 |
| zen.problem.body | 説明 | 問題提起本文 | 常時 |
| zen.problem.item1-3 | リスト | 課題リスト | 常時 |
| zen.how.title | 見出し | 利用方法タイトル | 常時 |
| zen.how.step1-3 | リスト | ステップ説明 | 常時 |
| zen.privacy.title | 見出し | プライバシータイトル | 常時 |
| zen.faq.q1-q8 | 質問 | FAQ質問 | 常時 |
| zen.faq.a1-a8 | 回答 | FAQ回答 | 常時 |

## 例外処理

| 状況 | 処理内容 |
|------|---------|
| ログイン状態取得失敗 | ページを通常表示（リダイレクトなし） |

## 備考

- ログイン済みユーザーはワークスペースページに自動リダイレクト
- 対応モデル：Claude (OpenAI)、Anthropic、Gemini、Grok、MiniMax、Kimi、Zai、DeepSeek
- 比較動画は自動再生・ループ・ミュート設定
- テスティモニアルは5件のユーザーの声を表示
- ヘッダーには `zen` と `hideGetStarted` のpropsを渡す
- OGP画像は `/social-share-zen.png` を使用

---

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

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

### 推奨読解順序

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

サーバーサイドのログインチェック処理を把握する。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 1-1 | index.tsx | `packages/console/app/src/routes/zen/index.tsx` | checkLoggedInクエリ（25-29行目） |
| 1-2 | common.ts | `packages/console/app/src/routes/workspace/common.ts` | getLastSeenWorkspaceID関数 |

**読解のコツ**: `"use server"` ディレクティブによりサーバーサイドで実行される。ワークスペースIDがあれば自動リダイレクト。

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

メインのHomeコンポーネントを確認する。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 2-1 | index.tsx | `packages/console/app/src/routes/zen/index.tsx` | Homeコンポーネント（31-337行目） |

**主要処理フロー**:
1. **32-34行目**: createAsync, useI18n, useLanguageの取得
2. **48-143行目**: ヒーローセクション（ロゴ、タイトル、モデルアイコン、CTA、料金）
3. **145-149行目**: 比較動画セクション
4. **151-168行目**: 問題提起セクション
5. **170-200行目**: 利用方法セクション
6. **202-213行目**: プライバシーセクション
7. **215-286行目**: テスティモニアルセクション
8. **288-326行目**: FAQセクション
9. **328行目**: メール登録フォーム

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

```
Home (index.tsx)
    │
    ├─ createAsync(() => checkLoggedIn()) ─> サーバークエリ
    │      └─ getLastSeenWorkspaceID()
    │             └─ redirect() (ログイン済み時)
    │
    ├─ useI18n() ──────────────────> I18nContext
    │      └─ i18n.t() (翻訳)
    │
    ├─ useLanguage() ──────────────> LanguageContext
    │      └─ language.route() (多言語ルート生成)
    │
    ├─ Header ─────────────────────> header.tsx
    │      └─ zen, hideGetStarted props
    │
    ├─ Faq ────────────────────────> faq.tsx
    │
    ├─ EmailSignup ────────────────> email-signup.tsx
    │
    ├─ Footer ─────────────────────> footer.tsx
    │
    └─ Legal ──────────────────────> legal.tsx
```

### データフロー図

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

ページ読み込み            checkLoggedIn()                 ページ表示/リダイレクト
(サーバー) ──────────────▶ getLastSeenWorkspaceID() ─────▶ ログイン状態に応じた表示

i18n翻訳キー              i18n.t()                        翻訳済みテキスト
(zen.*) ─────────────────▶ (翻訳処理) ───────────────────▶ 画面表示
```

### 関連ファイル一覧

| ファイル | パス | 種別 | 役割 |
|---------|------|------|------|
| index.tsx | `packages/console/app/src/routes/zen/index.tsx` | ソース | Zen紹介ページコンポーネント（338行） |
| index.css | `packages/console/app/src/routes/zen/index.css` | スタイル | Zen紹介ページ専用スタイル |
| common.ts | `packages/console/app/src/routes/workspace/common.ts` | ソース | ワークスペース共通処理 |
| header.tsx | `packages/console/app/src/component/header.tsx` | ソース | ヘッダーコンポーネント |
| footer.tsx | `packages/console/app/src/component/footer.tsx` | ソース | フッターコンポーネント |
| faq.tsx | `packages/console/app/src/component/faq.tsx` | ソース | FAQコンポーネント |
| email-signup.tsx | `packages/console/app/src/component/email-signup.tsx` | ソース | メール登録フォーム |
| legal.tsx | `packages/console/app/src/component/legal.tsx` | ソース | 法的表示 |
| locale-links.tsx | `packages/console/app/src/component/locale-links.tsx` | ソース | 多言語リンク |
| icon.tsx | `packages/console/app/src/component/icon.tsx` | ソース | アイコンコンポーネント（IconGemini, IconMiniMax, IconZai） |
| i18n.tsx | `packages/console/app/src/context/i18n.tsx` | ソース | 国際化コンテキスト |
| language.tsx | `packages/console/app/src/context/language.tsx` | ソース | 言語コンテキスト |
| zen-ornate-light.svg | `packages/console/app/src/asset/zen-ornate-light.svg` | アセット | Zenロゴ（ライトモード） |
| zen-ornate-dark.svg | `packages/console/app/src/asset/zen-ornate-dark.svg` | アセット | Zenロゴ（ダークモード） |
| opencode-comparison-min.mp4 | `packages/console/app/src/asset/lander/opencode-comparison-min.mp4` | アセット | 比較動画 |
| avatar-*.png | `packages/console/app/src/asset/lander/avatar-*.png` | アセット | テスティモニアル用アバター画像 |
