次の方法で共有

Windows のジオメトリ

Windows 11 の角と要素の間隔を丸くする

ジオメトリは、画面の UI 要素の形状、サイズ、位置を表しています。 これらの基本的なデザイン要素は、デザイン システム全体でエクスペリエンスの一貫性を持たせるのに役立ちます。

Windows ジオメトリは、最新のアプリ エクスペリエンスをサポートするために作成されています。 徐々に丸くなる角、入れ子になった要素、および一貫性のある間隔の組み合わせにより、目的の統一性と使いやすさを重視した、ソフトで落ち着きがあり、親しみやすい効果が実現されています。

ヒント

この記事では、 Fluent Design 言語 を Windows アプリに適用する方法について説明します。 詳細については、「Fluent Design - 図形」を参照してください。

丸い角

角が丸いダイアログ

Windows 11 では、すべてのトップレベル アプリ ウィンドウに丸い角が適用されます。 これは、ボタンやリスト ビューなどのほとんどの共通コントロールにも当てはまります

Windows 11 では、どの UI コンポーネントを丸めるか、また隣接する要素を基準としてそのコンポーネントがどのように配置されるかに応じて、3 つのレベルの丸めが使用されます。

角の半径 使用方法
8px アプリのウィンドウ、ポップアップ、ダイアログなどのトップレベル コンテナーは、角の半径 8px を使用して丸められます。
4px ボタンやリストのバックプレートなどのページ内要素は、角の半径 4px を使用して丸められります。
0px 他の直線と交差する直線は丸められません。
0px スナップされているウィンドウや最大化されているウィンドウの角は丸められません。

四角形 UI 要素

ユーザーが画面に常に表示する標準コントロールでは、 4px コーナー半径が使用されます。 これには、Button、CheckBox、ComboBox、TextBox、ListView などのコントロールが含まれます。

丸い角が強調表示されたボタン

フライアウトとオーバーレイ UI 要素

画面に一時的に表示される一時的な UI 要素、または他の UI をオーバーレイする UI 要素には、 8px コーナー半径を使用します。 これには、ContentDialog、Flyout、MenuFlyout、TeachingTip などの要素が含まれます。 ToolTip は例外であり、サイズが小さい ため、4px を使用します。

ポップアップの例

バー要素

バーや線のような形をした UI 要素では、 4px のコーナー半径が使用されます。 これには、ProgressBar、ScrollBar、Slider などのコントロールが含まれます。

進行状況バーの例

四捨五入しないタイミング

コントロールの角を丸めてはいけないインスタンスがあり、既定では丸められません。

  • コンテナー内に格納されている複数の UI 要素が、SplitButton の 2 つの部分など、相互に接触する場合。 接触時にスペースは存在しないようにする必要があります。

SplitButton

  • ポップアップ UI 要素が、一方の側でポップアップを呼び出す UI に接続されている場合。

一部の角が丸まれていない AutoSuggest フライアウトのスクリーンショット。

コーナー半径のカスタマイズ

既定の角半径は、 ControlCornerRadius (既定の 4px) と OverlayCornerRadius (既定の 8px) の 2 つのグローバル リソースによって制御されます。 App.xaml でこれらの値をオーバーライドして、アプリ内のすべてのコントロールの丸めを変更できます。

Win32 デスクトップ アプリをビルドする場合は、DWM API を使用してアプリ ウィンドウの角を丸めることができます。 詳細については、「 デスクトップ アプリで角丸を適用する」を参照してください。

  • Last updated on