Liquid Glass に関するセッション。概要とベストプラクティスを具体的なAPIをもとに紹介。
0:00 – Introduction
- iOS 26とmacOS Tahoeで導入された新しいデザイン「Liquid Glass」を中心に、アプリの見た目や操作感が大きく刷新
- Liquid Glassはガラスの光学特性と液体の流動性から着想を得た新しいマテリアルで、コントロールやナビゲーション要素に適用
- すべてのAppleプラットフォームで一貫した新しい体験を提供
3:07 – App structure
NavigationSplitViewTabViewNavigationStackSheetなどの構造的なAPIが新デザインに最適化NavigationSplitView- Liquid Glassサイドバーや背景拡張効果（
backgroundExtensionEffect）で、コンテンツの美しさと可視性を両立
- Liquid Glassサイドバーや背景拡張効果（
TabView- タブバーはフローティング化し、スクロールで最小化可能
tabBarMinimizeBehavior.onScrollDown@Environment(\.tabViewBottomAccessoryPlacement var placementをもとにアクセサリの表示位置を条件分岐でカスタマイズ
- SheetはデフォルトでLiquid Glass背景となり、ユーザー操作による展開高さに応じてエッジや透明度が変化
- プレゼンテーション（シート、メニュー、アラート、ポップオーバー）はトリガーになったボタンからスムーズに展開
7:49 – Toolbars
- ツールバーはLiquid Glass上に配置され、下のコンテンツに応じて自動適応
ToolbarSpacerでグループ分けやスペース調整が容易badge修飾子で通知バッジを簡単に追加可能- アイコンはモノクロレンダリングが基本となり、必要に応じて.tint()で強調
- モノクロにより視覚的ノイズが減り、コンテンツを強調できる
- スクロールエッジ効果（
scrollEdgeEffectStyle）でコントロールの可読性を維持- 不動要素が多く高密度 e.g. カレンダー：
.hard
- 不動要素が多く高密度 e.g. カレンダー：
11:10 – Search
- 検索フィールドはツールバー下部やタブ専用ページなど、柔軟な配置が可能
searchable修飾子やsearchToolbarBehaviorで検索体験をカスタマイズ- Liquid Glass上に検索フィールドが表示され、デバイスやツールバー嬢のボタン数などの状況に応じて自動的に最適化
14:03 – Controls
- ボタンやスライダー、メニューなど標準コントロールが新デザインに対応
- ボタンはカプセル型がデフォルト、ガラススタイルも選択可能
- 特に注意を引くアクションのために extra large サイズをサポート
.buttonStyle(.glass).buttonStyle(.glassProminent)- スライダーは目盛りの表示や中立値（
neutralValue）に対応 - コントロールの高さや角の一貫性（コーナーコンセントリシティ）も強化
- concentric rectangle shapeや
controlSize修飾子で柔軟に調整可能
17:57 – Liquid Glass effects
.glassEffect修飾子でカスタムビューにもLiquid Glassを適用可能.glassEffect(in: .rect(cornerRadius: 16))
tintやinteractive修飾子で意味やインタラクションに応じた表現が可能.glassEffect(.regluar.tint(.green))- インタラクティブ要素を持つコンテナに対して:
.glassEffect(.regluar.interactive())- ユーザー操作に追従し拡縮、バウンド、光る
GlassEffectContainerで複数のガラス要素を一体的に管理し、自然な反射・屈折・モーフィングを実現glassEffectIDとnamespaceでアニメーションや遷移も滑らかに制御
21:31 – Next steps
- Xcode 26で新デザインを導入し、標準コントロールの自動適用を活用
- アプリ全体のフローや背景色を見直し、不要な装飾を削除
- Liquid Glassを活かした独自コンポーネントでアプリの個性を表現