liquid-glass

Liquid Glass デザイン

Apple の Liquid Glass デザインと HIG を使って、ネイティブの macOS／iOS アプリケーションを構築します。

基本ルール

3 層モデル

┌─────────────────────────────────────────┐
│     GLASS LAYER (Navigation/Controls)   │  ← Glass here ONLY
├─────────────────────────────────────────┤
│         CONTENT LAYER (Your App)        │  ← Never glass here
└─────────────────────────────────────────┘

Glass は、コンテンツの上に浮かぶナビゲーションにのみ使用します。コンテンツ自体には使用しないでください。

5 つの原則

1. コンテンツ優先 - Glass は上に浮かび、コンテンツが透けて見えます
2. 光による奥行き - レンズ効果で階層を作り、不透明度には頼りません
3. 適応型の色合い - 背景に応じて色が動的に変化します
4. 意味に基づく強調 - 主要なアクションにのみ色合いを付けます
5. アクセシビリティを標準搭載 - システムが調整を自動的に処理します

マテリアル（macOS 14+ / iOS 26 より前）

// Card with material
.padding(24)
.background(.regularMaterial, in: RoundedRectangle(cornerRadius: 16, style: .continuous))

// Material options (lightest → heaviest):
// .ultraThinMaterial, .thinMaterial, .regularMaterial (default), .thickMaterial, .ultraThickMaterial

Liquid Glass API（iOS 26+ / macOS Tahoe）

// Basic
Button("Action") { }.glassEffect()

// Variants
.glassEffect(.regular)   // Standard UI
.glassEffect(.clear)     // Media backgrounds only
.glassEffect(.identity)  // Disabled

// Interactive (adds bounce/shimmer)
Button("Tap") { }.glassEffect(.regular.interactive())

// Multiple glass elements - MUST wrap in container
GlassEffectContainer(spacing: 30) {
    HStack {
        Button("A") { }.glassEffect()
        Button("B") { }.glassEffect()
    }
}

// Button styles
Button("Cancel") { }.buttonStyle(.glass)           // Secondary
Button("Save") { }.buttonStyle(.glassProminent).tint(.blue)  // Primary

基本パターン

カード

VStack(alignment: .leading, spacing: 12) {
    HStack {
        ZStack {
            Circle().fill(color.opacity(0.15)).frame(width: 36, height: 36)
            Image(systemName: icon).foregroundStyle(color)
        }
        Spacer()
    }
    Text(value).font(.system(size: 28, weight: .bold, design: .rounded))
    Text(label).font(.caption).foregroundStyle(.secondary)
}
.padding(20)
.background(.regularMaterial, in: RoundedRectangle(cornerRadius: 16, style: .continuous))

ホバー対応の行

HStack { content }
.padding(16)
.background(isHovering ? Color.primary.opacity(0.04) : .clear)
.background(.quaternary.opacity(0.5), in: RoundedRectangle(cornerRadius: 12, style: .continuous))
.onHover { withAnimation(.easeInOut(duration: 0.15)) { isHovering = $0 } }

バッジ

HStack(spacing: 8) {
    Circle().fill(isActive ? .green : .orange).frame(width: 8, height: 8)
    Text(status).font(.caption).fontWeight(.medium)
}
.padding(.horizontal, 12).padding(.vertical, 8)
.background(.regularMaterial, in: Capsule())

色付き背景のアイコン

ZStack {
    Circle().fill(color.opacity(0.15)).frame(width: 32, height: 32)
    Image(systemName: icon).font(.system(size: 14, weight: .semibold)).foregroundStyle(color)
}

形状

// Always use .continuous
RoundedRectangle(cornerRadius: 16, style: .continuous)  // Cards
RoundedRectangle(cornerRadius: 12, style: .continuous)  // Rows
RoundedRectangle(cornerRadius: 8, style: .continuous)   // Small elements
Capsule()  // Pills, badges
Circle()   // Icons

色

// Semantic foreground
.foregroundStyle(.primary)    // Main content
.foregroundStyle(.secondary)  // Subtitles
.foregroundStyle(.tertiary)   // Timestamps

// Backgrounds
.background(.quaternary)
.background(.quaternary.opacity(0.5))

// Accent meanings
Color.blue    // Primary actions, selection
Color.green   // Success, active
Color.orange  // Warning, loading
Color.red     // Destructive, error
Color.purple  // Premium, AI
Color.cyan    // Security

// Tinted backgrounds: always 15% opacity
.fill(color.opacity(0.15))

タイポグラフィ

.font(.largeTitle).fontWeight(.bold)      // Page titles
.font(.headline).fontWeight(.semibold)    // Section headers
.font(.subheadline).fontWeight(.medium)   // Row titles
.font(.body)                               // Content (17pt default)
.font(.caption)                            // Metadata
.font(.caption2)                           // Timestamps
.font(.system(size: 28, weight: .bold, design: .rounded))  // Stats

ルール： 最小 11pt。Ultralight／Thin／Light は避けてください。ダイナミックタイプにはシステムフォントを使用します。

間隔（8pt グリッド）

// Standard values: 4, 8, 12, 16, 20, 24, 32, 40, 48

.padding(24)                    // Cards
.padding(16)                    // Rows
.padding(.horizontal, 12).padding(.vertical, 8)  // Badges

// Rule: external spacing ≥ internal spacing
VStack(spacing: 24) { CardView().padding(20) }  // Correct

SF Symbols

// Preferred: hierarchical for depth
Image(systemName: icon).symbolRenderingMode(.hierarchical).foregroundStyle(color)

// Match weight to nearby text
Image(systemName: "gear").font(.system(size: 14, weight: .semibold))

タップ領域

// MINIMUM: 44pt × 44pt
Button { } label: { Image(systemName: "gear") }
    .frame(minWidth: 44, minHeight: 44)

アニメーション

// Hover
.onHover { withAnimation(.easeInOut(duration: 0.15)) { isHovering = $0 } }

// Spring
withAnimation(.spring(response: 0.3)) { }
withAnimation(.bouncy) { }

// Entry
.opacity(appeared ? 1 : 0).offset(y: appeared ? 0 : 10)
.onAppear { withAnimation(.spring(response: 0.5, dampingFraction: 0.8)) { appeared = true } }

推奨事項と禁止事項

推奨事項：

• カード／ツールバーには .regularMaterial を使用する
• すべての角丸長方形に .continuous を使用する
• アイコンの背景には不透明度 15% を使用する
• 複数の Glass を GlassEffectContainer で囲む
• タップ領域は最小 44pt にする
• 8pt グリッドの間隔を使用する
• .hierarchical を指定した SF Symbols を使用する

禁止事項：

• コンテンツ（リスト、テーブル）に Glass を適用する
• コンテナーなしで Glass を重ねる
• 鋭角な角を使用する
• テキストを 11pt 未満にする
• タップ領域を 44pt 未満にする
• Glass 上でフルカラー画像を使用する

アクセシビリティ

システムが自動的に処理します：

• 透明度を下げる → 不透明度の高い Glass
• コントラストを上げる → 視認できる境界線
• 視差効果を減らす → 弾む効果を無効化
• ダイナミックタイプ → テキストを拡大

必要に応じて手動で上書きします：

@Environment(\.accessibilityReduceTransparency) var reduceTransparency
.glassEffect(reduceTransparency ? .identity : .regular)

参考資料

詳しいパターンと例については、以下を参照してください：

• references/components.md - コンポーネントの完全な実装
• references/apple-hig.md - Apple HIG の完全なガイドライン