💧

Liquid Glassに関するメモ：Appleドキュメントを読む

2025/09/24に公開

ドキュメントを適宜読み翻訳しつつ、要約しつつ、Liquid Glassについて理解を深めていくためのメモになります。

今回対象にするのは以下の記事になります。
https://developer.apple.com/documentation/technologyoverviews/liquid-glass
https://developer.apple.com/documentation/technologyoverviews/adopting-liquid-glass
なお画像については基本的に省いているため、必要に応じて公式ドキュメントを参照してください。

 概要ページについて
 イントロダクションLiquid Glassは、Appleのプラットフォーム間で一貫して提供される、動的なマテリアルのことで、ガラスと液体の特性をあわせ持っています。

Liquid Glassに適合しAppleのデザイン原則に従うことで、階層・調和・一貫性を美しいインターフェイスで実現することが可能になります。
SwiftUI / UIKit / AppKitを使っていればLiquid Glassが適用されるべきコントロールやナビゲーションには自動で適用されます。

カスタマイズしたインターフェイス要素にエフェクトを適用することも可能です。

 適合の仕方Liquid Glassに適合することは、今までのアプリをゼロから作り直すことを意味しません。

まずは最新のXcodeで動かして変化を見てから、ベストプラクティスに沿ってAppleプラットフォームらしく調整していく形になります。
挙げられているベストプラクティスとしては
マテリアル・コントロール・アプリアイコンに新しいビジュアルエフェクトを取り入れる
プラットフォームを跨いで統一されたナビゲーションと検索体験を提供する
インターフェイスの構成とレイアウトが他のアプリやシステム体験と一貫して見えるようにする
ウィンドウ・モーダル・メニュー・ツールバーのベストプラクティスを採用する
プラットフォームをまたいで優れた体験を提供できていることを確認する
詳細は後述します。

 公式のサンプルコード公式のサンプルコードとしては以下が提供されています。
https://developer.apple.com/documentation/SwiftUI/Landmarks-Building-an-app-with-Liquid-Glass
このサンプルコードでは以下の要素が確認できます。
Icon Comopserによるアプリアイコンの設定
background extension effectを適用したedge-to-edgeの体験の提供
横向きスクロールビューでのedge-to-edgeの体験の提供
ウィンドウサイズの変更に応じたレイアウトの調整
プラットフォームをまたいだ検索機能
カスタムインターフェイス要素やアニメーションへのLiquid Glassエフェクトの適用

 HIGで定義されたデザイン原則Human Interface Guidelinesで定義されたLiquid Glassに関するデザイン原則としては以下のようなものがあります。
最も重要なコンテンツに焦点を当てられるように、レイアウトを定義し、ナビゲーション構造を選ぶ
シンプルで力強いレイヤーを用いて再設計し、デバイスや表示を問わず立体感と一貫性を持たせる
コントロールやナビゲーションでの色の使用は控えめにし、可読性を保ちながらコンテンツ自体が際立つようにする
インターフェイス要素がデバイス間でソフトウェアとハードウェアのデザインに調和するようにする
標準的なアイコン表現と予測可能なアクション配置を採用し、プラットフォームまたいで一貫性を持たせる
詳細はHuman Inteface Guidelinesに記載されています。
https://developer.apple.com/design/human-interface-guidelines

 Liquid Glassへの適合方法について
 ビジュアルのアップデートLiquid Glassという新しいマテリアルはコントロールとナビゲーション要素のための明確な機能レイヤーを作ります。

Liquid Glassはインターフェイスの見た目や質感、動きに影響を与え、さまざまな要因に応じて変化し、基盤となるコンテンツへの注目をうながします。

 システムフレームワークを活用することでLiquid Glassを自動的に適用するシステムフレームワークは、標準コンポーネントが自動的かつさまざまな要因を考慮してLiquid Glassに動的に適用されるようになっています。

SwiftUI, UIKit, AppKitの標準コンポーネントがこれに該当します。

 コントロールやナビゲーション要素でのカスタム背景の使用を減らすコントロールやナビゲーション要素にはLiquid Glassやシステムが提供する他の効果（スクロールエッジエフェクトなど）とコンフリクトする可能性が高いため、カスタム背景の使用は避けるべきです。

特に以下の要素での使用は推奨されません。


SwiftUI
UIKit
AppKit


NavigationStack
UINavigationBar
NSToolbar

NavigationSplitView
UITabBar
NSSplitView

titleBar
UIToolbar


toolbar(content:)
UISplitViewController



 アクセシビリティ設定でインターフェイスをテストするLiquid Glassの半透明表現や流動的なモーフィングアニメーションは、すべてのユーザーにとって最適とは限らないため、アクセシビリティ設定に応じて除去・変更されることがあります。

システムフレームワーク標準のコンポーネントを使用している場合は自動的に適用されますが、カスタム要素やアニメーションを使用する場合もこれらの設定に適応した体験を提供できるようにしましょう。

 Liquid Glassエフェクトの過剰使用を避けるカスタムコントロール要素にLiquid Glassエフェクトを適用する場合は控えめにしましょう。

コンテンツへと注意を向けることがLiquid Glassの目的であるため、複数あるとかえってコンテンツからそらしてしまう可能性があります。

最も重要な機能要素に限定して適用することが大事で、詳しくは別ドキュメントで解説されています。
https://developer.apple.com/documentation/SwiftUI/Applying-Liquid-Glass-to-custom-views
利用できるコードは以下です。


SwiftUI
UIKit
AppKit


glassEffect(_:in:)
UIGlassEffect
NSGlassEffectView


 アプリアイコンアプリアイコンはアイコングリッドが更新され、デバイス間で視覚的に一貫性のある標準化されたアイコン表現が実現しました。

新しいレイヤーが含まれるようになり、システムが提供する光源やその他のビジュアル効果に動的に反応します。
iOS / iPadOS / macOSでは以下のバリエーションが利用可能になりました。
デフォルト（ライト・ダーク）
クリア（ライト・ダーク）
ティント（ライト・ダーク）

 Liquid Glassに合わせてアイコンを再考するアプリアイコンにもデザイン原則があります。以下がドキュメントに挙げられています。
対応するプラットフォーム全体で、視覚的に一貫し、光学的にバランスのデザインを提供する
シンプルなデザインを検討する。塗りつぶしや半透明の図形を重ねた構成がおすすめ
マスキングやブラーなどの視覚効果はシステムに任せて自動適用されるように

 レイヤーを使ってデザインするどの要素を前景・中景・背景に配置するかを考えてデザインします。

それによってシステムが自動的に反射、屈折、影、ぼかし、ハイライトなどの効果を適用します。

 Icon Composerで構成とプレビューを行うレイヤーごとのデザインが決まったら、Icon Composerにドラッグ＆ドロップをします。

Icon Composerでは背景の追加・レイヤーのグループ化・レイヤーごとの不透明度などの調整が行えて、さらに各見え方のプレビューができます。
詳細は以下のドキュメントに記載されています。
https://developer.apple.com/documentation/Xcode/creating-your-app-icon-using-icon-composer

 アップデートされたアイコングリッドでプレビューするアイコン形状はOSごとに決定されるため、要素がクリッピングされないように注意しましょう。

イレギュラーのアイコンにはシステムが背景を適用します（例: macOSのXcode16など）
デザインリソースではこれらのグリッドが提供されています。

 コントロールコントロールはプラットフォームをまたいで見た目が一新されました。

コントロールをスライダーやトグルのノブがインタラクションする際にはLiquid Glassが適用され、ボタンは流動的にメニューやポップオーバーにモーフフィングします。

これによって、ユーザーに生き生きとした動きを感じさせます。

またハードウェアの形状に合うようにコントロールの形状もより丸みを帯びたものに変更されています。

特大サイズのオプションも追加され、ラベルや装飾により多くのスペースを確保できるようになりました。

 コントロールの見た目とサイズのアップデートを確認する以下の表にあるようなシステムフレームワークの標準コントロールを使っていると自動で適用されるため、他のインターフェイスと調和しているかを確認しましょう。


SwiftUI
UIKit
AppKit


Button
UIButton
NSButton

Toggle
UISwitch
NSSwitch

Slider
UISlider
NSSlider

Stepper
UIStepper
NSStepper

Picker
UISegmentedControl
NSSegmentedControl

TextField
UITextField
NSTextField


 コントロールの色の使い方を見直すコントロールやナビゲーションで色を使う場合は控えめにして、コンテンツに注目が集まるようにしましょう。

使う場合はシステムカラーを使うことでライトモードとダークモードに自動的に適応させられます。

 コントロールの詰め方や重なりを確認するLiquid Glassがスムーズに動くように要素の詰め方や重なりを確認しましょう。

 ナビゲーションLiquid Glassはインターフェイスの最前面レイヤー適用され、そこでナビゲーションを定義します。

タブバーやサイドバーなどがこれにあたります。

 明確なナビゲーション階層を確立するこれまで以上に明確で一貫したナビゲーション構造が求められます。

コンテンツのレイヤーとはっきり分離して、コンテンツレイヤーの上に独立したレイヤーを確立しましょう。

 タブバーを自動的にサイドバーへ適応させることを検討するアプリがタブベースである場合、状況に応じてタブバーをサイドバーに適応させることができます。

以下のAPIで可能です。


SwiftUI
UIKit


sidebarAdaptable
UITabBarController.Mode.tabSidebar


 スプリットビューを使用してインスペクタパネル付きのサイドバーを構築するスプリットビューはプラットフォームをまたいで一貫したレイアウトを最適に作成することできます。

対応するAPIは以下です。


SwiftUI
UIKit
AppKit


NavigationSplitView
UISplitViewController
NSSplitViewController

inspector(isPresented:content:)
UISplitViewController.Column.inspector
init(inspectorWithViewController:)


 サイドバーやインスペクタのコンテンツ安全領域を確認するサイドバーやインスペクタをナビゲーションに組み込む場合はセーフエリア適合性を確認し、コンテンツが適切にのぞき見えるようにしましょう。

 サイドバーやインスペクタ下にコンテンツを拡張する背景拡張エフェクトを使うと、コンテンツが実際にサイドバーやインスペクタの下になくても延びているような印象を作れます。

さらにブラーによってサイドバーとインスペクタの可読性は保ちます。


SwiftUI
UIKit
AppKit


backgroundExtensionEffect()
UIBackgroundExtensionView
NSBackgroundExtensionView


 iOSでタブバーを自動的に最小化するか選択するスクロール操作に応じてタブを後退させ、コンテンツを引き立たせるかを選べます。

逆方向にスクロールすることでタブは再表示されます。
SwiftUI
TabView {
  // ...
}
.tabBarMinimizeBehavior(.onScrollDown)
UIKit
tabBarMinimizeBehavior = .onScrollDown

 メニューメニューにはLiquid Glassがプラットフォームをまたいで採用され、よく使われるアクションにはアイコンが追加されるようになりました。

iPadOSでは新たにメニューバーが導入されて、よく使うコマンドへより迅速にアクセスできるようになっています。

 メニュー項目に標準アイコンを採用する標準アクションを実行するメニュー項目にはシステムがメニュー項目のセレクタを使って適用するアイコンを決定します。

最小限のコードで適用するために、標準セレクタを利用しましょう。

 上位のメニューアクションとスワイプアクションを一致させる一貫性と予測可能性を保つためにコンテキストメニューの上部に表示するアクションは、同じ項目に対してのスワイプアクションと一致させましょう。

 ツールバーツールバーもLiquid Glassが適用され、グループ化する仕組みを提供しています。

 どのツールバー項目をグループ化するかを決定する同じ操作を行ったり、インターフェイスの同じ部分に影響を与える項目をグループ化してプラットフォーム間で一貫したグループ化を行いましょう。

スペーサーを作る以下のAPIがあるため、これによってグループを分けることが可能です。


SwiftUI
UIKit
AppKit


fixed
fixedSpace(_:)
space

ToolbarSpacer




 一般的なアクションを表すアイコンを見つけるツールバーで一般的なアクションを表す際はテキストではなく、標準アイコンを使うことを検討しましょう。

これによってインターフェイスが整理され、よく使うアクションの使いやすさを高めます。
同じ背景によってグルーピングされている項目でテキストとアイコンを混在させないようにしましょう。

 すべてのアイコンにアクセシビリティラベルをつけるすべてのアイコンにはアクセシビリティラベルを指定し、VoiceOverやVoice Controlといったアクセシビリティ機能に対応しましょう。

 ツールバーのカスタマイズを監査する固定スペーサーやカスタム項目など、ツールバー内に独自に実装しているものがあれば、システムの挙動と不一致を引き起こす可能性があるため控えましょう。

 ツールバー項目の隠し方を確認する内容のない空のツールバーが表示されないようにしましょう。以下のAPIをツールバー全体に適用することで可能です。


SwiftUI
UIKit
AppKit


hidden(_:)
isHidden
isHidden


 ウィンドウウィンドウはコントロール・ナビゲーション要素・そしてデバイスに調和するようにより丸みを帯びたデザインとなりました。

iPadOSではアプリがウィンドウコントロールを表示できるようになり、連続的なウィンドウサイズ変更をサポートします。
特定プリセットサイズ間で切り替えるのではなく、ウィンドウは最小サイズまで滑らかにリサイズされるようになりました。

 任意のウィンドウサイズをサポートするユーザーが自分に合った幅と高さにウィンドウをリサイズできるようにして、コンテンツもそれに適応するよう調整しましょう。

 スプリットビューを使って列の滑らかなリサイズを実現するシステム標準のスプリットビューを使うことで、あらゆるサイズに合わせてコンテンツを自動的にリフローし、美しくスムーズなトランジションを実現します。


SwiftUI
UIKit
AppKit


NavigationSplitView
UISplitViewController
NSSplitViewController


 レイアウトガイドとセーフエリアを使用するコンテンツにセーフエリアを指定しておくことで、システムがウィンドウコントロールやタイトルバーの位置を適切に調整することができます。

 モーダルシートやアクションシートといったモーダルビューはLiquid Glassに適用しています。シートは角の丸みが増し、ハーフシートはディスプレイ端から少し内側に配置されるようになって背後のコンテンツが覗けるようになりました。

高さを展開するとより不透明な見た目になり、タスクへの集中を維持します。

 シートの縁付近のコンテンツを確認するシートがより丸みを帯びるようになったので内側のコンテンツやコントロールが縁に近すぎないか確認しましょう。

またシートとディスプレイ端の間から見えるコンテンツが期待通りに見えているかを確認しましょう。

 シートやポップオーバーの背景を監査するカスタム背景を適用している場合は削除しましょう。これによってシステム全体での他のシートと一貫した体験を提供できます。

 アクションシートアクションシートは画面下部ではなく、アクションを開始した要素から出現するように表示されます。

アクティブな状態では、アクションシートを表示しながら他のインターフェイス部分と同時に操作が可能です。

 アクションシートの表示元を指定しましょう。アクションシートの表示位置は、起点となるコントロールのすぐ隣に配置してください。

ソースビューやアイテムを必ず設定して、インラインで表示されるようにしましょう。


SwiftUI
UIKit
AppKit


confirmationDialog(_:isPresented:titleVisibility:presenting:actions:)

sourceView,sourceItem

beginSheetModal(for:completionHandler:)


 レイアウトリストベースのレイアウトスタイルがアップデートされて、コンテンツとしてより目立つようになりました。コンテンツに余白を持たせるよう、リスト・テーブル・フォームなどの整理用コンポーネントは行の高さやパディングが大きくなっています。

またセクションに関しては、システム全体に合わせて角の丸みが大きくなりました。

 セクションヘッダーの大文字・小文字を確認するリスト・テーブル・フォームのセクションヘッダーが、単語の頭文字のみ大文字になるようになりました。従来あった全て大文字になる挙動は無くなります。

アプリのテキストがこのシステム全体の仕様に合うよう、大文字・小文字のスタイルを見直しましょう。

 フォームを活用してプラットフォームを跨いだレイアウトメトリクスのメリットを享受するSwiftUIのグループフォームスタイルを使うことで自動的に最新のスタイルにアップデートされます。

 検索各プラットフォームの慣習に合わせて、検索の位置や挙動が最適化され、デバイスやユースケースごとに最適な体験が提供されます。

 検索インターフェイスを有効化した際のキーボード動作を確認するiOSではユーザーが検索フィールドをタップしてフォーカスを与えると、キーボードの表示に合わせて検索フィールドが上にスライドします。

この挙動が他のアプリやシステムの体験と一貫しているかアプリで必ずテストしましょう。

 セマンティックな検索タブを利用するアプリの検索がタブバーの一部として表示される場合は、どのタブが検索タブかを示すシステムAPIを必ず利用してください。システムは検索タブを自動的に他のタブから分離し、末尾に配置します。

これにより、他のアプリと一貫した検索体験が提供され、ユーザーが素早くコンテンツを見つけやすくなります。
SwiftUI
Tab(role: .search) {
  // ...
}
UIKit
UISearchTab { _ in
  // ...
}

 プラットフォームごとの考慮点Liquid Glassは、プラットフォームや利用シーン、入力方法によって見た目や挙動が異なる場合があります。

複数のデバイスでアプリをテストして、質感や動作を確認してください。

 watchOSでは標準のボタンスタイルやツールバーAPIを採用するwatchOSでのLiquid Glassの変化は最小限ですが、最新リリースでアプリを開けば自動的に反映されます。ただし、確実に新しい見た目を適用するためには、watchOS 10以降の標準ツールバーAPIとボタンスタイルを使いましょう。

 tvOSでは標準のフォーカスAPIを採用するtvOSのアプリやシステム体験では、標準ボタンやコントロールにフォーカスが当たるとLiquid Glassの見た目になります。

システム体験と一貫性を持たせるため、カスタムコントロールにもフォーカスAPIを使うことを検討しましょう。

Liquid Glassが適用されるのはApple TV 4K（第二世代以降）です。


SwiftUI
UIKit


focusable(_:)
UIFocusItem

isFocused
focused


 Liquid Glassのカスタム効果を組み合わせて、描画パフォーマンスを向上するカスタム要素にLiquid Glassを適用させたい場合はGlassEffectContainerを使って効果をまとめることで、パフォーマンスを最適化しつつ、滑らかに形状を変化させることができます。

 各プラットフォームでパフォーマンスをテストする定期的にパフォーマンスを評価・改善することは重要です。最新SDKでアプリをビルドするタイミングで、現状のパフォーマンスを確認していきましょう。

詳しくは以下のドキュメントを参照しましょう。
https://developer.apple.com/documentation/Xcode/improving-your-app-s-performance

 最後に最新SDKでビルドした上で以前の見た目を保ちたい場合はUIDesignRequiresCompatibilityでできます。
以上が二つのドキュメントの翻訳になります。Liquid Glassの基本方針はこちらで網羅されているかと思うのでぜひ参考にしてください。

HIGについては公式の日本語版が提供されているのでそちらも確認するようにしましょう。

SwiftUI	UIKit	AppKit
`NavigationStack`	`UINavigationBar`	`NSToolbar`
`NavigationSplitView`	`UITabBar`	`NSSplitView`
`titleBar`	`UIToolbar`
`toolbar(content:)`	`UISplitViewController`

SwiftUI	UIKit	AppKit
`glassEffect(_:in:)`	`UIGlassEffect`	`NSGlassEffectView`

SwiftUI	UIKit	AppKit
`Button`	`UIButton`	`NSButton`
`Toggle`	`UISwitch`	`NSSwitch`
`Slider`	`UISlider`	`NSSlider`
`Stepper`	`UIStepper`	`NSStepper`
`Picker`	`UISegmentedControl`	`NSSegmentedControl`
`TextField`	`UITextField`	`NSTextField`

SwiftUI	UIKit
`sidebarAdaptable`	`UITabBarController.Mode.tabSidebar`

SwiftUI	UIKit	AppKit
`NavigationSplitView`	`UISplitViewController`	`NSSplitViewController`
`inspector(isPresented:content:)`	`UISplitViewController.Column.inspector`	`init(inspectorWithViewController:)`

SwiftUI	UIKit	AppKit
`backgroundExtensionEffect()`	`UIBackgroundExtensionView`	`NSBackgroundExtensionView`

SwiftUI	UIKit	AppKit
`fixed`	`fixedSpace(_:)`	`space`
`ToolbarSpacer`

SwiftUI	UIKit	AppKit
`hidden(_:)`	`isHidden`	`isHidden`

SwiftUI	UIKit	AppKit
`NavigationSplitView`	`UISplitViewController`	`NSSplitViewController`

SwiftUI	UIKit	AppKit
`confirmationDialog(_:isPresented:titleVisibility:presenting:actions:)`	`sourceView`,`sourceItem`	`beginSheetModal(for:completionHandler:)`

SwiftUI	UIKit
`focusable(_:)`	`UIFocusItem`
`isFocused`	`focused`

GitHubで編集を提案

概要ページについて

イントロダクション

適合の仕方

公式のサンプルコード

HIGで定義されたデザイン原則

Liquid Glassへの適合方法について

ビジュアルのアップデート

システムフレームワークを活用することでLiquid Glassを自動的に適用する

コントロールやナビゲーション要素でのカスタム背景の使用を減らす

アクセシビリティ設定でインターフェイスをテストする

Liquid Glassエフェクトの過剰使用を避ける

アプリアイコン

Liquid Glassに合わせてアイコンを再考する

レイヤーを使ってデザインする

Icon Composerで構成とプレビューを行う

アップデートされたアイコングリッドでプレビューする

コントロール

コントロールの見た目とサイズのアップデートを確認する

コントロールの色の使い方を見直す

コントロールの詰め方や重なりを確認する

ナビゲーション

明確なナビゲーション階層を確立する

タブバーを自動的にサイドバーへ適応させることを検討する

スプリットビューを使用してインスペクタパネル付きのサイドバーを構築する

サイドバーやインスペクタのコンテンツ安全領域を確認する

サイドバーやインスペクタ下にコンテンツを拡張する

iOSでタブバーを自動的に最小化するか選択する

メニュー

メニュー項目に標準アイコンを採用する

上位のメニューアクションとスワイプアクションを一致させる

ツールバー

どのツールバー項目をグループ化するかを決定する

一般的なアクションを表すアイコンを見つける

すべてのアイコンにアクセシビリティラベルをつける

ツールバーのカスタマイズを監査する

ツールバー項目の隠し方を確認する

ウィンドウ

任意のウィンドウサイズをサポートする

スプリットビューを使って列の滑らかなリサイズを実現する

レイアウトガイドとセーフエリアを使用する

モーダル

シートの縁付近のコンテンツを確認する

シートやポップオーバーの背景を監査する

アクションシート

アクションシートの表示元を指定しましょう。

レイアウト

セクションヘッダーの大文字・小文字を確認する

フォームを活用してプラットフォームを跨いだレイアウトメトリクスのメリットを享受する

検索

検索インターフェイスを有効化した際のキーボード動作を確認する

セマンティックな検索タブを利用する

プラットフォームごとの考慮点

watchOSでは標準のボタンスタイルやツールバーAPIを採用する

tvOSでは標準のフォーカスAPIを採用する

Liquid Glassのカスタム効果を組み合わせて、描画パフォーマンスを向上する

各プラットフォームでパフォーマンスをテストする

最後に

Discussion