Windows アプリ用の設計ツールキットとサンプルDesign toolkits and samples for Windows apps


Fluent Design/Windows アプリの設計と UI に関連するダウンロード。Design and UI-related downloads for Fluent Design/Windows apps. Visual Studio など、その他のツールについては、メインのダウンロード ページをご覧ください。For additional tools, such as Visual Studio, see our main downloads page.

設計ツールキットDesign toolkits

これらのツールキットは、Windows アプリをデザインするためのコントロールとレイアウトのテンプレートを提供します。These toolkits provide controls and layout templates for designing Windows apps.

ヒーロー イメージ Figma ツールキットhero image Figma toolkit
WinUI 2.4、2020 年 5 月WinUI 2.4, May 2020

ヒーロー イメージ Sketch ツールキットhero image Sketch toolkit
v1810、2018 年 10 月v1810, October 2018

ヒーロー イメージ Adobe XD ツールキットhero image Adobe XD toolkit
v1901、2019 年 1 月v1901, January 2019

開発者向けツールキットおよびライブラリDeveloper toolkits and libraries

WinUI ライブラリ サムネイル Windows UI ライブラリWinUI library thumbnail Windows UI Library
Windows アプリのコントロールと他の UI 要素。Controls and other UI elements for Windows apps.
インストール手順Installation instructions

Windows コミュニティ サムネイル Windows コミュニティ ツールキットWindows community thumbnail Windows Community Toolkit
ヘルパー関数、カスタム コントロール、およびアプリ サービス。Helper functions, custom controls, and app services.
インストール手順Installation instructions

Windows Template Studio のサムネイル Windows Template StudioWindows Template Studio thumbnail Windows Template Studio
ウィザードベースの UI を使用して UWP アプリを迅速にスキャフォールディングします。Quickly scaffold a UWP app using a wizard-based UI.



Download the tile and icon generator

Adobe Photoshop 用のタイル/アイコン ジェネレーター Adobe Photoshop 用の一連の操作により、7 つのファイルから 68 の推奨されるタイル/アイコン アセットを生成します。Tile and icon generator for Adobe Photoshop This set of actions for Adobe Photoshop generates the 68 recommended tile and icon assets from just 7 files.
タイル/アイコン ジェネレーターのダウンロードDownload the tile and icon generator


Fluent XAML Theme Editor のイメージ Fluent XAML Theme EditorFluent XAML Theme Editor image Fluent XAML Theme Editor
Fluent XAML Theme Editor は、Fluent Design System の柔軟性を実現するとともに、Windows アプリケーションで使用される ResourceDictionary フレームワーク用の XAML マークアップを生成することで、アプリ開発プロセスもサポートするツールです。The Fluent XAML Theme Editor is a tool that helps demonstrate the flexibility of the Fluent Design System as well as supports the app development process by generating XAML markup for our ResourceDictionary framework used in Windows applications. ツール サンプルをダウンロードするDownload the tool sample
GitHub でツールを確認するCheck out the tool on GitHub

VanArsdel のイメージ VanArsdelVanArsdel image VanArsdel
Van Arsdel 社のエンド ツー エンド Windows サンプル アプリは、次世代の Microsoft Fluent Design System を示すためにビルドされました。The Van Arsdel, Ltd. end-to-end Windows sample app was built to showcase the next wave of the Microsoft Fluent Design System. これにより、Windows UI ライブラリの改良された密度と新しいコントロールのほか、UX フレームワークおよび合成の基になる強力な機能を広範に使用することができます。It makes extensive use of the improved density and new controls in the Windows UI Library as well as powerful underlying features of the ux framework and composition. このサンプルは、IoT デバイス (この例では、ランプ) を管理および購入するための生産性の高い豊富なエクスペリエンスを構築する方法を示しています。The sample shows how you can build a rich, productive experience for managing and purchasing IoT devices (in this case, lamps).
VanArsdel サンプルをダウンロードするDownload the VanArsdel sample
GitHub で VanArsdel サンプルを確認するCheck out the VanArsdel sample on GitHub

BuildCast のイメージ BuildCastbuild cast image BuildCast
BuildCast は、Fluent Design System と Windows を示すために組み込まれているエンド ツー エンドのサンプルです。BuildCast is an end-to-end sample built to showcase the Fluent Design System and Windows. Channel 9 や Windows 技術者のフィードにおける人気コンテンツのサンプルなど、特定のビデオ ポッドキャストの参照、ダウンロード、再生を行うことができます。It permits browsing, downloading, and playback of select video podcasts, including a sampling of the most popular ones from Channel 9 and some Windows tech enthusiast feeds. インク メモ、ブックマーク、リモート再生の機能もあります。It also features ink notes, bookmarks, and remote playback. このサンプルは、2017 年の Build カンファレンスの Fluent Design によるすばらしいアプリの構築に関する講演で最初に取り上げられたものです。This sample was initially shown at the 2017 Build conference during the Build Amazing Apps with Fluent Design talk.
BuildCast サンプルのダウンロードDownload the BuildCast sample
GitHub で BuildCast サンプルを確認するCheck out the BuildCast sample on GitHub

ランチ スケジューラ ランチ スケジューラLunch Scheduler Lunch Scheduler
友人や同僚とのランチをスケジュールする Windows アプリ サンプルです。A Windows app sample that schedules lunches with your friends and coworkers. ランチを作成し、興味のあるレストランに友人を招待するだけで、すべての関係者のランチ管理がアプリによって処理されます。You create a lunch, invite friends to a restaurant of interest, and the app takes care of the lunch management for all involved parties. このアプリでは、Windows アプリに、アクリル、表示、接続型アニメーションといった Fluent Design System の要素が取り入れられています。This app incorporates elements of the Fluent Design System in a Windows app, including acrylic, reveal, and connected animations.
ランチ スケジューラ サンプルをダウンロードするDownload the Lunch Scheduler sample
GitHub でランチ スケジューラ サンプルを確認するCheck out the Lunch Scheduler sample on GitHub

Xaml コントロール ギャラリー XAML コントロール ギャラリーXaml controls gallery XAML Controls Gallery
このサンプルは、すべての XAML コントロールの対話型デモを提供します。This sample provides an interactive demo of all of the XAML controls. 基本的なものから応用まで、さまざまなレイアウトを示し、独自のプロジェクトにコピーすることができますマークアップを表示します。It shows a variety of layouts from basic to adaptive, and displays markup that you can copy into your own project. 注: ダウンロード ファイルと GitHub リポジトリでは現在、このサンプル アプリが "UI の基本 (XAML)" と呼ばれています。Note: The download file and the GitHub repository currently refer to this sample app as "UI Basics (XAML)."
XAML コントロール ギャラリー サンプルをダウンロードするDownload the XAML Controls Gallery sample
GitHub で XAML コントロール ギャラリー サンプルを確認するCheck out the XAML Controls Gallery sample on GitHub
XAML コントロール ギャラリー アプリを Microsoft Store からダウンロードするDownload the XAML Controls Gallery app from the Store

他のコードをお探しの場合は、Want more code?

Windows サンプル ページで Windows アプリ サンプルの一覧をご覧ください。Check out the Windows sample page for complete list of all our Windows app samples. サンプル ポータルに移動Go to the samples portal