🫨
SwiftUIのMaterial種類と使い分けまとめ
SwiftUIでは、.background(.thinMaterial) のように Material を指定して、背景にぼかし（ブラー）効果を加えることができます。
これにより、前景のコンテンツを際立たせつつ、奥行きや視覚的な階層を自然に演出できます。
Appleは標準で5種類のMaterialを用意しており、それぞれ透明度と視認性に違いがあります。
🧊 Materialの種類と特徴
| Material | 特徴 |
|---|---|
.ultraThinMaterial |
最も透明度が高い。背景がほぼそのまま見える。軽いぼかし。 |
.thinMaterial |
.ultraThinMaterialより少し不透明。背景を活かしつつ軽くぼかす。 |
.regularMaterial |
適度な不透明度。前景（テキストやアイコン）をしっかり視認可能にする。 |
.thickMaterial |
さらに不透明。背景の詳細を隠し、前景をより強調する。 |
.ultraThickMaterial |
最も不透明。背景を完全に隠し、前景要素を際立たせる。 |
🎯 使い分けのポイント
-
背景がシンプルな場合
-
.ultraThinMaterialや.thinMaterial
-
-
背景が複雑な場合 or 前景を強調したい場合
-
.thickMaterialや.ultraThickMaterial
-
背景の見え方と前景の読みやすさのバランスで選ぶのが基本です。
🎨 使用例
Text("Hello, SwiftUI!")
.padding()
.background(.regularMaterial, in: RoundedRectangle(cornerRadius: 10))
この例では、テキストに適度なぼかしをかけつつ、丸みのある背景で柔らかい印象を作っています。
🌗 ダークモードとライトモード対応
Materialはシステムのカラースキーム（ダーク／ライト）に自動適応します。
もし特定のカラースキームを強制したい場合は、
.environment(\.colorScheme, .dark)
のように環境値を指定すればOKです。
🧪 カスタマイズTips
-
.opacity()を追加して透明度を微調整する -
.foregroundStyle()を使って前景の色味を調整する -
.blur(radius:)を併用してぼかし具合をさらに細かく調整する
これらを組み合わせることで、Material表現により深みを出すことも可能です。
Materialを上手に使い分けることで、SwiftUIのUIは一気に洗練された印象になります。背景とのバランス、前景の見せ方を意識しながら、最適なMaterialを選んでいきましょう。
Discussion