Liquid Glass革新とSwiftUI/UIKit進化

6/26に開催された「集まれSwift好き！Swift愛好会スピンオフ WWDC25セッション要約会 @ DeNA」での登壇資料になります。

この登壇資料は、WWDC 2025で発表された半透明でダイナミックな「Liquid Glass」デザインシステムと、SwiftUIの最大16倍のパフォーマンス向上、UIKitのSwift Observable対応、WebKit統合などの革新的技術について、実装方法と移行戦略を解説したSwift愛好会での技術セッション資料です。

Transcript

1. Liquid Glass革新とSwiftUI/UIKit進化 Fumiya Sakai 集まれSwift好き！Swift愛好会スピンオフ WWDC25セッション要約会 @ DeNA様 2025/06/26
2. 自己紹介 ・Fumiya Sakai ・Mobile Application Engineer アカウント: ・Twitter: https://twitter.com/fumiyasac ・Facebook: https://www.facebook.com/fumiya.sakai.37 ・Github: https://github.com/fumiyasac ・Qiita: https://qiita.com/fumiyasac@github 発表者: ・Born on September 21, 1984 これまでの歩み: Web Designer 2008 ~ 2010 Web Engineer 2012 ~ 2016 App Engineer 2017 ~ Now iOS / Android / sometimes Flutter
3. 技術書典18では新刊をオンライン頒布しました インプットを整理して次へ繋げる→アウトプットに応用できる様に
4. 本日のアジェンダ このプレゼンテーションについて 1. 革新的な技術の紹介 2. 掲載されていた実装サンプルの解説 3. 移行のベストプラクティス WWDC 2025で発表された革新的なデザインシステムと主要な技術進化について解説します。 WWDC2025セッション 1. UIKitの新機能： https://developer.apple.com/jp/videos/play/wwdc2025/243/ 2. UIKitアプリの柔軟性の向上： https://developer.apple.com/jp/videos/play/wwdc2025/282/ 3. 新しいデザインによるUIKitアプリの作成： https://developer.apple.com/jp/videos/play/wwdc2025/284/ 4. SwiftUIの新機能： https://developer.apple.com/jp/videos/play/wwdc2025/256/ 5. 新しいデザインによるSwiftUIアプリの作成： https://developer.apple.com/jp/videos/play/wwdc2025/323/ 6. SwiftUI向けWebKitの紹介： https://developer.apple.com/jp/videos/play/wwdc2025/231/ ⭐ 主要トピック⭐ ・Liquid Glass デザインシステム ・Swift Observable対応 ・パフォーマンス向上 ・WebKit統合
5. WWDC2025の概要 新しいOSの発表 iPhoneの新機能と洗練されたユーザー体験 iOS26 メニューバーと強化されたウィンドウ操作 iPadOS26 パフォーマンスとデザインの大幅な向上 macOS Tahoe 空間コンピューティングの進化と3Dレイアウト visionOS 26 WWDC 2025の主要ハイライト 半透明でダイナミックかつ精気に溢れる新デザインシステム。すべて のプラットフォームで採用され、UIの一貫性と美しさを向上。 Liquid Glass デザインシステム： SwiftUIとUIKitの両方で大幅な機能強化。パフォーマンス向上、新 API、リアクティブプログラミングの改善。 フレームワークの大幅強化： 新しいWebKit for SwiftUI APIによりWebコンテンツとネイティブア プリのシームレスな統合を実現。 Webとネイティブの統合： iPadOSのメニューバー、検索体験の向上、HDRカラーサポートなど、 各プラットフォームに最適化された機能。 プラットフォーム固有の改善：
6. Liquid Glassとは 新デザインシステムの概念 コンテンツに合わせて変化し、スクロールや操作に 応じて滑らかに反応する半透明素材 流動的な透明感 統一されたデザイン言語 視覚的な特徴 下に重ねたコンテンツに合わせて自動的に変化。 適応性： 操作中に変化する反応性の高いデザイン。 インタラクティブ性： スクロール時に滑らかに反応する動的な表現。 流動性： すべてのAppleプラットフォームで統一体験。 クロスプラットフォーム： Liquid Glassは、WWDC 2025で発表された革新的なデザインシステムです。半透明でダイナミックかつ精気に溢れる新素材として、ユーザーインターフェー スに新たな次元をもたらします。 視覚的な深み コンテンツと調和し、インタラクションに応答する次世代のUI素材 鏡面ハイライトや屈折などのエフェクトによる立体 感と奥行きの表現 iOS、iPadOS、macOS、visionOSなど全プラット フォームに一貫して適用される
7. Liquid Glassの特徴 ✅ 下に重ねたコンテンツに合わせて自動的に変化 Liquid Glassは革新的なデザインシステムで、以下の4つの主要な特性を持ちます。 各特性が組み合わさることで、直感的かつ魅力的なユーザー体験を実現します。 インタラクティブ性 全プラットフォーム対応 適応性 流動性 ✅ 背景に応じた色調とコントラストの自動調整 ✅ 視覚的な一貫性を保ちながら様々なコンテキストに対応 ✅ 操作中にLiquid Glassが変化し、視覚的フィードバック ✅ タッチ、クリック、ホバーなどの操作に応じた反応 ✅ ユーザーの意図を直感的に伝えるアニメーション ✅ スクロール時に滑らかに反応する動的な挙動 ✅ 自然な動きによる没入感の向上 ✅ 画面遷移時の連続性の保持 ✅ iOS, iPadOS, macOS, visionOSで一貫した体験 ✅ 各デバイスの特性に合わせた最適化 ✅ プラットフォーム間の移行をスムーズに
8. SwiftUIの新機能：パフォーマンス向上 大幅なパフォーマンス向上 10万項目を超えるリストの読み込みが6倍高速化 macOS リストの更新が最大16倍高速化 macOS 大型のリストほどパフォーマンスが大きく向上 全プラットフォーム 新しいパフォーマンスツール ビュー本体の更新プロセスを詳細に可視化し、最適化ポイントを発 見。 ビュー更新の可視化： プラットフォームビューの更新を効率的に監視し、パフォーマンスの ボトルネックを特定。 プラットフォーム監視： パフォーマンス関連の問題を簡単に確認できる新しいInstrumentsイン ターフェース。 簡単な問題確認： 大規模アプリケーションでのパフォーマンスが劇的に向上し、より複雑 なUIも快適に動作。新しい診断ツールでボトルネックの発見も容易に。 開発者へのメリット：
9. SwiftUIでのLiquid Glass実装 struct CustomBadge: View { var body: some View { Text("New") .padding(.horizontal, 12) .padding(.vertical, 6) .glassEffect() } } GlassEffectContainer { HStack { Badge(text: "Popular") .glassEffect() Badge(text: "New") .glassEffect() } } 任意のSwiftUIビューに簡単にLiquid Glass効果を適用できます。 複数のガラス要素をグループ化して、一貫した視覚効果を作成します。 struct ExpandableBadges: View { @State private var isExpanded = false @Namespace private var glassNamespace var body: some View { GlassEffectContainer { if isExpanded { HStack { Badge(text: "Award 1") .glassEffect() .glassEffectID("badge1", in: glassNamespace) Badge(text: "Award 2") .glassEffect() .glassEffectID("badge2", in: glassNamespace) } } else { Button("Show Awards") { withAnimation { isExpanded.toggle() } } .glassEffect() .glassEffectID("toggleButton", in: glassNamespace) } } } } .glassEffect修飾子 GlassEffectContainer ガラス要素間のトランジション glassEffectIDとnamespaceを使って要素間の 滑らかな変形を実現します。
10. SwiftUIでのLiquid Glass実装 struct CustomBadge: View { var body: some View { Text("New") .padding(.horizontal, 12) .padding(.vertical, 6) .glassEffect() } } GlassEffectContainer { HStack { Badge(text: "Popular") .glassEffect() Badge(text: "New") .glassEffect() } } 任意のSwiftUIビューに簡単にLiquid Glass効果を適用できます。 複数のガラス要素をグループ化して、一貫した視覚効果を作成します。 struct ExpandableBadges: View { @State private var isExpanded = false @Namespace private var glassNamespace var body: some View { GlassEffectContainer { if isExpanded { HStack { Badge(text: "Award 1") .glassEffect() .glassEffectID("badge1", in: glassNamespace) Badge(text: "Award 2") .glassEffect() .glassEffectID("badge2", in: glassNamespace) } } else { Button("Show Awards") { withAnimation { isExpanded.toggle() } } .glassEffect() .glassEffectID("toggleButton", in: glassNamespace) } } } } .glassEffect修飾子 GlassEffectContainer ガラス要素間のトランジション glassEffectIDとnamespaceを使って要素間の 滑らかな変形を実現します。 ✅ すべてのSwiftUIビュー要素に適用可能 ✅ 半透明でダイナミックなガラス効果を自動生成 ✅ 背景コンテンツに応じて自動的に適応 一行のコードで既存のビューに適用可能。 軽量な実装： 背景に合わせてデザインが自動調整 自動適応： 関連要素の統一感を保持 グループ化： ⭐ 主要ポイント⭐
11. UIKitの新機能: Observable対応 Swift Observableの自動追跡 UIKitがSwift Observableオブジェクトを自動的に追跡し、依存関係を管理するようになりました。手動でのsetNeedsLayoutの呼び出しが不要になり、コードがシ ンプルになります。 @Observable class UnreadMessagesModel { var showStatus: Bool var statusText: String } override func viewWillLayoutSubviews() { super.viewWillLayoutSubviews() // 自動的に依存関係を追跡、手動でのsetNeedsLayout不要 statusLabel.alpha = unreadMessagesModel.showStatus ? 1.0 : 0.0 statusLabel.text = unreadMessagesModel.statusText } 依存関係の自動追跡： 主な利点 変更を監視し、必要な時だけUIを更新 パフォーマンスの向上： 必要なプロパティのみを効率的に更新 コードの簡素化： ボイラープレートコードの削減 👉 手動でsetNeedsLayoutを呼び出す 👉 変更の追跡が複雑 👉 不要な再描画が発生 🙅 Before: 👉 依存関係の自動追跡 👉 変更があった時のみ更新 👉 コードがシンプルに 🙆 After: Before vs After: 新しいupdateProperties()メソッド： UIViewとUIViewControllerの両方で利用可能な新機能 layoutSubviews()の直前に実行 独立した実行環境 効率的なプロパティ更新
12. UIKitのアニメーション改善 flushUpdatesオプションの導入 UIViewアニメーションに新しいオプションが追加され、ObservableオブジェクトとAuto Layout制約の変更をシームレスにアニメーション化できるようにな りました。 // Observable オブジェクトのアニメーション UIView.animate(options: .flushUpdates) { model.badgeColor = .red } // Auto Layout制約のアニメーション UIView.animate(options: .flushUpdates) { topSpacingConstraint.constant = 20 leadingEdgeConstraint.isActive = false trailingEdgeConstraint.isActive = true } 👉 モデルプロパティの変更をアニメーション化 👉 UIの更新を自動的に検出 👉 複数の制約変更を一度にアニメーション化 👉 レイアウト更新を効率的に処理 flushUpdatesオプションの利点： ①より効率的な更新処理 ②スムーズな状態遷移 ③シンプルな実装方法
13. UIKitでのLiquid Glass実装 // カスタムビューでのLiquid Glass採用 let effectView = UIVisualEffectView() addSubview(effectView) let glassEffect = UIGlassEffect() UIView.animate { effectView.effect = glassEffect } // コンテナにLiquid Glass要素を追加 let container = UIGlassContainerEffect() let containerView = UIVisualEffectView(effect: container) let view1 = UIVisualEffectView(effect: UIGlassEffect()) let view2 = UIVisualEffectView(effect: UIGlassEffect()) containerEffectView.contentView.addSubview(view1) containerEffectView.contentView.addSubview(view2) struct CustomBadge: View { var body: some View { Text("New") .padding(.horizontal, 12) .padding(.vertical, 6) .glassEffect() } } GlassEffectContainer { HStack { Badge(text: "Popular") .glassEffect() Badge(text: "New") .glassEffect() } } 任意のSwiftUIビューに簡単にLiquid Glass効果を適用できます。 複数のガラス要素をグループ化して、一貫した視覚効果を作成します。 .glassEffect修飾子 GlassEffectContainer UIGlassContainerEffect UIGlassEffect UIVisualEffectViewとセットで利用する。 UIKit SwiftUI UIKit SwiftUI
14. Liquid Glassのベストプラクティス 新デザインシステムの適切な使用場面と避けるべき用途 🙆 推奨される用途 🙅 避けるべき用途 ユーザーに特に注目してほしい機能や情報に使用します 重要な機能の強調： ユーザーの操作を促す要素や、操作に応じて変化する要素に適しています インタラクティブ要素： アプリのブランドや個性を際立たせるポイントで使用します アプリの独自性の演出： 通知や重要なアラートなど、注目を集めるべき情報の表示に効果的です ユーザーの注意を引くべき要素： 機能的な意味を持たない純粋な装飾として過剰に使用することは避けましょう 単なる装飾目的： インタラクティブ性のない大きな背景領域には適していません 静的な背景： 画面内の多くの要素に使用すると視覚的な混乱を招きます 過度な使用： テキストの可読性が低下する場面での使用は避けてください 読みやすさを損なう用途： 機能的な意味があるか？ Yesの場合次のステップへ 設計指針 システムコントロールで代替可能？ Yesならシステムコントロールを優先 カスタム実装 適切なコンテナ + 一貫性 + アクセシビリティ
15. 移行のポイント ①新しいSDKの確認 ②パフォーマンス最適化 ③Liquid Glassの戦略的活用 👉 Xcode 26でアプリをビルド 最新SDKでの動作確認を行う 👉 自動適用される新デザインの確認 Liquid Glassデザインは再コンパイルで自動適用 👉 レイアウトの互換性テスト 新しいデザインとの互換性を確認 👉 新しいSwiftUI Instrumentsを活用 長いビュー本体の更新を可視化 👉 リスト・スクロールビューの測定 macOSでは大型リストが最大16倍高速化 👉 必要に応じたコード最適化 パフォーマンス関連の問題を特定し修正 👉 アプリの重要な機能を特定 Liquid Glassを適用すべき要素の選定 👉 システムコントロールを優先的に使用 標準コントロールは自動的にLiquid Glass対応 👉 カスタム実装は慎重に計画 一貫性とアクセシビリティに配慮 UISceneライフサイクルの採用 UIRequiresFullscreenキーの削除 🙆 必須移行: .presentationBackground(.regularMaterial) .background(.ultraThinMaterial) .overlay(.black.opacity(0.2)) 🙅 削除対象:
16. まとめと次のステップ Liquid Glassの適用に加えて全体的に様々な改善も大幅にされている 1. WWDC2025の主要革新技術： WWDC2025では、Liquid Glass デザインシステムの導入により半透明でダイナミックな新しいUI表現が可能になり、SwiftUIでは 最大16倍のパフォーマンス向上、UIKitでのSwift Observable対応、WebKit for SwiftUIによるWebコンテンツ統合など、アプリ 開発における大幅な機能強化が発表されました。 開発者は新しいXcode 26でのアプリビルドと自動適用される新デザインの確認、新しいInstrumentsを活用したパフォーマンス測 定と最適化、そしてLiquid Glassの戦略的実装とWebKit統合の検討を段階的に進める必要があります。 実装においては小さく始めて段階的に移行し、ユーザーテストを通じて検証しながら、Apple Developer DocumentationやSwift 愛好会などのコミュニティリソースを活用して継続的な学習とスキル向上を図ることが重要です。 2. 開発者の移行戦略と実装ステップ 3. 継続的学習とコミュニティ活用
17. Thank you for listening !