iOS26に向けてナビゲーションバーを整理しよう
iOS26からLiquid Glassが登場し、ナビゲーションバーのデザインが大きく変わりました。
それに伴い、Appleからも「コントロールにおけるカスタム背景の使用を減らしてください」との告知が行われるなど、これまでのナビゲーションバーの使い方を見直す良い機会だと思います。
この記事では、iOSのナビゲーションバーをiOS26に対応させるベストプラクティスを紹介します。
ナビゲーションバーを知る
まず、ナビゲーションバーについて重要な点を２つ紹介します。
- iOS26のナビゲーションバーは透明である
- ナビゲーションバーは、画面のものではない
の２つです。
iOS26のナビゲーションバーは透明である
iOS26から、アプリの「コンテンツ」と「ナビゲーション」が明確に異なるレイヤーに存在するようになりました。
この考え方はiOS18以前でも有効ですが、フラットデザインの流行により奥行きが視覚的に感じにくいためレイヤーの分離を意識しにくいという課題がありました。
iOS26では、ナビゲーションバー自体は透明な領域になり、戻るボタンや主要なボタンがフローティングするようになりました。
これにより、画面全体に「コンテンツ」が主役として表示されるようになります。
つまり、この浮いている領域は「透過の領域」を主張しており、現在の位置や機能を示すことはあっても「コンテンツ」を表現する場所ではないということです。
このレイヤーがナビゲーションに徹しているのは、タブバーも同様のスタイルで表示されていることでも一貫しています。
このことからもナビゲーションバーに多くの要素を配置するのは正しくないことが分かると思います。
特にブランドロゴなどをナビゲーションバーに配置するスタイルが過去に流行りましたが、常に画面に表示されるのはナビゲーションバーの「透過の領域」のポリシーに反します。
ロゴはコンテンツ領域に配置し、スクロールに合わせて画面の外に消えるようにします。
ナビゲーションバーは、画面のものではない
ナビゲーションバーはスクリーン上の構成要素ではありますが、１画面の構成要素ではないことに注意してください。
どういうことかというと、ナビゲーションバーは表示されているコンテンツが持つ「タイトル」や「アクション」「前遷移可能性」という要素を表示しているに過ぎないということです。
ナビゲーションバー自体はpush遷移する全ての画面で共有されています。それが画面遷移するたびにコンテンツの要素を反映しているに過ぎないのです。
ここで画面ごとに細かい見た目を指定してしまうと、画面遷移のたびにナビゲーションバーは大きく見た目を変化させます。
これも「透過の領域」であるナビゲーションバーが守るべき静かさを満たさないはずです。
ベストプラクティス
自作のナビゲーションバーは、標準のナビゲーションバーに置き換える
標準のナビゲーションバーをsetNavigationBarHiddenを使って非表示にし、UIViewで作ったカスタムのナビゲーションバーを使っているなら、すぐに辞めましょう。
これまではフラットデザインライクだったため、違和感も少なかったかもしれませんがLiquid Glassの表現を再現するのは困難です。
無理に使い続けるのは苦行になるので標準のナビゲーションバーに移行しましょう。
UINavigationBar.appearance()を使わない
UINavigationBar.appearance()は、アプリ内の全てのUINavigationBarの見た目を変えることができるAPIです。
今では、実際にAPIアクセスが出来ない場所にも適用されてしまったり、appearanceが変更されない事が前提になっている箇所も多く、制御が非常に難しいAPIです。
「必要な箇所で必要なだけカスタムする」を念頭に、このAPIを使うのを辞めましょう。
「カスタム戻る」を作らない
「戻る」ボタンを自分で作って実装するのはアンチパターンです。
スワイプバックが効かなくなり、長押しによるナビゲーション遷移も無効になり、ユーザーの意図と反した挙動になります。
「戻る」を押した際に編集中のコンテンツの破棄を確認するアラートを出している場合は、往々にしてモーダルで出すべき画面をpush遷移で出しているケースです。確認しましょう。
isTranslucentを使わない
「navigationBarの裏側にコンテンツが回り込む」というのがiOSの標準挙動ですが、デザインデータがそうなっていなかったり、余白の挙動をワークアラウンドで回避したりする際に、isTranslucentやedgesForExtendedLayoutなどのAPIを触って回り込みを無効化してしまう事があります。
iOS26ではナビゲーションバー領域が明確に透過するため、コンテンツ領域が後ろに回り込んでいる必要があります。
正しくAPIを理解し、ワークアラウンドを避けましょう。
barTintColorを使わない
ここまでで何度も登場した通り、iOS26のナビゲーションバーは透過される前提なので背景色をつけるbarTintColorは利用を控えましょう。
iOS18でもbarTintColorを無効にすることで、本来の磨りガラスのマテリアルが適用されます。このマテリアルベースのデザインで成り立つUIデザインを行う事が重要です。
同じ理由で、setBackgroundImageを使うのを避けたり、SwiftUIでRectangleをバーの裏に配置するのを避けるのも有効です。
tintColorを使わない
ナビゲーションバーのボタン色を指定するtintColorですが、iOS26ではナビゲーションバーは背景の色に応じて視認性を自動的に調整します。tintColorで色を固定してしまうと、効果が限定的になるため指定しないことを推奨します。
iOS18以下の環境では、iOSのデフォルト感の強い青色がデフォルトなためtintColorについてはOSで分岐することも検討して良いかなと思います。
shadowImageを使わない
ナビゲーションバーの下部にヘアラインを入れるためにshadowImageを設定する事がありますが、iOS26ではナビゲーションバーの位置は明確に境界が描画されないため、設定するのを避けましょう。
また、iOS18以下でもスクロールの状態によって自動的にナビゲーションバーの見た目が変わります。（scrollEdgeApperance）
特にスクロール位置が上部の場合はヘアラインが表示されないのが標準の挙動のため、この動的アニメーションが正しく動作するようにUIデザインを行えるようにしましょう。
一時凌ぎをしない
iOS26のAPIでは、scrollEdgeEffectStyleをhardにしたり、sharedBackgroundVisibilityでボタンの背景エフェクトを切ってiOS18の見た目に近づける事ができます。
しかし、これらのAPIを使ってその場を凌いだら、ナビゲーションバーを整理する妥当な機会はもう２度と来ません。
Appleが強く推奨し、期限の迫っているこのタイミングを上手に使って正しいUI設計に引き戻しましょう。
まとめ
これらのベストプラクティスは、実際のLiquid Glass移行の過程で得られた知見をもとにしています。
一言で言えば、navigationItemやappearanceの装飾を極限まで減らし、標準的なAPIのみを使ってナビゲーションバーを構築することで自然と最適な見た目になるようになるはずです。
Discussion