過去バージョン

この記事の要点

Backdrop Blur ウィジェットを使うと、その後ろのコンテンツをガウシアンブラーで描画できる Blur Strength（0–100）でぼかし強度、Apply Alpha でアルファ込みのブラー 用途: モーダルダイアログ／一時停止メニュー／ガラス風 UI（Frosted Glass） Performance Cost が高い → モバイルでは控えめに、PC/コンソールでも常時使用は避ける PC/PS5/Xbox/Switch 2 ではほぼ問題ないが、iOS/Android では Half Resolution + 弱めを推奨

Backdrop Blur ウィジェットとは

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

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

使い方の基本

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

主要プロパティ

プロパティ	意味	推奨値
Blur Strength	ブラーのカーネルサイズ	10–30（強すぎると重い）
Apply Alpha Blur	アルファチャンネルもブラー	透明 UI の周辺で true
Corner Radius	角丸ブラー領域	カードUI 等で 8–24
Cursor	マウスカーソル形状	Default
Padding	内側余白	子コンテンツに合わせて

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

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

Blur Strength の見た目比較

値	見た目	性能影響
0	無効（パススルー）	無
1–5	軽くにじむ程度	軽
10–20	明確にぼやける（推奨）	中
30–50	強いぼかし、背景が判別不能	重
100	最大ぼかし	非常に重

シェーダの仕組み

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

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

Performance Note

プラットフォーム	許容範囲	備考
PC（GeForce/RTX）	常時可能	4K で Strength 30 まで余裕
PS5 / Xbox Series X	常時可能	1440p–4K で問題なし
Switch 2	条件付き	Strength ≤ 20 推奨
iOS 上位機（iPhone 14+）	短時間OK	Strength ≤ 15
Android ハイエンド	短時間OK	同上
モバイル中位	非推奨	fps が 30 → 20 に落ちる例多数
VR	常時非推奨	両眼分のコピーが発生し致命的

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

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

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

環境	API	特徴
iOS	UIBlurEffect (UIKit)	OS レイヤーでハードウェア最適化、超低コスト
macOS	NSVisualEffectView	同上
Android	RenderEffect.createBlurEffect (12+)	古い端末では不可
UE5	Slate Backdrop Blur	独自実装、移植性高いがコストは OS ネイティブより高い

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

Apply Alpha Blur オプション

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

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

C++ から動的に

// 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));
}

アニメーションで 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 で再生

トレンド: モーダル 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 (実コンテンツ)

FAQ

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 に置いて空間的に距離をとる工夫を。