---
name: proto-04-design-gallery
description: |
  30種のデザインパターンからトップページデザインを選択する。PROTOTYPE.mdの画面仕様をもとに複数案を提案し、
  ユーザーが選択後 DESIGN_DECISION.md を出力。proto-05-html-builder はこのファイルを読み込んで実装する。
  パイプライン: proto-03-doc-review → **proto-04-design-gallery** → proto-05-html-builder。
  トリガー：「デザイン提案」「デザイン選択」「デザインパターン」「トップページ案」「proto-design-gallery」
---

# Proto Design Gallery

`prototype/PROTOTYPE.md` のトップ画面仕様と `prototype/reference/` のデザインパターンを元に、複数のトップページデザイン案を提案する。

## 目的

- 「AIっぽい無難なデザイン」を回避し、個性的なデザインを選択できるようにする
- ユーザーがデザインの方向性を視覚的に比較・選択できる
- 選択されたデザインパターンを `proto-05-html-builder` に引き継ぐ

## デザインパターン一覧（30パターン）

30パターンの詳細は [references/pattern_catalog.md](references/pattern_catalog.md) を参照。

## ワークフロー

### Step 1: コンテキスト収集

1. `prototype/PROTOTYPE.md` のトップ画面仕様（S01）を読み込む
2. `prototype/CHARACTERS.md` があればキャラクター情報を読み込む（任意。なければスキップ）
3. このスキルの `examples/` ディレクトリにあるプレビューHTMLを参照する
4. `prototype/reference/` にデザインガイドがあれば併せて読み込む

### Step 2: プレビューHTMLの提示

`examples/` 内の30パターンのプレビューHTMLをユーザーに提示する。
各プレビューはトップ画面（S01）の静的HTMLで、ブラウザで直接開いてデザインを確認できる。

**提示時のフォーマット:**

```
以下の30パターンからデザインを選んでください。
各HTMLファイルをブラウザで開くとプレビューを確認できます。

01. サイバーパンク  — ダーク / ネオングロー / グリッチ     [Font Awesome]
02. ウルトラポップ  — ライト / 蛍光色爆発 / コミック風    [Remix Icon]
03. ミニマリズム    — ライト / モノトーン / タイポ主導     [Phosphor thin]
04. 手触り          — 暖色 / クラフト紙 / 手書き風        [Tabler Icons]
05. 秩序            — ダーク / 黄金比 / 幾何学             [Material Symbols]
06. 超機能主義      — ライト / ターミナル風 / ブルータリスト [Bootstrap Icons]
07. アールデコ      — ダーク / エメラルド×金 / シンメトリー [Lucide]
08. エディトリアル  — ライト / 雑誌風 / 非対称レイアウト   [Material Design Icons]
09. レトロフューチャー — ダーク / Y2K / ガラスモーフィズム [Ionicons]
10. ラグジュアリー  — ダーク / シャンパンゴールド / 極細線  [Phosphor light]
11. 和モダン        — 和紙 / 朱色アクセント / 縦書き装飾   [Tabler Icons]
12. ヴェイパーウェーブ — ダーク / ピンク×シアン / グリッド [Ionicons]
13. カワイイ        — パステル / ピンク×水色 / 丸角       [Remix Icon]
14. ベントーグリッド — ライト / モジュラー / カード型配置   [Bootstrap Icons]
15. リキッドグラス   — ダーク / ガラスモーフィズム / 流体   [Phosphor]
16. ドーパミン       — 暖色 / オレンジメイン / ボールドタイポ [Lucide]
17. ターミナル       — ダーク(緑) / CRTスキャンライン / タイプライター [CSS文字]
18. 水墨            — 和紙 / 墨色 / 朱色アクセント / 書道風  [CSS文字]
19. スイスタイポ     — ライト / 赤×白×黒 / グリッドシステム [CSS文字]
20. レトロゲーム     — ダーク / ピクセルアート / ネオンカラー [CSS文字]
21. ブルータリスト   — ライト / 白黒 / 巨大タイポ / RAW     [CSS文字]
22. Vapor           — ダーク / 紫×ピンク×シアン / Windows95風 [CSS文字]
23. タブロイド       — ライト(紙) / 新聞風 / 黄×赤見出し    [CSS文字]
24. ファミコン       — ダーク / FC実機パレット / ピクセル   [CSS文字]
25. ゲームボーイ     — GB緑 / 4階調緑 / GB本体フレーム      [CSS文字]
26. セガ            — ダーク(青) / セガブルー / チェッカーフロア [CSS文字]
27. PlayStation     — ダーク / ○×△□シンボル / 浮遊パーティクル [CSS文字]
28. 四季            — 可変 / 春夏秋冬切替 / 季節装飾        [CSS文字]
29. 天気            — 可変 / 晴曇雨雪切替 / 天気アニメ      [CSS文字]
30. サイケ          — ダーク / 万華鏡グラデ / ネオン爆発   [CSS文字]
```

プレビューHTMLのパスは `examples/preview_XX_name.html` で、プロジェクトの `prototype/` にコピーして使用する。

### Step 3: ユーザー選択

ユーザーに以下を選んでもらう:
- 30パターンから1つを選択
- 複数のパターンを**ミックス**（例: 「03のレイアウト + 07のカラー」）
- または自由な**改善指示**でカスタマイズ

### Step 4: 決定の記録

選択されたデザインを `prototype/DESIGN_DECISION.md` として保存:

```markdown
# デザイン決定

## 選択パターン
[パターン名]

## コンセプト
[選択理由・方向性]

## カラースキーム
| 用途 | カラー |
|------|--------|
| 背景 | #XXXXXX |
| メインテキスト | #XXXXXX |
| アクセント | #XXXXXX |
| ... | ... |

## タイポグラフィ
- 見出し: [フォント名]
- 本文: [フォント名]

## キーアニメーション
- [アニメーション1の説明]
- [アニメーション2の説明]

## アイコンライブラリ
- ライブラリ: [選定したライブラリ名]
- CDN: [CDNリンク]
- 使い方: [クラス例]

## 実装ガイドライン
[proto-05-html-builderが参照すべきデザイン方針]

## 参照プレビュー
[examples/preview_XX_name.html]

## 参照パターン
[prototype/reference/パターン名.md]（あれば）
```

### Step 5: ステータス更新・次ステップ

1. `prototype/prototype_status.md` を更新（状態: デザイン決定）
2. `proto-05-html-builder` へ進む

## デザイン品質・アイコン

- デザイン品質ガイドライン: [references/design_quality_guidelines.md](references/design_quality_guidelines.md)
- アイコンライブラリカタログ: [references/icon_libraries.md](references/icon_libraries.md)

## 提案時の注意

- PROTOTYPE.mdの画面仕様（要素・アクション）は変更しない。**見た目の表現方法だけ**を変える
- キャラクターカラー（CHARACTERS.mdがあれば）との相性を考慮する
- プロトタイプであることを意識し、実装可能な範囲で提案する（1ファイルHTML）
- 30パターンの中から**明確に異なる方向性**のものを提案する（似た案を出さない）
- プレビューHTMLのCSSを参考にして、プロジェクト固有のコンテンツに合わせて調整する
- プレビューHTMLのコードを `proto-05-html-builder` に直接渡すことも可能（CSSをベースにフルHTML化）

### バグを生みにくいデザインにする

| ルール | 詳細 |
|--------|------|
| **非表示は `display:none` で行う** | `opacity:0` + `pointer-events:none` は「見えないが操作可能な要素」を生む。`display:none` を使えばDOMから完全に消える |
| **ボタンは「表示=操作可能」にする** | 段階的に表示するボタンは、表示タイミングまで `display:none` にする |
| **アニメーションはシンプルに** | フェードイン程度に留める。複雑なアニメーションチェーンはタイミングバグの原因 |
| **状態数を最小にする** | 画面の状態が増えるほどバグが増える。「表示/非表示」の2状態で済むデザインを優先する |

## 出力フォーマット

```markdown
## デザイン提案

### 案A: [パターン名] — [キャッチフレーズ]

**コンセプト**: [2-3行の説明]

**レイアウト**:
[ASCII図]

**カラースキーム**:
| 用途 | カラー | プレビュー |
|------|--------|----------|
| 背景 | #XXXXXX | ████ |

**タイポグラフィ**: [フォント指定]

**アイコンライブラリ**: [ライブラリ名 + CDNリンク + クラス例]

**キーアニメーション**: [演出説明]

**実装スニペット**:
[CSS/JSコード]

---

### 案B: ...
### 案C: ...
```

## 次のステップ

デザイン決定後、`proto-05-html-builder` を実行してindex.htmlを作成する。
`proto-05-html-builder` は `prototype/DESIGN_DECISION.md` を参照してデザインを適用する。