この内容は古いバージョンです。最新バージョンを表示するには、戻るボタンを押してください。
バージョン:6
ページ更新者:T
更新日時:2026-06-11 07:12:00

タイトル: ウィジェットの背景ブラーについて
SEOタイトル: UE5 UMG Backdrop Blur (背景ブラー) 完全ガイド (Modal Dialog / Performance)

この記事の要点
  • 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+）短時間OKStrength ≤ 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特徴
iOSUIBlurEffect (UIKit)OS レイヤーでハードウェア最適化、超低コスト
macOSNSVisualEffectView同上
AndroidRenderEffect.createBlurEffect (12+)古い端末では不可
UE5Slate 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 に置いて空間的に距離をとる工夫を。