【Swift】Materialとは？使い方や活用シーン、注意点までわかりやすく解説

2025年9月30日 2025年9月30日

SwiftUIで「半透明の背景」を表現したいときに便利なのが Material です。

ガラス越しのように後ろのコンテンツがぼんやり透けて見えるデザインを、簡単に実装できるのが特徴です。

iOSやmacOSのシステムUIでもよく使われていて、ボタンやメニュー、シートの背景などで見かけることが多いはずです。

この記事ではMaterialとは何か、具体的な使い方、主な種類、活用時の注意点までわかりやすく解説します。

Materialとは？

MaterialはSwiftUIで用意されている半透明エフェクト付きの背景スタイルのことです。

例えるなら「すりガラス」や「ぼかしガラス」のような効果で、背景のコンテンツを完全には隠さずにうっすら透けさせることで、見た目に奥行きや立体感を与えられます。

UIKitでいうところの UIVisualEffectView に近い役割ですが、SwiftUIでは .background(Material.regular) のようにシンプルに指定できます。

具体例：Materialを使った背景

具体例で見ていきましょう。

下記はMaterialを背景に設定した例です。

import SwiftUI

struct ContentView: View {
    var body: some View {
        ZStack {
            // 背景
            Image("background")
                .resizable()
                .scaledToFill()
                .ignoresSafeArea()

            VStack{
                // ultraThinMaterial
                Text("ultraThinMaterial")
                    .font(.title)
                    .bold()
                    .padding()
                    .background(.ultraThinMaterial)
                    .padding()
                // regularMaterial
                Text("regularMaterial")
                    .font(.title)
                    .bold()
                    .padding()
                    .background(.regularMaterial)
                    .padding()
                // ultraThickMaterial
                Text("ultraThickMaterial")
                    .font(.title)
                    .bold()
                    .padding()
                    .background(.ultraThickMaterial)
                    .padding()
            }
        }
    }
}

import SwiftUI

struct ContentView: View {

var body: some View {

ZStack {

// 背景

Image("background")

.resizable()

.scaledToFill()

.ignoresSafeArea()

VStack{

// ultraThinMaterial

Text("ultraThinMaterial")

.font(.title)

.bold()

.padding()

.background(.ultraThinMaterial)

.padding()

// regularMaterial

Text("regularMaterial")

.font(.title)

.bold()

.padding()

.background(.regularMaterial)

.padding()

// ultraThickMaterial

Text("ultraThickMaterial")

.font(.title)

.bold()

.padding()

.background(.ultraThickMaterial)

.padding()

}

この例では、背景にグラデーションの画像を敷いた上で、テキストに .background(.ultraThinMaterial)や.background(.regularMaterial) などぼかし具合が異なるMaterialをいくつか適用しています。

種類によって背景が透ける度合いが違いますが、テキストの背景が半透明になり、後ろの画像がぼんやり透けて見えることがお分かりいただけるかと思います。

システム標準の「ガラス風デザイン」をすぐに使えるのがポイントです。

Materialの種類

SwiftUIには複数のMaterialが用意されていて、透け方やぼかし具合が違います。

種類	特徴
`.ultraThinMaterial`	もっとも透明度が高く、背景がよく透ける
`.thinMaterial`	薄めのぼかし
`.regularMaterial`	バランスが取れた一般的なぼかし
`.thickMaterial`	透け感が少なく、しっかり隠れる
`.ultraThickMaterial`	ほぼ不透明で背景を大きく隠す

基本的には .regularMaterial を使うことが多いですが、UIの目的やデザインによって薄め・濃いめを使い分けます。

たとえば、情報をしっかり見せたいボタンやカードには thickMaterial を、背景をできるだけ透かしたい装飾的な要素には ultraThinMaterial を選ぶのがおすすめです。

指定の仕方

Material を背景に指定する方法はいくつかあります。ポイントは 「どのシェイプに適用するか」 を意識することです。

.background(.material, in:)を使う方法（推奨）

iOS 17 以降では、次のように書くのが推奨です。

Text("Materialの指定例")
    .padding()
    .background(.regularMaterial, in: RoundedRectangle(cornerRadius: 16))

Text("Materialの指定例")

.padding()

.background(.regularMaterial, in: RoundedRectangle(cornerRadius: 16))

in: にシェイプを渡すことで、その形に合わせてマテリアル効果が切り抜かれます。

角丸やカプセル型などをスッキリと表現できる最新の書き方です。

.background(.material) + .clipShape を使う方法

従来の書き方では、まず背景にマテリアルを適用し、あとから形で切り抜く方法が一般的です。

Text("従来の書き方")
    .padding()
    .background(.thinMaterial)
    .clipShape(Capsule())

Text("従来の書き方")

.padding()

.background(.thinMaterial)

.clipShape(Capsule())

この方法でも同じように透けた背景が作れます。

ただ、background(_:in:) の方がシンプルで読みやすいので、できるだけ新しい書き方を使うのがおすすめです。

活用シーン

Materialは様々な場面で役立ちます。

写真やカラフルな背景の上にテキストやボタンを配置したい時
モーダルシートやポップアップの背景を自然に浮かせたい時
タブバーやナビゲーションバーを「透けさせたい」時
ウィジェットやカードUIに奥行きを出したい時

特に「背景の上に新しいUIを重ねたいけど、背景を完全に隠したくない」というときに便利です。

注意点

便利なMaterialですが、使う際にはいくつか注意点もあります。

iOS 15 / macOS 12 以降が対象
Materialは比較的新しいAPIなので、古いOSでは使えません。
暗い背景と明るい背景で見え方が変わる
システムが自動で調整してくれるものの、背景によっては文字が読みにくくなることがあります。
必要に応じて .foregroundStyle(.primary) や影を組み合わせましょう。
多用しすぎると可読性が下がる
背景が透けすぎると、前景のテキストやアイコンが埋もれてしまいます。
強調したい部分はあえて不透明な色を使うのも大切です。