TUNAG iOS の Liquid Glass 対応

みなさん、こんにちは! 初めましての方は、初めまして! プロダクト開発部で TUNAG の iOS を開発しています、とんとんぼです。

iOS 26+ で利用可能になった、Apple が提唱する新しいデザイン言語の "Liquid Glass" に、弊社の TUNAG が対応しました! 本記事では、Liquid Glass をどのように TUNAG に導入したか、判断軸や取り組みについて紹介します。

Liquid Glass とは

Liquid Glass は、Apple が開発したデザイン言語で、2025年6月に開催された WWDC25 にて発表されました。 背景を反射および屈折させる、流動的でダイナミックなガラスのようなインターフェイスを特徴としています。 このデザイン言語は、iOS 26、iPadOS 26、macOS Tahoe、tvOS 26、visionOS 26、watchOS 26 以上で導入され、それより前の OS バージョンでは、今まで通りのフラットデザインになります。

Liquid Glass - Apple Developer Document

対応スケジュール

Liquid Glass の対応は、以下の流れで進めました。

  • 2025年7月 :Xcode 26 と iOS 26 のベータ版がリリースされたので、早速インストールし、iOS チームでクラッシュや大きな UI の崩れ、ビルドエラーがないかを確認しました。
  • 〜11月 :Apple が推奨していることと、TUNAG がビジネスとして求めていることを、最低限チーム内で擦り合わせして修正しました。
  • 12月 :プロダクト開発部全員(PdM、デザイナー、エンジニア)で実際に手元で触り、感想や Liquid Glass の思想の共有、事前に見つけられなかった UI の崩れの確認などを行ないました。
    • この時期にした理由は、東京本社と名古屋本社のメンバーがオフラインで会えるタイミングだったためです。
    • オンラインでも問題はなかったと思いますが、意思疎通や画面共有がリアルタイムでやりやすいと考え、オフラインで開催しました。
  • 2026年2月以降 :本腰を入れて、リリースに向けた実装対応を行ないました。

Liquid Glass の適用範囲

TUNAG では以下の方針で対応をしました。

  • Navigation 領域を中心に対応:NavigationBar、TabView、Toolbar など、どうしても Liquid Glass 化してしまう箇所は対応することにしました
  • コンテンツ領域は極力対応を見送り:WebView で実装されている機能も多いため、画面内で WebView とネイティブとの差分が大きくならないようにするため

ネイティブ開発の強みを活かしつつ、最低限 Liquid Glass 化することで、ユーザーに Liquid Glass 化した TUNAG に慣れてもらう目的と、今後の Liquid Glass のアップデートに備えるという目的があります。

対応に心がけたこと

とにかく、情報収集には力を入れました。

Apple の発表

Apple の Liquid Glass に関する発表には常に注目するようにしました。 Apple は、定期的に Liquid Glass 化したアプリを紹介する記事を投稿しています。これを参考に、他のアプリがどのように Liquid Glass に対応しているかを調査しました。 Discover how apps are using the new design and Liquid Glass Discover how apps are using the new design and Liquid Glass - 2026

また、Apple Developer では、Liquid Glass の活用事例をイベント・動画で公開しています。こちらも参考にしました。 Meet with Apple:Liquid Glass

他のアプリケーション調査

主に Apple の標準アプリケーションを参考に、どのようなデザインを採用しているのかを調査しました。 その他、Liquid Glass に対応したと聞いたアプリはすべてインストールし、テックブログで共有されていれば、すべてチェックしていました。

苦労したこと

AI が思うように動いてくれないことが特に困りました。 新しい技術かつ、Web と比べて情報量の少ないモバイル開発ということもあって、上手く動いてくれないことが多々ありました。 そこで、AI にはプロジェクトコードの調査を主に担当してもらい、実装計画やドキュメントの参照、一部のコード修正は人間が行なうようにして、臨機応変に対応することにしました。

各UIパーツの対応

カスタムテーマ

TUNAG のモバイルアプリには、導入企業様が自由に設定できるカスタムテーマ機能があります。これは TUNAG アプリ自体のテーマではなく、企業様ごとに個別の設定が可能な機能となっています。 一方で、Liquid Glass のガイドラインでは、NavigationBar の背景色などのカスタマイズは非推奨とされています。 そこで、スクロールに連動してカスタムテーマを非表示にすることで、機能を維持しつつ Liquid Glass の特性も両立させる設計としました。

画面トップ スクロール中

通知バッジ

UIBarButtonItem の通知バッジは、これまでカスタムビューで表示していました。 しかし、Liquid Glass を適用すると、以下のようにガラスエフェクトの中に通知バッジが表示されてしまいます。

iOS 18以前 iOS26以降

そこで、カスタムビューから Apple 標準の通知バッジを採用し、iOS26 から使える UIBarButtonItem.Badge を使うことにしました。

developer.apple.com

これにより、以下の画像のようにバッジをガラスエフェクトの外に出すことができ、見た目もよくなりました。

修正した NavigationItemButton

最後に

Liquid Glass はこれで概ね対応ができたかなと思います。 しかし、これが終わりではなく、まだまだ Liquid Glass の始まりだと思っています。 今年も WWDC26 で変更があると思うので、それに備えて、引き続きキャッチアップと対応をしていこうと思います。