flutter-ui-ux

Flutter UI/UX 開発

モダンなデザインパターンとベストプラクティスを活用して、美しく、レスポンシブで、アニメーションを取り入れた Flutter アプリケーションを作成します。

中核となる理念

「モバイルファースト、アニメーションを活用し、アクセシブルなデザイン」 — 次の点を重視します。

優先度	領域	目的
1	ウィジェットの構成	再利用可能で保守しやすい UI コンポーネント
2	レスポンシブデザイン	あらゆる画面サイズに適応するレイアウト
3	アニメーション	滑らかで意図的なトランジションとマイクロインタラクション
4	カスタムテーマ	一貫性のあるブランドの視覚的アイデンティティ
5	パフォーマンス	60fps のレンダリングと最適なリソース使用

開発ワークフロー

各フェーズを順番に実行します。次に進む前に、それぞれを完了してください。

フェーズ 1：要件の分析

1. アプリの構造を把握する - 既存のウィジェット、画面、ナビゲーションを特定します
2. デザインシステムを確認する - 既存のテーマ、色、タイポグラフィを確認します
3. プラットフォームを考慮する - iOS／Android 固有の要件を記録します
4. パフォーマンスの制約を確認する - アニメーションの複雑さとレンダリング要件を特定します

出力：コンポーネントの内訳を含む UI 要件分析。

フェーズ 2：ウィジェットアーキテクチャの設計

1. ウィジェット階層を計画する - 構成ツリーを設計します
2. 状態管理の方針を決める - StatefulWidget と StatelessWidget のどちらを使うか選択します
3. カスタムウィジェットを特定する - 再利用可能なコンポーネントを計画します
4. テーマとの統合 - カラースキームとタイポグラフィを定義します

出力：ウィジェットアーキテクチャ図とコンポーネント仕様。

フェーズ 3：コア UI の実装

1. 基本ウィジェットを作成する - 基盤となるコンポーネントを構築します
2. レスポンシブレイアウトを実装する - MediaQuery、LayoutBuilder、Flex／Expanded を使用します
3. カスタムテーマを追加する - ThemeData、ColorScheme、TextThemes を使用します
4. ナビゲーションを統合する - ルーティングとトランジションを実装します

ウィジェット構成パターン：

// ✅ DO: Compose small, reusable widgets
class CustomCard extends StatelessWidget {
  final Widget child;
  final EdgeInsets padding;

  const CustomCard({required this.child, this.padding = EdgeInsets.all(16)});

  @override
  Widget build(BuildContext context) {
    return Card(
      elevation: 4,
      child: Padding(padding: padding, child: child),
    );
  }
}

// ✅ DO: Use const constructors where possible
const Icon(Icons.add) // Better than Icon(Icons.add)

フェーズ 4：アニメーションの追加

1. 暗黙的なアニメーション - AnimatedContainer、AnimatedOpacity
2. 明示的なアニメーション - Tween を使用した AnimationController
3. Hero アニメーション - Hero ウィジェットを使った画面遷移
4. マイクロインタラクション - ボタンの押下、ホバー効果、読み込み状態

アニメーションのパフォーマンス規則：

// ✅ DO: Use performance-optimized animations
AnimatedBuilder(
  animation: controller,
  builder: (context, child) => Transform.rotate(
    angle: controller.value * 2 * math.pi,
    child: child, // Pass child to avoid rebuilding
  ),
  child: const Icon(Icons.refresh),
)

// ❌ DON'T: Animate expensive operations
// Avoid animating complex layouts or heavy widgets

フェーズ 5：最適化とテスト

1. パフォーマンスのプロファイリング - Flutter DevTools を使用します
2. アクセシビリティのテスト - スクリーンリーダー、コントラスト比
3. レスポンシブ動作のテスト - 複数の画面サイズと向き
4. アニメーションの滑らかさ - 60fps を検証します

クイックリファレンス

レスポンシブデザインパターン

手法	使用例	実装
LayoutBuilder	レスポンシブレイアウト	LayoutBuilder(builder: (context, constraints) => ...)
MediaQuery	画面情報	MediaQuery.of(context).size.width
Flexible/Expanded	Flex レイアウト	Flexible(child: ...) または Expanded(child: ...)
AspectRatio	固定比率	AspectRatio(aspectRatio: 16/9, child: ...)

アニメーションの種類

種類	ウィジェット	期間	使用例
フェード	AnimatedOpacity	200-300ms	コンテンツの表示／非表示
スライド	SlideTransition	250-350ms	画面遷移
スケール	AnimatedScale	150-250ms	ボタンの押下
回転	RotationTransition	1000-2000ms	読み込みインジケーター

カスタムウィジェットの例

テーマ付きボタン：

class ThemedButton extends StatelessWidget {
  final String text;
  final VoidCallback onPressed;

  const ThemedButton({required this.text, required this.onPressed});

  @override
  Widget build(BuildContext context) {
    return ElevatedButton(
      onPressed: onPressed,
      style: ElevatedButton.styleFrom(
        backgroundColor: Theme.of(context).colorScheme.primary,
        foregroundColor: Theme.of(context).colorScheme.onPrimary,
        padding: const EdgeInsets.symmetric(horizontal: 24, vertical: 12),
        shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(8)),
      ),
      child: Text(text),
    );
  }
}

レスポンシブカード：

class ResponsiveCard extends StatelessWidget {
  final Widget child;

  const ResponsiveCard({required this.child});

  @override
  Widget build(BuildContext context) {
    return LayoutBuilder(
      builder: (context, constraints) {
        if (constraints.maxWidth > 600) {
          return _buildWideLayout(child);
        } else {
          return _buildNarrowLayout(child);
        }
      },
    );
  }

  Widget _buildWideLayout(Widget child) {
    return Card(
      margin: const EdgeInsets.all(16),
      child: Padding(padding: const EdgeInsets.all(24), child: child),
    );
  }

  Widget _buildNarrowLayout(Widget child) {
    return Card(
      margin: const EdgeInsets.all(8),
      child: Padding(padding: const EdgeInsets.all(16), child: child),
    );
  }
}

リソース

• ウィジェットパターン：references/widget-patterns.md を参照してください
• アニメーションの例：references/animation-patterns.md を参照してください
• テーマテンプレート：references/theme-templates.md を参照してください
• パフォーマンスガイド：references/performance-optimization.md を参照してください

技術スタック

• コアウィジェット：StatelessWidget、StatefulWidget、InheritedWidget
• レイアウト：Row、Column、Stack、GridView、ListView
• アニメーション：AnimationController、Tween、AnimatedWidget
• テーマ：ThemeData、ColorScheme、TextTheme
• ナビゲーション：Navigator、MaterialPageRoute、Hero

アクセシビリティ（必須）

常に次を実装してください。

// Semantic labels for screen readers
Semantics(
  label: 'Add item to cart',
  button: true,
  child: IconButton(icon: Icon(Icons.add_cart), onPressed: () {}),
)

// High contrast support
Theme.of(context).colorScheme.contrast() == Brightness.dark

// Font scaling
MediaQuery.of(context).accessibleNavigation

パフォーマンスのガイドライン

• 可能な場合はconstウィジェットを使用します
• 長いリストにはListView.builderを優先します
• constキーを使用して不要な再ビルドを避けます
• 複雑なアニメーションにはRepaintBoundaryを使用します
• Flutter DevToolsで定期的にプロファイリングします

---

このFlutter UI/UXスキルにより、モバイルアプリ開発が体系的なプロセスへと変わり、優れたユーザー体験を備えた、美しく、応答性に優れ、パフォーマンスの高いアプリケーションを実現できます。