アクリル素材

アクリルは、半透明のテクスチャを作成するブラシの一種です。 アクリルをアプリ サーフェスに適用すると、奥行きを加えたり、視覚的な階層を確立したりすることができます。

重要な API:AcrylicBrush クラス、Background プロパティ

ライトテーマの

ダークテーマの

アクリルと Fluent Design System

Fluent Design System では、ライト、深度、モーション、マテリアル、スケールを取り入れた、モダンで目を引く UI を作成できます。 アクリルは、アプリに物理的なテクスチャ (マテリアル) と深度を追加する Fluent Design System コンポーネントです。 詳しくは、Fluent Design の概要に関するページをご覧ください。

例

WinUI 2 ギャラリー
WinUI 2 ギャラリー アプリがインストールされている場合は、 ここを クリックしてアプリを開き、アクリルの動作を確認してください。

WinUI 2 ギャラリー アプリ (Microsoft Store) を入手する
ソース コード (GitHub) を入手する

アクリル ブレンドの種類

アクリルの最も注目すべき特徴は、その透明度です。 アクリル ブレンドの種類は 2 つあり、素材を通して何が表示されるかを変更することができます。

• 背景アクリルでは、デスクトップの壁紙と現在アクティブになっているアプリの背後にある他のウィンドウが表示されます。これにより、アプリケーション ウィンドウ間に奥行きが出て、ユーザーが個人的に優先する画面を明示しておくことができます。
• アプリ内アクリルでは、アプリ フレーム内に奥行きの感覚がもたらされ、フォーカスと階層の両方が提供されます。

複数のアクリル サーフェスを重ねることは避けてください。背景アクリルを何層にも重ねると、目の錯覚の原因となることがあります。

アクリルの用途

• アプリ内アクリルは、スクロール時や操作時にコンテンツと重なる可能性のあるサーフェス上などで、UI をサポートするために使用します。
• コンテキスト メニュー、ポップアップ、簡易非表示 UI など、一時的な UI 要素に対して背景アクリルを使用します。
  一時的なシナリオでアクリルを使用すると、一時的な UI をトリガーしたコンテンツとの視覚的な関係を維持するのに役立ちます。

ナビゲーション サーフェスでアプリ内アクリルを使用する場合、アプリでのフローを向上させるために、アクリル ウィンドウの下でコンテンツを拡張することを検討してください。 NavigationView を使用すると、これが自動的に行われます。 ただし、ストライプ効果が生成されないようにするには、複数のアクリルを端と端を接して配置しないでください。これを行うと、2 つのぼやけたサーフェス間に不要な継ぎ目が作成される場合があります。 アクリルは、デザインで視覚的な調和をとるためのツールですが、正しく使用しないと、視覚的なノイズになる場合があります。

次の使用パターンを検討して、アクリルをアプリに組み込むのに最適な方法を決定してください。

垂直方向のウィンドウ

アプリのコンテンツを分割するのに役立つ垂直方向のウィンドウまたはサーフェスの場合は、アクリルの代わりに不透明な背景を使用することをお勧めします。 NavigationView の Compact モードや Minimal モードのように、コンテンツの上部で垂直方向のウィンドウが開く場合、ユーザーがこのウィンドウを開いた状態にしているときにページのコンテンツを維持するために、アプリ内アクリルを使用することをお勧めします。

一時的なサーフェス

コンテキスト メニュー、ポップアップ、非モーダル ポップアップ、または簡易非表示ウィンドウを使用するアプリでは、背景アクリルを使用することをお勧めします。これらのサーフェスがメインのアプリ ウィンドウのフレームの外部に描画される場合には特にお勧めします。

多くの XAML コントロールは、既定でアクリルを描画します。 MenuFlyouts、AutoSuggestBox、ComboBox、および簡易非表示ポップアップを使用する類似のコントロールはすべて、開いている間はアクリルを使用します。

注意

アクリル サーフェスのレンダリングでは GPU を集中的に使用するため、デバイスの電力消費が増加し、バッテリー残量が少なくなる可能性があります。 アクリル効果は、デバイスがバッテリー節約機能モードに入ると自動的に無効になります。 ユーザーは、[設定] > [個人用設定] > [色] の [透明効果] をオフにすることで、すべてのアプリに対してアクリル効果を無効にできます。

使いやすさと適応性

アクリルの外観は、さまざまなデバイスやコンテキストに合うように自動的に対応します。

ハイ コントラスト モードでは、ユーザーが選んだ見慣れた背景色が、アクリルの代わりに引き続き表示されます。 また次の場合には、背景アクリルとアプリ内アクリルはどちらも、単色として表示されます。

• ユーザーが [設定] > [個人用設定] > [色] で [透明効果] をオフにした場合。
• バッテリー節約機能モードがアクティブ化されている場合。
• アプリがローエンド ハードウェアで実行されている場合。

また次の場合には、背景アクリルのみ、その透明度とテクスチャを単色で置き換えることができます。

• アプリ ウィンドウがデスクトップで非アクティブ化されている場合。
• アプリが Xbox、HoloLens、またはタブレット モードで実行されている場合。

見やすくするための考慮事項

アプリがユーザーに表示するすべてのテキストでは、コントラスト比を適切な値にすることが重要です (「アクセシビリティに対応したテキストの要件」をご覧ください)。 テキストがアクリル上のコントラスト比を満たすようにアクリル リソースが最適化されています。 アクリル サーフェスの上にアクセント カラーのテキストを配置することはお勧めしません。これは、これらの組み合わせが、既定の 14px のフォント サイズでのコントラスト比の最小要件を満たさない可能性があるためです。 ハイパーリンクはアクリル要素上には配置しないようにしてください。 また、アクリルの濃淡の色や不透明度のレベルをカスタマイズする場合は、見やすさへの影響を考慮してください。

アクリルのテーマ リソース

XAML AcrylicBrush テーマ リソースや定義済みの AcrylicBrush テーマ リソースを使用して、アクリルをアプリのサーフェスに簡単に適用できます。 まず、アプリ内アクリルまたは背景アクリルのどちらを使用するかを決める必要があります。 この記事で推奨事項として既に説明した一般的なアプリのパターンを確認してください。

背景アクリルやアプリ内アクリルの両方を対象としたブラシのテーマ リソースのコレクションが作成されています。これらのリソースでは、アプリのテーマが重視され、必要に応じて、単色にフォール バックします。 WinUI 2 の場合、これらのテーマ リソースは、microsoft-ui-xaml GitHub リポジトリの AcrylicBrush themeresources ファイルにあります。 名前に Background を含むリソースは背景アクリルを表し、InApp はアプリ内アクリルを表します。

特定のサーフェスを塗りつぶすには、WinUI 2 テーマ リソースのいずれかを、他のブラシ リソースを適用する要素の背景に適用します。

<Grid Background="{ThemeResource AcrylicBackgroundFillColorDefaultBrush}">

カスタム アクリル ブラシ

色の濃淡をアプリのアクリルに加えて、ブランドを表示したり、ページ上にある他の要素と視覚的にバランスをとったりすることができます。 グレースケール以外の色を表示するには、次のプロパティを使って、独自のアクリル ブラシを定義する必要があります。

• TintColor: 色/濃淡のオーバーレイ レイヤーです。
• TintOpacity: 濃淡レイヤーの不透明度です。
• TintLuminosityOpacity: 背景からアクリル サーフェスの間で許容される彩度の量を制御します。
• BackgroundSource: 背景アクリルまたはアプリ内アクリルのどちらを使用するかを指定するフラグです。
• FallbackColor: バッテリー節約機能でアクリルと置き換わる単色です。 背景アクリルでは、フォールバックの色は、アプリが作業中のデスクトップ ウィンドウにない場合、またはアプリが電話や Xbox 上で実行されている場合にもアクリルと置き換わります。

アクリル ブラシを追加するには、濃色テーマ、淡色テーマ、ハイ コントラスト テーマの 3 つのリソースを定義します。 ハイ コントラストでは、濃色/淡色の AcrylicBrush と同じ x:Key で SolidColorBrush を使用することをお勧めします。

注意

TintLuminosityOpacity 値を指定しない場合、その値は、TintColor および TintOpacity に基づいてシステムによって自動的に調整されます。

<ResourceDictionary.ThemeDictionaries>
    <ResourceDictionary x:Key="Default">
        <AcrylicBrush x:Key="MyAcrylicBrush"
            BackgroundSource="HostBackdrop"
            TintColor="#FFFF0000"
            TintOpacity="0.8"
            TintLuminosityOpacity="0.5"
            FallbackColor="#FF7F0000"/>
    </ResourceDictionary>

    <ResourceDictionary x:Key="HighContrast">
        <SolidColorBrush x:Key="MyAcrylicBrush"
            Color="{ThemeResource SystemColorWindowColor}"/>
    </ResourceDictionary>

    <ResourceDictionary x:Key="Light">
        <AcrylicBrush x:Key="MyAcrylicBrush"
            BackgroundSource="HostBackdrop"
            TintColor="#FFFF0000"
            TintOpacity="0.8"
            TintLuminosityOpacity="0.5"
            FallbackColor="#FFFF7F7F"/>
    </ResourceDictionary>
</ResourceDictionary.ThemeDictionaries>

次のサンプルは、コードで AcrylicBrush を宣言する方法を示しています。 アプリで複数の OS ターゲットがサポートされている場合は、この API がユーザーのコンピューターで利用できることを確認してください。

if (Windows.Foundation.Metadata.ApiInformation.IsTypePresent("Windows.UI.Xaml.Media.AcrylicBrush"))
{
    Windows.UI.Xaml.Media.AcrylicBrush myBrush = new Windows.UI.Xaml.Media.AcrylicBrush();
    myBrush.BackgroundSource = Windows.UI.Xaml.Media.AcrylicBackgroundSource.HostBackdrop;
    myBrush.TintColor = Color.FromArgb(255, 202, 24, 37);
    myBrush.FallbackColor = Color.FromArgb(255, 202, 24, 37);
    myBrush.TintOpacity = 0.6;

    grid.Fill = myBrush;
}
else
{
    SolidColorBrush myBrush = new SolidColorBrush(Color.FromArgb(255, 202, 24, 37));

    grid.Fill = myBrush;
}

アクリルをタイトル バーに拡張する

アプリのウィンドウを滑らかな外観にするには、タイトル バー領域にアクリルを使います。 この例では、ApplicationViewTitleBar オブジェクトの ButtonBackgroundColor および ButtonInactiveBackgroundColor プロパティを Colors.Transparent に設定することで、アクリルをタイトル バーに拡張します。

private void ExtendAcrylicIntoTitleBar()
{
    CoreApplication.GetCurrentView().TitleBar.ExtendViewIntoTitleBar = true;
    ApplicationViewTitleBar titleBar = ApplicationView.GetForCurrentView().TitleBar;
    titleBar.ButtonBackgroundColor = Colors.Transparent;
    titleBar.ButtonInactiveBackgroundColor = Colors.Transparent;
}

このコードは、ここに示すようにアプリの OnLaunched メソッド (App.xaml.cs) 内の Window.Activate の呼び出しの後か、アプリの最初のページに配置できます。

// Call your extend acrylic code in the OnLaunched event, after
// calling Window.Current.Activate.
protected override void OnLaunched(LaunchActivatedEventArgs e)
{
    Frame rootFrame = Window.Current.Content as Frame;

    // Do not repeat app initialization when the Window already has content,
    // just ensure that the window is active
    if (rootFrame == null)
    {
        // Create a Frame to act as the navigation context and navigate to the first page
        rootFrame = new Frame();

        rootFrame.NavigationFailed += OnNavigationFailed;

        if (e.PreviousExecutionState == ApplicationExecutionState.Terminated)
        {
            //TODO: Load state from previously suspended application
        }

        // Place the frame in the current Window
        Window.Current.Content = rootFrame;
    }

    if (e.PrelaunchActivated == false)
    {
        if (rootFrame.Content == null)
        {
            // When the navigation stack isn't restored navigate to the first page,
            // configuring the new page by passing required information as a navigation
            // parameter
            rootFrame.Navigate(typeof(MainPage), e.Arguments);
        }
        // Ensure the current window is active
        Window.Current.Activate();

        // Extend acrylic
        ExtendAcrylicIntoTitleBar();
    }
}

また、通常はタイトル バーに自動的に表示されるアプリのタイトルを、CaptionTextBlockStyle を使用した TextBlock で描画する必要もあります。 詳しくは、「タイトル バーのカスタマイズ」をご覧ください。

推奨と非推奨

• 一時的なサーフェスにはアクリルを使用してください。
• シームレスなエクスペリエンスを実現するには、アプリの周囲とわずかにブレンドするようにして、アクリルをアプリの 1 つ以上の端にまで拡張してください。
• アプリの大きな背景サーフェスにデスクトップ アクリルを配置しないでください。
• 複数のアクリル ウィンドウを隣接するように配置しないでください。このようにすると、望ましくない継ぎ目が表示されます。
• アクリル サーフェスの上には、アクセントカラーのテキストを配置しないでください。

アクリルをどのように設計したか

アクリルの主要なコンポーネントを微調整して、ユニークな外観とプロパティを作成しました。 設計の開始時には透明度、ぼかし、ノイズを使い、平坦なサーフェスに視覚的な奥行きとディメンションを追加しました。 除外ブレンド モード レイヤーを追加して、アクリルの背景に配置される UI のコントラストと見やすさを確保しました。 最後に、ユーザーの個性を反映できるように、色の濃淡を追加しました。 次のレイヤーを組み合わせることで、新しくて使いやすい素材が生みだされます。

アクリルのレシピ: 背景、ぼかし、除外ブレンド、色/濃淡のオーバーレイ、ノイズ

サンプル コードを入手する

• WinUI 2 ギャラリー のサンプル - 対話型形式ですべての XAML コントロールを表示します。

関連記事

Fluent Design の概要