【WWDC25】 セッションメモ 「Meet Liquid Glass」 ではじめましてLiquid Glass
2025.06.25はじめに
SBJソリューション部のリルオッサです。
WWDC25では新しい情報がAppleから発信されているので、セッションを色々とみながらメモしていき、皆さまに共有していきたいと思います。
詳細について気になる方はぜひ公式の動画をみてください。
Meet Liquid Glass
概要
Liquid Glassは、Appleプラットフォームのデザイン言語を統合しながら、よりダイナミックで表現力豊かなユーザーエクスペリエンスを提供します。Liquid Glassのデザイン原則を知り、そのコアとなる光学的および物理的特性を探り、どこで、なぜ使用するのかを学びましょう。
動画
簡単まとめ
- Liquid Glassは、Appleのこれまでのデザイン哲学の集大成とも言える新素材
- Liquid Glassの
Regularバリアントを使用すれば、背景に応じてスタイルが自動的に変化し、環境に順応する - Liquid Glassの
Clearバリアントは、主に動画コンテンツなど視覚的に豊かな背景上で使用する - Liquid Glassによって視覚的にコントロールが認識しやすくなりつつ、同時にメインコンテンツへの集中も損なわない
- Liquid Glassに対応すると、プラットフォーム側が自動で最適な表示を適用してくれる。アクセシビリティにも対応しているため、実装は優先度が高い
- アプリ全体で統一された世界観を表現するためにも、Liquid Glassへの対応は必要不可欠と感じた
- スクロール時に暗めのコンテンツ上に表示される場合、ガラス自体が自動でダークスタイルに切り替わる適応性を持つ
- セッション全体を通して「没入型」(イマーシブ)という表現が頻繁に登場しており、ユーザーがアプリやコンテンツにより深く没頭できる体験を目指していることが伝わってきた
メモ
Liquid Glassとは、Appleがこれまでの経験を通じて生み出したデジタルメタ素材。
現実世界に存在するような見た目を持ちながらも、軽やかな液体のような印象も持ち、タッチ操作のしやすさとモダンアプリが持つべきインタラクションを持っている。
Liquid Glassは新しい方法でレイヤーを表現しながらも、その下にあるコンテンツを透けてみやすくしている。
コントロールとして存在させつつも、背景のコンテンツも視覚的に区別しやすいようになっている。
また、背景のコンテンツがスクロールなどで動く場合、フェード効果ではなく、光の屈折やレンズ効果を徐々に変え、物質同士の整合性を保ちつつ、滑らかに移動する。
この素材はユーザーの操作に合わせてスムーズに動くのため、ユーザーの思考や身体の動きとシンクロしたインターフェイスの使用感を実現している。
動画を見る感じでもぷにぷにして気持ちよさそう。
このコントロールが平面上に浮き上がる表現によって、コンテンツとコントロールの関係がより明確になる。
Liquid Glassによって、アプリの使用体験により没入感は感じさせ、滑らかな体験に変わるようにデザインしている。
| ボタン | 遷移途中 | 遷移 |
|---|---|---|
 |
 |
 |
画面表示の表現もバブルが弾けるような表現によって、そのボタンと表示された画面の関係性も自然に感じられる。
| ライト | ダーク |
|---|---|
 |
 |
この素材の目標は、下にあるコンテンツと素材を視覚的に自然に区別できることで、これまではライト/ダークモードなどの外観があったが、この素材においてはその時の背景の状況に応じて状態が変わる。
ナビゲーションエリアが上記のように独立したレイヤーとして表現できることで、中のコンテンツが大きく感じることができる。
Liquid Glassは、Appleの各プラットフォームの全体で統一されたデザイン言語を構築するための基盤でiPadやMacでも同様に同じように適用される。
iPadやMacのサイドバーでは、光が反射した物理世界と同じような挙動により、ユーザーは没入体験ができる。
また、新しいScroll Edge Effectsでは、スクロールできるコンテンツとツールバーを視覚的に分離できて、より自然にコンテンツに集中でき、読みやすくなる。
スクロールされている部分が暗めのコンテンツになると、ガラス自体が自動でダークスタイルに変わる。
ツールバーの下に見出しがある場合は、ハードスタイルのエフェクトを適用することで明確にコンテンツとツールバーを分離できる。
| 背景コンテンツあり | 背景コンテンツなし |
|---|---|
 |
 |
Liquid Glassは要素の後ろのコンテンツを認識して、影の不透明度を調節している。
コンテンツが重なっていれば、不透明度は高くなり、コンテンツがなければ不透明度は低くなる。
MacやiPadではフォーカスが外れた場合は、自動で外観を変更してくれるので嬉しい。
これまでに説明した挙動は全て組み込みされており、自動で利用できる。
逆にいうと、このLiquid Glassに対応していない場合は、Apple的には意図していない挙動になるという解釈もできるので、積極的にLiquid glassの対応を進めていきたいです。
また、Liquid Glassを多用することは避け、アプリのコンテンツの上に浮かぶナビゲーションレイヤーでのみに留めるのがベストプラクティスのようです。
上記の例だと、Liquid Glassにしてしまったテーブルビュー層が他の要素と干渉して階層が分かりにくくなっています。
Liquid Glass の上にLiquid Glassを置くような表現は避けましょう。
対応方法として、素材の一部であるかのような薄いオーバーレイのような表現を推奨していました。
.background(.ultraThinMaterial)を付与したボタンなどを設置するのがいいのでしょうか？この辺りは実際に試しながら確認していきたいです。
Liquid Glassの種類は2つある。
| Regular | Clear |
|---|---|
 |
 |
- Reqular
- 汎用的なLiquid Glassで、これまで紹介した背景のコンテンツによってダークスタイル/ライトスタイルが変わる挙動をする
- Clear
- 背景のコンテンツによってスタイルが変わる挙動はせず、常に透明
- Clearの利用条件は限られている
Clearの利用条件は、
- メディアリッチなコンテンツの前に置くこと
- コンテンツレイヤーが悪影響を受けないこと
- 要素の前面には明るくはっきりしたコンテンツを置くこと
- 薄いブラックのカラーなどを間に挟むのが良さそう
Liquid Glassは、色付き表現ができる。色付きガラスから参考を得た表現で、より素材を物質らしくし、読みやすさとコントラストも向上している。
Liquid Glassで色は使用できるが、多用せず主な要素や主要なアクションでのみ使用すること。
ユーザーの混乱するNG例
| 1 | 2 |
|---|---|
 |
 |
その他にもNG例はあり、
スクロールしない画面では、コンテンツとLiquid Glassが重ねる上記のような状態は避ける。
| 透明度を下げる | コントラストを高める | 視差効果を減らす |
|---|---|---|
 |
 |
 |
Liquid Glassはアクセシビティの機能も兼ね揃えており、透明度を下げたり、コントラストを高めたり、視差効果を減らすこともできる。
Appleのビジュアルデザインとインタラクションデザインの新章の幕開けに皆さんもぜひ積極的にご参加ください。
☺️
おわりに
Liquid Glassについての理解が深まりました。WWDCの現地でデザイナーの話を聞いた際も感じましたが、このデザインには「ユーザーをアプリのコンテンツにより深く没頭させたい」という意図が強く込められていると思います。
Appleのプラットフォーム全体で一貫したデザインシステムとして実装されるため、対応しないアプリは徐々に古臭く見えてくる可能性があります。実際に私のiPhoneはiOS 26 Beta環境で標準アプリがすでにLiquid Glassを採用していますが、日常使用において特に違和感なく、むしろ自然に感じられています。
まだBeta版なので改善の余地はありますが、正式リリース時にどこまで洗練されるのか非常に楽しみです。アプリ開発者としても、このデザイン言語への対応は優先度の高い課題になりそうです。
HIGにも、Liquid Glassについての情報が追加されているのでこちらも合わせて確認してみましょう。
求人情報
所属している産業支援グループ「SBJソリューション部」ではiOSアプリ開発ができるモバイルエンジニアを募集中です📱
一緒に開発を楽しみながら働いてくれるiOSエンジニアのみなさん、お待ちしてます☺︎
