効果とエクスペリエンスの調整

WinUI は、多くの美しい効果、アニメーション、および差別化のための手段を提供します。ただし、パフォーマンスとカスタマイズ性に対するユーザーの期待を満たすことは、成功したアプリケーションを作成するために必要な部分です。 Windows App SDK アプリは、さまざまな機能を備えた、さまざまな Windows デバイスと構成の大規模で多様なファミリで実行できます。すべてのユーザーに包括的なエクスペリエンスを提供するには、アプリケーションをデバイス間でスケーリングし、ユーザーの好みを尊重する必要があります。 UI の調整は、デバイスの機能を活用し、快適で包括的なユーザーエクスペリエンスを確保する効率的な方法を提供できます。

UI の調整は、次の領域に関して、パフォーマンスの高い美しい UI の作業を含む幅広いカテゴリです。

ユーザー設定の効果の尊重と適応
アニメーションのユーザー設定に対応する
特定のハードウェア機能に合わせて UI を最適化する

ここでは、上記の領域のビジュアルレイヤーを使用して効果とアニメーションを調整する方法について説明しますが、優れたエンドユーザーエクスペリエンスを確保するためにアプリケーションを調整する方法は他にも多数あります。さまざまなデバイス用に UI を調整し、応答性の高い UIを作成方法に関するガイダンスドキュメントを参照してください。

ユーザー効果の設定

ユーザーは、さまざまな理由で Windows エクスペリエンスをカスタマイズできます。アプリケーションはそれに対して尊重し、適応する必要があります。エンドユーザーが制御できる領域の 1 つは、システム全体で使用される効果の種類を変更することです。

透明度効果の設定

ユーザーがカスタマイズできる効果設定の 1 つは、透明度効果のオン/オフです。これは、Windows 設定の [個人用設定] > [色] または [設定] > [簡単操作] > 表示で確認できます。

設定の透明度オプション

オンにすると、透明度を使用する効果が期待どおりに表示されます。これは、アクリル、HostBackdropBrush、または完全に不透明ではないカスタム効果グラフに適用されます。

オフにすると、XAML のアクリルブラシが既定でこのイベントをリッスンしているため、アクリル素材は自動的に単色にフォールバックします。ここでは、透明度の効果が有効になっていない場合に、電卓アプリが単色に適切にフォールバックすることがわかります。

アクリルの電卓、透明化設定に応答するアクリルの電卓

ただし、カスタム効果の場合、アプリケーションは UISettings.AdvancedEffectsEnabled プロパティまたは AdvancedEffectsEnabledChanged イベントに応答し、効果や効果グラフを切り替えて、透明度のない効果を使用する必要があります。その例を次に示します。

public MainPage()
{
   var uisettings = new UISettings();
   bool advancedEffects = uisettings.AdvancedEffectsEnabled;
   uisettings.AdvancedEffectsEnabledChanged += Uisettings_AdvancedEffectsEnabledChanged;
}

private void Uisettings_AdvancedEffectsEnabledChanged(UISettings sender, object args)
{
    // TODO respond to sender.AdvancedEffectsEnabled
}

アニメーションの設定

同様に、アプリケーションは UISettings.AnimationsEnabled プロパティに対してリッスンし応答することで、[設定] > の [簡単操作] > 表示におけるユーザー設定に基づいてアニメーションがオンまたはオフになっていることを確認する必要があります。

設定アニメーションオプション

public MainPage()
{
   var uisettings = new UISettings();
   bool animationsEnabled = uisettings.AnimationsEnabled;
   // TODO respond to animations settings
}

機能 API の活用

CompositionCapabilities API を利用することで、特定のハードウェアで使用可能でパフォーマンスの高いコンポジション機能を検出し、エンドユーザーがあらゆるデバイスでパフォーマンスと美しいエクスペリエンスを得られるように設計を調整できます。 API は、さまざまなフォームファクターに対してグレースフル効果スケーリングを実装するために、ハードウェアシステムの機能を確認する手段を提供します。これにより、アプリケーションを適切に調整して、美しくシームレスなエンドユーザーエクスペリエンスを作成することが容易になります。

この API には、アプリケーション UI の効果スケーリングの決定を行うために使用できるメソッドとイベントリスナーが用意されています。この機能は、システムが複雑なコンポジションとレンダリング操作をどの程度適切に処理できるかを検出し、開発者が利用できる使いやすいモデルで情報を返します。

コンポジション機能の使用

CompositionCapabilities 機能は、アクリル素材などの機能に既に利用されています。この機能は、シナリオやハードウェアに応じて、素材がよりパフォーマンスの高い効果にフォールバックします。

API は、いくつかの簡単な手順で既存のコードに追加できます。

アプリケーションのコンストラクターで capabilities オブジェクトを取得します。
```
_capabilities = new CompositionCapabilities();
```
アプリの機能変更イベントリスナーを登録します。
```
_capabilities.Changed += HandleCapabilitiesChanged;
```
イベントコールバックメソッドにコンテンツを追加して、さまざまな機能レベルを処理します。これは、以下の次の手順と似ている場合と似ている場合とそうでない場合があります。
効果を使用する場合は、最初に capabilities オブジェクトを確認します。効果を調整する方法に応じて、条件付きチェックの使用や制御ステートメントの切り替えを検討してください。
```
if (_capabilities.AreEffectsSupported())
{
    // Add incremental effects updates here

    if (_capabilities.AreEffectsFast())
    {
        // Add more advanced effects here where applicable
    }
}
```

完全なサンプルコードは、Windows UI GitHub リポジトリにあります。

高速効果と低速効果

CompositionCapabilities API で提供されている AreEffectsSupported メソッドと AreEffectsFast メソッドからのフィードバックに基づいて、アプリケーションは、デバイス用に最適化されたその他の効果に対して、高価またはサポートされていない効果をスワップすることを決定できます。一部の効果は、一貫して他の効果よりもリソースを集中的に使用することが知られており、控えめに使用する必要があり、他の効果はより自由に使用できます。ただし、すべての効果について、一部のシナリオまたは組み合わせによって効果グラフのパフォーマンス特性が変わる可能性があるため、チェーンとアニメーション化を行うときは注意が必要です。以下に個々の効果に関する経験則的なパフォーマンス特性を示します。

パフォーマンスへの影響が高いことがわかっている効果は、ガウスぼかし、シャドウマスク、BackDropBrush、HostBackDropBrush、レイヤービジュアルです。これらは、ローエンドデバイス (機能レベル 9.1 から 9.3) には推奨されません。また、ハイエンドデバイスでは慎重に使用する必要があります。
パフォーマンスへの影響が中程度の効果には、カラーマトリックス、特定の Blend Effect BlendModes (Luminosity、Color、Saturation、Hue)、SpotLight、SceneLightingEffect、および (シナリオに応じて) BorderEffect が含まれます。これらの効果は、ローエンドデバイス上の特定のシナリオで動作する可能性がありますが、連鎖的な操作やアニメーション化には注意が必要です。使用を 2 つ以下に制限し、切り替え時にのみアニメーション化することをお勧めします。
その他の効果はすべてパフォーマンスへの影響が低く、アニメーション化とチェーン時に妥当なすべてのシナリオで機能します。

フィードバック

このページはお役に立ちましたか?

Last updated on 2026-03-17