【Swift】.presentationBackground(_:)とは？意味や使い方をわかりやすく解説

2025年8月10日 2025年8月10日

シートUIの背景をもっと自由にデザインしたい——ブランドカラーのグラデーションを敷きたい、半透明のマテリアルで奥の画面を透かしたい、背景に写真を使いたい。

そんなときに役立つのが .presentationBackground(_:) です。

.sheet などのシート系プレゼンテーションに組み合わせることで、色・グラデーション・マテリアル・任意のViewを背景に設定できます。

.presentationBackground(_:)とは？

.presentationBackground(_:) は、シートなどの背景を指定するためのSwiftUIの修飾子です。

iOS 16以降で利用でき、.presentationDetentsや .presentationBackgroundInteractionと組み合わせると、見た目・高さ・背面操作までまとめてデザインできます。

この修飾子には、背景の指定方法が2パターンあります。

ひとつは「色やマテリアル、グラデーションなど、形に塗るためのスタイル（ShapeStyle）を直接渡す方法」。

もうひとつは「画像や複雑なレイアウトなど、自分で作った好きなViewを渡す方法」です。

ShapeStyleを使う方法
Color や Material、LinearGradient など、すでに用意されている塗りつぶしのスタイルをそのまま背景にできます。手軽に指定したいときに便利です。
任意のViewを使う方法
背景画像を敷いたり、複数の要素を重ねたレイアウトなど、もっと自由に背景を作りたいときに使います。

使い方

最も簡単な方法は、.sheet 内で Color や Material を指定することです。

マテリアルを使うと背面がうっすら透け、軽いモーダル感を演出できます。

struct ContentView: View {
    @State private var show = false
    var body: some View {
        Button("シートを開く") { show = true }
            .sheet(isPresented: $show) {
                SheetView()
                    .presentationDetents([.medium, .large])
                    .presentationBackground(.ultraThinMaterial)
            }
    }
}

struct SheetView: View {
    var body: some View {
        VStack(spacing: 16) {
            Text("半透明の背景で軽やかな印象")
            Spacer()
        }
        .padding()
    }
}

struct ContentView: View {

@State private var show = false

var body: some View {

Button("シートを開く") { show = true }

.sheet(isPresented: $show) {

SheetView()

.presentationDetents([.medium, .large])

.presentationBackground(.ultraThinMaterial)

}

struct SheetView: View {

var body: some View {

VStack(spacing: 16) {

Text("半透明の背景で軽やかな印象")

Spacer()

}

.padding()

}

ポイント

Material は環境に応じて透過やコントラストを自動調整します。
単色を使う場合は .presentationBackground(Color(.systemBackground)) のように指定できます。

具体例

1. グラデーション背景

ブランドカラーを生かしたグラデーションを背景にできます。

.presentationBackground(
    LinearGradient(colors: [.indigo, .purple],
                   startPoint: .top,
                   endPoint: .bottom)
)

.presentationBackground(

LinearGradient(colors: [.indigo, .purple],

startPoint: .top,

endPoint: .bottom)

)

2. 画像＋マテリアル

写真をそのまま背景にすると、上に置いた文字やボタンが見えにくくなることがあります。

そこで、写真の上に半透明の「すりガラス」のような層（マテリアル）をかぶせると、背景が少しぼやけてコントラストが上がり、文字が読みやすくなります。

.presentationBackground {
    ZStack {
        Image("bg")
            .resizable()
            .scaledToFill()
        Rectangle().fill(.ultraThinMaterial)
    }
}

.presentationBackground {

ZStack {

Image("bg")

.resizable()

.scaledToFill()

Rectangle().fill(.ultraThinMaterial)

}

3. デテントと連動した背景切り替え

高さに応じて背景の“重さ”を変えることもできます。

.presentationBackground(detent == .large ? .regularMaterial : .ultraThinMaterial)

1 2	.presentationBackground(detent == .large ? .regularMaterial : .ultraThinMaterial)

このコードでは、

シートが 大きいサイズ（.large） のとき
→ 少し濃い regularMaterial を背景にして、しっかりと前面に意識を向けさせる。
それ以外のとき（中サイズや小サイズ）
→ より軽やかに透ける ultraThinMaterial を背景にする。

こうすることで、シートの高さが変わった瞬間に背景の雰囲気も変わり、ユーザーは「いま重いモーダルなのか、軽いモーダルなのか」を視覚的に感じ取りやすくなります。

活用シーン

.presentationBackground(_:) は、モーダルの見え方をコントロールしたいときに特に効果的です。

背景のデザインを工夫することで、軽やかさや没入感、ブランド感を演出できます。

検索やフィルタの補助パネル：軽い半透明マテリアルで、背面を感じさせながら操作。
ミニプレイヤーやコメントUI：ブランドカラーのグラデーションで一体感を演出。
プレビュー表示：背景画像＋マテリアルで視覚的階層を強調。
iPadの作業UI：広い画面で主従関係を背景の濃淡で示す。

注意点

.presentationBackground(_:)は便利な一方で、いくつか設計上の落とし穴もあります。

意図したデザインや操作感を実現するため、次のポイントを押さえておきましょう。

対象：主に .sheet などのシート系で有効。fullScreenCover は背景自体が画面なので意図通りにならない場合があります。
可読性：背景が凝るほど文字が読みにくくなるので、コントラストやアクセシビリティを考慮します。
パフォーマンス：高解像度画像や重いエフェクトは描画負荷が高くなるため控えめに。
セーフエリア/キーボード：実際の表示領域はシートの境界に依存するため、実機で回転や入力時も確認しましょう。
背面との整合性：背景が透けているのにタップできないと違和感があります。必要に応じて .presentationBackgroundInteraction も設定しましょう！

まとめ

.presentationBackground(_:) を使うと、シートの雰囲気を一瞬で変えられるようになります。

まずは Material や Color で簡単に試し、必要に応じてグラデーションや画像＋マテリアルでブランド感を強化するのがおすすめです。

.presentationDetents や .presentationBackgroundInteraction と組み合わせれば、見た目・高さ・背面操作を一貫してデザインできるはずです！

参考リンク

presentationBackground(_:) | Apple Developer Documentation
Material | Apple Developer Documentation
presentationBackgroundInteraction(_:) | Apple Developer Documentation
presentationDetents| Apple Developer Documentation

【Swift】.presentationBackground(_:)とは？意味や使い方をわかりやすく解説

.presentationBackground(_:)とは？

使い方

具体例

1. グラデーション背景

2. 画像＋マテリアル

3. デテントと連動した背景切り替え

活用シーン

注意点

まとめ

最近の投稿

最近のコメント

アーカイブ

カテゴリー