material3-expressive-flutter

Material 3 Expressive Flutter

このスキルでは、Flutter で Material 3 Expressive デザインシステムを実装するための包括的なパターン、スクリプト、ルールを提供します。物理ベースのモーション、有機的な形状、エンゲージメントを高めるコンポーネントに重点を置いています。

仕組み

1. 要件分析：M3E について質問すると、エージェントがコンテキスト（コンポーネントの種類、状態、重要度）を分析します。
2. ルールの適用：rules/ のルール（モーション物理、形状のモーフィング）を適用して、デザイン要件への準拠を確保します。
3. コード生成：scripts/component_template.dart をベースとして、上質で、アクセシブルかつ高パフォーマンスなコンポーネントを生成します。
4. 検証：「空間スプリングとエフェクトスプリング」や「形状のコントラスト」などの M3E 原則に照らして、出力を監査します。

使用する場面

• 新機能の開発：ユーザーエンゲージメントを高めるコンポーネント（プロモーション、オンボーディング、主要なアクション）を作成するとき。
• デザインのモダナイズ：標準的な M3 アプリを、より滑らかで表現力豊かなスタイルに更新するとき。
• 表現力豊かなモーション：自然な感覚を実現するため、スプリングベースのアニメーションを実装するとき。
• カスタム形状：形状がモーフィングするコンテナや、標準とは異なる角丸形状を実装するとき。

使用方法

1. 新しいコンポーネントのひな型を作成する

テンプレートを使って、堅牢で状態を考慮したウィジェットを作成します。

# Path to script
flutter run scripts/component_template.dart

2. 実装方法

トリガーフレーズ：

• 「M3 Expressive スタイルで [component] を実装する」
• 「このトランジションに表現力豊かなモーションを追加する」
• 「この標準的な M3 ボタンをモダナイズする」
• 「M3 Expressive の原則に照らして UI を監査する」

例

空間スプリングモーション（例）

// Use for movement and position
Curves.elasticOut; // Strong, tactile response
Cubic(0.34, 1.56, 0.64, 1); // Expressive overshoot

形状がモーフィングするコンテナ

AnimatedContainer(
  duration: const Duration(milliseconds: 500),
  curve: Curves.elasticOut,
  decoration: ShapeDecoration(
    shape: M3ExpressiveShape.teardrop, // Custom token
    color: theme.colorScheme.primaryContainer,
  ),
);

リファレンスガイド

• モーションガイド - 空間スプリングとエフェクトスプリング。
• 形状システム - スクワークル、ティアドロップ、モーフィング。
• タイポグラフィガイド - エディトリアルな階層。
• コンポーネントライブラリ - すべての M3E コンポーネントのパターン。

ルールと標準

1. 時間より物理：固定時間ではなく、スプリング（空間／エフェクト）を使用します。
2. 全面的な丸み：ボタンと主要なインジケーターには StadiumBorder() を使用します。
3. 意味のあるフィードバック：表現力豊かなアクションには必ず HapticFeedback.lightImpact() を含めます。
4. アクセシビリティ：最小タッチターゲットを 48x48dp にし、適切な Semantics を設定します。

トラブルシューティング

• 「アニメーションがぎくしゃくする」：スプリングで Curves.linear を使っていないか、短すぎる時間（<200ms）を設定していないか確認します。
• 「形状が正しくモーフィングしない」：補間に対応するカスタム ShapeBorder と ShapeDecoration を使用していることを確認します。
• 「UI が平坦に感じられる」：色のコントラストを確認し、主要なアクションに塗りつぶしコンテナを使用していることを確認します。

結果をユーザーに提示する

M3E のタスクが完了したら、追加した表現力豊かな機能を要約します：

• ✅ モーション：[Action] に [Spatial/Effects] スプリングを適用しました。
• ✅ 形状：[Component] に [Pill/Teardrop/Squircel] を使用しました。
• ✅ 触覚フィードバック：触覚フィードバックを組み込みました。
• ✅ カラー：M3 の動的カラー トークンを使用しました。
• ✅ アクセシビリティ：タッチターゲットとセマンティクスを確認しました。