Liquid Glass 対応 — タップルでの意思決定と実装

## この記事で学べること - デザイン・方針がわかる - 実装の参考になる - バグ対応の参考になる 対応に困っていたり、なかなかチーム内の温度感が上がらなかったりする方がいたら、ぜひこの記事を参考にしてください。 ## 目次 - なぜやるのか - デザインの変遷 - 対応期限 - 早めに対応を進めるべき理由 - 対応フロー - 対応事例 ## なぜやるのか Liquid Glass（リキッドグラス）は、半透明のガラスのような質感と、光の反射・屈折を伴う動的なアニメーションが特徴です。 10年に1度の大規模なデザイン変更となっており、標準的なデザインとして認知が広がっています。 対応アプリも着々と増えており、Apple公式からも[デザインギャラリー](https://developer.apple.com/design/new-design-gallery/)が公開されました。 私たちもその大きな流れに乗っていきます。 ![image](https://developers.cyberagent.co.jp/blog/wp-content/uploads/2026/04/2d4283aa81726a8e827e6b4d523c8f16-1024x465.png) ![image](https://developers.cyberagent.co.jp/blog/wp-content/uploads/2026/04/e5fc5b1301b85b721cdc532c98aa948f-1024x285.jpg) 引用：[Apple Document](https://developer.apple.com/documentation/TechnologyOverviews/adopting-liquid-glass) ## デザインの変遷 実際に、これまでのデザインの変遷を見てみましょう。 2007〜2013年：スキューモフィズムデザイン（Skewmorphism） iPhone登場時のデザインで、デジタル機器に不慣れな人（初心者）にも使ってもらえるよう、立体感を持ちリアリティの高いデザイン 2013〜2025年：フラットデザイン（Flat Design） 影や立体感を排除したシンプルなUIにすることで、文字や写真などのコンテンツを主役としたデザイン 2025〜：リキッドグラスデザイン（Liquid Glass Design） 実世界のガラスのように光を反射・屈折する半透明の新素材を使い、コンテンツへの注目を高めつつ、周囲に応じて変化するダイナミックなデザイン ![image](https://developers.cyberagent.co.jp/blog/wp-content/uploads/2026/04/d2dfa19169148cc5bdd60e7a66c40c11-1024x683.jpg) ## デザイン刷新時の注意点 新しいデザインが浸透していく一方で、その流行に乗る際には注意すべきポイントが存在します。 過去の、スキューモフィズムデザインからフラットデザインへの変更時を振り返ります。 ## スキューモフィズムデザイン（Skewmorphism） → フラットデザイン（Flat Design）の影響 - シンプルになったことで情報理解や開発効率が向上 - 立体感が失われたことで、どこがボタンやリンクなのか、ユーザーが直感的に理解しにくい デザインの移り変わりの際には、これまでのデザインで培ったユーザーの価値観とのギャップが必ず生まれます。 立体感の強いスキューモフィズムデザインに慣れていたユーザーは、フラットデザインのオブジェクトの境界線の認知に慣れるまで多少の時間が必要でした。 この点を踏まえて、リキッドグラス移行でどの点に注意すべきかを考えます。 ## フラットデザイン（Flat Design） → リキッドデザイン（Liquid Design）の影響 Liquid Glass では、透過性と視認性のバランスが重要です。 透過性やインタラクション（タップしたり、ホバーしたりする時のオブジェクトの動き）が強いため、以下3点に特に注意します。 ① Liquid Glass Layerの上に乗った要素（文字など）が見づらい ② オブジェクトとしての存在感は強いので、多用するとトーン&マナー（トンマナ）が崩れる ③ 重要機能のLiquid Glass対応は控えめにして、影響を最小限に ①の対策としては、透過性を下げられる箇所に関しては背景色を設定したり、ベース背景と同化しないように色を変えるなどします。※対応事例は後述 - 公式の推奨に従いつつ、視認性が損なわれる箇所は調整する - ex. 公式セッションでは、`.sheet`でモーダルを表示する際には背景色を設定する`presentationBackground`を除外するよう推奨されていますが、敢えて使用して透過性を下げています。 ② に関しては、対応可能なUIオブジェクトを洗い出してデザイナー陣に掲示。実際にアプリを配布して適用判断していきました。 ![image](https://developers.cyberagent.co.jp/blog/wp-content/uploads/2026/04/4eeb32e151d04bda1361db5511b5c644-1024x740.jpg) 左：標準APIにそのまま従ったもの 真ん中：背景色（白100%）を追加したもの 右：背景色（白70%）を追加のもの ※リリース成果物とは部分的な差分があります ## 対応期限 Liquid Glass 対応には期限があります。 2025年のWWDC（Worldwide Developers Conference）では、次のメジャーアップデートで互換性フラグを廃止することを宣言しています。 [Apple 公式セッション](https://developer.apple.com/jp/videos/play/wwdc2025/102/?time=1153)より: As you evaluate your app’s UI and the time you need to adopt the new design, we’re providing an option to continue to use your app’s current design with Xcode 26. We intend this option to be removed in the next major release. We are so excited to see the transformative effects of Liquid Glass in your apps. 要約すると: しばらく現在のデザインを維持するオプションを提供しますが、次のメジャーアップデート（2026年9月）でこのオプションは削除されます。 ※ `UIDesignRequiresCompatibility = true` → Liquid Glass を無効化 ## 早めに対応を進めるべき理由 Liquid Glass対応には、落とし穴がたくさんあります。 - iOS 26未満と以上で同じAPIでも挙動が異なる - iOS 26.X.Xシリーズ内でも、バージョンによって動作が異なる タブバー（Tab Bar）のAPIやセーフエリア（Safe Area）、アニメーションの挙動など（後述） - ナビゲーションバー（Navigation Bar）、タブバーの高さがそれぞれ 44px→56px、49px→83px に変更 - 既存のカスタム実装と競合し、外観や動作が崩れる - バージョンによっては正しく実装しても外観や動作が崩れる。特に 26.0.X - タブバーのタイトル・アイコンのカスタマイズが大きく制限される メジャーアップデートのリリース時期と Liquid Glass 対応を同時に完了させるスケジュールでは、これらの落とし穴に十分対処できません。バグを含むバージョンの公開や検証期間の不足による事業への影響は、軽視すべきではありません。 ## 対応フロー いきなり完璧な状態でテスト・リリースを行うのはリスクが大きいため、段階的なリリース計画を策定します。 後から「やっぱりここも対応したいね」という形で対応が先送り・追加されないよう、事前に理想の完成形を明確に定義し、それを目指して進めます。 ※対応時期については、当時の実際のスケジュールを記載しています。 ## フェーズ1 (1月中旬) 1-a：タブ（Tab）の Liquid 化を主眼に置く 1-b：それ以外の箇所は Liquid 化せず、レイアウトが崩れた部分のみを修正する ![image](https://developers.cyberagent.co.jp/blog/wp-content/uploads/2026/04/LG-scaled-e1776515067712-1024x413.jpg) ※すべての対応事例は後述しています。 1枚目：タブタイトルの色変更が効かなくなっています。バージョンによっては、アイコンの色自体が変わらない場合もあります。 3枚目：キーボードに丸みと透過効果が適用されたことで、デザインが崩れています。 4枚目：戻るボタンとユーザーステータスが、同一のグループ化UIに統合されてしまっています。 5枚目：戻るボタンの右側に不要な余白が生じており、Liquid Glass の境界線によって可視化されています。 ## フェーズ2 (1月中旬 〜 2月中旬) 2-a：ナビゲーション・シートの Liquid 化を主眼に置く 2-b：フェーズ1でLiquid化を見送った箇所を Liquid 化する（入力フィールドなど） ![image](https://developers.cyberagent.co.jp/blog/wp-content/uploads/2026/04/0e8cf9876fbc8fb0a0068a8914fa9f97-e1776515125591-1024x597.jpg) 1枚目：ナビゲーションバーを透過させる 2枚目：シートの透過度が高いため、視認性を調整する 3枚目：キーボードの透過や丸みに対応し、入力フィールドを調整する ## フェーズ3 (2月中旬 〜 3月中旬) 3-a：適切な範囲内で Full Liquid Glass 化を適用する 3-b：強制適用されない箇所も含め、調整の必要性を検討する タップル（TAPURU）と Liquid Glass の世界観のバランスを崩さないよう、品質重視で進める ![image](https://developers.cyberagent.co.jp/blog/wp-content/uploads/2026/04/LG-1-e1776515161131-1024x770.jpg) 1枚目：結果として HorizontalPager のナビゲーションは Liquid 化を見送り。FloatingButton や通知バーなどを Liquid 化 2枚目：検索バーの Liquid 化 ## 対応事例 ## 事例 1: Tab / NavigationBar の背景 let appearance = UITabBarAppearance() appearance.configureWithDefaultBackground() let appearance = UINavigationBarAppearance() appearance.configureWithDefaultBackground() ## 事例 2: 入力フィールドの視認性 ![image](https://developers.cyberagent.co.jp/blog/wp-content/uploads/2026/04/LG-3-e1776515190190-1024x767.jpg) 特に強調したい要素以外には使用を控えるべきとされています（[公式ソース](https://developer.apple.com/jp/videos/play/wwdc2025/219/?time=970)）。背景と同化して見にくくなるため、tint でわずかに色付けします。 .regular.tint(Color) ## 事例 3: テキストエディタとモーダル ![image](https://developers.cyberagent.co.jp/blog/wp-content/uploads/2026/04/429836e1fa1a6d9be5b33cfc6bb56dad-1024x737.jpg) 左：テキストエディタと ScrollView の色の差異が生じたため、修正する。 .scrollContentBackground(.hidden) 中央：カスタムナビゲーション実装だったため高さが一致せず、レイアウトが崩れた 標準 API に置き換える。 右：モーダルの透過度が高いため、テキストやスライダーの視認性が低下する。背景色を付与する .presentationCornerRadius(CGFloat) .presentationBackground(Color) ![image](https://developers.cyberagent.co.jp/blog/wp-content/uploads/2026/04/fa92a6d3c8487096dea8836e4d46f336-1024x744.jpg) ## 事例 4: あえて対応しないもの 現状、HorizontalPager に適した Liquid UI が提供されていないため、他サービスの対応状況を確認し、優れた実装があれば参考にする予定である。 ![image](https://developers.cyberagent.co.jp/blog/wp-content/uploads/2026/04/a7664cd3e9cc34c66227e4ea8ce80726.jpg) 公式ドキュメントでは、以下の透過防止用 API が紹介されている - scrollEdgeEffectStyle(.hard, for: .top) - scrollView.topEdgeEffect.style = .hard ## 事例 5: エッジスワイプで戻る際に、白いグラデーションが下降する現象（iOS 26.1 / ビルド番号 23B85） ![image](https://developers.cyberagent.co.jp/blog/wp-content/uploads/2026/04/5d84bfe68e47-20251208-473x1024.jpg) iOS26.2 (23C5044b) では治っていることを確認。アップデートを推奨 ## 事例 6: glassEffectの評価で落ちる iOS26.0 beta 2 (23A5276f) #5 View.glassEffect #6 Hoge.body.getter ... Foo.swift:320 パブリック・パブリックベータ・次のデベロッパベータのバージョンにアップデート ## 事例 7: コンテンツがセーフエリアを超えない ![image](https://developers.cyberagent.co.jp/blog/wp-content/uploads/2026/04/9024fdd805f1-20251208-473x1024.png) UIKit を使っている画面では、xib上のアンカーをview.topにしても セーフエリアを超えて描画されない箇所が見られました。 edgesForExtendedLayout = [.top, .bottom] extendedLayoutIncludesOpaqueBars = true また、UIKitもSwiftUIもトップコンテンツがScrollViewかつ余白が入っていなければ 自動でナビゲーションを超えて描画してくれるようになっています。 ScrollView { } // ナビゲーション下でもコンテンツが透けて見える VStack { ScrollView } // ナビゲーション下でもコンテンツが透けて見えない ScrollView { }.padding(.top, 1) // ナビゲーション下でもコンテンツが透けて見えない もしも不要なStackやpaddingがあるせいでignoreSafeArea等を使用しているのであれば、 まずはStackやpadding, ignoreSafeAreaの除去を試みてください。 ## 事例 8: TabIconとTabTitleがくっつく iOS26.0 beta 2 (23A5276f) パブリック・パブリックベータ・次のデベロッパベータのバージョンにアップデート ## 事例 9: 非選択時のTabIconの色が変わらない iOS 26.0 ~ どの標準APIを触っても、タブやアイコンの色変更に制限がかかるようになりました。 タブが透過する仕様上、視認性の観点から制限がかかっていると推測しますが、サービスとして看過できないためどうにかして色を変えます。 withRenderingMode(.alwaysTemplate) + UITabBarItemAppearance.normal.iconColor = ... alwaysTemplateとAppearanceで変えていた色を、 あらかじめ色を変更した画像と alwaysOriginal の組み合わせによって色を変更しました。 image.tintedImage(...) + .withRenderingMode(.alwaysOriginal) ![image](https://developers.cyberagent.co.jp/blog/wp-content/uploads/2026/04/8d720b2775db7c51cbac84a61fd0ac15-300x71.png) バージョンアップデートが進むと、今度はタブタイトルの色変更ができなくなっていました。 ![image](https://developers.cyberagent.co.jp/blog/wp-content/uploads/2026/04/608f87184321e4898ebaed15f41403e-300x63.png) デザイン上、どうしても対応したいという要望もあったため、 アイコンにタイトルを含めることで対応しました。 ## 事例 10: 戻るボタンに余分な余白が入る 明確な縁が描画される都合上、iOS26未満で見えなかったレイヤ構造が可視化されるようになりました。 このケースでは、ナビの戻るボタンの共通実装に半角スペースが入っていたことが原因でした。 backBarButton.title = " " // これが原因 self.navigationItem.backBarButtonItem = backBarButton ## 事例 11: List.swipeActionsのアニメーション崩れ leading, trailingを付けて左右にスワイプすると、List上部が潰れる ![image](https://developers.cyberagent.co.jp/blog/wp-content/uploads/2026/04/bcc20af15305-20251208-472x1024.jpg) こちらはやむなしで潰れる分上に上げて、クリップするようにしました。 ## 事例 12: ナビアイコンにつけているバッジがクリップされる Liquid Glassの仕様でクリップされてしまうので、バッジのデザインそのものを変更 ![image](https://developers.cyberagent.co.jp/blog/wp-content/uploads/2026/04/249be1b27db1ff85f0ca8fd52ff7dc0e-982x1024.jpg) 左：iOS26以上でバッジが見切れていることがわかる 右：iOS26以上における通知有効時のUIを刷新 .buttonStyle(.glassProminent) // Navに配置したボタンのGlassLayerの色付け ## 事例 13: OSバージョンごとのデザインを統一 以下の観点から、デザインは極力統一できるように心がけました。 - デザインコスト - 実装コスト - デバッグコスト タップルでも、途中まではiOS26未満と以上でデザインを分けていましたが、一部を除いて統一する意思決定をしました。 ![image](https://developers.cyberagent.co.jp/blog/wp-content/uploads/2026/04/LG-2-e1776515292349-942x1024.jpg) 1列目：統一前のiOS18以下の入力フィールド 2列目：統一後のiOS18以下の入力フィールド 3列目：フェーズ3対応後のiOS26以上向け入力フィールド 最初はLiquidGlass向けの入力フィールドがiOS18以下のデザインにも合うとは思いもしませんでした、 いざ合わせてみると違和感がありませんね。 ## 事例 14: Androidとのデザイン棲み分け Androidのデザインに関しては、Liquid Glass がiOS独自のデザインシステムであるため、適用しない(棲み分けてデザインする) 方針としました。 ## おわりに タップルでは、この機にいくつかの既存のカスタム実装を捨てて標準APIに全乗りする意思決定をしました。 デザイン主軸で対応が進められる機会もなかなかないので、とても良い機会でした。 画面によってばらつきのあったシートやナビゲーションのスタイルなどが統一され、 運用面での恩恵も多く受けました。 また、想定した以上にiOS26以上の不具合が多く出てきたので、早めに対応を進めることをお勧めします。

Liquid Glass 対応 — タップルでの意思決定と実装

背景や根拠まで確認しますか？

調べる

選ぶ

サイト