はじめに
この記事は STORES Advent Calendar 2025 の 4 日目の記事です。
STORES 決済の iOS アプリ開発を担当している栗山(@kotetu)です。
今回の記事は、決済アプリチームで現在進行中の Liquid Glass 対応 がテーマです。
本記事では、Liquid Glass 対応の概要についてご紹介した上で、決済アプリチームで事前調査を行なった内容や、調査を進める中で見つかった不具合や現時点で判明している修正方法についてご紹介します。
Liquid Glass 対応とは？
まずはじめに、Liquid Glass 対応の概要についてご紹介します。
iOS 26 / iPadOS 26 では、デザインの大幅な刷新が行われました。Liquid Glass はデザイン刷新の中核となる新しい視覚表現です。
筆者も iOS 26 / iPadOS 26 のリリース直後に私物の端末をアップデートした際には大きく変わった UI に若干違和感を覚えていましたが、2 ヶ月経った現在となってはすっかり見慣れてしまった感があります。
Liquid Glass 表示を Info.plist の設定で一時的に無効化する方法 (注意事項あり)
やはり大きな変更ということもあって、現状 Info.plist に UIDesignRequiresCompatibility という Boolean 型の key を追加することで、 Liquid Glass を無効化できます。
<key>UIDesignRequiresCompatibility</key> <true/>
ただ、WWDC 2025 の Platforms State of the Union において、UIDesignRequiresCompatibility は次回メジャーアップデート (iOS 27 / iPadOS 27) で提供を終了する予定であると紹介されています。
提供終了予定に関する正式なアナウンスはまだされていませんが、 UIDesignRequiresCompatibility の提供終了に備え、計画的に Liquid Glass 対応を進める必要があります。
iOS 26.1 / iPadOS 26.1 から追加された、 Liquid Glass の外観設定
iOS 26.1 / iPadOS 26.1 以降のバージョンでは、設定アプリから Liquid Glass を表示する際の透明度を変更することができるようになりました。
あくまで透明度を変更できるだけなので、 Liquid Glass 自体を無効にすることはできません。
単に Liquid Glass を有効にするとどうなるか？
Xcode 26 以降でビルドした上で、 iOS 26 / iPadOS 26 以降のバージョンの OS がインストールされている端末であれば、特に何もしなくても Liquid Glass が有効になります。
では、そのまま動かしてみるとどうなるのでしょうか？ STORES 決済アプリで実際に提供している画面を使って検証してみました。
iPhone (iOS 26.1)
Liquid Glass を有効にした場合と無効にした場合とでの表示を比較してみましたが、次のような結果となりました。
| Liquid Glass 無効 | Liquid Glass 有効 (色合い調整) | Liquid Glass 有効 (クリア) |
|---|---|---|
 |
 |
 |
 |
 |
 |
iOS 26 の iPhone では、上図のようにナビゲーションバー部分に配置されているボタンにエフェクトがかかっているのがわかります。一方、金額入力時の数字ボタンについては Liquid Glass 設定に関わらず同じ表示となっていることがわかります。
また、Liquid Glass の外観設定については、ボタンの背景が白の場合は 色合い調整 クリア どちらを設定しても、表示としては大差ない(色合い調整 設定の場合はボタンの背後の影が多少濃くなっているように見える程度)ことがわかりました。
決済アプリについては、 UITabBar をあまり使っていないこともあって Liquid Glass を有効にしたとしても表示内容にそこまで大きな差分は生じませんでした。一方、ナビゲーションバーボタンの見た目は確実に変化しているため、アプリの世界観との兼ね合いを考慮した上でどういった表示が望ましいのかについては検討する必要がありそうです。
iPad (iPadOS 26.1)
iPad でも同様に比較してみましたが、次のような結果となりました。
| Liquid Glass 無効 | Liquid Glass 有効 (クリア) |
|---|---|
 |
 |
 |
 |
| サイドバーを非表示にはできない |  |
ナビゲーションバーボタンの変化は iPhone と同じですが、iPad でしか発生しない差分として、サイドバーの表示・非表示が切り替えられることが挙げられます。
サイドバーを非表示にした場合は iPhone で表示したときのような画面になりますが、単に表示領域が拡大されるだけでなく、後述するいくつかの問題が発生しています。
見つかった不具合と解決策
決済アプリについて、Liquid Glass を有効にした場合の影響について調査を行なったところ、ボタンの表示が変わるだけでなく、次のような不具合・課題が見つかりました。
- (iPadOS 26.x.x のみ) サイドバーの UI が変更されたことに伴う各種問題や表示崩れ
- (iPadOS 26.0.x のみ) 起動直後にナビゲーションバーの UI がステータスバーと一部かぶる
- 標準のナビゲーションバーボタンの UI が変わったことに伴う各種問題
(iPadOS 26.x.x のみ) サイドバーの UI が変更されたことに伴う各種問題や表示崩れ
サイドバーの表示・非表示が制御できるようになったことは前述のとおりですが、サイドバーが非表示状態になると、他の画面へ遷移することや前の画面へ戻ることができなくなり、結局はサイドバーを表示してから他の画面へ遷移する必要があります。現状の決済アプリの UI/UX には馴染まないため、できればサイドバーの非表示ができないようにしたいところです。
また、別な問題として、サイドバーがフローティング表示になってしまったことにより、Secondary View Controller の表示に影響が出るようになってしまいました。
たとえば、次に紹介する売上一覧画面では、 UITableView の Header の文字 (下図のオレンジ色の枠の部分) がサイドバー表示時にはフローティング表示になっているサイドバーに隠れてしまっていることがわかります。
| サイドバー表示 | サイドバー非表示 |
|---|---|
 |
 |
サイドバーの表示・非表示の制御を無効化する方法、およびフローティング表示に伴う表示崩れを修正する方法については、次のような修正方法があることがわかりました。
サイドバーの表示・非表示の制御を無効化する方法
STORES 決済アプリでは、サイドバーを表示するために UISplitViewController を使用しています。
UISplitViewController のプロパティに presentsWithGesture があり、このプロパティに false をセットすることでサイドバーの表示・非表示を制御するボタンが表示されなくなりました。
let splitViewController = UISplitViewController() splitViewController.presentsWithGesture = false // この1行を追加する
フローティング表示になることに伴う表示崩れを修正する方法
次に、フローティング表示になったことに伴う表示崩れを修正します。
サイドバーの裏側まで表示領域が広がった一方で、次の図で示す通り、サイドバーが表示されている領域 (コンテンツが隠れてしまっている領域) については、 Safe Area の外側という扱いとなっています。
これまでは、そもそも表示領域がサイドバーを除いた領域だったので、Leading 側の制約については Safe Area への制約としなくても問題ありませんでしたが、今回のようにサイドバーの裏側まで広がるケースについてはきちんと Safe Area への制約とする必要がありそうです。
既存実装を確認したところ、 Superview に対しての制約になっていたので、Safe Area に対する制約へ修正することで、表示崩れは解消されました。
(iPadOS 26.0.x のみ) 起動直後にナビゲーションバーの UI がステータスバーと一部かぶる
Liquid Glass を有効にした場合、次のスクリーンショットに示すとおり、 iPadOS でアプリ起動直後にナビゲーションバーの位置が画面上部のステータスバーと一部かぶってしまう事象が発生していました。
本事象は正式にリリースされている OS の中では iPadOS 26.0.0 および iPadOS 26.0.1 でのみ発生する事象です。手元で確認したところ、 iPadOS 26.1.0 では発生しませんでした。また、ウィンドウサイズの変更や端末の回転、アプリをバックグラウンドに移動させると事象が解消されるため、起動直後からこれらの操作を行わなかった場合にのみ事象が継続します。
比較的発生条件が限定されるため、場合によってはアプリのサポート方針次第では対応せず OS をアップデートしていただくように案内するという選択肢も考えられるかもしれません。
表示崩れを修正する方法
OS のバージョンに依存した問題のため、調査は難航すると予想されましたが、 Apple Developer の Community に同様の報告がありました1。当該スレッドを見ていくと、Xcode の Deployment Info という場所にある Hide during application launch (起動時からステータスバーを非表示にするかどうか) をオフにすることで解消されるとのことの書き込みがありました2。既存のプロジェクト設定を確認してみると、Hide during application launch はオンになっていました。
書き込み通りオフにすると、表示崩れが解消することを確認しました。
ただし、上記設定を変更することにより、Launch Screen では逆にステータスバーが表示されてしまうなど、設定を変更することに伴い別な問題が発生する懸念があります。そのため、対応前にステータスバー表示をどうするか検討した上で対応可否を判断すると良いでしょう。iPadOS 26.0.0 と iPadOS 26.0.1 の利用率によってはあえて対応しない方向に倒すこともありかもしれません。また、画面単位でステータスバーの表示・非表示を制御することも可能なので、併せて検討すると良いでしょう。
標準のナビゲーションバーボタンの UI が変わったことに伴う各種問題
Liquid Glass により、標準的なナビゲーションバーボタンの UI も変更されました。見た目だけでなく、ボタンサイズも変化しており、従来のフラットデザインの時には発生しなかったような問題が発生しています。
例えば、次の画面では、Liquid Glass に対応した方ではナビゲーションバーのタイトル部分が右に寄ってしまっています。左側のキャンセルボタンの幅がこれまでよりも大きくなってしまったことが原因で発生しています。
| Liquid Glass 無効 | Liquid Glass 有効 |
|---|---|
 |
 |
対処方法としては、タイトル部分のデザインを変更して幅をタイトにすることや、キャンセルボタンを Liquid Glass の視覚効果が適用されないようにするために UIButton を使ったカスタムのボタンにすることでボタンの幅を従来と同じサイズに戻すなどの対応が必要となります。
いずれにせよ、技術的な問題だけではなくプロダクトとしての見た目の問題になるので、デザイナー含めた関係者間で検討する必要がありそうです。
また、別な問題として、実装方法の違いがボタンの UI に大きな影響を与えるケースが出てきました。
例えば、先ほど紹介した画面とは別な画面で、同じキャンセルボタンにも関わらず見た目が変わってしまっていることがわかります。
| キャンセルボタンその1 | キャンセルボタンその2 |
|---|---|
| |
 |
キャンセルボタンその2の方は、擬似的にナビゲーションバーを表現したような実装となっており、キャンセルボタンは UIButton で実装されています。これまでのフラット UI であれば、単にテキストを表示するだけのため、ボタン実装の差異はある程度吸収できていましたが、今後は注意する必要がありそうです。
まとめ
今回は、現在決済 iOS アプリで進行中の Liquid Glass 対応に向けた事前調査をテーマに、気をつけるべき点や対応策についてご紹介しました。
決済アプリに限らず、STORES ではデザインシステムを導入しており、Liquid Glass に対応するためにはデザインシステムを踏まえた上で横断的に対応を検討する必要があります。
対応までにはまだ時間が必要ですが、魅力的なユーザー体験や洗練された UI を提供すべく、引き続き頑張って対応していきたいと思います。
- iPadOS 26.0.1 Status Bar Overlay Issue - Apple Community↩
-
こちらの設定は Info.plist の
UIStatusBarHiddenとイコールです。そのため、この設定を変更すると Info.plist に差分が出ます。↩
