Communitygithub.com

WinUI 3 アプリの Windows 11 デザインルール

Fluent Design System 2 から Mica、NavigationView、CommandBar、メニュー、キーボードアクセラレータ、Segoe UI Variable、ダークモードまで、WinUI 3 アプリをネイティブな Windows 11 アプリのように見せるデザインルール。ウィンドウ、ページ、CommandBar、またはダイアログを構築・レビューする際に使用します。

WinUI 3 アプリの Windows 11 デザインルール とは?

このスキルは、WinUI 3 アプリケーションが Windows 11 のネイティブな外観と操作性を備えるようにするための包括的なデザインガイドラインとパターンを提供します。Microsoft が定義した Fluent Design System の5原則(自然、直感的、応答性、意図的、洗練)に基づき、Mica や Acrylic といった視覚マテリアル、Segoe UI Variable フォント、Segoe Fluent Icons、標準の角丸半径 (4px/8px) などの具体的な実装方法を網羅しています。開発者は、[design-rules.md](design-rules.md) のチェックリストでアプリ全体のデザイン準拠を確認し、[patterns.md](patterns.md) のコピー可能な XAML コードパターンを直接利用できます。このスキルは、Claude Code、Cursor、Codex などの AI エージェントがウィンドウ、ページ、CommandBar、ダイアログの作成やレビューを行う際に、Windows 11 の Fluent Design に沿ったコードを生成・検証するために設計されています。

対応~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/MinnThikeTunn/Phan-Tee/tree/main/skills/design/win-design

お気に入りのAIに質問する

このエージェントスキルを事前に読み込んだ状態で新しいチャットを開きます。

ドキュメント

Windows 11 デザイン

Microsoft はすでにアプリをデザインしています。適切なシステムパーツを選び、それらを配置し、その邪魔をしないでください。

Microsoft の5つの Fluent 原則

  1. 自然: ユーザー入力(キーボード、マウス、タッチ、ペン)に適応します。
  2. 直感的: 見慣れたレイアウト、一貫したアイコン表現、明確な階層構造。
  3. 応答性: 即座のフィードバック、滑らかなマイクロアニメーション。
  4. 意図的: すべての視覚要素には目的があります。
  5. 洗練: エッジを揃え、一貫した 4 px / 8 px グリッドスペーシング、洗練されたマテリアル。

Windows 11 の視覚マテリアル

  • Mica (MicaBackdrop): メインウィンドウフレームに適用されます。ユーザーのデスクトップ壁紙を動的にサンプリングし、微妙な色合いの表面を作り出します。
  • Acrylic (DesktopAcrylicBackdrop): 一時的なフローティングフライアウト、コンテキストメニュー、ダイアログに使用されます。
  • 角丸: カードとボタンには Windows 11 標準の 8 px 角丸半径、小さいチップには 4 px。
  • タイポグラフィ: 動的な光学サイズ調整に対応した Segoe UI Variable。
  • アイコン: Segoe Fluent Icons(FontIcon Glyph="\uE...")。

完了条件

すべてのビューとフライアウトが標準の Fluent 2 コントロールを使用し、Mica または Acrylic のバックドロップが適用され、タイポグラフィが Segoe UI Variable に準拠していること。

関連スキル