音楽アプリのLiquid Glass対応を検証してわかったこと

副山俊輔

開発

副山俊輔

最終更新日2025/12/17 投稿日2025/12/25

この記事はレコチョク Advent Calendar 2025 の25日目の記事となります。

はじめに

メリークリスマス！🎅🎄🎁🍗

株式会社レコチョクでiOSアプリ開発をしている副山です。

昨年のAdvent Calendarもクリスマスの日を担当し、SwiftUIでクリスマス仕様のレコチョクマを描きました。

今年も進化版レコチョクマを描くか迷いましたが、そろそろキャラ設定が破綻しそうだったので、真面目に技術の話をしようと思います。

私は現在、PlayPASSのiOSアプリ開発を担当しています。今年の秋にはPlayPASS PAKというPlayPASSアプリ内の新サービスもリリースしました。PlayPASS PAKはNFCタグが内蔵されたグッズをスマートフォンにかざすことで、音楽、映像、画像などのデジタルコンテンツを楽しむことができるサービスです。

さて、Appleは毎年4月頃から、App Storeへのアプリ提出に最新Xcodeでのビルドを義務付けています。今回はXcode 26への対応が控えており、主な変更点は新しいデザイン「Liquid Glass」です。

この記事では、PlayPASSアプリにおけるLiquid Glass対応の検討プロセスをまとめます。対応にあたって調査した内容や検証でわかったことについて紹介します。

検証環境

検証はPlayPASSアプリで、以下の環境で行いました。

比較項目	現行環境	Liquid Glass検証環境
Xcode	16.3	26.1.1
iOS	18.2	26.2

Liquid Glassとは

Liquid Glassの特徴

Liquid Glassは、AppleがiOS 26で導入した新しいデザインシステムです。これまでのシンプルなデザインをさらに発展させており、次のような特徴があります。

半透明と深みのあるレイヤー構造を採用しており、ボタンやツールバーが透過して背景のコンテンツが見える
動的なアニメーションにより、スクロールや操作に応じてタブバーやツールバーが流れるように変化する
環境に応じた反射・光表現を行い、ダークモードや周囲の背景色に合わせて色味が変化する
丸みを帯びたデザインで、デバイスの形状に調和したフローティング感を演出している

Liquid Glassは、単なるビジュアル刷新にとどまらず、コンテンツの階層構造や動きの一貫性にも重点を置いています。iOS以外にもmacOSやwatchOSなど、Appleの全プラットフォームに導入されています。

Liquid Glassへの対応は必須か

Liquid GlassはXcode 26でビルドし、iOS 26以降で実行するアプリに自動適用されます。これにより、アプリが意図しないデザインや挙動になる可能性があります。

現状では、Info.plistに無効化フラグを指定することで従来の外観を維持できます。

UIDesignRequiresCompatibility

ただし、このフラグは次回のメジャーアップデートで削除される予定です。 Liquid Glassへの対応はいずれ必須となるため、今のうちに対応工数や影響範囲を把握しておく必要がありました。

PlayPASSアプリで発生した課題

PlayPASSアプリは一般的な音楽プレイヤーと同様に、タブバーの上部にミニプレイヤーが表示されるUIとなっています。

Liquid Glassを適用すると、以下の課題が発生しました。

ミニプレイヤー画面がタブバーと調和せず、違和感のあるデザインになる
TableViewやCollectionViewの制約がフローティングデザインに対応していない
- 下部の制約がタブバー上部と設定されており、タブの背景にコンテンツを表示するために制約の変更が必要

Xcode 16でビルド	Xcode 26でビルド

参考として、Apple Musicではスクロール時にミニプレイヤー画面がタブバー中央に小さく格納される動きを実現しています。また、iOS 26では検索ボタンをタブ外に独立配置できるようにもなっています。

参考：Apple Music

検証内容と結果

PlayPASSはUIKitを使用しているため、UITabBarController の bottomAccessory を利用してミニプレイヤーを配置する方法を検証しました。 SwiftUIの場合は TabViewBottomAccessory で同様の実装が可能です。

ミニプレイヤーの実装

UITabAccessory には任意のViewを配置でき、従来のミニプレイヤーをそのまま載せ替える形でシンプルに実装できました。

bottomAccessory = UITabAccessory(view: miniPlayerView)

このように置き換えるだけで、既存のUIKit構造を保ちつつ、ミニプレイヤーをApple Musicと同様の配置にすることができました。

なお、検索ボタンの有無についても簡単に制御することが可能です。画像では検索ボタンを有効にしています。現在のPlayPASSアプリではNavigationBarの右端に検索ボタンがありますが、タブバーに独立配置することでアクセス性が向上する可能性があります。

また、スクロール時にUITabAccessoryを自動で最小化する動きもtabBarMinimizeBehaviorを指定するだけで実現できました。

tabBarMinimizeBehavior = .onScrollDown

ミニプレイヤーで発生した課題

検証を進める中で、いくつかの課題が見つかりました。

シークバーの表示が難しい
- ミニプレイヤーの両端が丸みを帯びたデザインになったことで、従来と同じ場所にシークバーを設置すると見切れてしまう
- 位置を調整しても両端の湾曲につられてしまい、Liquid Glassの枠線とシークバーの線が混在してわかりづらくなる
従来のミニプレイヤーと比較して幅や高さが小さくなるため、レイアウト修正が必要
- iOS 26以前のユーザー向けに既存のミニプレイヤーも維持する必要があり、OS分岐が発生する

これらの課題はすぐに解決できるものではなく、根本のデザインや設計の見直しが必要になり、解消には時間がかかりそうでした。

その他画面のUI崩れ

ミニプレイヤー以外の画面、特に画面下部やナビゲーションバーまわりでLiquid Glass導入に伴い予期せぬUIの差分が確認できました。

様々な画面でNavigationBarの背景を透過させる必要がある
アプリ起動時にNavigationLargeTitleが表示されない

タイトル表示（正常）	タイトルが表示されない

ボタンのタイトルとLiquid Glassの枠が重なる
- 特定の画面で、ボタンのラベル位置がフローティング枠と干渉するケースを確認

これらのUI崩れは、修正作業自体にはそこまで工数がかかりませんが、影響範囲が広いため確認に時間を要します。また、Liquid Glassの透過挙動がOSバージョンによって不安定であり、コードの問題かOS側の問題か判断しにくい状況でした。

まとめ

今回の検証で、Liquid Glass対応には以下の課題があることがわかりました。

ミニプレイヤーはシークバーの配置やサイズ調整が難しく、デザインの再検討が必要
その他の画面でもTableViewの制約やNavigationBarの挙動など、複数のUI崩れが発生
iOS 26未満のユーザー向けに既存UIを維持する必要があり、OS分岐が発生する

これらを踏まえ、PlayPASSではユーザー体験の品質を最優先し、十分な対応時間を確保してからLiquid Glassに対応する方針としました。より良い体験を提供するため、iOSの機能安定化を見守りながら最適なタイミングでの対応を検討していく予定です。

最後に

最後まで読んでいただき、ありがとうございました！

また、レコチョク Advent Calendar 2025をお楽しみいただき、感謝いたします。

株式会社レコチョクでは、新卒・中途採用を募集しています。興味のある方は、採用サイトをご覧ください。

それでは良いクリスマスと素敵な年末をお過ごしください！🎄🎅🎍🌅

RecoChoku Engineering Blog

目次