# 画面設計書 20-利用規約

## 概要

本ドキュメントは、OpenCodeコンソールの利用規約ページの設計書である。OpenCodeサービスの利用規約（Terms of Service）を表示する法的文書ページである。

### 本画面の処理概要

利用規約ページは、OpenCodeサービスの利用条件を定義する法的文書を表示する静的ページである。サービスの定義、利用条件、支払い条件、知的財産権、責任制限、紛争解決手続き等について詳細に記載する。

**業務上の目的・背景**：Webサービスの提供には、利用者との間で明確な契約関係を結ぶ必要がある。本ページは、OpenCodeサービスの利用条件を法的に有効な形式で提示し、ユーザーがサービスを利用することで規約に同意したものとみなす仕組みを提供する。

**画面へのアクセス方法**：フッターのリンク、または`/legal/terms-of-service`パスに直接アクセス。認証不要で誰でもアクセス可能な公開ページ。

**主要な操作・処理内容**：
1. 利用規約文書の閲覧
2. 目次リンク（ページ内アンカー）によるセクションへのジャンプ
3. プライバシーポリシーページへのリンク
4. Zenサービスページへのリンク

**画面遷移**：プライバシーポリシーページ（/legal/privacy-policy）、Zenサービスページ（/zen）へのリンクあり。ヘッダーから他の公開ページへ遷移可能。

**権限による表示制御**：公開ページのため、権限による表示制御は存在しない。

## 関連機能

| 機能No | 機能名 | 関連種別 | 関連する操作・処理 |
|--------|--------|----------|------------------|
| 56 | 国際化 | 主機能 | 法的文書の多言語表示 |

## 画面種別

情報表示（静的コンテンツ）

## URL/ルーティング

| 環境 | URL |
|------|-----|
| 本番 | `https://opencode.ai/legal/terms-of-service` |
| 開発 | `http://localhost:3000/legal/terms-of-service` |

ルーティング定義: `packages/console/app/src/routes/legal/terms-of-service/index.tsx`

## 入出力項目

### 入力項目

本画面は静的コンテンツ表示のため、ユーザー入力項目は存在しない。

### 出力項目

| 項目名 | データ型 | 表示条件 | 備考 |
|--------|----------|----------|------|
| ページタイトル | string | 常時 | "OpenCode \| Terms of Service" |
| 発効日 | string | 常時 | "Effective date: Dec 16, 2025" |
| 利用規約本文 | HTML | 常時 | 静的HTMLコンテンツ |

## 表示項目

### ヘッダーセクション
- サイトロゴ
- ナビゲーションリンク

### コンテンツセクション（利用規約本文）

| セクション | 見出し（ID） | 内容概要 |
|-----------|-------------|---------|
| 導入部 | Terms of Use | 同意説明、連絡先 |
| サービス説明 | what-is-opencode | OpenCodeとは何か |
| 規約変更 | will-these-terms-ever-change | 規約変更について |
| プライバシー | what-about-my-privacy | プライバシーポリシーへの参照 |
| 利用条件 | what-are-the-basics | 基本的な利用条件 |
| 利用制限 | are-there-restrictions | 禁止事項 |
| 知的財産権 | who-owns-the-services-and-content | Our IP / Your IP |
| 第三者モデル | what-about-third-party-models | サードパーティモデルについて |
| サービス変更 | will-opencode-ever-change-the-services | サービス変更について |
| 料金 | do-the-services-cost-anything | 有料サービス、請求、支払い |
| 定期請求 | recurring-billing | 定期課金について |
| 解約 | what-if-i-want-to-stop | サービス停止について |
| 免責 | what-else-do-i-need-to-know | 保証免責、責任制限 |
| 責任制限 | limitation-of-liability | 損害賠償の制限 |
| 仲裁 | arbitration-agreement | 仲裁合意 |
| 集団訴訟放棄 | waiver-of-class | クラスアクション放棄 |

### フッターセクション
- サイトフッター
- 法的情報リンク

## イベント仕様

### 1-目次リンククリック

| 項目 | 内容 |
|------|------|
| トリガー | 目次内のアンカーリンククリック（#will-these-terms-ever-change等） |
| 処理 | ブラウザのアンカーリンク機能 |
| 結果 | 対応するセクションへスクロール |

### 2-プライバシーポリシーリンククリック

| 項目 | 内容 |
|------|------|
| トリガー | プライバシーポリシーへのリンククリック |
| 処理 | language.route("/legal/privacy-policy")でURL生成 |
| 結果 | プライバシーポリシーページへ遷移 |

### 3-Zenサービスリンククリック

| 項目 | 内容 |
|------|------|
| トリガー | Zenページへのリンククリック |
| 処理 | language.route("/zen")でURL生成 |
| 結果 | Zenサービスページへ遷移 |

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

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

本画面は静的コンテンツ表示のため、データベース操作は発生しない。

## メッセージ仕様

本画面のコンテンツは静的HTMLとして直接記述されており、i18n国際化システムは使用していない（将来的な多言語対応の余地あり）。

| 要素 | メッセージ種別 | 内容 |
|------|---------------|------|
| title | ページタイトル | "OpenCode \| Terms of Service" |
| description | メタ説明 | "OpenCode terms of service" |

## 例外処理

本画面は静的コンテンツ表示のため、例外処理は存在しない。

## 備考

- 発効日は2025年12月16日
- 法的文書のため、内容変更には法務確認が必要
- 現在のコンテンツは英語のみ（多言語対応は将来課題）
- LocaleLinksコンポーネントで言語別URLを設定
- ブランドページと共通のCSSを使用（brand/index.css）
- 独自のCSSも追加（index.css）
- 仲裁条項とクラスアクション放棄条項を含む（米国法的要件）
- Stripeの利用規約・プライバシーポリシーへの外部リンクあり

---

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

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

### 推奨読解順序

#### Step 1: 構造を理解する

本コンポーネントは静的HTMLコンテンツを表示するシンプルな構造。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 1-1 | index.tsx | `packages/console/app/src/routes/legal/terms-of-service/index.tsx` | コンポーネント全体構造（1-15行目で構造定義、以降HTMLコンテンツ） |

**読解のコツ**: 法的文書は静的HTMLとして直接記述されている。アンカーリンク（id属性）を使用してページ内ナビゲーションを実現。language.route()で動的リンクを生成。

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

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 2-1 | header.tsx | `packages/console/app/src/component/header.tsx` | ヘッダーナビゲーション |
| 2-2 | footer.tsx | `packages/console/app/src/component/footer.tsx` | フッター |
| 2-3 | legal.tsx | `packages/console/app/src/component/legal.tsx` | 法的情報コンポーネント |
| 2-4 | locale-links.tsx | `packages/console/app/src/component/locale-links.tsx` | 多言語リンク |

#### Step 3: スタイリングを理解する

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 3-1 | index.css | `packages/console/app/src/routes/legal/terms-of-service/index.css` | ページ固有スタイル |
| 3-2 | brand/index.css | `packages/console/app/src/routes/brand/index.css` | 共通ブランドスタイル |

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

```
TermsOfService (index.tsx)
    |
    +-- useLanguage() -> languageコンテキスト
    |
    +-- <Title> -> "OpenCode | Terms of Service"
    |
    +-- <LocaleLinks path="/legal/terms-of-service" />
    |
    +-- <Meta name="description" />
    |
    +-- <div data-component="container">
            |
            +-- <Header />
            |
            +-- <div data-component="content">
            |       |
            |       +-- <section data-component="brand-content">
            |               |
            |               +-- <article data-component="terms-of-service">
            |                       |
            |                       +-- <h1>Terms of Use</h1>
            |                       +-- <p class="effective-date">...</p>
            |                       +-- <h2 id="...">セクション見出し</h2>
            |                       +-- <a href={language.route("/legal/privacy-policy")}>
            |                       +-- <a href={language.route("/zen")}>
            |                       +-- (静的HTMLコンテンツ)
            |
            +-- <Footer />
            |
            +-- <Legal />
```

### データフロー図

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

(なし) ───────────────> 静的コンテンツ描画 ──────────> HTMLページ表示

言語コンテキスト ──────> useLanguage()
                              |
                              v
                        language.route() ─────────────> リンクURL生成
                              |
                              +──────> /legal/privacy-policy
                              +──────> /zen
                              +──────> /auth
```

### 関連ファイル一覧

| ファイル | パス | 種別 | 役割 |
|---------|------|------|------|
| index.tsx | `packages/console/app/src/routes/legal/terms-of-service/index.tsx` | ソース | メイン画面コンポーネント |
| index.css | `packages/console/app/src/routes/legal/terms-of-service/index.css` | スタイル | ページ固有スタイル |
| brand/index.css | `packages/console/app/src/routes/brand/index.css` | スタイル | 共通ブランドスタイル |
| header.tsx | `packages/console/app/src/component/header.tsx` | ソース | 共通ヘッダー |
| footer.tsx | `packages/console/app/src/component/footer.tsx` | ソース | 共通フッター |
| legal.tsx | `packages/console/app/src/component/legal.tsx` | ソース | 法的情報コンポーネント |
| locale-links.tsx | `packages/console/app/src/component/locale-links.tsx` | ソース | 多言語リンク |
| language.tsx | `packages/console/app/src/context/language.tsx` | ソース | 言語コンテキスト |
