Windows アプリのスタイル

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

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

Image depicting a color gradient.

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

Image depicting typography.

タイポグラフィ

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

Image depicting icons.

アイコン

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

Image depicting acrylic.

アクリル

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

Image depicting reveal focus.

表示フォーカス

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

Image depicting sound.

サウンド

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

Short movie with a blinking cursor and then the words Writing style being typed out.

記述スタイル

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

XAML ブラシ

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

XAML スタイル

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

Spacing

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

角の半径

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