この記事について
私はジドスタというダイエットiOSアプリを個人開発しており、先日このアプリを遅れながらiOS26に対応させました。内容としては主にLiquid Glass対応や、iOS26で仕様変更された既存APIに関係するUIの調整などを中心とした新しい画面デザインへの移行でしたが、この記事はその時に考えたことや作業内容をまとめたものになります。
移行前後の画面
トップ画面
| 移行前 | 移行後 |
|---|---|
 |
 |
グラフ画面
| 移行前 |
|---|
 |
| 移行後 |
|---|
 |
移行方針
1. Liquid Glassや、見た目が新しくなった既存APIのUIを積極的に採用する
今回の移行作業で最重視したことは、新しい技術へのキャッチアップです。そこで移行前のアプリと新要素を比較検討し、導入できそうな新しいUI要素は積極的に取り入れることにしました。
2. 新しいUIを取り入れる時に、そのUIの標準実装法やベストプラクティスになるべく従う
iOS26のリリースから記事作成時点で約9ヶ月が経過していますが、新要素の実装に関する情報はまだまだ少ないのが現状です。そのため、独自仕様で開発するほど調査に時間がかかり、移行コストが増大することが懸念されました。
とくにLiquid Glassについては、公式が紹介している実装パターンから外れると多くのバグが発生したため、今回は全体的に標準的な実装方法に沿って開発することにしました。
3. iOS18以前の画面デザインも調整し、OSのバージョン間でのデザイン整合性を保つ
今回の移行作業でiOS26以降のデバイスでの画面デザインが大幅に変更されることを考慮し、iOS18以前のデバイス上でのデザインもiOS26以降のものに近づける形で変更することにしました。
移行前の画面デザインの崩れ
移行を始める前まではinfo.plistにUIDesignRequiresCompatibility: YESと設定し、LiquidGlassなどを無効化していましたが、今回の移行作業を始めるにあたり、値をNOに変更し旧デザインのアプリをXcode26でビルドしたところ、以下のように画面デザインが崩れた状態になっていました。
| トップ画面 |
|---|
 |
| グラフ画面 |
|---|
 |
- NavigationBarのUIBarButtonItemがLiquid化して背景が適用され、なぜか背景色が黄色になっている
- トップ画面の右下の非アクティブのボタン群の形が完全な円形でなくなっている（CornerRadiusの設定が効いていない？）
そのほかにも
- キーボード上部に配置していた閉じるボタンがLiquid化してレイアウトが崩れている
- アクションシートがアラートのような見た目に変更されている
などなど、確認が必要な箇所が多数見受けられました。
そのため新しい画面デザインは、これらのUIコンポーネントの調整も含めた内容になっています。今回のデザイン移行では、こうした問題箇所の調査・検証がメインの作業となりました。
個別のUIコンポーネントの調整内容
前提
- 以下の調整は全てUIKitでの内容となります。
- それぞれの調整内容ではiOS26での変更に関係する部分のみを取り上げています。その他にも細かなUIの調整作業を行なっています。
- 解説は現時点での私の理解によるものです。間違っている部分がありましたらご指摘いただけると非常に助かります。
NavigationBar
| 調整前 | 調整後 |
|---|---|
 |
 |
主な調整内容
- NavigationBar背景色の設定を取り消してデフォルトの状態に変更
- UIBarButtonItemの背景とアイコンの色を変更
調整前のNavigationBarはUINavigationBar.appearance()を使って背景色を設定して塗りつぶしていましたが、これはLiquid Glassデザインではあまり推奨されないようです。
Liquid Glassデザインにおいて、NavigationBarのようなナビゲーション要素は透過的でありその背後に展開されているコンテンツが透けて見えるようにするのが基本らしいです。
ただ、私のアプリはスクロールができるViewはほとんどなく、ナビゲーション要素を配置している領域の背後にコンテンツが来るということはあまりないので（画像のTop画面もスクロール不可）、NavigationBarをLiquid化することのメリットはほぼない状態でしたが、移行方針にのっとり、この新しいデザインの実装について勉強したいと思ったので上記のような実装を行いました。
また、左右のUIBarButtonItemに黄色い円形の背景が適用されたのは、iOS26移行のUIBarButtonItemは自動的にLiquid化され、円形の背景が適用されるためのようです。さらにその背景の色は、明示的に指定していない限り、UIBarButtonItemの背後の色を参照して自動的に決められるらしく、今回の例で言えば背後のオレンジ色の影響を受けた結果として黄色の背景色になっているようです。
なのでNavigationBarの背景色を廃止したところ、UIBarButtonItemの背景色もなくなりました。そこからさらに配色を調整し、最終的に上記のような仕上がりのボタンになりました。
キーボードの閉じるボタン
| 調整前 | 調整後 |
|---|---|
 |
 |
主な調整内容
-
barButtonItem.hidesSharedBackground = trueを設定してLiquid Glassを無効化 - UIBarButtonItemにUIButtonをcustomViewとして設定
- UIBarButtonItemとキーボードの間に少し余白ができるようにレイアウトを調整
この閉じるボタンはもともとツールバーの中に配置されていたUIBarButtonItemで、このUIBarButtonItem込みのツールバーをテキストフィールドのinputAccessoryViewに指定するような方法で実装していました。
iOS18以前だとキーボードの上にツールバーと共に表示されていましたが、iOS26で表示したところツールバーが表示されなくなっており、ボタンもLiquid化され見た目が大きく変わっていました。
最初はボタンをLiquid化した状態で調整しましたが、キーボードとの背景色や透過度の違いからどうしても悪目立ちしてしまい、両者で一体感のある見た目を作り出すことができなかったので、仕方なくLiquid Glassを無効化しました。
無効化すると"閉じる"というテキストだけがキーボード上に浮いているようなデザインになったので、ボタンのcustomViewとしてUIButtonを設定し、背景色なども調整することでキーボードと馴染むデザインにすることができました。
UIButton
| 調整前 | 調整後 |
|---|---|
 |
 |
主な調整内容
-
cornerConfigurationを利用してボタンの形状を円形に戻した
画像の三つのボタンはもともとlayer.cornerRadiusを設定して円形にしていましたが、Xcode26でビルドしたところ、この設定が効かなくなったのか調整前のように完全な円形ではなくなっていました。
調べた結果cornerConfigurationというものがiOS26から新しく実装されており、これを利用して以下のように実装したところ、完全な円形に戻すことができました。
let button = UIButton()
if #available(iOS 26.0, *) {
// .capsule()と指定することで円形になる
button.cornerConfiguration = .capsule()
} else {
button.layer.cornerRadius = button.bounds.height / 2
}
アクションシート
| 調整前 | 調整後 |
|---|---|
 |
 |
主な調整内容
-
preferredStyle: .actionSheetで初期化したUIAlertControllerのpopoverPresentationControllerを利用して、アクションシートの表示位置等を指定した
iOS18以前のアクションシートは画面下部から表示されていましたが、iOS26でビルドすると画面の中央にアラートとして表示されていました。
iOS26からのアクションシートは調整後の画像のようにふきだしのような見た目に変更されている影響で、アクションシートの発生源を指定する必要があるようです。
具体的には、.actionSheetで初期化したUIAlertControllerのpopoverPresentationControllerを利用して、発生源やふきだしのとんがり部分の方向を指定することで調整後のようなアクションシートを実装させることができました。
以下のコードは私が指定した設定内容です。
let actionSheet = UIAlertController(
title: "タイトル",
message: "メッセージ",
preferredStyle: .actionSheet
)
// ...アクションの設定処理などは省略...
if let popover = actionSheet.popoverPresentationController {
// sourceView = アクションシートの発生源のUIViewを指定するプロパティ
// insertButton = アクションシートの発生源として指定したいUIButtonのインスタンス
popover.sourceView = insertButton
// permittedArrowDirections = ふきだしのとんがりの方向を指定するプロパティ
// [.down] = とんがりは下方向のみ許可。つまり、吹き出し全体は発生源の上に表示される
popover.permittedArrowDirections = [.down]
}
present(actionSheet, animated: true)
TabBar
| TabBarは調整なし |
|---|
 |
TabBarはもともと標準的な仕様で実装しており、Liquid化しても見た目が崩れていなかったので調整はせずにそのままの見た目で実装することにしました。
当初はせっかくのUI調整の機会なので、Liquid化後のTabBarで実装できる機能をいろいろ探しましたが、前述の通りLiquid Glass自体がスクロール系のViewと組み合わせることで真価を発揮するデザインなので、TabBarの背後にコンテンツを表示することのない私のアプリで検討できる機能が見つかりませんでした。
参考情報
Adopting Liquid Glass
iOS26に向けてナビゲーションバーを整理しよう
iOS26のLiquidGlassでNavigationBarのカスタムを色々試す
【UIKit】iOS 26でlayer.cornerRadiusが効かない時の対処
もう画面下部からは出現しない！？ iOS 26で変わるアクションシート
音楽アプリのLiquid Glass対応を検証してわかったこと
Liquid Glassの紹介（YouTube）
新しいデザインによるUIKitアプリの作成（YouTube）