#4 ビジュアルデザインシステム策定

🟧 ステータス: 未着手 対応Issue: #4 Issue内容を本ページにコピーした初期スタブ。設計確定後にこのページを正式版で置き換える。

---

🎯 概要

ビジュアルデザインシステムを DESIGN.md 形式で策定する。create-design スキルを用いて、ラノベ風部屋背景・X風タイムライン・ニコ動コメント・スロットリール演出・出る杭おじさんイラスト等を含む統一感のあるデザイントークンを定義する。

✅ ゴール / 完了条件

• [ ] create-design スキルで適切なテンプレートを選定（候補: Vaporwave / Cyberpunk / Anime Manga / Retro Vintage / Neobrutalism のミックス）
• [ ] DESIGN.md 9セクション完成
  • [ ] Brand & Identity
  • [ ] Color System（ダーク基調＋アクセント）
  • [ ] Typography（X風＋ゲームUI、日本語フォント）
  • [ ] Layout & Spacing
  • [ ] Components（ポストカード、いいねボタン、HUD、メーター類）
  • [ ] Iconography
  • [ ] Motion / Animation（リズム同期、カットイン）
  • [ ] Illustration Style（出る杭おじさん／ラノベ風部屋）
  • [ ] Sound Design（#15と連携）
• [ ] DESIGN.md をリポジトリルートに配置
• [ ] Stitch等で代表画面のビジュアルモック生成（任意）

📦 アウトプット

• DESIGN.md
• docs/design/visual/ 配下に主要画面のビジュアルモック（任意）

📋 タスク

• [ ] テンプレート選定（テイスト方向の決定）
• [ ] カラーパレット策定（ダーク基調 / X風タイムラインとの相性）
• [ ] タイポ選定（X風＋ゲームUI＋日本語可読性）
• [ ] コンポーネント設計
• [ ] ニコ動コメントの視認性ルール（炎上時に埋もれすぎない設計トリック）
• [ ] アニメーション原則（リズム同期、4段階カットイン）
• [ ] イラストレーションスタイル（出る杭おじさん／部屋）
• [ ] DESIGN.md化

🔗 依存・関連

• 親: #1
• 依存: #3
• 影響: #5, #13, #14, 全UI実装

📚 参考

• create-design スキル: /Users/takehiro/Documents/WorkSpace/otani/Skills/create-design/SKILL.md
• ラノベ風散らかったエンジニアの部屋（PCモニターの光、付箋、コーヒー、おじさんの影）
• リズム天国 / メイドインワリオの色彩・テンポ感
• CloverPit のスロットリール演出の派手さ