← すべての記事

SwiftUIにおけるLiquid Glass:iOS 26でReturnを出荷して得た3つのパターン

AppleのLiquid Glassは1行で書けるSwiftUI APIです。.glassEffect()がそれにあたります。1 私の瞑想タイマーアプリReturnは、iOS、macOS、tvOSにまたがって9回これを使っています。2 そのうちの1つでは、このモディファイアをカスタムのShapeに適用し、タイマーの数字そのものをグリフ単位でliquid glassに変えています。

iPhone上のReturn — タイマーの数字そのものがカスタムShapeを通じてLiquid Glassとしてレンダリングされる(後述のパターン1で解説)。所要時間のピッカーはLiquid GlassのHUD

興味深いのは、この1行の先へ進んだときに何が起こるかという点です。AppleのHuman Interface Guidelinesは厳格なレイヤリング規則を定めています。Liquid Glassは機能レイヤー(コントロール、ナビゲーション、一時的なUI)に属するものであり、コンテンツレイヤーには決して用いてはならない、というものです。3 Returnの9つの使用例のほとんどは、教科書どおりの機能レイヤーへの適用です。ピッカー、ボタン、コントロールストリップ、一時停止状態のバッジなどがそれです。本当に面白いのは、規則を破ることなく曲げている3つの使い方です。

このエッセイでは、私が出荷した3つのパターン、それらが尊重している規則、私を捕らえた落とし穴、そして意図的に使わなかったAPI表面を順に見ていきます。

AppleのHuman Interface Guidelinesは、Liquid Glassを3つのマテリアルのバリアントによって定義しています。regularバリアントはその下にあるものに応じて見た目を適応させ(左の例は暗い背景、右の例は明るい背景)、clearバリアントは下にあるディテールをはるかに少ないフィルタリングで透けさせます。3

暗い背景の上のLiquid Glass regularバリアント — Apple HIGリファレンス

明るい背景の上のLiquid Glass regularバリアント — Apple HIGリファレンス

Liquid Glass clearバリアント — Apple HIGリファレンス。clearバリアントが下にあるコンテンツの視覚的ディテールを透けさせる様子を示す

リファレンス画像はAppleのMaterials HIGページより。3 どちらのバリアントもSwiftUIで.glassEffect()が生成するものであり、両者の選択はこのモディファイアの単一の引数で決まります。

TL;DR

  • iOS 26はLiquid Glassを.glassEffect(_:in:)として出荷しています。デフォルトのバリアントは.regularで、デフォルトのシェイプはCapsuleです。1
  • Returnは1行の先へ進む3つのパターンを使っています。カスタムのShapeへのガラス(Core Textのグリフパスによるタイマーテキスト)、鏡像パターン(反転&マスクしたコピーによる下側の反射)、そして機能レイヤーのHUDオーバーレイです。
  • AppleのHIG規則:Liquid Glassは機能レイヤーへ、標準マテリアルはコンテンツレイヤーへ。3
  • 私は意図的にGlassEffectContainerを使いませんでした。モーフィングのAPIはReturnでは使いどころがなく(あるガラス要素が別の要素へとアニメーションする場面がない)、レンダリング性能の差分もベンチマークしていません。これは測定していないトレードオフであり、推奨ではありません。1
  • 落とし穴:フラットな背景の上のガラスはフラットに見えてしまう。ジッターのない数字レンダリングには固定幅のセルが必要。tvOSのHStackはレイアウト方向の環境値を無視する。モーフのアニメーションではreduce-motionを尊重しなければならない。

Apple UIの隣接パターンについては、SwiftUIのレイアウトプロトコル徹底解説SF ProのタイポグラフィシステムSymbol Effectsの語彙をご覧ください。

1行のAPIとレイヤリング規則

AppleはLiquid Glassを小さな表面積で出荷しており、WWDC 2025で主要なデザインの柱として紹介されました。113

Text("Hello, World!")
    .font(.title)
    .padding()
    .glassEffect()                              // default: .regular variant, Capsule shape

Text("Hello, World!")
    .glassEffect(in: .rect(cornerRadius: 16))   // custom shape

Text("Hello, World!")
    .glassEffect(.regular.tint(.orange).interactive())  // tint + touch reactivity

つまみは3つです。バリアント(.regularまたは.clear)、シェイプ(任意のShape)、そしてGlassEffectStyleのチェーン(tint、interactive)です。これが単一のビューに対するAPIのすべてです。複数ビューのレンダリングは別途GlassEffectContainerが扱いますが、これについては後ほど触れます。

HIGはAPIよりも厳格です。AppleのHuman Interface Guidelinesは、すべてのiOS 26以降のインターフェースにおいて2つのレイヤーを定義しています。3

  1. コンテンツレイヤー: 人が消費しているドキュメント、リスト、写真、メディア。ここでは標準マテリアル(既存の.regularMaterial.thinMaterialなど)を使います。
  2. 機能レイヤー: コントロール、ナビゲーション、タブバー、サイドバー、一時的なオーバーレイ。ここではLiquid Glassを使います。

Appleの具体的な指示はこうです。「コンテンツレイヤーにLiquid Glassを使わないでください。Liquid Glassは、インタラクティブな要素とコンテンツとの間に明確な区別をもたらすときに最もよく機能します。コンテンツレイヤーに含めると、不要な複雑さと混乱を招く視覚的階層につながりかねません。」3

この規則は、実際のアプリに当てはめるまでは制約的に聞こえます。Returnは瞑想タイマーです。そのコンテンツレイヤーは、すべての背後で流れる呼吸のイメージとループ再生される映像です。機能レイヤーは、所要時間のピッカー、開始/一時停止/停止のボタンスタック、補助的な設定ボタンの列、そして(tvOSでは)一時停止状態のバッジです。Returnの9つのガラス使用例のうち8つは、教科書どおりの機能レイヤーへの適用です。iOSとmacOSのコードパス向けの3つの所要時間ピッカーのバリアント、開始/一時停止のトグル、停止ボタン、設定ボタンの列、tvOSの一時停止インジケーター、そしてもう1つの一時的なコントロールオーバーレイがそれです。4

9つ目は意図的なエッジケース(タイマーの数字そのものへのLiquid Glass)であり、これは次のセクションで詳しく見ていきます。

パターン1:カスタムShapeへのガラス

Returnのタイマーの数字は、ガラスの背景の上に描かれたテキストではありません。ガラスそのものがテキストなのです。.glassEffect(.clear, in:)は任意のShapeを受け取り、9 ShapePathを生成するプロトコルです。10 そこでの工夫はこうです。Core Textを使ってタイマー文字列をグリフのパスに変換し、11 そのパス=Shapeを.glassEffectに渡すのです。56

import SwiftUI
@preconcurrency import CoreText

struct GlassTextShape: Shape {
    let text: String
    let font: CTFont

    func path(in rect: CGRect) -> Path {
        guard !text.isEmpty else { return Path() }
        let combinedPath = CGMutablePath()

        let attrString = NSAttributedString(string: text, attributes: [.font: font])
        let line = CTLineCreateWithAttributedString(attrString)
        guard let runs = CTLineGetGlyphRuns(line) as? [CTRun], !runs.isEmpty else {
            return Path()
        }

        for run in runs {
            let glyphCount = CTRunGetGlyphCount(run)
            guard glyphCount > 0 else { continue }
            var glyphs = [CGGlyph](repeating: 0, count: glyphCount)
            var positions = [CGPoint](repeating: .zero, count: glyphCount)
            let range = CFRange(location: 0, length: glyphCount)
            CTRunGetGlyphs(run, range, &glyphs)
            CTRunGetPositions(run, range, &positions)

            for i in 0..<glyphCount {
                guard let glyphPath = CTFontCreatePathForGlyph(font, glyphs[i], nil) else { continue }
                let transform = CGAffineTransform(translationX: positions[i].x, y: positions[i].y)
                combinedPath.addPath(glyphPath, transform: transform)
            }
        }

        // Core Text y-axis is flipped vs SwiftUI; flip then re-bound and center.
        var swiftPath = Path(combinedPath).applying(CGAffineTransform(scaleX: 1, y: -1))
        let flippedBounds = swiftPath.boundingRect
        let offsetX = rect.midX - flippedBounds.midX
        let offsetY = rect.midY - flippedBounds.midY
        return swiftPath.applying(CGAffineTransform(translationX: offsetX, y: offsetY))
    }
}

Return/Return/GlassTextShape.swiftから取った実際の本番コードです。5 path(in:)関数はCore Textを使って文字列をレイアウトし、各CTRunをたどり、各グリフのCGPathを抽出して、それらを1つのCGMutablePathに合成します。合成のあとに来る2つの自明でないステップがあります。Core Textの座標系は原点を左下に置きますが、SwiftUIのPathは左上に置くため、パスをCGAffineTransform(scaleX: 1, y: -1)で反転させなければなりません。すると反転後のパスのboundingRectはy値が負になるため、平行移動でSwiftUIがShapeに渡してくる矩形内に再センタリングします。どちらの変換を省いても、グリフは上下逆さまになるか画面外にレンダリングされてしまいます。

そして適用は1行です。

Rectangle()
    .fill(.clear)
    .glassEffect(.clear, in: textShape)
    .frame(width: cellWidth, height: cellHeight)

clearなRectangleはヒットターゲットのプレースホルダーであり、実際の見た目はtextShapeが生成する任意のシェイプです。グリフパスのシェイプを使うと、Liquid Glassのマテリアルはグリフの輪郭の中だけを満たします。その結果、タイマーの各数字が個別のliquid glassのフォームとなり、その背後で動くアニメーションを屈折させるのです。6

HIGのニュアンス。 Appleが定める規則はLiquid Glassは機能レイヤーへ、標準マテリアルはコンテンツレイヤーへであり、1つの明示的な例外があります。コンテンツレイヤー内の一時的なインタラクティブコントロール(スライダー、トグル)は、起動されたときにLiquid Glassをまとうことができるというものです。3 Returnのタイマーの数字は状態表示であってコントロールではありません。Timer.publish(every: 1, ...)から1秒に1回更新され、タップジェスチャーを持ちません(その下にある開始/一時停止ボタンが状態をトグルします)。ですからそこにLiquid Glassを置くのは意図的なエッジケースであり、文字どおりのインタラクティブ性というより意図のうえで「一時的なインタラクティブコントロール」に近いものです。なぜなら、この数字はユーザーがセッション全体を通して見つめる視覚的な焦点だからです。私は規則を破っているのではなく、曲げているのです。HIGを厳格に読むレビュアーは、これは標準マテリアルにすべきだと主張できるでしょう。私は、このタイマーはプログレスインジケーターと同じ系統の経過時間のコントロールサーフェスだと主張します。Appleのドキュメントはこのケースを直接裁定していません。

Text+背景ではなくカスタムShapeを選ぶ理由。 ガラスの背景の上にレンダリングされたTextは、ガラスの上のテキストとして読み取られます。ガラスそのものとしてレンダリングされたTextは、異なる視覚的カテゴリーとして読み取られます。ユーザーはその数字を機能的な前景として、具体的には、見るためではなく透かして見るために存在する一時的な要素として知覚するのです。

パターン2:鏡像パターン

Returnはタイマーの反射をその下に表示し、フェードアウトさせます。実際の本番コードです。6

Mac上のReturn — Liquid GlassのHUDオーバーレイとしての所要時間ピッカー。上部にはタイマーテキストのガラス処理が見える

VStack(spacing: 0) {
    GlassTimerText(text: displayTime, fontSize: fontSize)
        .accessibilityLabel("Time remaining: \(accessibleDescription)")

    if showReflection {
        GlassTimerText(text: displayTime, fontSize: fontSize)
            .scaleEffect(x: 1, y: -1)
            .mask(
                LinearGradient(
                    stops: [
                        .init(color: .white.opacity(0.2), location: 0),
                        .init(color: .clear, location: 0.6)
                    ],
                    startPoint: .top,
                    endPoint: .bottom
                )
            )
            .offset(y: -8)
            .accessibilityHidden(true)
    }
}

3つの変換が鏡像を構成しており、いずれも標準のSwiftUIプリミティブです。14

  1. scaleEffect(x: 1, y: -1)が2つ目のコピーを上下逆さまに反転させます。
  2. .mask(LinearGradient(...))が反射を上部の不透明度20%から下方向60%地点の完全な透明へとフェードさせます。
  3. .offset(y: -8)が反射を8ポイント上に引き上げ、目に見える継ぎ目を残さずに元の数字に接するようにします。

反射に付けた.accessibilityHidden(true)モディファイアは要となる部分です。VoiceOverは鏡像化された時刻を二度読み上げるべきではありません。元のaccessibilityLabelaccessibilityAddTraits(.updatesFrequently)はすでに上にあるメインのGlassTimerTextインスタンスに付いており、反射は純粋に装飾的なものだからです。

これがLiquid Glassでこそ機能する理由。 反射はGlassTimerTextからガラスマテリアルを継承します。元の数字が乗っている任意の背景(呼吸する円のグラデーション、映像、色付きのシーン)が、両方のコピーを通して屈折します。鏡像はガラス専用のコードを一切必要とせず、ガラスマテリアルが屈折を無料で処理してくれます。効果全体は3つのモディファイアと1つのグラデーションだけです。

アクセシビリティのコスト。 reduce-motionのユーザーには依然として鏡像が見えますが、時刻更新間のガラスマテリアルのアニメーションは@Environment(\.accessibilityReduceMotion)を介して別の箇所で抑制されています。7 反射そのものは静的であり、アニメーションするのは数字の遷移間のモーフだけです。

パターン3:一時的なコントロールのためのガラスHUDオーバーレイ

Returnの残り8つのガラス使用例は、教科書どおりの機能レイヤーへの適用です。4 それぞれが同じパターンに従います。

Apple Watch上のReturn — 小さなキャンバスサイズでの機能レイヤーのLiquid Glass

durationPicker
    .frame(height: 50)
    .frame(maxWidth: 320)
    .glassEffect()
    .padding(.horizontal, 20)
    .transition(.opacity.combined(with: .scale(scale: 0.95)))

.transition(.opacity.combined(with: .scale(scale: 0.95)))が要となる部分です。一時的なコントロールへのLiquid Glassは、そのコントロールが推移するときにこそしっくりきます。画面上に常設される静的なガラスHUDはクロームとして読み取られます。ユーザーがタップしたときにフェード+スケールで現れ、視線を外したときに消えるガラスHUDは、つかの間のコントロールサーフェスとして読み取られるのです。

AppleのglassEffectに関するドキュメントはこれを暗に示しています。モディファイアは「コンテナに送ってレンダリングするためのコンテンツをキャプチャする」し、「タッチやポインターのインタラクションにリアルタイムで反応する」とあります。1 アニメーションのフックはAPIには含まれていませんが、レンダリングのパイプラインはガラス要素が動くことを前提としています。静的なガラス要素はそのアフォーダンスを取り逃してしまいます。

Returnはこのパターンを、所要時間ピッカー(ユーザーがタップするとスライドアップ)、開始/一時停止トグルボタン(常に表示されるが押下時にスケール)、停止ボタン(セッション途中でのみ表示)、設定ボタンの列(所要時間ピッカーの下にある水平のコントロールストリップ)、そしてtvOSの一時停止状態バッジ(Apple TVでセッションが一時停止されたときのみ表示)に使っています。5つすべてのコンテキストがHIGの機能レイヤー規則を尊重しています。3

AppleのtvOSリファレンス:映像の背景の上に浮かぶLiquid Glassオーバーレイ。下のメディアを透けさせる — 典型的な10フィートUIの使用例

Apple HIGリファレンス:tvOSのLiquid Glassオーバーレイはメディアレイヤーの上に位置し、それを透けさせます。3 ReturnのtvOS実装も同じモデルに従っており、コントロールがループ再生される炎/森/水の背景の上に浮かんでいます。

ラボから得たtoolbarに関するメモ。 WWDC 2026のSwiftUI Group Labのパネルが、これがtoolbarでどう展開するかを鮮明にしてくれました。toolbarに非ガラスのコンテンツ(例として挙げられたのはプロフィール写真)を置く場合は、sharedBackgroundVisibility(.hidden)を使い、その項目が共有のガラス背景を落として写真を直接表示するようにします。15 パネルはある改良点を指摘しました。より新しいAPIはtoolbarボタンのコンテンツマージンだけを取り除くというもので、それ以前は背景を隠すのが唯一のレバーであり、背景とマージンの両方を一緒に取り除いてしまっていました。toolbarボタンそのものについては、パネルはボタンに直接.glassEffectを当てにいくのではなく、目立つボタンスタイル(glassProminent)とbuttonBorderShapeへと導きました。その根底にあるHIGの立場は、この記事が拠って立つレイヤリング規則と同じです。すなわち、Liquid Glassはクロームに属するものであってコンテンツ領域に属するものではない、という規則です。その下を何もスクロールしないガラスサーフェスには、屈折させるものが何もないからです。153

GlassEffectContainerという問い

Appleは、アプリが複数のビューで.glassEffect()を使うときには常にGlassEffectContainerを推奨しています。理由は2つあります。レンダリング性能の向上(ガラスエフェクトがバッチ処理される)と、遷移中にシェイプを互いにモーフさせられることです。1

私はこれを使いませんでした。その理由はアプリ固有のものであり、Appleのガイダンスへの反論ではありません。Returnには9つのガラスビューがありますが、どれも互いにモーフする必要がありません。46 所要時間ピッカーが開始ボタンへとアニメーションすることは決してありません。タイマーテキストが設定ボタンの列へとアニメーションすることもありません。各ガラス要素は独立しています。モーフィングのAPIは発火する使いどころがなく、コンテナのスペーシング規則は、今日は何の協調も必要としないレイアウトを制約してしまうでしょう。

レンダリング性能の論点については、測定なしには完全には反論できません。Appleのドキュメントは、コンテナの外にガラスエフェクトが「多すぎる」と性能が低下しうると警告しています。1 Returnの9つのビューが同時に画面を共有することは決してありません(所要時間ピッカーはメニュー状態でのみ現れ、停止ボタンはセッション途中の一時停止時のみ現れます)。どのフレームをとっても、見えているガラス要素は3つか4つです。これはiOS、iPadOS、macOS、watchOS、tvOSにわたって私がテストしたすべてのデバイスでスムーズでしたが、コンテナでラップした場合とモディファイアのみの場合を比較するinstrumentsのトレースは取っていません。ですから正直なフレーミングはこうです。ReturnはGlassEffectContainerを、測定された性能の同等性ではなく、観測された良好なユーザー体験に基づいてスキップしています。

ここから私が引き出した規則はこうです。GlassEffectContainerは、複数のガラス要素が同時に表示されアニメーションするアプリのためのものである。 Appleの例はglassEffectUnion(id:namespace:)によるシンボルセットのレンダリングです。4つの天気シンボルが1つの単位として流れるように融合し分裂します。1 これは教科書どおりの使用例です。もし将来のReturnの機能で、ガラス要素がモーフしたりコンテナのスペーシング規則を共有したりする必要が出てくれば、そのときコンテナを加えるのが正しいツールになるでしょう。今日のアプリでは、まだそのケースに当たっていません。

私を捕らえた落とし穴

本番から得た3つの実際のバグです。

ガラス数字のジッター。 SF Pro Roundedはプロポーショナルレンダリングにおいて可変幅の数字を持ちます。タイマーがカウントダウンするにつれて表示文字列の長さが変わり、周囲のHStackが毎秒リフローして、タイマー全体がジッターしていました。修正は、各文字に対する固定幅のセルです。各数字にはfontSize * 0.6cellWidth、各コロンにはfontSize * 0.3を与え、HStackを安定したグリッドにします。6

HStack(spacing: 0) {
    ForEach(Array(text.enumerated()), id: \.offset) { _, char in
        let isColon = char == ":"
        let cellWidth = isColon ? colonCellWidth : digitCellWidth
        GlassDigitCell(character: String(char), font: ctFont,
                       cellWidth: cellWidth, cellHeight: cellHeight)
    }
}

このセルはApple標準のものではなく、小さな固定フォントサイズでのプロポーショナル幅レンダリングへの回避策です。Appleの.monospacedDigit()付きのSF Pro RoundedはTextでは同じ問題を解決しますが、このモディファイアはカスタムのShapeベースのガラスレンダラーでは利用できません。固定セルのレイアウトはその代用です。

tvOSのレイアウト方向の上書き。 同じGlassTimerTextがiOS、iPadOS、macOS、tvOSで動きました。tvOSでだけ、iOS版がインエンバイロメントの上書きを尊重していたにもかかわらず、HStackが右から左(RTL)の言語環境下で鏡像化されました。修正は、レイアウト方向を環境値と明示的なflipsForRightToLeftLayoutDirection(false)モディファイアの両方でピン留めし、それを数字セルのHStackに直接適用することです(親のVStackは環境の上書きを別途適用し、反射のコピーがそれを継承するようにします)。6

HStack(spacing: 0) { ... }
    .flipsForRightToLeftLayoutDirection(false)
    .environment(\.layoutDirection, .leftToRight)

理由はこうです。tvOSのHStackは一部のバージョンで環境レベルの上書きを無視するように見え、flipsForRightToLeftLayoutDirection(false)がより確実に尊重される、明示的な「鏡像化しない」契約だからです。12 二重の備えです。

数字モーフでのreduce-motion。 Liquid Glassはデフォルトで表示文字列間のモーフ遷移をアニメーションします。accessibilityReduceMotionを有効にしているユーザーには、そのモーフがちらつきとして見えました。修正はこうです。6

.animation(reduceMotion ? nil : .easeInOut(duration: 0.15), value: displayTime)

このアニメーションモディファイアは@Environment(\.accessibilityReduceMotion)を読み取り、reduce-motionがオンのときには遷移を完全に無効化します。Appleのアクセシビリティガイダンスは明確です。装飾的なアニメーションはすべて、ユーザーのモーション設定を尊重しなければなりません。7

Liquid Glassを使うべきでないとき

拒むこともデザインの一部です。

コンテンツレイヤーにLiquid Glassを置かないこと。 AppleのHIGは明確で、この規則を無視すると混乱を招く階層が生まれます。ユーザーは何がインタラクティブで何がコンテンツなのか区別できなくなるのです。3 ガラスエフェクトがリストの行や写真カードを装飾しているなら、そのデザインはプラットフォームと戦っています。

フラットな背景の上にガラスを使わないこと。 Liquid Glassは背後にあるものを屈折させます。もし「背後にあるもの」が単一の塗りつぶし色なら、屈折には曲げるものが何もなく、結果はフラットな色付きの矩形として読み取られます。多様なコンテンツ(グラデーション、画像、映像)の上にガラスを置くか、さもなくばガラスをまったく使わないかのどちらかです。Returnのタイマー画面は、VideoBackgroundViewを通じてテーマベースのカバーイメージとループ映像を背景に流しています。4 それはまさに、その上のガラス要素が常に屈折させるテクスチャを持つようにするためです。

高頻度のコンテンツへのガラスには慎重になること。 ガラスマテリアルのレンダリングはGPUに依存し、ガラスのシェイプ変化間のデフォルトのモーフアニメーションそれ自体がアニメーションです。1秒に1回更新するタイマーは私のテストでは問題ありませんが、60Hzの波形やオーディオビジュアライザーは未検証で、おそらくモーフアニメーションと衝突するでしょう。上限はベンチマークしていないので、これは測定された閾値ではなくヒューリスティックとして扱ってください。Appleのドキュメントもそれを公表していません。

reduce-motionをテストせずにガラスを出荷しないこと。 すべてのガラスアニメーションはaccessibilityReduceMotionによってゲートされるべきです。7 ガラスのシェイプ間のデフォルトのモーフは、単なるフェードではなく運動的な効果です。

Liquid GlassがiOS 26以降で出荷するアプリにとって意味するもの

主張は小さなものです。Liquid Glassが1行のAPIであるのは、アプリがすでにHIGのレイヤリング規則を尊重しているときに限られる。 コントロールを機能レイヤーに、コンテンツをコンテンツレイヤーに置くSwiftUIアプリは、.glassEffect()モディファイアでLiquid Glassを採用でき、デフォルトでネイティブに感じられます。

2つのレイヤーを混ぜるアプリ(リストの行の中のコントロール、コンテンツとして扱われるナビゲーションバー、写真カードの装飾的なクローム)は、Liquid Glassを採用しても誤って感じられるでしょう。マテリアルは正しいのです。その下のアーキテクチャが正しくないのです。

カスタムShapeのパターン(パターン1)はこの規則をきれいに拡張します。機能的にコントロールであるものは何でも、従来の意味で「コントロール」に見えなくても、Liquid Glassをまとうことができます。タイマーはコントロールであり、レベルメーターはコントロールであり、プログレスインジケーターはコントロールです。それらのいずれにLiquid Glassを当てるのも仕様どおりです。

この記事は、同じアプリのデータレイヤーをApp Intentsを通じて、またMCPサーバーを通じて出荷した、私の以前の記事と併せて読んでください。視覚レイヤーは同じスタックの3つ目のサーフェスです。システムAIのための型付きエンティティ、クロスLLMエージェントのためのファイルフォーマット、そしてデバイスの前の人間のためのLiquid Glassです。8

FAQ

.glassEffect()はiOS 26以外のプラットフォームでも使えますか?

.glassEffect()モディファイアはiOS 26以降、iPadOS 26以降、macOS 26以降、watchOS 26以降、tvOS 26以降、visionOS 26以降です。26より前のプラットフォームには.background(.regularMaterial)などがあり、すりガラス効果は生み出しますが、新しいLiquid Glassの屈折は生み出しません。1

GlassEffectContainerは見た目を変えますか?

コンテナでラップされたガラス要素は、スペーシング規則によって重なりが生じるとき、シェイプを互いにブレンドできます。コンテナがなければ、各.glassEffect()は独立しています。ガラス要素がアニメーション中に流れるように融合すべきアプリでは、GlassEffectContainerが正しいツールです。各ガラス要素が別個のままであるべきアプリでは、コンテナはオーバーヘッドです。1

なぜ.foregroundStyle(.thinMaterial)付きのTextを直接使わないのですか?

thinMaterialは標準マテリアルであってLiquid Glassではありません。見た目はすりガラスのオーバーレイであって、Liquid Glassの屈折を伴う光を曲げる効果ではありません。3 新しいマテリアルそのものに見せたいテキストには、.glassEffect(.clear, in: customShape)がサポートされた道です。

マーケティング用にLiquid Glassのスクリーンショットをどう撮りますか?

ガラスエフェクトは実行時にGPUでレンダリングされるため、スクリーンショットは効果がすでに適用された状態のシミュレーターまたはデバイスから撮ります。AppleのLiquid Glass公式リファレンス画像は、HIGドキュメントページとWWDC 2025のセッションから来ています。3

GlassTextShapeは任意のテキストで機能しますか、それとも数字だけですか?

Core Textがレイアウトできる文字列なら何でも機能します。Returnは数字とコロンに使っていますが、同じShapeは文字、シンボル、絵文字(適切なフォントとともに)、あるいは混在した文字列でも機能します。性能はグリフ数で制限されます。ガラスとしてレンダリングされる長い段落は高くつきますが、6文字のタイマーは些細なものです。


3つのパターン、1つの規則、そして意図的にスキップした1つのAPI。Liquid GlassはiOS 26以降のアプリの3つ目のサーフェスであり、型付きエンティティと共有のファイルフォーマットの上に乗っています。1行のAPIは本物です。その下にあるHIG規則こそが、その1行を機能させているのです。

References


  1. Apple Developer, “Applying Liquid Glass to custom views”. Documentation for the glassEffect(_:in:) modifier, GlassEffectContainer, glassEffectUnion(id:namespace:), glassEffectID(_:in:), and GlassEffectTransition. Default variant .regular, default shape Capsule

  2. Author’s Return, a meditation-timer app published on the App Store on April 21, 2026, available for iPhone, iPad, Mac, Apple Watch, and Apple TV. Uses SwiftUI, SwiftData, and HealthKit on iOS 26+ / macOS 26+. 

  3. Apple Developer, “Materials” Human Interface Guidelines. Defines the functional vs content layer rule for Liquid Glass: “Don’t use Liquid Glass in the content layer.” Lists the regular and clear variants and their intended uses. 

  4. Production code in Return/Return/ContentView.swift (seven .glassEffect() call sites), Return/Return/GlassTimerText.swift (one call site on GlassDigitCell), and Return/ReturnTV/TVContentView.swift (one call site on the tvOS “Paused” indicator). Total nine. Plus Return/Return/VideoBackgroundView.swift, which renders the theme-based cover imagery and looped video that the glass elements refract through. 

  5. Production code in Return/Return/GlassTextShape.swift. The Shape-conforming wrapper around Core Text. Created November 26, 2025, included in shipped App Store v1.0. 

  6. Production code in Return/Return/GlassTimerText.swift. GlassDigitCell, GlassTimerText, and GlassTimerDisplay views. Implements fixed-width cell layout, the mirror reflection, and reduce-motion gating. 

  7. Apple Developer, “accessibilityReduceMotion” environment value. Apps must honor the user’s motion preference; default morph animations on Liquid Glass should be gated on the value. 

  8. Author’s analysis in App Intents Are Apple’s New API to Your App and Two Agent Ecosystems, One Shopping List. The three-surface model: App Intents for Apple Intelligence, MCP for cross-LLM agents, Liquid Glass for the human at the device. 

  9. Apple Developer, “glassEffect(_:in:isEnabled:)” on View. The in: parameter accepts any Shape-conforming type. The default shape is Capsule

  10. Apple Developer, “Shape” protocol. A Shape is any type that produces a Path for a given rectangle. Custom shapes can wrap arbitrary CGPath data. 

  11. Apple Developer, “Core Text Programming Guide” and CTLineCreateWithAttributedString. Core Text is the lower-level text engine used to lay out attributed strings into glyph runs and extract per-glyph paths. 

  12. Apple Developer, “flipsForRightToLeftLayoutDirection(_:)”. Explicitly overrides RTL mirroring on a View regardless of the surrounding \.layoutDirection environment value. 

  13. Apple, “WWDC 2025 Highlights” via Apple Newsroom. Liquid Glass announced as the unifying design material across iOS 26, iPadOS 26, macOS 26, watchOS 26, tvOS 26, and visionOS 26. Sessions: “Meet Liquid Glass” (WWDC 2025), “Build a SwiftUI app with Liquid Glass”

  14. Apple Developer, “LinearGradient”, “scaleEffect(x:y:anchor:)”, “mask(_:)”. Standard SwiftUI primitives, all available since iOS 13. 

  15. Apple, WWDC 2026 SwiftUI Group Lab (session 2). Paraphrased from a locally transcribed recording of the WWDC 2026 SwiftUI Group Lab (session 2); Apple publishes no official captions for the labs. Source for hiding a toolbar item’s shared glass background to show non-glass content (a profile photo), the newer API that removes only a toolbar button’s content margin rather than the background and margin together, the preference for the prominent glass button style and buttonBorderShape over .glassEffect on a button, and the chrome-not-content layering rationale. The supporting symbols are documented at sharedBackgroundVisibility(_:) on CustomizableToolbarContent, which takes a Visibility value such as .hidden, and buttonBorderShape(_:); glassProminent is the prominent Liquid Glass PrimitiveButtonStyle. The specific content-margin API named in the lab could not be confirmed against Apple’s published documentation, so it is described by behavior rather than asserted by symbol. 

関連記事

iOS 26のHealthKit + SwiftUI:認可、サンプルタイプ、そして2つの実アプリから得たクロスプラットフォームパターン

Water(水分摂取トラッキング、HKQuantitySample)とReturn(マインドフルセッション、HKCategorySample)から得た本番運用パターン。許可UX、async ラッパー、watchOSバリアント、そして避けるべ…

4 分で読める

SwiftUI Layout プロトコル:sizeThatFits から placeSubviews までカスタムレイアウトを構築する

iOS 16 の Layout プロトコルでは、2 つのメソッドでアプリにカスタムレイアウトを構築できます。sizeThatFits、placeSubviews、proposal の契約、layout values、そしてキャッシュについて…

4 分で読める

テイストはインフラである

エージェントが生成するアウトプットが増えるほど、品質の上限は美的判断をシステムにどれだけ組み込めるかで決まります。テイストはクエリ可能になったとき、スケールします。

1 分で読める