flutter-frontend-design

Flutter フロントエンドデザインスキル

このスキルでは、ありきたりな「AI 生成らしい」見た目を避け、個性が際立つ、実用レベルの Flutter インターフェースを作成する方法を説明します。美しさの細部や創造的な選択に細心の注意を払い、実際に動作する Flutter／Dart コードを実装してください。

ユーザーは、作成する画面、ウィジェット、コンポーネント、またはアプリ全体など、Flutter UI の要件を提示します。目的、対象ユーザー、ターゲットプラットフォーム、技術的な制約について、補足情報が含まれる場合もあります。

デザインを考える（コーディング前）

Dart コードを書く前に、背景を理解し、大胆な美的方向性を定めてください。

• 目的：このインターフェースはどのような課題を解決しますか？誰が使いますか？モバイルファーストですか？タブレット向けですか？Web 向けですか？
• トーン：明確な方向性を選びましょう。徹底したミニマリズム、マキシマリズムな混沌、レトロフューチャー、有機的／自然、ラグジュアリー／洗練、遊び心のあるおもちゃ風、エディトリアル／雑誌風、ブルータリズム／飾り気のない表現、アールデコ／幾何学的、ソフト／パステル、インダストリアル／実用主義、グラスモーフィズム、ニューモーフィズム、クレイモーフィズムなど。
• プラットフォーム：Material 3、Cupertino、カスタムデザインシステムのどれを使いますか？アダプティブ UI にしますか？
• 制約：状態管理（Riverpod、Bloc、Provider、GetX）、ナビゲーション（GoRouter、auto_route）、ターゲットプラットフォームを確認します。
• 差別化：記憶に残る要素は何ですか？見る人が覚えているポイントは何ですか？

重要：明確なコンセプトの方向性を選び、精密に実現してください。大胆なマキシマリズムも、洗練されたミニマリズムも有効です。重要なのは強さではなく、意図が明確であることです。

Flutter のアーキテクチャパターン

Flutter 固有のパターンに必ず従ってください。

ウィジェットの構造

lib/
├── main.dart
├── app.dart                    # MaterialApp / CupertinoApp config
├── core/
│   ├── theme/
│   │   ├── app_theme.dart      # ThemeData definitions
│   │   ├── app_colors.dart     # Color constants & extensions
│   │   ├── app_typography.dart # TextStyle definitions
│   │   └── app_spacing.dart    # Spacing constants
│   ├── constants/
│   └── utils/
├── features/
│   └── feature_name/
│       ├── presentation/
│       │   ├── screens/
│       │   ├── widgets/
│       │   └── controllers/
│       ├── domain/
│       └── data/
└── shared/
    └── widgets/                # Reusable custom widgets

状態管理

• シンプルなローカル状態には StatefulWidget を使用します
• 複雑な状態には Riverpod または Bloc を推奨します
• UI とビジネスロジックは必ず分離します
• 軽量なリアクティブパターンには ValueNotifier ／ ChangeNotifier を使用します

レスポンシブデザイン

// Always think responsive
LayoutBuilder(
  builder: (context, constraints) {
    if (constraints.maxWidth > 1200) return _desktopLayout();
    if (constraints.maxWidth > 600) return _tabletLayout();
    return _mobileLayout();
  },
)

Flutter の美的ガイドライン

タイポグラフィ

• 必ずカスタマイズし、デフォルトの Material フォント（Roboto）をそのまま使わないでください
• 個性のあるタイポグラフィには Google Fonts パッケージ（google_fonts）を使用します
• 大胆なディスプレイフォントと、洗練された本文フォントを組み合わせます
• 効果的な組み合わせの例：
  • ディスプレイ：Playfair Display ／ 本文：Source Sans Pro
  • ディスプレイ：Space Grotesk ／ 本文：DM Sans
  • ディスプレイ：Cormorant Garamond ／ 本文：Fira Sans
  • ディスプレイ：Sora ／ 本文：Inter（デザインに合う場合）
  • ディスプレイ：Clash Display ／ 本文：Satoshi
• TextTheme 拡張を使い、すべてのテキストスタイルを AppTypography クラス内に定義します

色とテーマ

• ColorScheme.fromSeed() またはカスタムの ColorScheme で色を定義します
• Material の標準を超えるカスタム色のプロパティには ThemeExtension<T> を使用します
• 最初からライトテーマとダークテーマの両方をサポートします
• CSS 変数に相当するもの → Dart 定数と Theme.of(context).extension<T>()
• 控えめで均等に配色したパレットより、主役となる色に鋭いアクセントを加えるほうが効果的です

// Example: Strong color system
class AppColors {
  // Primary palette
  static const primary = Color(0xFF1A1A2E);
  static const accent = Color(0xFFE94560);
  static const surface = Color(0xFF16213E);
  static const background = Color(0xFF0F3460);

  // Semantic colors
  static const success = Color(0xFF00C897);
  static const warning = Color(0xFFFFB800);
  static const error = Color(0xFFFF4757);

  // Gradients
  static const heroGradient = LinearGradient(
    colors: [Color(0xFF667eea), Color(0xFF764ba2)],
    begin: Alignment.topLeft,
    end: Alignment.bottomRight,
  );
}

モーションとアニメーション

Flutter はアニメーションに優れています。活用しましょう。

• 暗黙的アニメーション：AnimatedContainer、AnimatedOpacity、AnimatedScale、AnimatedSlide、AnimatedSwitcher
• ヒーローアニメーション：共有要素を使った画面遷移に使用します
• スタッガードアニメーション：AnimationController と Interval を使い、演出を組み立てます
• マイクロインタラクション：タップ時のフィードバックには GestureDetector と AnimatedScale を組み合わせます
• ページ遷移：SlideTransition、FadeTransition、ScaleTransition を使ったカスタム PageRouteBuilder
• Lottie：複雑なイラストや読み込み状態に使用します（lottie パッケージ）
• Rive：インタラクティブなベクターアニメーションに使用します（rive パッケージ）

// Staggered list animation example
class StaggeredListItem extends StatelessWidget {
  final int index;
  final Animation<double> animation;

  Widget build(BuildContext context) {
    return SlideTransition(
      position: Tween<Offset>(
        begin: const Offset(0, 0.3),
        end: Offset.zero,
      ).animate(CurvedAnimation(
        parent: animation,
        curve: Interval(
          index * 0.1,
          (index * 0.1) + 0.4,
          curve: Curves.easeOutCubic,
        ),
      )),
      child: FadeTransition(
        opacity: animation,
        child: child,
      ),
    );
  }
}

空間構成

• 臨場感のあるスクロールエフェクトには、FlexibleSpaceBar と SliverAppBar を使用します
• 複雑なレイアウトには、複数の Sliver ウィジェットを組み合わせた CustomScrollView を使用します
• 要素を重ねるには、Stack と Positioned を使用します
• 回転、傾斜、遠近感のエフェクトには Transform を使用します
• 長方形以外の形状には ClipPath ／ CustomClipper を使用します
• 独自の背景や装飾には CustomPaint ／ CustomPainter を使用します

背景と視覚的な詳細

• グラデーションテキストやマスク効果には ShaderMask を使用します
• グラスモーフィズムには ImageFilter.blur と BackdropFilter を使用します
• 幾何学模様、ノイズテクスチャ、装飾要素には CustomPainter を使用します
• グラデーション、シャドウ、境界線を含む複雑な BoxDecoration には DecoratedBox を使用します
• レイヤーによる奥行き効果には、BoxShadow のリストを含む Container を使用します
• 粒子オーバーレイやメッシュグラデーションには dart:ui のキャンバス操作を使用します

// Glassmorphism card
ClipRRect(
  borderRadius: BorderRadius.circular(20),
  child: BackdropFilter(
    filter: ImageFilter.blur(sigmaX: 15, sigmaY: 15),
    child: Container(
      decoration: BoxDecoration(
        color: Colors.white.withOpacity(0.1),
        borderRadius: BorderRadius.circular(20),
        border: Border.all(color: Colors.white.withOpacity(0.2)),
      ),
      child: content,
    ),
  ),
)

絶対にしてはいけないこと

• カスタマイズせずにデフォルトの Material テーマを絶対に使用しないでください
• スタイルをまったく設定せず、Scaffold + ListView + Card だけを絶対に使用しないでください
• Material のデフォルトカラー（紫／ティール）だけに絶対に頼らないでください
• ダークモードへの対応を絶対に無視しないでください
• アニメーションを絶対に省略しないでください。Flutter のアニメーションシステムは最大の強みです
• サイズを絶対にハードコードしないでください。MediaQuery、LayoutBuilder、Flexible、Expanded を使用してください
• ほかのあらゆる Flutter チュートリアルと同じように見える、ありきたりなプレースホルダーパターンを絶対に使用しないでください
• プラットフォームの慣習を絶対に無視しないでください（iOS ユーザーは Cupertino のパターンを期待します）

パッケージの推奨事項

用途	パッケージ	使用例
フォント	google_fonts	タイポグラフィ
アイコン	flutter_svg、hugeicons、phosphor_flutter	カスタムアイコンセット
アニメーション	flutter_animate、lottie、rive	複雑なアニメーション
グラフ	fl_chart、syncfusion_flutter_charts	データの可視化
エフェクト	shimmer、flutter_blurhash	読み込み時と画像のエフェクト
レイアウト	flutter_staggered_grid_view	石積み／スタッガードグリッド
ナビゲーション	go_router、auto_route	宣言的なルーティング
状態管理	flutter_riverpod、flutter_bloc	状態管理
画像	cached_network_image、extended_image	画像の読み込みとキャッシュ

提供形式

Flutter の UI を構築する際は、次の形式で提供してください。

1. 単一のウィジェット／画面：インポートを含む完全な .dart ファイルを提供します
2. 複数画面の機能：フォルダー構成とすべてのファイルを提供します
3. アプリ全体：pubspec.yaml と完全な lib/ 構成を提供します
4. 外部パッケージを使用する場合は、必ず pubspec.yaml の依存関係を含めてください
5. コードはコンパイルして実行できる必要があります。擬似コードや不完全なスニペットは使用しないでください
6. 一目でわからない設計上の判断については、コメントで説明を加えてください

品質チェックリスト

Flutter の UI コードを提供する前に、次の項目を確認してください。

• 独自の色とタイポグラフィを定義したカスタム ThemeData
• レスポンシブなレイアウト（最低限、モバイルとタブレットに対応）
• 意味のあるアニメーションまたはトランジションを少なくとも 2～3 個
• ダークモードへの対応、または明示的なダーク／ライトテーマ
• 適切なウィジェットの切り出し（巨大なビルドメソッドを使わない）
• パフォーマンスへの配慮（const コンストラクター、必要に応じた RepaintBoundary）
• アクセシビリティ（Semantics ウィジェット、十分なコントラスト比）
• 適切な場合はプラットフォームに適応する要素

Flutter は、120fps のアニメーションを実現するピクセル単位で精密なキャンバスを提供します。思い切って取り組んでください。独自のビジョンを徹底して追求することで何が本当に実現できるのか、見せてください。