# 画面設計書 6-ランディングページ

## 概要

本ドキュメントは、OpenCodeウェブサイトのランディングページ（トップページ）の設計仕様を定義する。

### 本画面の処理概要

ランディングページは、OpenCodeの製品紹介を行うウェブサイトのトップページである。製品の特徴説明、インストール方法、成長統計、FAQ、Zenサービスへの誘導など、訪問者に対して製品の価値を伝えるためのマーケティングコンテンツを提供する。

**業務上の目的・背景**：OpenCodeを知らない新規訪問者に対して、製品の価値を伝え、インストールや利用開始を促す役割を担う。また、既存ユーザーに対しては最新情報や追加機能（Zenサービス等）への導線を提供する。

**画面へのアクセス方法**：ウェブサイトのルートURL（https://opencode.ai/）にアクセスすることで表示される。

**主要な操作・処理内容**：
1. ヒーローセクション表示（キャッチコピー、インストールコマンド）
2. インストールコマンドのタブ切り替え（curl, npm, bun, brew, paru）
3. インストールコマンドのクリップボードコピー
4. 製品紹介動画の自動再生
5. 機能一覧の表示
6. 成長統計の表示（GitHub Stars、コントリビューター数、月間ユーザー数）
7. FAQ（よくある質問）のアコーディオン表示
8. Zenサービスへの誘導
9. メールニュースレター登録

**画面遷移**：
- 遷移元：検索エンジン、SNS、直接アクセス
- 遷移先：ダウンロードページ、ドキュメント、Zenページ、GitHub

**権限による表示制御**：特になし（公開ページ）

## 関連機能

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

## 画面種別

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

## URL/ルーティング

`/` - ウェブサイトルート

## 入出力項目

| 項目名 | 入力/出力 | 型 | 必須 | 説明 |
|--------|----------|------|------|------|
| メールアドレス | 入力 | string | - | ニュースレター登録用メールアドレス |

## 表示項目

| 項目名 | 型 | 説明 |
|--------|------|------|
| ヘッダー | コンポーネント | サイトナビゲーション |
| デスクトップアプリバナー | バナー | デスクトップ版のダウンロード案内 |
| ヒーローコピー | テキスト | メインキャッチコピー |
| インストールタブ | タブ | インストール方法の切り替え（curl/npm/bun/brew/paru） |
| コピーボタン | ボタン | コマンドをクリップボードにコピー |
| 紹介動画 | ビデオ | 製品紹介動画（自動再生・ループ） |
| 機能一覧 | リスト | 製品機能の説明（LSP、マルチセッション等） |
| 成長統計 | 統計 | GitHub Stars、コントリビューター数、月間ユーザー数 |
| プライバシーセクション | テキスト | プライバシーポリシーへの誘導 |
| FAQセクション | アコーディオン | よくある質問と回答 |
| Zen CTAセクション | CTA | Zenサービスへの誘導 |
| メール登録フォーム | フォーム | ニュースレター登録 |
| フッター | コンポーネント | サイトフッター |
| 法的表示 | コンポーネント | 利用規約等へのリンク |

## イベント仕様

### 1-インストールコマンドコピー

ユーザーがインストールコマンドをクリックした際の処理。

処理フロー：
1. `handleCopyClick(event)` が呼び出される
2. `navigator.clipboard.writeText(text)` でクリップボードにコピー
3. `button.setAttribute("data-copied", "")` でコピー完了状態を表示
4. 1500ms後に `button.removeAttribute("data-copied")` で元の状態に戻す

### 2-インストールタブ切り替え

ユーザーがインストール方法のタブを切り替える際の処理。

処理フロー：
1. Kobalte Tabsコンポーネントが選択状態を管理
2. 選択されたタブに対応するコマンドパネルが表示

### 3-FAQアコーディオン

ユーザーがFAQ項目をクリックした際の処理。

処理フロー：
1. `Faq` コンポーネントがクリックイベントを処理
2. アコーディオンの開閉状態が切り替わる

### 4-外部リンク遷移

各種外部リンクをクリックした際の処理。

処理フロー：
1. `<a>` タグのhref属性に従って遷移
2. `target="_blank"` の場合は新しいタブで開く

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

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

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

## メッセージ仕様

| メッセージID | 種別 | メッセージ内容 | 表示条件 |
|-------------|------|--------------|----------|
| home.title | タイトル | ページタイトル | 常時 |
| home.banner.badge | バッジ | デスクトップアプリバッジ | 常時 |
| home.banner.text | 情報 | デスクトップアプリ案内テキスト | 常時 |
| home.banner.downloadNow | リンク | 今すぐダウンロード | 常時 |
| home.hero.title | 見出し | メインキャッチコピー | 常時 |
| home.hero.subtitle.a | 説明 | サブタイトル（前半） | 常時 |
| home.hero.subtitle.b | 説明 | サブタイトル（後半） | 常時 |
| home.install.ariaLabel | ARIA | インストールタブのラベル | 常時 |
| home.what.title | 見出し | 機能説明セクションタイトル | 常時 |
| home.what.lsp.title | 見出し | LSP機能タイトル | 常時 |
| home.what.multiSession.title | 見出し | マルチセッション機能タイトル | 常時 |
| home.growth.title | 見出し | 成長統計セクションタイトル | 常時 |
| home.privacy.title | 見出し | プライバシーセクションタイトル | 常時 |
| common.faq | 見出し | FAQセクションタイトル | 常時 |
| home.faq.q1 - home.faq.q8 | 質問 | FAQ質問 | 常時 |
| home.faq.a1 - home.faq.a8 | 回答 | FAQ回答 | 常時 |
| home.zenCta.title | 見出し | Zen CTAタイトル | 常時 |
| home.zenCta.body | 説明 | Zen CTA説明 | 常時 |

## 例外処理

| 状況 | 処理内容 |
|------|---------|
| クリップボードAPIが利用不可 | コピー処理がサイレントに失敗（UIフィードバックなし） |
| GitHubデータ取得失敗 | リリース情報がデフォルト値で表示 |

## 備考

- インストールコマンドは5種類（curl, npm, bun, brew, paru）をタブで切り替え可能
- 紹介動画は自動再生・ループ・ミュート設定
- 成長統計は設定ファイル（config）から取得
- GitHubリリース情報は非同期で取得（createAsync）
- 多言語対応（i18n）に対応
- OGP画像は `/social-share.png` を使用

---

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

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

### 推奨読解順序

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

設定値とGitHubデータの構造を把握する。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 1-1 | config.ts | `packages/console/app/src/config.ts` | 設定値（github.starsFormatted, stats等） |
| 1-2 | github.ts | `packages/console/app/src/lib/github.ts` | GitHubデータ取得関数 |

**読解のコツ**: `config` オブジェクトには成長統計（GitHub Stars、コントリビューター数等）が含まれる。

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

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

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

**主要処理フロー**:
1. **31-34行目**: useI18n, useLanguage, createAsyncの取得
2. **36-46行目**: handleCopyClick関数 - コマンドコピー処理
3. **59-166行目**: ヒーローセクション（バナー、タイトル、インストールタブ）
4. **168-172行目**: 紹介動画セクション
5. **174-234行目**: 機能一覧セクション
6. **236-653行目**: 成長統計セクション（SVGグラフィック含む）
7. **655-667行目**: プライバシーセクション
8. **669-731行目**: FAQセクション
9. **733-830行目**: Zen CTAセクション
10. **832行目**: メール登録フォーム
11. **834行目**: フッター

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

画面で使用される共通コンポーネントを確認する。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 3-1 | header.tsx | `packages/console/app/src/component/header.tsx` | ヘッダーコンポーネント |
| 3-2 | footer.tsx | `packages/console/app/src/component/footer.tsx` | フッターコンポーネント |
| 3-3 | faq.tsx | `packages/console/app/src/component/faq.tsx` | FAQアコーディオンコンポーネント |
| 3-4 | email-signup.tsx | `packages/console/app/src/component/email-signup.tsx` | メール登録フォーム |
| 3-5 | legal.tsx | `packages/console/app/src/component/legal.tsx` | 法的表示コンポーネント |
| 3-6 | locale-links.tsx | `packages/console/app/src/component/locale-links.tsx` | 多言語リンク |

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

```
Home (index.tsx)
    │
    ├─ useI18n() ──────────────────> I18nContext
    │      └─ i18n.t() (翻訳)
    │
    ├─ useLanguage() ──────────────> LanguageContext
    │      └─ language.route() (多言語ルート生成)
    │
    ├─ createAsync(() => github()) ─> github.ts
    │      └─ release (GitHubリリース情報)
    │
    ├─ config ─────────────────────> config.ts
    │      ├─ github.starsFormatted
    │      └─ stats (contributors, commits, monthlyUsers)
    │
    ├─ Header ─────────────────────> header.tsx
    │
    ├─ Tabs (Kobalte) ─────────────> @kobalte/core
    │      └─ インストールタブ
    │
    ├─ Faq ────────────────────────> faq.tsx
    │      └─ FAQアコーディオン
    │
    ├─ EmailSignup ────────────────> email-signup.tsx
    │
    ├─ Footer ─────────────────────> footer.tsx
    │
    └─ Legal ──────────────────────> legal.tsx
```

### データフロー図

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

config設定               createMemo(release)             統計表示
(stats, github) ─────────▶ (GitHubデータ整形) ────────────▶ 成長統計セクション

コマンドクリック          handleCopyClick()               コピー完了表示
(ボタン) ───────────────▶ navigator.clipboard ──────────▶ data-copied属性

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

### 関連ファイル一覧

| ファイル | パス | 種別 | 役割 |
|---------|------|------|------|
| index.tsx | `packages/console/app/src/routes/index.tsx` | ソース | ランディングページコンポーネント（841行） |
| index.css | `packages/console/app/src/routes/index.css` | スタイル | ランディングページ専用スタイル |
| config.ts | `packages/console/app/src/config.ts` | ソース | 設定値 |
| github.ts | `packages/console/app/src/lib/github.ts` | ソース | GitHubデータ取得 |
| 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` | ソース | 多言語リンク |
| i18n.tsx | `packages/console/app/src/context/i18n.tsx` | ソース | 国際化コンテキスト |
| language.tsx | `packages/console/app/src/context/language.tsx` | ソース | 言語コンテキスト |
| icon.tsx | `packages/console/app/src/component/icon.tsx` | ソース | アイコンコンポーネント |
| opencode-min.mp4 | `packages/console/app/src/asset/lander/opencode-min.mp4` | アセット | 紹介動画 |
| opencode-poster.png | `packages/console/app/src/asset/lander/opencode-poster.png` | アセット | 動画ポスター画像 |
