Liquid Glass デザインシステム（iOS 26） は何をしますか？
Apple の Liquid Glass を実装するためのパターン集です。これは背後にあるコンテンツをぼかし、周囲の色や光を反射し、タッチやポインタ操作に反応する動的なマテリアルです。SwiftUI、UIKit、WidgetKit の統合をカバーします。
アクティベーションのタイミング
- iOS 26以降の新しいデザイン言語でアプリを構築・更新する場合
- ガラススタイルのボタン、カード、ツールバー、コンテナを実装する場合
- ガラス要素間のモーフィングトランジションを作成する場合
- ウィジェットに Liquid Glass エフェクトを適用する場合
- 既存のぼかし/マテリアル効果を新しい Liquid Glass API に移行する場合
コアパターン — SwiftUI
基本的なガラス効果
任意のビューに Liquid Glass を追加する最も簡単な方法:
Text("Hello, World!")
.font(.title)
.padding()
.glassEffect() // デフォルト: レギュラーバリアント、カプセル形状
形状と色合いのカスタマイズ
Text("Hello, World!")
.font(.title)
.padding()
.glassEffect(.regular.tint(.orange).interactive(), in: .rect(cornerRadius: 16.0))
主なカスタマイズオプション:
.regular— 標準的なガラス効果.tint(Color)— 強調表示のための色合いを追加.interactive()— タッチやポインタ操作に反応- 形状:
.capsule（デフォルト）、.rect(cornerRadius:)、.circle
ガラスボタンスタイル
Button("クリック") { /* アクション */ }
.buttonStyle(.glass)
Button("重要") { /* アクション */ }
.buttonStyle(.glassProminent)
複数要素のための GlassEffectContainer
複数のガラスビューは、パフォーマンスとモーフィングのために常にコンテナでラップします:
GlassEffectContainer(spacing: 40.0) {
HStack(spacing: 40.0) {
Image(systemName: "scribble.variable")
.frame(width: 80.0, height: 80.0)
.font(.system(size: 36))
.glassEffect()
Image(systemName: "eraser.fill")
.frame(width: 80.0, height: 80.0)
.font(.system(size: 36))
.glassEffect()
}
}
spacing パラメータはマージ距離を制御します。近い要素ほどガラス形状が融合します。
ガラス効果の統合
glassEffectUnion を使用して複数のビューを単一のガラス形状に結合:
@Namespace private var namespace
GlassEffectContainer(spacing: 20.0) {
HStack(spacing: 20.0) {
ForEach(symbolSet.indices, id: \.self) { item in
Image(systemName: symbolSet[item])
.frame(width: 80.0, height: 80.0)
.glassEffect()
.glassEffectUnion(id: item < 2 ? "group1" : "group2", namespace: namespace)
}
}
}
モーフィングトランジション
ガラス要素の出現/消失時にスムーズなモーフィングを作成:
@State private var isExpanded = false
@Namespace private var namespace
GlassEffectContainer(spacing: 40.0) {
HStack(spacing: 40.0) {
Image(systemName: "scribble.variable")
.frame(width: 80.0, height: 80.0)
.glassEffect()
.glassEffectID("pencil", in: namespace)
if isExpanded {
Image(systemName: "eraser.fill")
.frame(width: 80.0, height: 80.0)
.glassEffect()
.glassEffectID("eraser", in: namespace)
}
}
}
Button("切り替え") {
withAnimation { isExpanded.toggle() }
}
.buttonStyle(.glass)
サイドバーの下への水平スクロールの拡張
水平スクロールのコンテンツをサイドバーやインスペクタの下に拡張するには、ScrollView のコンテンツがコンテナの先頭/末尾の端に達するようにします。レイアウトが端まで達すると、システムが自動的にサイドバー下のスクロール動作を処理します。追加の修飾子は不要です。
コアパターン — UIKit
基本的な UIGlassEffect
let glassEffect = UIGlassEffect()
glassEffect.tintColor = UIColor.systemBlue.withAlphaComponent(0.3)
glassEffect.isInteractive = true
let visualEffectView = UIVisualEffectView(effect: glassEffect)
visualEffectView.translatesAutoresizingMaskIntoConstraints = false
visualEffectView.layer.cornerRadius = 20
visualEffectView.clipsToBounds = true
view.addSubview(visualEffectView)
NSLayoutConstraint.activate([
visualEffectView.centerXAnchor.constraint(equalTo: view.centerXAnchor),
visualEffectView.centerYAnchor.constraint(equalTo: view.centerYAnchor),
visualEffectView.widthAnchor.constraint(equalToConstant: 200),
visualEffectView.heightAnchor.constraint(equalToConstant: 120)
])
// contentView にコンテンツを追加
let label = UILabel()
label.text = "Liquid Glass"
label.translatesAutoresizingMaskIntoConstraints = false
visualEffectView.contentView.addSubview(label)
NSLayoutConstraint.activate([
label.centerXAnchor.constraint(equalTo: visualEffectView.contentView.centerXAnchor),
label.centerYAnchor.constraint(equalTo: visualEffectView.contentView.centerYAnchor)
])
複数要素のための UIGlassContainerEffect
let containerEffect = UIGlassContainerEffect()
containerEffect.spacing = 40.0
let containerView = UIVisualEffectView(effect: containerEffect)
let firstGlass = UIVisualEffectView(effect: UIGlassEffect())
let secondGlass = UIVisualEffectView(effect: UIGlassEffect())
containerView.contentView.addSubview(firstGlass)
containerView.contentView.addSubview(secondGlass)
スクロール端効果
scrollView.topEdgeEffect.style = .automatic
scrollView.bottomEdgeEffect.style = .hard
scrollView.leftEdgeEffect.isHidden = true
ツールバーのガラス統合
let favoriteButton = UIBarButtonItem(image: UIImage(systemName: "heart"), style: .plain, target: self, action: #selector(favoriteAction))
favoriteButton.hidesSharedBackground = true // 共有ガラス背景をオプトアウト
コアパターン — WidgetKit
レンダリングモードの検出
struct MyWidgetView: View {
@Environment(\.widgetRenderingMode) var renderingMode
var body: some View {
if renderingMode == .accented {
// アクセントモード: 白色着色、テーマ付きガラス背景
} else {
// フルカラーモード: 標準表示
}
}
}
視覚階層のためのアクセントグループ
HStack {
VStack(alignment: .leading) {
Text("タイトル")
.widgetAccentable() // アクセントグループ
Text("サブタイトル")
// プライマリグループ（デフォルト）
}
Image(systemName: "star.fill")
.widgetAccentable() // アクセントグループ
}
アクセントモードでの画像レンダリング
Image("myImage")
.widgetAccentedRenderingMode(.monochrome)
コンテナ背景
VStack { /* コンテンツ */ }
.containerBackground(for: .widget) {
Color.blue.opacity(0.2)
}
主要な設計判断
| 判断 | 根拠 |
|---|---|
| GlassEffectContainer によるラップ | パフォーマンス最適化、ガラス要素間のモーフィングを有効化 |
spacing パラメータ | マージ距離を制御 — 要素がどの程度近いと融合するかを微調整 |
@Namespace + glassEffectID | ビュー階層の変更時にスムーズなモーフィングトランジションを有効化 |
interactive() 修飾子 | タッチ/ポインタ操作への反応を明示的にオプトイン — すべてのガラスが応答する必要はない |
| UIKit の UIGlassContainerEffect | 一貫性のための SwiftUI と同じコンテナパターン |
| ウィジェットのアクセントレンダリングモード | ユーザーが着色ホーム画面を選択した場合、システムが着色ガラスを適用 |
ベストプラクティス
- 複数の兄弟ビューにガラスを適用する場合は、常に GlassEffectContainer を使用 — モーフィングを有効にし、レンダリングパフォーマンスを向上
.glassEffect()は、他の外観修飾子（frame、font、padding）の後に適用.interactive()は、ユーザーの操作に応答する要素（ボタン、切り替え可能なアイテム）にのみ使用- コンテナ内の spacing は慎重に選択 — ガラス効果が融合するタイミングを制御
- ビュー階層を変更する際は
withAnimationを使用 — スムーズなモーフィングトランジションを有効化 - 異なる外観（ライトモード、ダークモード、アクセント/着色モード）でテスト
- アクセシビリティのコントラストを確保 — ガラス上のテキストは読みやすくなければならない
避けるべきアンチパターン
- GlassEffectContainer なしで複数の独立した
.glassEffect()ビューを使用する - ガラス効果を入れ子にしすぎる — パフォーマンスと視覚的明瞭さが低下する
- すべてのビューにガラスを適用する — インタラクティブな要素、ツールバー、カードに限定
- UIKit で角丸を使用する際に
clipsToBounds = trueを忘れる - ウィジェットのアクセントレンダリングモードを無視する — 着色ホーム画面の外観が崩れる
- ガラスの背後に不透明な背景を使用する — 半透明効果が損なわれる
使用すべきタイミング
- iOS 26 デザインのナビゲーションバー、ツールバー、タブバー
- フローティングアクションボタンやカードスタイルのコンテナ
- 視覚的な奥行きとタッチフィードバックが必要なインタラクティブコントロール
- システムの Liquid Glass 外観と統合するウィジェット
- 関連するUI状態間のモーフィングトランジション