mai
/
ponshu-room-lite
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases 1 Wiki Activity
ponshu-room-lite/UI_UX_DECISION_GUIDE.md

10 KiB
Raw Blame History

新生ぽんるーむ - 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: 柔らかいパステル（推奨）

お気に入り: Color(0xFFE8B4B8)  // 淡いピンク
買いたい: Color(0xFFFEF3C7)    // 淡い黄色

印象: 優しい、女性受け良い、Instagram映え

オプションB: 渋い和風

お気に入り: Color(0xFFB38867)  // 茶色
買いたい: Color(0xFFDAA520)    // 金色

印象: 格調高い、男性受け良い、日本酒らしい

オプションC: モノクロ+posimaiブルーのみ

お気に入り: posimaiBlue
買いたい: Color(0xFF4A4A4A)    // グレー

印象: 究極にシンプル、プロフェッショナル

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

2. カードデザイン

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

オプションA: 縦型カード（推奨）

┌──────────┐
│          │
│  [画像]  │  ← 正方形
│          │
├──────────┤
│ 獺祭     │
│ ★★★★★ │
└──────────┘

メリット: Instagram的、写真が大きい、スクロールしやすい

オプションB: 横型カード

┌──────┬────────────┐
│      │ 獺祭       │
│[画像]│ 旭酒造     │
│      │ ★★★★★   │
└──────┴────────────┘

メリット: 情報が見やすい、1画面に多く表示

オプションC: グリッド表示（2列）

┌────┬────┐
│[画] │[画] │
│獺祭 │久保田│
└────┴────┘

メリット: コレクション感、Pinterest的

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

3. アニメーション

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

オプションA: Hero + Fade（推奨）

Navigator.push(
  context,
  PageRouteBuilder(
    pageBuilder: (context, animation, secondaryAnimation) => DetailScreen(),
    transitionsBuilder: (context, animation, secondaryAnimation, child) {
      return FadeTransition(
        opacity: animation,
        child: child,
      );
    },
  ),
);

印象: 滑らか、高級感、Instagram的

オプションB: スライド

Navigator.push(
  context,
  CupertinoPageRoute(builder: (context) => DetailScreen()),
);

印象: iOS的、シンプル、速い

オプションC: なし

Navigator.push(
  context,
  MaterialPageRoute(builder: (context) => DetailScreen()),
);

印象: 最速、シンプル、パフォーマンス優先

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

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

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

オプションA: Material Icons（推奨）

Icons.liquor           // 酒
Icons.map              // マップ
Icons.smart_toy        // AI
Icons.person           // マイページ

印象: シンプル、認識しやすい、Androidらしい

オプションB: Cupertino Icons

CupertinoIcons.sparkles   // 酒
CupertinoIcons.map        // マップ
CupertinoIcons.chat_bubble // AI
CupertinoIcons.person     // マイページ

印象: iOS的、おしゃれ、一貫性

オプションC: カスタムアイコン

🍶 徳利・おちょこ
🗺️ 地図
🤖 AIロボット
👤 人型

印象: 個性的、日本酒らしい、作成コスト高

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

5. FloatingActionButton（カメラボタン）

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

オプションA: タップでカメラ、長押しでギャラリー（推奨）

GestureDetector(
  onTap: () => launchCamera(),
  onLongPress: () => launchGallery(),
  child: FloatingActionButton(...),
)

メリット: 1ボタンでシンプル、上級者向け

オプションB: タップで選択ダイアログ表示

onPressed: () {
  showDialog(
    child: AlertDialog(
      title: Text('写真を選択'),
      actions: [
        TextButton(child: Text('カメラ'), onPressed: ...),
        TextButton(child: Text('ギャラリー'), onPressed: ...),
      ],
    ),
  );
}

メリット: 分かりやすい、初心者向け

オプションC: 2つのボタン（カメラ・ギャラリー）

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: 角丸ピル型（推奨）

TextField(
  decoration: InputDecoration(
    border: OutlineInputBorder(
      borderRadius: BorderRadius.circular(30),
      borderSide: BorderSide.none,
    ),
    filled: true,
    fillColor: Colors.grey[100],
  ),
)

オプションB: 角丸ボックス型

TextField(
  decoration: InputDecoration(
    border: OutlineInputBorder(
      borderRadius: BorderRadius.circular(8),
    ),
  ),
)

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

8. 写真の表示比率

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

オプションA: 正方形（1:1）（推奨）

AspectRatio(aspectRatio: 1)

メリット: Instagram的、統一感

オプションB: 4:3

AspectRatio(aspectRatio: 4/3)

メリット: 情報量が多い、カメラ標準

オプションC: 16:9

AspectRatio(aspectRatio: 16/9)

メリット: 横長、映画的

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

9. タグ表示

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

オプションA: 角丸チップ（推奨）

Chip(
  label: Text('甘口'),
  backgroundColor: Colors.blue[50],
  shape: RoundedRectangleBorder(
    borderRadius: BorderRadius.circular(16),
  ),
)

オプションB: ボックス型

Container(
  padding: EdgeInsets.all(8),
  decoration: BoxDecoration(
    color: Colors.blue[50],
    borderRadius: BorderRadius.circular(4),
  ),
  child: Text('甘口'),
)

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

10. ローディング表示

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

オプションA: CircularProgressIndicator（推奨）

Center(
  child: CircularProgressIndicator(
    valueColor: AlwaysStoppedAnimation(posimaiBlue),
  ),
)

オプションB: LinearProgressIndicator

LinearProgressIndicator(
  valueColor: AlwaysStoppedAnimation(posimaiBlue),
)

オプションC: カスタムアニメーション

🍶 徳利がくるくる回る

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

🎯 推奨設定（まとめ）

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

カラースキーム: オプション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に渡してください！