Windows 11 でのレイヤー化と昇格

Windows 11 では、アプリ階層の基本としてレイヤー化と昇格が使用されます。 階層は、アプリ内での移動方法に関する重要な情報を伝えながら、最も重要なコンテンツにユーザーの注意が向けられたままになるようにします。 レイヤー化と昇格は、エクスペリエンスを最新化し、Windows 内での一貫性が感じられるようにするうえで役立つ強力な視覚的手がかりです。

層の生成

An application window with a single content area

An application window with multiple content areas

レイヤー化とは、1 つのサーフェスを別のサーフェスに重ね合わせ、同じアプリケーション内に複数の視覚的に区別された領域を作成する概念です。

注意

Windows 11 のレイヤー化は、素材の使用と密接に連動しています。 これらの適用方法に関する具体的なガイダンスについては、素材に関するセクションを参照してください。

Windows 11 では、アプリケーションに 2 レイヤー システムを使用します。 これら 2 つのレイヤーによって階層が作成されて明瞭になるため、最も重要な部分にユーザーの注意が引きつけられます。

  • 基本レイヤーは、アプリの基礎となります。 これはすべてのアプリの最下位層であり、アプリのメニュー、コマンド、およびナビゲーションに関連するコントロールが含まれています。
  • コンテンツ レイヤーは、ユーザーの注意をアプリの中心的なエクスペリエンスに集めます。 コンテンツ レイヤーは、連続した要素に配置することも、コンテンツをセグメント化するカードに分割することもできます。

Elevation

A variety of overlapping UI elements, each at a different elevation

昇格とは、デスクトップ上での位置に関して、あるサーフェスが別のサーフェスに対して有する空間的な関係の深度を表す要素です。 2 つ以上のオブジェクトが画面上の同じ場所に配置されている場合、最も高い昇格を有するオブジェクトのみがその場所にレンダリングされます。

シャドウと輪郭 (アウトライン) は、オブジェクトの昇格を繊細に伝え、エクスペリエンス内で必要に応じて注意を引くために、コントロールとサーフェイス上で使用されます。 Windows 11 では、次の値を使用して、シャドウと輪郭による昇格を表現します。

An application window

ウィンドウ
昇格値: 128
ストロークの幅: 1

A modal dialog box

ダイアログ
昇格値: 128
ストロークの幅: 1

A flyout menu

Flyout
昇格値: 32
ストロークの幅: 1

A tooltip for a combo box

ヒント
昇格値: 16
ストロークの幅: 1

A UI surface that contains several content areas

カード
昇格値: 8
ストロークの幅: 1

A combo box

制御
昇格値: 2
ストロークの幅: 1

An empty UI surface

レイヤー
昇格値: 1
ストロークの幅: 1

Windows 11 のコントロールでは、さまざまな昇格と輪郭を使用して状態を示します。 値が一致するテーマに応じて、レンダリングされるシャドウの強さが変化します。

A button in the default state

REST
昇格値: 2
ストロークの幅: 1

A button in the hover state

ホバー
昇格値: 2
ストロークの幅: 1

A button in the pressed state

Pressed
昇格値: 1
ストロークの幅: 1