ios-liquid-glass

iOS Liquid Glass リファレンス

Liquid Glass デザインシステム（iOS 26 以降）の API リファレンスです。グラスエフェクト、コンテナ、モーフィングトランジション、および関連するシステムの動作について説明します。システムが提供する機能を記載していますが、デザインの方向性は自由です。

使用する場面

• グラスマテリアル、glassEffect モディファイア、または GlassEffectContainer を実装する場合
• システムのグラスを使用するナビゲーションサーフェス（タブ、ツールバー、シート）
• グラスがアクセシビリティ設定にどのように適応するかを確認する場合
• Icon Composer でアプリアイコンを作成する場合

Apple が示すデザイン原則

Apple は Liquid Glass の原則を 3 つ説明しています（指針であり、必須要件ではありません）。

原則	説明
階層	コントロールはコンテンツの上に浮かびます。グラスはコンテンツを覆い隠すのではなく、枠取ります。
調和	ソフトウェアのデザインをハードウェアと調和させます。同心円状の角や流れるようなジェスチャーなどが含まれます。
一貫性	iPhone、iPad、Mac にわたって適応し、同じアイデンティティを保ちながら、状況に応じた表現をします。

知っておくべき機能上の制約が 1 つあります。グラスはナビゲーション／コントロールレイヤー向けに設計されています。コンテンツサーフェスに適用すると、サンプリングモデルの効果が損なわれます（下記のコンテナを参照）。

Liquid Glass のコア API

基本的なグラスエフェクト

import SwiftUI

// Simple glass application
Text("Action")
    .padding()
    .glassEffect() // .regular variant, .capsule shape

// With explicit parameters
Button("Confirm") { }
    .padding()
    .glassEffect(.regular, in: RoundedRectangle(cornerRadius: 12), isEnabled: true)

グラスのバリアント

バリアント	使用例
.regular	ツールバー、ナビゲーションバー、タブバー、標準コントロール
.clear	メディア（写真、マップ、ビデオ）上に配置するフローティングコントロール
.identity	条件に応じた無効化：glassEffect(isActive ? .regular : .identity)

グラスのモディファイア

// Semantic tinting
.glassEffect(.regular.tint(.accentColor))

// Interactive behaviors (scaling, shimmer, touch illumination)
.glassEffect(.regular.interactive())

// Combined
.glassEffect(.regular.tint(.blue).interactive())

カスタムシェイプ

// Standard shapes
.glassEffect(.regular, in: .capsule)
.glassEffect(.regular, in: .circle)
.glassEffect(.regular, in: RoundedRectangle(cornerRadius: 16))

// Container-concentric (matches device/container corners)
.glassEffect(.regular, in: .rect(cornerRadius: .containerConcentric))

GlassEffectContainer とモーフィング

コンテナの設定

グラスはほかのグラスをサンプリングできません。複数のグラス要素にはコンテナを使用します。

GlassEffectContainer(spacing: 30) {
    HStack(spacing: 20) {
        ForEach(actions) { action in
            Button(action.title, systemImage: action.icon) { }
                .frame(width: 44, height: 44)
                .glassEffect(.regular.interactive())
        }
    }
}

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

struct ExpandableActions: View {
    @State private var isExpanded = false
    @Namespace private var namespace

    var body: some View {
        GlassEffectContainer(spacing: 30) {
            VStack(spacing: 30) {
                if isExpanded {
                    ActionButton(icon: "rotate.right")
                        .glassEffectID("rotate", in: namespace)
                }

                HStack(spacing: 30) {
                    if isExpanded {
                        ActionButton(icon: "slider.horizontal.3")
                            .glassEffectID("adjust", in: namespace)
                    }

                    Button {
                        withAnimation(.bouncy) { isExpanded.toggle() }
                    } label: {
                        Image(systemName: isExpanded ? "xmark" : "plus")
                            .frame(width: 56, height: 56)
                    }
                    .glassEffect(.regular.tint(.accentColor).interactive())
                    .glassEffectID("toggle", in: namespace)

                    if isExpanded {
                        ActionButton(icon: "crop")
                            .glassEffectID("crop", in: namespace)
                    }
                }

                if isExpanded {
                    ActionButton(icon: "wand.and.stars")
                        .glassEffectID("enhance", in: namespace)
                }
            }
        }
    }
}

ナビゲーションパターン

タブバー（フローティング）

TabView {
    Tab("Home", systemImage: "house") {
        HomeView()
    }

    Tab("Search", systemImage: "magnifyingglass") {
        SearchView()
    }

    Tab("Profile", systemImage: "person") {
        ProfileView()
    }
}
// Tab bar now floats, reacts to background, collapses on scroll

グループ化したツールバー

.toolbar {
    ToolbarItemGroup(placement: .topBarTrailing) {
        Button("Edit", systemImage: "pencil") { }
        Button("Share", systemImage: "square.and.arrow.up") { }
    }

    ToolbarSpacer(.flexible, placement: .topBarTrailing)

    ToolbarItem(placement: .topBarTrailing) {
        Button("Done", systemImage: "checkmark") { }
            .tint(.accentColor)
    }
}

モーフィングを使ったシート

struct ContentView: View {
    @State private var showSettings = false
    @Namespace private var namespace

    var body: some View {
        NavigationStack {
            ContentView()
                .toolbar {
                    ToolbarItem(placement: .topBarTrailing) {
                        Button("Settings", systemImage: "gear") {
                            showSettings = true
                        }
                        .matchedTransitionSource(id: "settings", in: namespace)
                    }
                }
                .sheet(isPresented: $showSettings) {
                    SettingsView()
                        .navigationTransition(.zoom(sourceID: "settings", in: namespace))
                        .presentationDetents([.medium, .large])
                }
        }
    }
}

SF Symbols のエフェクト

Image(systemName: "checkmark.circle")
    .symbolEffect(.drawOn, value: isComplete)

Image(systemName: "heart.fill")
    .symbolEffect(.bounce, value: isFavorite)

ハプティクス API

import UIKit

// Impact feedback
let generator = UIImpactFeedbackGenerator(style: .medium)
generator.impactOccurred()

// Selection feedback
let selection = UISelectionFeedbackGenerator()
selection.selectionChanged()

// Success/error
let notification = UINotificationFeedbackGenerator()
notification.notificationOccurred(.success)

アクセシビリティの動作

グラスの自動適応

グラスは次の設定に自動で適応します。

• 透明度を下げる：曇りを強めます
• コントラストを上げる：はっきりした境界線を表示します
• 視差効果を減らす：アニメーションを抑えます

手動での確認

@Environment(\.accessibilityReduceTransparency) var reduceTransparency
@Environment(\.accessibilityReduceMotion) var reduceMotion

var animation: Animation? {
    reduceMotion ? nil : .bouncy
}

システム要件：最小 44x44pt のタッチターゲット、アクセシビリティラベル、Dynamic Type のサポート。

リファレンス

Apple の公式ドキュメントへのリンク、WWDC セッション ID、API クイックリファレンステーブルについては、reference.md を参照してください。