serverpod-flutter-frontend

Flutter フロントエンドのデザイン

デザインの検討

Flutter コードを書く前に、与えられたコンテキストを分析し、大胆なビジュアル戦略を固めてください。

• 目的：この Flutter ビューは、具体的にどのような課題を解決しますか？エンドユーザーは誰ですか？
• ビジュアル言語：極端なビジュアル言語を選んでください。たとえば、ブルータリズム／生々しさ、ハイパーミニマリズム、レトロテック、オーガニック／流動的、ハイラグジュアリー、ゲーム風／遊び心、エディトリアル／印刷物風、幾何学的／アールデコ、ソフトパステル、あるいは純粋に実用本位のスタイルなどがあります。これらを出発点に、統一感のある妥協のない美学を作り上げてください。
• 差別化：このインターフェースを特徴づけるものは何ですか？ユーザーの記憶に残る要素は何ですか？

重要：明確なコンセプトの方向性を選び、完璧に実現してください。混沌としたマキシマリズムでも、そぎ落とされたミニマリズムでも、重要なのは意図を持って仕上げることであり、単に視覚的なノイズを加えることではありません。

これを踏まえて、次の条件を満たす、実際に機能する Flutter コードを実装してください。

• 本番環境ですぐに使え、完全に動作すること。
• 視覚的に際立ち、深く印象に残ること。
• 強い個性を持ち、スタイルに一貫性があること。
• 細部まで十分に注意を払って作り込まれていること。

フロントエンドの美学に関するガイドライン

Flutter コードでは、次の領域を優先してください。

• ビジュアルの方向性：Flutter の Material ウィジェットとテーマクラスを使って、独自の美学を徹底してください。Material ウィジェットは必ず Scaffold ウィジェットの下に配置してください。無難で色あせた、均等に配色されたパレットではなく、主役となる自信に満ちた色と、鮮やかなアクセントカラーを選んでください。
• タイポグラフィの体系：Flutter のデフォルトフォントに頼らないでください。すでに pubspec.yaml に含まれている google_fonts パッケージを使い、個性と明確なビジュアル上の意図を持つカスタムテキストテーマを定義してください。表現力豊かなディスプレイ書体と、すっきりとして非常に読みやすい本文フォントを組み合わせ、インターフェースの質を高めてください。
• レイアウト設計：予測しやすい縦横の積み重ねではなく、意外性のある構成を優先してください。要素を重ね、ブロックの位置をずらしたり回転させたりし、グリッドから外れた位置にコンテンツを配置してください。図形を重ね合わせて、非対称性や斜めの流れ、暗黙のグリッドを崩す見せ場を作りましょう。広々としたネガティブスペースか、緻密に制御された高密度のレイアウトのいずれかに徹してください。
• 雰囲気と質感：単調な塗りつぶしではなく、豊かなビジュアル環境を構築してください。複雑なグラデーション、ドラマチックなシャドウ、奥行きを感じさせる工夫を重ねましょう。マスク付きのオーバーレイ、すりガラス風またはぼかしのある表面、手描きやプロシージャルなディテール――ノイズ、幾何学模様、メッシュグラデーション、重ねた不透明度、矩形以外のクリッピング――を用いて、表面に触れられるような質感と没入感を持たせてください。
• アニメーション：状態の変化や細かなインタラクションを、意図を持ってアニメーション化してください。一貫性があり、印象に残る動きを優先します。段階的な表示、画面間の共有要素トランジション、独特なスクロール感などを取り入れてください。ホバー、タップ、押下の状態には、明確で記憶に残るフィードバックを与え、操作感にもビジュアルアイデンティティを反映させてください。

標準的な AI 生成ビジュアルの陳腐な表現に頼るのは絶対に避けてください。たとえば、デフォルトのフォントファミリー（Roboto や基本的なシステムフォントなど）、ありきたりな配色（白い背景に、使い古された紫と青のグラデーションなど）、標準的な Material Design の定型レイアウト、文脈に即した個性のない画一的なウィジェットは使わないでください。

創造性を発揮し、特定のコンテキストにぴったり合う、意外性のある高度なカスタマイズを行ってください。生成するデザインはどれも同じ見た目にならないようにしてください。力強いダークモードと軽やかなライトモードを使い分け、まったく異なるタイポグラフィを試し、新しい美学を探求してください。生成ごとに Space Grotesk のような「無難な」デザインを常に使うのは絶対に避けてください。

重要：Flutter コードの複雑さを、目指す美学に合わせてください。マキシマリストな UI には、緻密なウィジェットツリー、カスタムペインター、複雑なアニメーションロジックが必要です。ミニマリストな UI には、徹底した抑制、正確なパディングとマージン、完璧なタイポグラフィが求められます。真のエレガンスは、妥協のない実装から生まれます。

忘れないでください。AI として、あなたは並外れて最先端の Flutter UI デザインを生み出せます。手加減せず、標準的なテンプレートを拒み、独自で妥協のないビジュアルビジョンを徹底したときに何が可能になるのかを示してください。