ponshu-room-lite/UI_UX_DECISION_GUIDE.md

# 新生ぽんるーむ - UI/UX決定ガイド

**対象**: プロダクトオーナー（posimai）
**目的**: シンプル・スタイリッシュ・今風なUIを作るための意思決定ガイド

---

## 🎨 今風なUI/UXとは？

### 2025年のモバイルアプリトレンド

#### ✅ 採用すべき要素

1. **ミニマリズム**
   - 余白をたっぷり取る
   - 要素を最小限に絞る
   - 色数を3-4色に抑える

2. **マテリアル3デザイン**
   - elevation: 0（フラット）
   - border: 1px程度の細いライン
   - 角丸: 8-12px程度

3. **タイポグラフィのメリハリ**
   - 見出し: 大きく（20-24px）
   - 本文: 適度（13-15px）
   - キャプション: 小さく（11-12px）
   - フォントは2種類まで

4. **自然なアニメーション**
   - 200-300msの短いアニメーション
   - easeInOut curve
   - Hero遷移

5. **ダークモード非対応でOK**
   - ライトモードのみでシンプルに
   - 日本酒の写真が映えるのはライトモード

#### ❌ 避けるべき要素

1. グラデーション多用
2. 派手なドロップシャドウ（elevation: 8以上）
3. 過度な装飾・パターン
4. 5色以上のカラーパレット
5. 遅いアニメーション（500ms以上）

---

## 📋 意思決定チェックリスト

あなたが決めるべき5つの要素を選択してください。

### 1. カラースキーム

**質問**: posimaiブルー (#376495) 以外のアクセントカラーは？

#### オプションA: 柔らかいパステル（推奨）
```dart
お気に入り: Color(0xFFE8B4B8)  // 淡いピンク
買いたい: Color(0xFFFEF3C7)    // 淡い黄色
```
**印象**: 優しい、女性受け良い、Instagram映え

#### オプションB: 渋い和風
```dart
お気に入り: Color(0xFFB38867)  // 茶色
買いたい: Color(0xFFDAA520)    // 金色
```
**印象**: 格調高い、男性受け良い、日本酒らしい

#### オプションC: モノクロ+posimaiブルーのみ
```dart
お気に入り: posimaiBlue
買いたい: Color(0xFF4A4A4A)    // グレー
```
**印象**: 究極にシンプル、プロフェッショナル

**あなたの選択**: [ A / B / C ]

---

### 2. カードデザイン

**質問**: リスト表示のカードレイアウトは？

#### オプションA: 縦型カード（推奨）
```
┌──────────┐
│          │
│  [画像]  │  ← 正方形
│          │
├──────────┤
│ 獺祭     │
│ ★★★★★ │
└──────────┘
```
**メリット**: Instagram的、写真が大きい、スクロールしやすい

#### オプションB: 横型カード
```
┌──────┬────────────┐
│      │ 獺祭       │
│[画像]│ 旭酒造     │
│      │ ★★★★★   │
└──────┴────────────┘
```
**メリット**: 情報が見やすい、1画面に多く表示

#### オプションC: グリッド表示（2列）
```
┌────┬────┐
│[画] │[画] │
│獺祭 │久保田│
└────┴────┘
```
**メリット**: コレクション感、Pinterest的

**あなたの選択**: [ A / B / C ]

---

### 3. アニメーション

**質問**: 画面遷移のアニメーションは？

#### オプションA: Hero + Fade（推奨）
```dart
Navigator.push(
  context,
  PageRouteBuilder(
    pageBuilder: (context, animation, secondaryAnimation) => DetailScreen(),
    transitionsBuilder: (context, animation, secondaryAnimation, child) {
      return FadeTransition(
        opacity: animation,
        child: child,
      );
    },
  ),
);
```
**印象**: 滑らか、高級感、Instagram的

#### オプションB: スライド
```dart
Navigator.push(
  context,
  CupertinoPageRoute(builder: (context) => DetailScreen()),
);
```
**印象**: iOS的、シンプル、速い

#### オプションC: なし
```dart
Navigator.push(
  context,
  MaterialPageRoute(builder: (context) => DetailScreen()),
);
```
**印象**: 最速、シンプル、パフォーマンス優先

**あなたの選択**: [ A / B / C ]

---

### 4. ボトムナビゲーション

**質問**: アイコンのスタイルは？

#### オプションA: Material Icons（推奨）
```dart
Icons.liquor           // 酒
Icons.map              // マップ
Icons.smart_toy        // AI
Icons.person           // マイページ
```
**印象**: シンプル、認識しやすい、Androidらしい

#### オプションB: Cupertino Icons
```dart
CupertinoIcons.sparkles   // 酒
CupertinoIcons.map        // マップ
CupertinoIcons.chat_bubble // AI
CupertinoIcons.person     // マイページ
```
**印象**: iOS的、おしゃれ、一貫性

#### オプションC: カスタムアイコン
```
🍶 徳利・おちょこ
🗺️ 地図
🤖 AIロボット
👤 人型
```
**印象**: 個性的、日本酒らしい、作成コスト高

**あなたの選択**: [ A / B / C ]

---

### 5. FloatingActionButton（カメラボタン）

**質問**: カメラボタンの動作は？

#### オプションA: タップでカメラ、長押しでギャラリー（推奨）
```dart
GestureDetector(
  onTap: () => launchCamera(),
  onLongPress: () => launchGallery(),
  child: FloatingActionButton(...),
)
```
**メリット**: 1ボタンでシンプル、上級者向け

#### オプションB: タップで選択ダイアログ表示
```dart
onPressed: () {
  showDialog(
    child: AlertDialog(
      title: Text('写真を選択'),
      actions: [
        TextButton(child: Text('カメラ'), onPressed: ...),
        TextButton(child: Text('ギャラリー'), onPressed: ...),
      ],
    ),
  );
}
```
**メリット**: 分かりやすい、初心者向け

#### オプションC: 2つのボタン（カメラ・ギャラリー）
```dart
Column(
  children: [
    FloatingActionButton(icon: Icons.camera, ...),
    SizedBox(height: 8),
    FloatingActionButton(icon: Icons.photo_library, ...),
  ],
)
```
**メリット**: 直感的、すぐ選べる

**あなたの選択**: [ A / B / C ]

---

## 📐 追加の細かい決定事項

### 6. 評価表示

**質問**: 星の評価表示は？

#### オプションA: 星アイコン（推奨）
```
★★★★★ 5.0
```

#### オプションB: 数値のみ
```
5.0 / 5.0
```

#### オプションC: プログレスバー
```
━━━━━ 100%
```

**あなたの選択**: [ A / B / C ]

---

### 7. 検索バー

**質問**: 検索バーのデザインは？

#### オプションA: 角丸ピル型（推奨）
```dart
TextField(
  decoration: InputDecoration(
    border: OutlineInputBorder(
      borderRadius: BorderRadius.circular(30),
      borderSide: BorderSide.none,
    ),
    filled: true,
    fillColor: Colors.grey[100],
  ),
)
```

#### オプションB: 角丸ボックス型
```dart
TextField(
  decoration: InputDecoration(
    border: OutlineInputBorder(
      borderRadius: BorderRadius.circular(8),
    ),
  ),
)
```

**あなたの選択**: [ A / B ]

---

### 8. 写真の表示比率

**質問**: カード内の写真の比率は？

#### オプションA: 正方形（1:1）（推奨）
```dart
AspectRatio(aspectRatio: 1)
```
**メリット**: Instagram的、統一感

#### オプションB: 4:3
```dart
AspectRatio(aspectRatio: 4/3)
```
**メリット**: 情報量が多い、カメラ標準

#### オプションC: 16:9
```dart
AspectRatio(aspectRatio: 16/9)
```
**メリット**: 横長、映画的

**あなたの選択**: [ A / B / C ]

---

### 9. タグ表示

**質問**: タグのデザインは？

#### オプションA: 角丸チップ（推奨）
```dart
Chip(
  label: Text('甘口'),
  backgroundColor: Colors.blue[50],
  shape: RoundedRectangleBorder(
    borderRadius: BorderRadius.circular(16),
  ),
)
```

#### オプションB: ボックス型
```dart
Container(
  padding: EdgeInsets.all(8),
  decoration: BoxDecoration(
    color: Colors.blue[50],
    borderRadius: BorderRadius.circular(4),
  ),
  child: Text('甘口'),
)
```

**あなたの選択**: [ A / B ]

---

### 10. ローディング表示

**質問**: AI解析中のローディングは？

#### オプションA: CircularProgressIndicator（推奨）
```dart
Center(
  child: CircularProgressIndicator(
    valueColor: AlwaysStoppedAnimation(posimaiBlue),
  ),
)
```

#### オプションB: LinearProgressIndicator
```dart
LinearProgressIndicator(
  valueColor: AlwaysStoppedAnimation(posimaiBlue),
)
```

#### オプションC: カスタムアニメーション
```
🍶 徳利がくるくる回る
```

**あなたの選択**: [ A / B / C ]

---

## 🎯 推奨設定（まとめ）

もし迷ったら、この設定で進めてください：

```yaml
カラースキーム: オプションA（柔らかいパステル）
カードデザイン: オプションA（縦型カード）
アニメーション: オプションA（Hero + Fade）
ボトムナビゲーション: オプションA（Material Icons）
FABの動作: オプションA（タップでカメラ、長押しでギャラリー）
評価表示: オプションA（星アイコン）
検索バー: オプションA（角丸ピル型）
写真比率: オプションA（正方形 1:1）
タグ表示: オプションA（角丸チップ）
ローディング: オプションA（CircularProgressIndicator）
```

**この設定の印象**: Instagram的、洗練、女性受け良、シンプル、今風

---

## 📱 参考アプリ

### 同じ方向性のアプリ

1. **Instagram** - 写真重視、ミニマル
2. **Pinterest** - グリッド表示、コレクション感
3. **Apple Music** - 角丸カード、余白たっぷり
4. **Spotify** - ダークモード、アルバムアート重視
5. **Google Keep** - シンプル、カラフルなタグ

### 避けるべき方向性

1. **古いSkeuomorphic** - リアルな質感
2. **ゴチャゴチャしたUI** - 情報過多
3. **派手なアニメーション** - ゲーム的

---

## ✅ 決定シート

以下をコピーして、あなたの選択を記入してください：

```
=== 新生ぽんるーむ UI/UX決定シート ===

1. カラースキーム: [ A / B / C ]
2. カードデザイン: [ A / B / C ]
3. アニメーション: [ A / B / C ]
4. ボトムナビゲーション: [ A / B / C ]
5. FABの動作: [ A / B / C ]
6. 評価表示: [ A / B / C ]
7. 検索バー: [ A / B ]
8. 写真比率: [ A / B / C ]
9. タグ表示: [ A / B ]
10. ローディング: [ A / B / C ]

その他の要望:


署名: posimai
日付: 2025-12-29
```

---

**このシートを埋めて、Antigravityに渡してください！**