概要
Windows 11 の独特な新しいデザイン言語の一部として、丸みのある角は、UI の外観と操作性において重要な役割を果たします。 システム全体にわたる丸みのある表現は、OS によって制御されるソフトウェア丸み処理と、OEM パートナーによって制御されるハードウェア丸め処理の両方によって形成されています。 このトピックでは、最適なユーザーと開発者エクスペリエンスを実現するためのハードウェア ディスプレイ ベズルの丸め処理について、OEM パートナー向けの Microsoft ガイダンスを提供します。
OEM パートナーは、さまざまなハードウェア丸み半径とディスプレイのプロパティに対応するようにハードウェアのデザインを差別化することもできますが、オペレーティング システムは、Windows 11 に付属する丸め処理のみをサポートします。 システムの実装が非常に複雑になるため、またアプリ開発者エコシステムに不特定多数のソフトウェアとハードウェアの半径の組み合わせに対してプログラムを作成する負担をかけないようにするため、ソフトウェアの任意の半径とハードウェアの任意の半径を一致させることはサポートしていません。 したがって、このトピックは、ディスプレイのスケール ファクターに基づいてハードウェアの丸め処理によってクリップされる有効ピクセルを計算し、UI を損なうことなく安全に使用できるハードウェア半径の範囲を知るために役立ちます。
Note
このトピックのすべてのスケール ファクターは、デスクトップでのスケーリングについて説明しています。
ソフトウェア丸め処理の線形スケーリング
Windows 11 は、ボタンや入力フィールドなどのコントロール向けの 4 px と、ポップアップ メニューやメイン アプリ ウィンドウ向けの 8 px という 2 つの半径の丸め処理を行うことができます。 このトピックでは、半径 8 px が既定のソフトウェア丸め半径です。
Windows 11 でのソフトウェア丸め処理の設計は、96 DPI の 8 px 半径に基づいており、次の表に示すように線形的にスケーリングされます。
| DPI スケール ファクター | 丸め処理が行われるウィンドウ ピクセル数 |
|---|---|
| 100% | 8 |
| 150% | 12 |
| 200% | 16 |
この単純な線形関係は、Windows が丸めをスケーリングする方法を示すために役立ちますが、最終的にどのくらいのクリッピングが発生するかは、ディスプレイのネイティブ解像度とスケール ファクターによって決まります。 たとえば、既定のスケール ファクターが 200% であるディスプレイでは、同じディスプレイを 100% に設定した場合よりも、クリップされる UI が小さくなります。これは、100% を使用すると、200% を意図した場合よりもコンテンツが小さくなるためです。 この例のディスプレイでは、100% で 1 つの有効ピクセルが 1 つの物理ピクセルと同じであるため、より多くのピクセルがクリップされます。
Windows 既定のスケール ファクターと有効な解像度の計算
丸みのあるベゼルによってクリッピングされる UI の量は、OS のスケール ファクターおよびディスプレイの解像度とサイズに影響されます。既定値は、次の数式と変数に基づいてシステムが選択します。
重要
ほとんどのユーザーは既定のスケール ファクターを変更しないため、丸みのあるベズルによる UI のクリッピングに関連するすべての計算のベースラインにする必要があります。
ピクセル密度
Windows が認識しておく必要がある既定のスケール ファクター式の最初の変数は、ディスプレイの 1 インチあたりのピクセルの密度 (dpi) です。 これは、次の式で指定され、ディスプレイの製造元によってあらかじめ定義されています。
表示距離
表示距離は、ネイティブ DPI と組み合わせたときに、画面上のサイズの大きいオブジェクトがユーザーにどう表示されるかに影響します。そのため、既定のスケール ファクターを決定するときに、システムは表示距離を踏まえた計算を行います。 次の表に示すように、ディスプレイの表示距離は物理サイズとデバイスの種類によってほぼ決まります。
Note
この一覧は、すべてのデバイスの種類を網羅していません。
| デバイスの種類 | 表示距離 (インチ単位) |
|---|---|
| 小型タブレット | 16.3 |
| タブレット PC | 20 |
| ラップトップ | 24.5 |
| デスクトップ | 28 |
| TV | 84 |
最適なズーム
最適なズームは、Windows がディスプレイに最適であると考える、正確な小数点以下のレベルのスケーリングです。 これは、ほぼ既定のスケール ファクターに対応します。既定のスケール ファクターは、最適なズームを受け取り、スコープ範囲内で 25% ずつ増える直近の値に丸めます。 Windows は、ネイティブ DPI と表示距離に基づいて、ディスプレイに最適なズーム レベルを計算します。 システムの既定の DPI は 96、既定の表示距離は 28 であることに注意してください。
最大スケール ファクター
既定のスケール ファクターを決めるために Windows で最後に必要になる情報は、ディスプレイの最大スケール ファクター、すなわち、ユーザー補助の問題 (たとえば、メッセージ ボックスが大きすぎて [OK] ボタンが画面に表示されないなど) を防ぐために、コンテンツをそれ以上スケーリングしないレベルです。 最大スケール ファクターは、ディスプレイの垂直方向の解像度によって決まります。
| [垂直解像度] | 最大スケール ファクター |
|---|---|
| < 900 | 100% |
| >= 900 かつ < 1080 | 125% |
| >= 1080 かつ < 1440 | 150% |
| >= 1440 かつ < 1800 | 200% |
| >= 1800 | 250% |
既定のスケール ファクター
最後に、最適なズームに基づいて既定のスケール ファクターが決定されます。 実質的に、既定のスケール ファクターは、最適なズームを単に 25% ずつ増える直近の値に丸めたものです。最小値は 100%、最大値は最大スケール ファクターです。
| 最適なズーム | 既定のスケール ファクター |
|---|---|
| < 1.2 | 100% |
| >= 1.2 かつ < 1.43 | 125% |
| >= 1.43 かつ < 1.78 | 150% |
| >= 1.78 かつ < 2.32 | 200% |
| >= 2.32 かつ < 最大スケール ファクター | 250% |
| > 最大スケール ファクター | 最大スケール ファクター |
有効解像度の計算
既定のスケール ファクターがわかったら、ネイティブの解像度をスケーリングして、ディスプレイの有効解像度を決定します。
チュートリアル - 丸みのあるハードウェア ベズルによってクリップされる有効ピクセル数の測定
丸みのあるディスプレイの角のさまざまな曲率や半径による UI の影響を評価する場合、最初に測定する結果は、ネイティブ解像度でベズルによってクリップされる物理ピクセル数です。これは、スケール ファクターで割ることができます。 このセクションでは、次のプロパティを持つ仮想的なディスプレイにおいて、クリップされる物理ピクセル数を測定する例を示します。
| プロパティまたは計算 | Value |
|---|---|
| スクリーン サイズ | 12.4 インチ |
| 水平解像度 | 2560 |
| [垂直解像度] | 1600 |
| ネイティブ DPI | 243.46 |
| 表示距離 | 24.5 インチ (デバイスの種類はノート PC) |
| 最適なズーム | 2.2 |
| 最大スケール ファクター | 200% |
| 既定のスケール ファクター | 200% |
| ターゲット丸め半径 | 2.2 mm |
丸みのあるベズルで形成された円
この例では、ベズルを 2.2 mm 丸めます。 この丸め処理によって生成される円弧は、円の 4 分の 1 を形成します。この 4 分の 1 の円は、次の図で赤く強調表示されており、通常の四角形のディスプレイの角に重なります。
完全な円の半径は、次の式で計算されます。
25.4 はミリメートルをインチに変換しています。ディスプレイと DPI はインチ、丸め半径はミリメートルで測定されているためです。 この例のディスプレイでは、半径は 21.09 px になります。 この円の合計面積は、標準の円の面積の公式から求めることができます。
この例のディスプレイでは、丸みのあるベズル円の面積は、1395.84 px です。
角の四角形
丸め処理に使う円を囲む四角形の辺長は、円の直径と等しくなり、次のように計算されます。
この四角形の面積は、標準の正方形の面積の公式から求めることができます。
この例では、正方形の辺長は 42.17 px、面積は 1778.51 px です。
角ごとにクリップされる物理ピクセル数
角の円の半径が分かったので、この円でクリップされる合計面積を計算して 4 で割ると、ディスプレイの角でクリップされるピクセル数を取得できます。
この例のディスプレイでは、角ごとにクリップされるピクセル数は 95.42 px です。これには小数のピクセルが含まれます。 次の図では、対象の四角形の領域がさまざまな色で強調表示され、丸みのあるベズルでクリップされるピクセル全体が非常に大まかに示されています。 この画像には、角にあたる円の輪郭と、それを囲む正方形も示されています。
この例では、クリップされる全ピクセルの概数は、ディスプレイのこの角で 92 px になります。
クリップされる有効ピクセル数
最後に、クリップされる物理ピクセル数をスケール ファクターで割り、オクルージョンされる有効ピクセル数を決定できます。
この例では、既定のスケール ファクターが 200% の場合、角ごとに 47.72 epx がクリップされます。
推奨される丸め半径
ディスプレイの丸みのあるベズルによってクリップされる UI の量は、対象の丸め半径の影響を受けます。これにより、ベズル角の円の半径が決定されます。
警告
丸め半径が 3 mm のデバイスでの内部テストに基づき、Windows 11 の丸みのあるデザインで機能する角の円の半径について推奨される長さの範囲は、16 から 24 までの有効ピクセル (epx) です。この範囲を超える半径は、UI が損なわれる可能性があり、サポートされていません。この範囲を下回る半径では、UI クリッピングの問題は生じないものの、ディスプレイの丸みの角度と UI の間に同心性のテンションが発生する可能性があります。言い換えると、ベゼルの角の半径とウィンドウの丸め半径の差が大きく異なり、システムに対するユーザーの視覚的認識に影響を与え始めるようになります。
既定のスケール ファクターが 200% であることを考慮すると、チュートリアルのディスプレイの例の丸め円の有効半径は 10.55 epx です。 そのため、UI が過度にクリップされることはありませんが、ベズルと Windows 11 の丸みのあるウィンドウの角の丸め角度の違いを考慮する必要があります。