WWDC Quick Look 💓 By SwiftGGTeam
中文 EN 日本語
Meet Liquid Glass

Meet Liquid Glass

tvOSSwiftUIUIKit
元の動画を見る

Highlight

Liquid Glass は、iOS / iPadOS / macOS / tvOS / visionOS にまたがって Apple が統一的に導入した新しいマテリアルレイヤーです。リアルタイムなレンズ効果（Lensing）で光線を屈折させ、サイズや背景コンテンツの変化に応じて明暗・シャドウ・屈折強度を自動的に切り替えます。ナビゲーションやコントロールのフローティングレイヤーに特化した素材です。

核心となる内容

ここ数年、Apple は各プラットフォームごとに複数のビジュアルランゲージを積み重ねてきました。macOS には Aqua の名残が残り、iOS 7 以降はリアルタイムブラー、iPhone X では流体的なトランジションが強調され、Dynamic Island はまた別のエラスティックな形態、そして visionOS は完全な没入型と、それぞれ別物でした。結果として、開発者はプラットフォームを移るたびに新しいデザインガイドラインを学び直す必要があり、ユーザーもデバイス間で分断を感じていました。デザイナーの Chan は冒頭でこの主軸をはっきりと指摘しています（00:21）。Liquid Glass は、これらの歴史的な経験を一つに統合した「書き直し」なのです。

Liquid Glass は現実世界の特定の物理マテリアルをシミュレートしているわけではなく、「デジタルメタマテリアル（digital meta-material）」として定義されています。コアとなる特徴は次の 2 点だけです。リアルタイムに光線を屈折させること（Lensing）、そして液体のようにタッチやアプリの状態変化に応答すること（00:43）。前者は「透明性を保ちながらコントロールの境界をどう視認させるか」という長年の課題を解決し、後者は「コントロール間のトランジションがなぜ常にハードカットに見えるのか」という課題を解決します。

適用範囲もこれまでの Material より大幅に広がっています。iPad と Mac では、Liquid Glass はサイドバーや Tab Bar をコンテンツの上にフロートさせ、周囲のコンテンツの色によって「染色」されます。近くのカラフルな画面から、わずかに光がガラス表面へとにじみ出てくるのです（08:09）。つまり、開発者はシステム標準のナビゲーションコンテナを使うだけで、これらの挙動を無償で手に入れられるということです。カスタム実装は不要です。

詳細な内容

Liquid Glass は複数のレイヤーの組み合わせで構成されており、各レイヤーは背景に応じてリアルタイムに変化します（06:21）。

Lensing（レンズ効果）: 従来のマテリアルは背景の光線を散乱（scatter）させるものでしたが、Liquid Glass ではこれをリアルタイムな屈折とフォーカスに変えました（02:32）。これによりコントロールを極めて軽く・極めて透明にしながら、視覚的に背景としっかり区別できるようになります。フェードイン・フェードアウトも、もはや alpha のグラデーションではなく、光の屈折度合いを徐々に調整することで実体化（materialize in/out）させる方式に変更されています（02:55）。

Highlights レイヤー: Liquid Glass はシミュレートされた環境の中に置かれており、その環境の光源がマテリアルに当たってハイライトを生み、デバイスの姿勢変化に応じて移動します（11:04）。ロック画面・ロック解除といったシステムレベルのモーションでは、要素の輪郭に沿って光が滑っていく様子が確認できます。

Shadow レイヤー: シャドウは背景を認識します。要素が文字の上にあるときはシャドウが濃くなり、明るい単色背景の上にあるときはシャドウが薄くなります（11:43）。この挙動はビルトインで、システムコントロールを使えば自動的に適用されます。

Scroll Edge Effect: Liquid Glass と組み合わせて使用される効果で、スクロールするコンテンツの上にあるフローティングレイヤーの可読性問題を専門に解決します（08:55）。

  • デフォルト形態: コンテンツがガラスの下にスクロールしてくると、エッジが徐々に背景にフェードアウトし、タイトルがクリアに保たれます。
  • ダーク形態: ダークコンテンツがスクロールしてきてガラスがダークスタイルに切り替わるとき、効果は弱い dimming に変わり、コントラストを確保します（09:28）。
  • Hard Style: ツールバーの下に pinned accessory view（テーブルヘッダーなど）がある場合に使用されるスタイルで、効果はツールバーとアクセサリビュー全体に均一に適用され、グラデーションにはなりません（09:46）。

Variants（バリアント）: Regular と Clear の 2 種類のみで、混在させることはできません（13:51）。

  • Regular: 汎用バリアントで、適応能力が完備されており、あらゆるサイズ・あらゆる背景で使用できます。
  • Clear: 常に透過度が高い設定で、適応的な振る舞いはありません。アイコンや文字の可読性を確保するために dimming レイヤーを重ねる必要があります。Clear は次の 3 つの条件が同時に成立する場合にのみ使用します。フローティングレイヤーの下がリッチメディアコンテンツであること、コンテンツレイヤーが dimming の影響を受けないこと、フローティングレイヤー上のコンテンツ自体が明るく太いこと（14:54）。

Tinting（着色）: Liquid Glass は新しい着色方式を導入しました（16:08）。色を選ぶと、システムは背景の明度に基づいて一連のトーンマッピングを生成し、有色ガラスの実際の見え方をシミュレートします。Bruno は良くない例と良い例を示しています（17:03）。solid fill のボタンは完全に不透明でマテリアル感を破壊しますが、新しい tinting に変えるとすぐに透過感が出てきます。原則として、tinting はメインアクションを強調する用途にのみ使うべきです。

セッション 219 はデザイン寄りの内容で、コードのデモはありません。SwiftUI 側の対応 API は、関連セッションの 323「Build a SwiftUI app with the new design」 で示されています。

// Label に Regular バリアントと緑の tinting を追加
Label("Desert", systemImage: "sun.max.fill")
    .padding()
    .glassEffect(.regular.tint(.green))

// メインアクションのボタンには glassProminent、通常ボタンには .glass を使用
Button("Get Started") { }
    .buttonStyle(.glassProminent)

// 複数のガラス要素を互いに融合させたい場合は GlassEffectContainer で包む
GlassEffectContainer {
    BadgeLabel(badge: badge)
        .glassEffect()
}

ポイントは次のとおりです。

  • .glassEffect(.regular.tint(.green)) は本文の「Regular バリアント + 新 Tinting」に対応します。色は背景の明度を介してマッピングされるので、不透明なベタ塗りにはなりません。
  • .buttonStyle(.glassProminent) は「メインアクションのみに tint を付けて強調する」というガイドラインに対応します。それ以外のボタンは .buttonStyle(.glass) を使い、透過性を維持します。
  • GlassEffectContainer は本文中の「コントロール間で形状が変化する際に singular floating plane を維持する」に対応します。コンテナ内の複数の .glassEffect() 要素は、トランジション時に互いに融合させることができ、それぞれが個別にハードカットすることはありません。

禁止事項:

  • コンテンツレイヤー（TableView など）まで Liquid Glass にしてはいけません。ナビゲーションレイヤーと視覚的に競合し、階層が崩れます（13:14）。
  • glass-on-glass の重ね掛けは避けます（13:28）。Liquid Glass の上に乗せる要素には fill、transparency、vibrancy を使い、マテリアルの上に薄く貼り付いているように見せましょう。

アクセシビリティ: Reduce Transparency でガラスはよりすりガラス調になり、Increase Contrast ではモノクロ＋アウトラインに切り替わり、Reduce Motion でエラスティックな動きがオフになります（18:15）。これらはシステムマテリアルを使ってさえいれば自動的に有効になります。

コアとなる学び

  • やること: アプリのナビゲーションとツールバーをシステム標準の Liquid Glass コンテナに切り替え、カスタム背景は書かない。

    • なぜ価値があるか: Lensing、シャドウの背景適応、明暗の反転、アクセシビリティ修飾子はすべて無償で得られます。カスタム背景を使うと、これらの振る舞いをすべて失ってしまいます。
    • どこから始めるか: まず navigation / toolbar / tab bar の Custom Background を取り除き、システムデフォルトのマテリアルを有効にします。そのうえで、本当に強調したいメインアクションボタンにのみ tint を加えます。

  • やること: アプリ内のすべての glass-on-glass の重ね掛けを監査し、上のレイヤーを fill + transparency + vibrancy に置き換える。

    • なぜ価値があるか: Bruno は glass-on-glass を混乱の原因として明示的に挙げています（13:28）。上のレイヤーを半透明の塗りにすれば、マテリアルの上の「ステッカー」のように見えて階層がよりクリアになります。
    • どこから始めるか: 検索リストを作り、カスタムの UIVisualEffectView や SwiftUI で Material を二重に重ねている箇所をすべて洗い出します。まずは最も利用頻度の高い 2〜3 画面で置き換え、スクリーンショットで比較しましょう。

  • やること: Clear バリアントを使うかどうかを判断する。多くのケースでは使うべきではない。

    • なぜ価値があるか: Clear には適応能力がなく、リッチメディアコンテンツの上でしか適切に機能しません。場所を間違えると可読性の低下が顕著に表れます。
    • どこから始めるか: アプリ内の「全画面リッチメディア + フローティングコントロール」のページ（動画再生、写真の全画面表示、マップなど）をリストアップし、これらのページに限って Clear を使い、localized dimming を加えます。

  • やること: 主要なリスト・詳細画面で Scroll Edge Effect の可読性ウォークスルーを一通り行う。

    • なぜ価値があるか: スクロールはアプリで最も頻繁な操作です。フローティングタイトルがダークコンテンツの通過時に dimming へ切り替わらないと、一瞬で潰れて読めなくなります。
    • どこから始めるか: ダークコンテンツ（黒背景の画像やダークな写真）を下から上へスクロールし、タイトルやボタンが常にクリアに保たれているかを確認します。問題のある箇所では、システム標準の navigation / toolbar を使っているかをチェックし、必要に応じて Hard Style に切り替えます。

関連セッション

コメント

GitHub Issues · utterances