アクリル素材

hero image

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

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

ライトテーマでの Acrylic Acrylic in light theme

ダークテーマでの Acrylic Acrylic in dark theme

アクリルと Fluent Design System

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

Some image

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

XAML コントロール ギャラリー アプリを入手する (Microsoft Store)
ソース コード (GitHub) を入手する

アクリル ブレンドの種類

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

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

Background acrylic

In-app acrylic

複数の acrylic サーフェスのレイヤー化を避ける: バックグラウンド acrylic の複数のレイヤーで、混乱のない光 illusions を作成できます。

アクリルの用途

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

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

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

垂直方向のウィンドウ

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

一時的なサーフェス

コンテキストメニュー、flyouts、非モーダルポップアップ、または軽量ウィンドウを含むアプリの場合、特に、これらのサーフェイスがメインアプリウィンドウのフレーム外で描画する場合は、background acrylic を使用することをお勧めします。

Mail app pattern using an informational flyout

多くの XAML コントロールは、既定で acrylic を描画します。 Menuflyoutポップアップ、 AutoSuggestBoxComboBox、および類似したコントロールは、開いている間は acrylic を使用します。

注意

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

使いやすさと適応性

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

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

  • ユーザーが設定パーソナル化色の透明度効果をオフにした場合 > 。
  • バッテリ節約モードがアクティブになっている場合。
  • アプリがローエンドハードウェアで実行される場合。

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

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

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

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

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

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

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

特定の表面を描画するには、他のブラシリソースを適用する場合と同様に、[WinUI 2] テーマリソースのいずれかを要素の背景に適用します。

<Grid Background="{ThemeResource AcrylicBackgroundFillColorDefaultBrush}">

カスタム アクリル ブラシ

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

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

Light theme acrylic swatches

Dark theme acrylic swatches

Luminosity opacity compared to tint opacity

アクリル ブラシを追加するには、濃色テーマ、淡色テーマ、ハイ コントラスト テーマの 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 で描画する必要もあります。 詳しくは、「タイトル バーのカスタマイズ」をご覧ください。

推奨と非推奨

  • 一時的なサーフェイスで acrylic を使用します。
  • シームレスなエクスペリエンスを実現するには、アプリの周囲とわずかにブレンドするようにして、アクリルをアプリの 1 つ以上の端にまで拡張してください。
  • アプリの大規模な背景画面にデスクトップ acrylic を配置しないでください。
  • 複数の acrylic ペインを横に配置しないでください。
  • アクリル サーフェスの上には、アクセントカラーのテキストを配置しないでください。

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

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

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

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

Fluent Design の概要