liquid-glass

Appleプラットフォーム向けLiquid Glassデザインシステム

WWDC 2025で導入されたAppleのLiquid Glassデザイン言語を使って、SwiftUIアプリを構築、移行します。このスキルでは、iOS 26、iPadOS 26、macOS 26（Tahoe）、watchOS 26、tvOS 26、visionOS 26を対象とします。

重要：最新のドキュメントを使用する

Liquid Glassの機能を実装する際は、必ず最新のApple開発者向けドキュメントを取得してください。OSのベータ版の間にAPIが変更される場合があります。参照する主なドキュメントURL：

• https://developer.apple.com/documentation/SwiftUI/Applying-Liquid-Glass-to-custom-views
• https://developer.apple.com/documentation/swiftui/view/glasseffect(_:in:)
• https://developer.apple.com/documentation/SwiftUI/Landmarks-Building-an-app-with-Liquid-Glass
• https://developer.apple.com/videos/play/wwdc2025/323/（WWDC25セッション：新しいデザインでSwiftUIアプリを構築する）

基本概念

Liquid Glassは、アプリのコンテンツより上に浮かぶナビゲーションレイヤー（ツールバー、タブバー、ボタン、コントロール）専用の、半透明で動的なマテリアルです。リアルタイムで光を曲げて屈折させ、デバイスの動きにスペキュラハイライトで反応し、背景のコンテンツに継続的に適応します。

**コンテンツ自体（リスト、テーブル、メディア、テキストブロック）には、ガラスを適用しないでください。**ガラスを使用するのは、コントロールとナビゲーションのみです。

クイックスタート：主なAPI

1. カスタムビューへのガラスエフェクト

// Basic - capsule shape (default)
Text("Label")
    .padding()
    .glassEffect()

// With shape and style
Image(systemName: "heart.fill")
    .padding()
    .glassEffect(.regular, in: .rect(cornerRadius: 16))

// Tinted glass
Text("Tinted")
    .padding()
    .glassEffect(.regular.tint(.blue))

// Interactive glass (scales, bounces, shimmers on touch - iOS only)
Button("Tap Me") { }
    .glassEffect(.regular.interactive())

2. ガラスのスタイル

スタイル	用途	透明度
.regular	標準的なUI：ツールバー、ボタン、ナビゲーションバー	中
.clear	コンテンツが鮮明で明るい、メディアを多く含む背景	高
.identity	条件に応じてガラスを無効化（アクセシビリティ）	なし

3. GlassEffectContainer（重要）

ガラスはほかのガラスをサンプリングできません。近くにあるガラス要素は、視覚的な一貫性とモーフィングのため、同じコンテナを共有する必要があります。

GlassEffectContainer(spacing: 30.0) {
    Button("Action 1") { }
        .glassEffect()
        .glassEffectID("btn1", in: namespace)

    Button("Action 2") { }
        .glassEffect()
        .glassEffectID("btn2", in: namespace)
}

4. モーフィングトランジション

GlassEffectContainer内で@NamespaceとglassEffectIDを使うと、ガラスを滑らかにモーフィングできます：

@Namespace private var namespace
@State private var isExpanded = false

GlassEffectContainer(spacing: 16) {
    if isExpanded {
        ForEach(items) { item in
            ItemView(item: item)
                .glassEffect(.regular, in: .rect(cornerRadius: 24))
                .glassEffectID(item.id, in: namespace)
        }
    }
    Button {
        withAnimation { isExpanded.toggle() }
    } label: { Label("Toggle", systemImage: "chevron.down") }
    .buttonStyle(.glass)
    .glassEffectID("toggle", in: namespace)
}

5. 背景拡張エフェクト

ナビゲーション要素（ツールバー、サイドバー、インスペクタ）の背後にある視覚コンテンツを拡張し、ぼかします：

Image(landmark.backgroundImageName)
    .resizable()
    .aspectRatio(contentMode: .fill)
    .frame(minWidth: 0, maxWidth: .infinity, minHeight: 0, maxHeight: .infinity)
    .backgroundExtensionEffect()

6. ガラスボタン

// Standard glass button
Button("Action") { }
    .buttonStyle(.glass)

// Prominent glass button (for primary actions)
Button("Save") { }
    .buttonStyle(.glassProminent)

7. ガラスを使ったツールバー

ツールバー項目には、自動的にガラスのスタイルが適用されます。レイアウトにはToolbarSpacerとToolbarItemGroupを使用します：

.toolbar {
    ToolbarSpacer(.flexible)
    ToolbarItem { ShareLink(item: data, preview: preview) }
    ToolbarSpacer(.fixed)
    ToolbarItemGroup {
        Button("Favorite", systemImage: "heart") { }
        Button("Add", systemImage: "plus") { }
    }
    ToolbarItem {
        Button("Info", systemImage: "info") { }
    }
}
.toolbar(removing: .title) // Remove title for clean glass toolbar

8. タブバー

Xcode 26でビルドすると、タブバーには自動的にガラスが適用されます：

TabView {
    Tab("Home", systemImage: "house") { HomeView() }
    Tab("Search", systemImage: "magnifyingglass") { SearchView() }
}
.tabBarMinimizeBehavior(.onScrollDown) // Collapse tab bar on scroll

9. ガラスを使ったシート

高さが一部の範囲に設定されたシートには、自動的にLiquid Glassの背景が適用されます：

.sheet(isPresented: $showSheet) {
    SheetContent()
        .presentationDetents([.medium, .large])
    // Do NOT add .presentationBackground() - system handles it
}

移行ワークフロー（既存のアプリ）

詳しい移行手順については、references/migration-guide.mdを参照してください。

概要：

1. Xcode 26 SDKでコンパイルします。システムコンポーネントには自動的にガラスが適用されます
2. カスタムのツールバー背景（.toolbarBackground）を削除します
3. ナビゲーション要素のカスタムマテリアルをガラスモディファイアに置き換えます
4. グループ化されたガラス要素をGlassEffectContainerで囲みます
5. ヒーロー画像に.backgroundExtensionEffect()を追加します
6. SF Symbolsのバリアントを更新します（iOS 26以降では、circleバリアントからnoneバリアントに変更）
7. アクセシビリティをテストします（透明度を下げる、コントラストを上げる、視差効果を減らす）

プラットフォームに関する考慮事項

プラットフォーム固有の詳細については、references/platform-specifics.mdを参照してください。

主な違い：

• macOS：ガラスボタンを正しく描画するには.tint(.clear)を使用します。編集背景にはMaterialの代わりにWindowBackgroundShapeStyle.windowBackgroundを使用します
• iOS（iPhone）：.interactive()が動作します。レイアウトにはUIDevice.current.userInterfaceIdiomを使用します
• iPadOS：グリッドサイズが大きくなります。サイドバーに対応するタブビュー
• 条件付きコンパイル：プラットフォーム固有のコードには#if os(macOS)／#if os(iOS)を使用します

よくある落とし穴

詳しい落とし穴と解決策については、references/pitfalls-and-solutions.mdを参照してください。

重大な問題：

• GlassEffectContainer の外にあるガラス要素は、視覚効果が一貫しません
• ガラスビューに rotationEffect を適用するとシェイプが変形します。UIGlassEffect を使って UIKit と連携してください
• ガラスを使ったメニューラベルではアニメーションに不具合が生じます。カスタムの ButtonStyle を使ってください
• ヒットテストはコンテンツ上でのみ行われ、ガラス領域では行われません。contentShape() を使って修正してください
• 複数のガラスエフェクトを使うと、複数の CABackdropLayer インスタンス（それぞれにオフスクリーンテクスチャが3つ）が生成されます。コンテナを使ってまとめてください

実例のパターン

Apple の Landmarks サンプルアプリのコードパターン全体については、examples/landmarks-patterns.mdを参照してください。

アーキテクチャのベストプラクティス

1. アプリのルートには、ガラスのサイドバーを備えた NavigationSplitView を使います
2. 詳細カラム内の深い階層へのナビゲーションには NavigationStack を使います
3. データモデルには @Observable を使い、@Environment で注入します
4. FlexibleHeader パターン：スクロールに連動する視差効果でヒーロー画像を引き伸ばします
5. 補足的な詳細パネルには .inspector() を使います
6. グローバル検索には .searchable() を使います（ガラスのスタイルが自動的に適用されます）
7. ツールバーのレイアウトには ToolbarSpacer(.flexible) と ToolbarSpacer(.fixed) を使います
8. ツールバーでは、テキストラベル付きのシンボルベースのボタンを優先します
9. SF Symbol の状態変更には .symbolVariant() モディファイアを使います
10. アイコンのアニメーション付きトランジションには .symbolEffect(.drawOn) を使います