Windows アプリのスタイル

アプリはスタイルによってさらに引き立ちます。ここで説明するスタイル ガイドラインは、色、文字体裁、アクリル素材や表示ハイライトなどの新機能を通じて Fluent Design を作成するために役立ちます。

UI コンポーネント全体に最新のスタイルを提供するには、Windows UI ライブラリ (WinUI) を使用します。 最新の WinUI バージョンを使用し、現在の Windows アプリの Fluent スタイルによって、アプリを最新の状態に保つようにしてください。 これを行う方法について詳しくは、「XAML スタイル」をご覧ください。

色のグラデーションを描写した画像。

色により、アプリのさまざまな情報レベルで直感的に移動先を見つけることができます。また、色は操作モデルを強化するための重要なツールとして機能します。

文字体裁を描写した画像。

文字体裁

言語の視覚的な表現として、文字体裁の主な役割は明確であることです。 スタイルによってその目的が邪魔されてはなりません。 次のガイドラインでは、コンテンツをユーザーに理解しやすくするための文字体裁の使用方法について説明します。

アイコンを描写した画像。

アイコン

優れたアイコンは、文字体裁やその他のデザイン言語と調和するものです。 これらは比喩と混用しないようにします。できるだけすばやくシンプルに、必要なことのみを伝えます。

アクリルを示す画像。

Acrylic

アクリル (美しい半透明のサーフェスを作成するブラシ) を使用して、奥行きを感じさせます。

表示フォーカスを示す画像。

表示フォーカス

表示フォーカスは、Xbox One やテレビ画面などの 10 フィート エクスペリエンスを想定した発光効果で、フォーカス可能な要素の境界をアニメーション化します。

サウンドを示す画像。

サウンド

サウンドを使用して、アプリケーションのユーザー エクスペリエンスの完成をサポートし、アプリケーションのオーディオ面の特徴を際立たせます。オーディオは、すべてのプラットフォームで Windows の使い勝手を一致させるために必要なものです。

点滅するカーソルと、その後に「Writing style」という単語が入力される短いムービーです。

記述スタイル

記述スタイルによって、ユーザー エクスペリエンスが不快にも快適にもなる大きな違いが生まれます。

XAML ブラシ

XAML フレームワークを使って、さまざまな方法でアプリの外観をカスタマイズできます。 スタイルを使うと、コントロールのプロパティに値を設定し、その設定を再利用することで、複数のコントロールの外観を統一できます。

XAML スタイル

XAML フレームワークを使って、さまざまな方法でアプリの外観をカスタマイズできます。 スタイルを使うと、コントロールのプロパティに値を設定し、その設定を再利用することで、複数のコントロールの外観を統一できます。

間隔

Windows アプリケーションを最適化し、アプリの機能と対話式操作の要件に最適なユーザー エクスペリエンスを提供します。

角の半径

角を丸めて、暖かみと安心感を与え、ユーザーにとって UI を視覚的に扱いやすくします。