ワンバンクアプリのLiquid Glass対応

こんにちは。駅伝企画第三区走者の上ちょ（@psnzbss）です。

iOS 26+ で利用可能になった、Appleが提唱する新しいデザイン言語／ビジュアルテーマの「Liquid Glass」に、ワンバンクアプリが対応しました！本記事では、Liquid Glassへの対応を効率的かつ効果的に進めるために実施した取り組みをまとめます。

対応スケジュールの策定

Liquid Glass は2025年6月に開催されたWWDC25にて発表されました。

ワンバンクアプリとはデザイン方針に大きな乖離があったため、対応が難航するのではないかという懸念もありましたが、最終的には早期に着手する決断しました。具体的には6月時点で以下のスケジュールでの対応を策定しました。

🎨 デザイナー / 💻 iOSエンジニア

2025年6月：🍎WWDC25 開催・Liquid Glass 発表
2025年9月頃：🎨 対応方針の確定
2026年2月頃：🎨 実装変更の合意 / 💻 リリース

一方、実際の対応は次のスケジュールで完了しました。

2025年9月：🎨 Figma のシステムコンポーネントを Liquid Glass 対応版へ更新
2025年10月：🎨 Figma のワンバンクデザインシステムを Liquid Glass 対応版へ更新 / 💻 アプリ部の下期目標に Liquid Glass 対応を追加
2025年11月：💻 ランタイムで Liquid Glass の有効/無効を切り替えられる仕組みを導入
2025年12月：💻 実装修正（約2日）・QA 実施 / 🎨 実装内容の合意
2026年1月5日：Liquid Glass 対応バージョンを公開 🎉

計画より早期に完了できた主因として、デザイナー / エンジニア双方で専門担当を明確化したことや、初期段階で方針を速やかに意思決定したこと、何よりApple標準のコンポーネントを最大限に活用した開発を行っていたことが大きく寄与したと考えています。

デザイナーとの方針合意

Appleは次期Xcodeでビルドしたアプリで強制的に Liquid Glass が有効になるとアナウンスしています。

この背景から「現時点のデザインシステムではトンマナが合わないかもしれないが、対応することでOSの挙動とアプリの挙動を統合し、よりモダンで気持ちの良いアプリ体験にできる可能性がある」という方針で合意しました。

ワンバンクアプリの開発部では隔週でデザイナーとエンジニアが現在のデザインやアプリの挙動に対して自由に意見を言い合う「アプリデザイン会」というMTGがあります。このMTGにて既存コンポーネントの変更範囲などを洗い出しながら対応を進めました。

実装修正

ここからは具体的に行った変更をサンプルコードとともに見ていきます。

効率的に確認するための工夫 - ランタイムでの切り替え

Info.plist に対して UIDesignRequiresCompatibility = true を設定することで以前と同様の表現を利用することができます。

UIDesignRequiresCompatibility | Apple Developer Documentation

しかし、この値を毎回書き換えるのは非効率なため、Info.plistをランタイムにて書き換えることでビルドすることなく確認できる仕組みを設けました。具体的にはこちらの記事を参考にしています。

なお、確認した限りではTestFlightを利用した実機デバッグの場合に利用できないため注意が必要です。

NavigationBarの対応

ワンバンクのiOSアプリではカスタマイズしたNavigationControllerで背景色を設定しています。しかし、Liquid Glassを有効にした場合は背景を透過するのがデフォルトの挙動とのことなので、フラグを用いて変更しました。

extension CustomNavigationController: UINavigationControllerDelegate {
    public func navigationController(_: UINavigationController, willShow viewController: UIViewController, animated _: Bool) {
        // ・・・
        
        if #unavailable(iOS 26.0) {
            navigationBar.standardAppearance.backgroundColor = customizable.standardAppearanceBackgroundColor
            navigationBar.scrollEdgeAppearance?.backgroundColor = customizable.scrollEdgeAppearanceBackgroundColor
        }
        navigationBar.scrollEdgeAppearance?.titleTextAttributes = [.foregroundColor: customizable.scrollEdgeAppearanceTitleColor]
        navigationBar.scrollEdgeAppearance?.largeTitleTextAttributes = [.foregroundColor: customizable.scrollEdgeAppearanceTitleColor]
        
        // ・・・
    }
}

Storyboardの対応

ワンバンクのiOSアプリでは一部の画面はStoryboardを利用しています。SwiftUI への移行も並行して進めていますが、開発頻度などの事情から現在は優先度を下げています。Liquid Glass 対応に際し、Storyboard で構築した画面では特にボタン周りで不具合が発生したため、対象箇所を修正しました。

Storyboard の設定で Bar Button Item の Style = Plain にすることで修正できます。なお、Xcode 26.2 では Plain style unsupported in a Navigation Item というWarningが表示されますが、強引とは思いつつこの対応を採用しました。

Liquid Glassらしい表現の追求

NavigationBar Button Item はそのままだと “浮いた” 印象になりがちです。iOS 26+から利用できる ToolbarSpacer(.fixed) を利用することで独立したアイテムにできます。しかし、これだけでは、依然として枠線（ボーダー）に違和感があります。

iOS 26+ではボタンのスタイルを変更することで浮いてないデザインにすることができます。

if #available(iOS 26.0, *) {
    Button(
        action: onTapped,
        label: {
            ButtonContentView()
        }
    )
    .buttonStyle(.borderedProminent)
    .tint(Color(.promotion))
} else {
    Button(
        action: onTapped,
        label: {
            ButtonContentView()
                .padding(.horizontal, 12)
                .padding(.vertical, 8)
                .background(Color(.promotion))
                .clipShape(RoundedRectangle(cornerRadius: 8))
                .overlay(
                    RoundedRectangle(cornerRadius: 8)
                        .strokeBorder(Color(.defaultMid), lineWidth: 1)
                )
        }
    )
}