この記事は「Medley (メドレー) Advent Calendar 2025」の2日目の記事です。
メドレーが提供する、いつもの医療が変わるアプリ「melmo」の iOS 版では、iOS 26 から導入された新しいデザインシステム「Liquid Glass」への対応を進めています。
本記事では、実際にどこでつまずいたのか、そして melmo でどのような方針で対応を進めているのかを紹介します。
Liquid Glass について
Liquid Glass は、プラットフォーム全体にわたるユニバーサルなデザインとして WWDC 2025 で発表されました。
Apple のヒューマンインターフェイスデザイン担当バイスプレジデントであるアラン・ダイ氏は Liquid Glass を以下のように語っています。
Apple のソフトウェアを構成する基本的な要素を再考し、細部までこだわって作り上げた新しいデザインは、Liquid Glass と呼ばれるまったく新しい素材を採用しています。これはガラスの光学的特性と Apple にしか実現できない流動性を組み合わせ、コンテンツやコンテキストに応じて変化します。これは将来の新しい体験を生み出す基礎を築き、究極的には、最もシンプルな操作をもっと楽しく魔法のようなものにします。
(上図は Adopting Liquid Glass | Apple Developer Documentation より抜粋)
Apple Vision Pro が登場し、Spatial Computing という概念が広がる中で、Liquid Glass は iOS・macOS・watchOS・visionOS など複数 OS 間の UI の差を埋めるべく考えられたデザインだと捉えています。
メドレーで開発・運用しているアプリ「melmo」でも Liquid Glass 対応を進めており、本記事ではその対応内容と、移行の中で得られた知見を紹介します。
執筆時点 (2025 年 11 月) では、App Store からインストールできる melmo は、まだ Liquid Glass を有効化していません。
開発版では Liquid Glass を有効化して検証しており、ユーザー体験やアクセシビリティを確認しながら進めている段階です。
開発環境
本記事執筆時点での開発環境は以下のとおりです。
- Xcode 26.1.1
- サポート OS: iOS 16 以上
- UI 実装: 画面は SwiftUI、ナビゲーションは UIKit を使用
iOSDC 2024・2025 でも本アプリを題材に発表していますので、より詳しく知りたい方は以下のスライドもご参照ください。
(スライド内では、以前のアプリ名である「CLINICS」と表記されています)
移行方針
Liquid Glass は、Xcode 26 でビルドしたからといって必ずしも即座に有効化されるわけではなく、UIDesignRequiresCompatibility の設定によって一時的に無効化できます。
この猶予を活用するため、melmo アプリチームでは次のような段階的な移行方針をとりました。
-
UIDesignRequiresCompatibilityをtrueにして Liquid Glass を無効化 - Liquid Glass 無効のまま、Xcode 26 で問題なく動作するよう修正
- Liquid Glass 対応を実装
-
UIDesignRequiresCompatibilityを削除し、 Liquid Glass を有効化
1 と 4 は Info.plist の設定で実現できます。
<!-- Liquid Glass を無効にする -->
<key>UIDesignRequiresCompatibility</key>
<true/>
melmo では、Xcode 26 で NSAttributedString 周りに不具合があったものの、それ以外に大きな問題はなく、Xcode 16 から Xcode 26 への移行自体は比較的スムーズに行えました。
以下では、melmo における具体的な Liquid Glass 対応について紹介します。
アプリアイコン
iOS 26 では、アプリアイコン自体にも Liquid Glass のエフェクトが適用されます。
しかし、このエフェクトによってデザイナーが意図した印象からずれてしまうため、melmo ではアイコンへの Liquid Glass エフェクトは無効化する方針にしました。
無効化には Icon Composer を用い、Liquid Glass Effects の設定をオフにしています。
Icon Composer は .icon という形式のアイコンファイルを生成できるツールで、前景・背景レイヤーごとの調整やプレビューが可能です。
| Liquid Glass Effects | Icon Composer のプレビュー |
|---|---|
| Effects あり |  |
| Effects なし |  |
作成した .icon ファイルを Xcode プロジェクト内に配置し、Primary App Icon Set Name に設定することで、作成したアイコンがアプリアイコンとして反映されます。
ツールバー
Liquid Glass 対応で特に大変だと感じたのが「ツールバー」と「検索フィールド」です。
melmo は検索を多用するアプリではないものの、既存のツールバー構成との噛み合わせが悪く、移行の過程でさまざまな問題が発生しました。
ロゴ
iOS アプリでは、ナビゲーションバーにアプリ名やアプリロゴを配置することが多いと思います。
Liquid Glass では、ロゴの背後にもガラス状の背景が適用され、意図しない見た目になることがあります。
これに対して、iOS 26 からは sharedBackgroundVisibility(_:) というメソッドが用意されており、背景のエフェクトを無効化できます。
このメソッドは iOS 26 以降のみで使用可能なため、melmo では以下のような extension を作成して対応しました。
extension ToolbarContent {
@ToolbarContentBuilder
func hideSharedBackgroundVisibility() -> some ToolbarContent {
if #available(iOS 26.0, *) {
self.sharedBackgroundVisibility(.hidden)
} else {
self
}
}
}
// 使用方法
ToolbarItem(placement: .topBarLeading) {
// ロゴ画像を設定
}
.hideSharedBackgroundVisibility()
対応前後の比較は以下のようになります。
ロゴやボタンの背景にあったガラス状のエフェクトがなくなっているのが分かります。
| Liquid Glass 対応 | melmo ホーム画面上部のスクリーンショット |
|---|---|
| 対応前 |  |
| 対応後 |  |
右側のボタンについては「白い背景にしたい」という要望があったため、現状は .sharedBackgroundVisibility(.hidden) を適用することでガラス状のエフェクトを無効化し、ボタン自体に背景色を設定しています。
一方、.sharedBackgroundVisibility(.hidden) を適用しない (ガラス状のエフェクトを有効化している) 場合でも、ツールバーのボタンの背景色は次のように変更できます。
Button("") {
...
}
// ボタンの背景のガラス状のエフェクトを変更
.buttonStyle(.glassProminent)
.tint(.red) // 設定する背景色
しかし、検証したところ挙動が不安定で、画面遷移で色が残ったり消えたりする不具合が見られたため、現時点での採用は見送りました。
こちらは次期 Xcode での修正に期待しています。
キャンセルボタン
Liquid Glass が無効のときは同じ見た目だった UI が、有効化した途端にまったく違う見た目となる問題にも遭遇しました。
以下の表は、Liquid Glass が無効状態ではほぼ同じ見た目でありながら、Liquid Glass を有効にすると違う見た目になる例です。
| Liquid Glass 無効状態 | Liquid Glass 有効状態 | |
|---|---|---|
| 1️⃣ |  |
 |
| 2️⃣ |  |
 |
| 3️⃣ |  |
 |
それぞれ以下のコードとなっており、UIBarButtonItem や SwiftUI の Button の設定方法の違いが、そのまま見た目の差につながっていました。
// 1️⃣ (UIKit)
UIBarButtonItem(barButtonSystemItem: .cancel, ...)
// 2️⃣ (UIKit)
UIBarButtonItem(title: "キャンセル", ...)
// 3️⃣ (SwiftUI)
.toolbar {
ToolbarItem(placement: .topBarTrailing) {
Button("キャンセル") {
....
}
.customStyle() // 文字色などをカスタマイズ
}
}
Human Interface Guidelines では、ツールバーに配置する項目の一貫した見た目が推奨されています。
例えば SwiftUI で 1️⃣ 相当の UI を実現するには、init(role:action:) を使って以下のように実装します。
.toolbar {
ToolbarItem(placement: .topBarTrailing) {
if #available(iOS 26.0, *) {
// 1️⃣ と同様の見た目
Button(role: .cancel) {
...
}
} else {
// 2️⃣ と同様の見た目
Button("キャンセル") {
...
}
}
}
}
iOS 26 で条件分岐が発生するので、実際に運用する際は ViewModifier を使って共通化しておくと便利そうです。
検索フィールド
Liquid Glass により、検索 UI も大きく変わりました。
タブバーの末尾に検索機能を配置できるようになり、検索フィールドの表示・非表示によってタブバーの表示状態も変わります (App Store アプリが分かりやすい例ですね) 。
(上図は 検索フィールド | Apple Developer Documentation より抜粋)
このような変更もあり、melmo では検索周りの UI については現在も検討を続けています。
Slack アプリでも、Liquid Glass 対応の過程で検索機能の配置が変化しているように見受けられます。
こうした例を見ると、各アプリでも「検索をタブバーに置くかどうか」を試行錯誤しているのではないでしょうか。
melmo は検索を多用するアプリではないものの、Liquid Glass の有効化により UI に違和感が出てしまいました。
以下はその例で、Liquid Glass を有効にすると画面上部だけでなく下部にも検索フィールドが表示されています。
| Liquid Glass 無効状態 | Liquid Glass 有効状態 |
|---|---|
 |
 |
上部の検索フィールドはダミーであり、タップすると別の画面に遷移します。
このときに navigationItem.searchController を設定していると、Liquid Glass の有効・無効によって表示が変わってしまう挙動になっていました。
上記の問題は navigationItem.searchController の設定を見直すことで解消できました。
ただ、長期的にどのような検索 UI が melmo にとって最適なのかについては、引き続き検討していきたいと考えています。
まとめ
本記事では、melmo における Liquid Glass 対応の概要と、移行時に直面したポイントを紹介しました。
もともと melmo はカスタム UI を多用していたわけではなかったため、Liquid Glass 対応自体はそれほど時間をかけずに進めることができています。
本記事の執筆時点で、私の環境では YouTube や X などのメジャーアプリはまだ従来デザインのままに見えます (ロールアウト状況やテスト有無などにより端末によって異なる可能性があります) 。
一方で、iOS 26.1 以降では Liquid Glass の透明度をユーザー側で調整できるトグルが追加されるなど、Apple 側でもフィードバックを取り込みながら進化している最中です。
今後、対応アプリが増えるとともに、検索フィールドなどを含めた知見がたまり、全体としてより良いユーザー体験になっていくことを期待しています。
melmo でも、ユーザーのみなさんの利用状況や声を聞きながら、適切なバランスを探っていきたいと思います。
Medley Advent Calendar 2025、明日は morishio さんです！
メドレーではエンジニアを募集しています！
Tech Blog はこちら！