UE5 UMG Backdrop Blur (背景ブラー) 完全ガイド (Modal Dialog / Performance)

1Backdrop Blur ウィジェットとは

Backdrop Blur（バックドロップ ブラー）は、UE5 UMG の標準ウィジェットの 1 つで、その背後にあるコンテンツをガウシアンブラーで描画します。iOS / macOS のフロスト ガラス UI のような効果を、簡単に作れます。

ポーズメニュー、モーダル ダイアログ、設定画面のオーバーレイなど、UI を前面に出して背景の情報量を一時的に下げたい場面で重宝します。

2使い方の基本

1. UMG エディタの Palette から Common → Backdrop Blur をドラッグ
2. Canvas Panel に配置、全画面サイズに広げる（Anchor: Full）
3. Details パネルで Blur Strength を調整（例: 10–30）
4. 子ウィジェットとして暗くするための Image（半透明黒）や TextBlock を入れる

3主要プロパティ

4典型的なモーダル ダイアログ実装

WBP_ModalDialog（フル画面ウィジェット）
└── Canvas Panel
    └── Backdrop Blur (Anchor: Full, Blur Strength: 20)
        └── Overlay
            ├── Image (半透明黒, Alpha 0.4)        ← 暗転
            └── Vertical Box (中央寄せ)
                ├── Text "本当に終了しますか？"
                ├── Horizontal Box
                │   ├── Button "Yes"
                │   └── Button "No"

Blueprint から表示

[On Clicked - Quit Button]
   → [Create Widget]   Class: WBP_ModalDialog
   → [Add to Viewport]
   → [Set Input Mode UI Only]
   → [Set Game Paused]  true

5Blur Strength の見た目比較

6シェーダの仕組み

Backdrop Blur は内部的に Separable Gaussian Blur を 2 パス（水平＋垂直）で適用します。各パスでサンプリング回数が Blur Strength に応じて増減し、強度が高いほど GPU の Bandwidth 消費が増えます。

Slate レンダリングパイプラインの一部として実行され、背景レンダーターゲットをコピー → ブラー → 子要素を上に描画という流れ。

7Performance Note

8モバイル向けの軽量化テクニック

1. Half Resolution Blur: r.Slate.BlurBackground.DownsampleAmount=2 で半解像度
2. Blur Strength を 10 以下に
3. 常時表示しない。モーダル時のみ Add / 閉じたら Remove
4. 静止画キャプチャ＋ガウシアンブラー後の Image で代替（動かないなら十分）
5. 背景を単色 + 透明度で済ます場合は Backdrop Blur 不要

; DefaultEngine.ini
[/Script/SlateRHIRenderer.SlateRHIRendererSettings]
; モバイル時に半解像度ブラー
r.Slate.BlurBackground.DownsampleAmount=2

9iOS / Android との比較（OS ネイティブ）

UE5 の Backdrop Blur は OS ネイティブほど最適化されていないため、モバイルでは慎重な使用を。

10Apply Alpha Blur オプション

子要素に透明部分がある場合、その透明領域もブラーするかどうかを制御します:

• OFF (既定): 背景のみブラー、子要素はクリスプに描画
• ON: 子要素のアルファエッジもブラー（境界がソフト）

11C++ から動的に

// MyWidget.cpp
#include "Components/BackgroundBlur.h"

if (UBackgroundBlur* Blur = Cast<UBackgroundBlur>(GetWidgetFromName(TEXT("Backdrop"))))
{
    Blur->SetBlurStrength(20.0f);
    Blur->SetApplyAlphaToBlur(true);
    Blur->SetCornerRadius(FVector4(16, 16, 16, 16));
}

12アニメーションで Fade In

UMG Animation で Blur Strength を 0 → 20 にトゥイーンすると、背景がじんわりぼやけていく演出が作れます:

1. WBP の Animations タブ → 新規 Animation
2. Track に Backdrop Blur を追加
3. Blur Strength を 0 秒 = 0, 0.5 秒 = 20 にキーフレーム
4. Blueprint の Play Animation で再生

13トレンド: モーダル UI でのブラー

2020 年代後半の UI トレンド「Glassmorphism」では、Backdrop Blur + 半透明白 + 細い枠線が定番の組み合わせ:

WBP_GlassCard
└── Backdrop Blur (Strength 15, Corner Radius 16)
    └── Overlay
        ├── Image (白 + Alpha 0.15)        ← 薄い白を重ね
        ├── Border (1px 白枠, Alpha 0.3)   ← 細い枠線
        └── Vertical Box (実コンテンツ)

14FAQ

Q: ブラーが効かない
A: ① Project Settings → Rendering → Forward Shading が ON だと一部効果が崩れる、② モバイルプレビューで Slate のブラー無効化設定、③ 背景が透明（ビューポート外）だとブラー対象が無い、を順に確認。

Q: モバイルで fps が落ちる
A: Blur Strength を 10 以下に、Half Resolution Blur を有効化、それでも厳しいなら静止背景＋プリブラー画像で代替。

Q: 角丸ブラーがうまく出ない
A: Corner Radius は UE 5.1+ で安定。古いバージョンは Material で Round Mask を当てるか、Border ウィジェットで角丸を作る回避策。

Q: VR でブラーを使いたい
A: 両眼レンダリングのコピーが発生し非常に重い。原則使わない。Static な Cubemap ブラーや、UI を World Space に置いて空間的に距離をとる工夫を。