Appleが、WWDC25において、プラットフォーム全体にわたるユニバーサルなデザインとして採用したLiquid Glassについて説明した「Liquid Glassの紹介」を公開しています。

セッションでは、AppleのヒューマンインターフェイスデザイナーChan Karunamuni氏、Shubham Kedia氏、Bruno Canales氏が解説を行っています。

macOS XのAquaユーザーインターフェイス iOS 7のリアルタイムのぼかしから iPhone Xの滑らかな反応 Dynamic Islandの柔軟性 visionOSのイマーシブなインターフェイス までに至る進化を基盤としています

これらの経験を通じてAppleは 物理世界の物体を単に再現するだけのアプローチから一歩進んで 動的に光を屈折させ成形するデジタルメタ素材 Liquid Glassを生み出しました。

またLiquid Glassはオーガニックな動作と移動により軽やかな液体のような印象を与えタッチ操作の柔軟性とモダンアプリのダイナミズムの両方に反応します。

Liquid Glassは 私たちが生得的に把握できる視覚情報に基づいて物体を分離し新しい方法でレイヤーを表現しながら その下にあるコンテンツが 透けて見えるようにします。

従来の素材は光を散乱させましたがこの新しい素材のセットはリアルタイムで光を動的に屈折・形成・収束します。

これにより背景のコンテンツとの関係で対象の性質が設定される一方、自然界での体験に根ざした視覚的印象を与えることができます。このような光の造形により コントロールに超軽量かつ 透明な雰囲気をもたらしつつ 視覚的に区別しやすくしています。

Liquid Glassのオブジェクトはフェードする代わりに光の屈折とレンズ効果を徐々に変えることで具現化または消失します。そのため 素材の光学的な整合性を維持しつつ滑らかに移行することができます

素材の感触や動作は見た目と同じくらい重要で、Liquid Glassはその根本において外観と動きの両方を 1つのものと捉えて設計されています。私たちは液体の動きがどんな感じか直感的に知っています。

スムーズで反応性に優れた滑らかな移動と動作という特性は 物理世界に対する私たちの生得的な知覚と一致する インターフェイスを設計する上で参考になります。

これを実現するため Liquid Glassは操作に対して即座に変形し 光の活力を帯びることで反応します。それが反応性に優れ満足感と溌剌とした印象を与えるインターフェイスを実現します。

また Liquid Glassは本質的にゲルのような柔軟性を備えており滑らかで拡張しやすい性質を表現しながらユーザーの操作に合わせて スムーズに動きます。この滑らかさは今日のユーザの思考と身体の動きを特徴付ける ダイナミズムと絶え間ない変化にインターフェイスの使用感を一致させます。

コンポーネントを操作した時などに UI要素を浮かび上がらせて Liquid Glassに変化させることもできます。

操作しない時は平静でタッチすると活力が生まれるような印象になります。

これは特にコントロールなどで有効で透明な液体レンズを通してその下の値がはっきりと見える状態になります。

この滑らかな使用感は素材が入力にどう反応するかだけでなく、モダンアプリにおける動的な環境の変化にどう反応するかにも活かされます。アプリで各状態の間を移動すると Liquid Glassはコンテキストに応じてコントロール間で動的に変形します。

これにより 1枚の浮き上がった平面にコントロールが配置されているというコンセプトを常に表現できます。アプリの様々なセクション間の移行もコントロールが絶えず変形するため滑らかでシームレスな印象になります。

メニューを表示するとバブルが弾むように開いて内容のコンテンツを確認できます。この軽量なインラインの移行により、タップした場所にすべてが表示されます。これによりボタンとその内容のコンテンツの関係が 非常に明確かつ直接的に伝わります。

以上の特性を備えたLiquid Glassによりアプリの外観は新時代を迎えますが、それはまた使用感の変革でもあります。

新しい方法により光を屈折させ成形する機能と動的に変形し形状を生み出す機能を融合することでLiquid Glassはアプリの使用体験を根本的にオーガニックイマーシブで滑らかなものへと変革するようにデザインされています。

Liquid Glassはそのサイズと環境に適応するようゼロから設計されています。

主な目標は下にあるコンテンツと区別できる視覚的な明瞭さを保つことです。しかし読みやすさとコンテンツレイヤーからの明確な区別を維持するために常に微妙な変化が行われるようにすることも必要です。

Liquid Glassは互いに連係してユニークな外観を生み出す複数のレイヤーで構成されています。固定的なライト／ダークの外観があった従来の素材とは異なり各レイヤーがその背後の状況に基づいて 常時適応します。

Liquid GlassはAppleの各プラットフォームの全体で統一されたデザイン言語を構築するための基盤です。

iPadとMacではこれらの原則をまったく同じ形で適用しました。

iPhone同様 Liquid Glassのレイヤーはコントロールとナビゲーションのための機能上の独立したレイヤーとしてその他の要素の上に浮かんでいてコンテンツのためのより大きくて広いキャンバスを提供します。

Liquid Glassのコントロールは角が丸みを帯びたウインドウにすんなりと収まり、すべてのUIで同心性を維持します。

ガラスがより大きなサイズに変形する時、例えばツールバーのボタンからメニューを表示する時などより厚みと実質感のある素材に近くなるように素材の特性が変化します。

より濃く深みのある影が表示されレンズと屈折の効果がより顕著になって光の散乱が柔らかくなります。こうした微妙な変化によって奥行き感が強まるほかガラス要素自体に表示されるコンテンツが より読みやすくなります。

サイドバーなどの大きな要素では Liquid Glassの外観はアプリ内の周囲の環境を反映します。

Liquid Glassの効果の対象は表面だけではありません。光が反射および散乱し影の中にも流れ込み、物理世界での特性とほぼ同じです。iPadとMacのフローティングサイドバーは新次元のイマーシブ感をもたらします。

サイドバーとタブバーが組み合わさりアプリの主要ナビゲーションのための 各プラットフォーム全体にわたる統一感と一貫性のある言語を形成します。それはアプリのキャンバスとともに柔軟に拡張／収縮する単一のナビゲーション要素と捉えることができます。

iPadとMacのフローティングサイドバーは新次元のイマーシブ感をもたらします。

サイドバーとタブバーが組み合わさりアプリの主要ナビゲーションのための各プラットフォーム全体にわたる統一感と一貫性のある言語を形成します。

それはアプリのキャンバスとともに柔軟に拡張／収縮する単一のナビゲーション要素と捉えることができます。

スクロールエッジエフェクトは Liquid Glassと連係して機能し、UIとコンテンツのレイヤーを分離して 読みやすさを維持する 重要な役割を果たします。特に動的にスクロールする コンテンツで有効です。

スクロールエッジエフェクトはLiquid Glassと同じく本質的に適応性に優れています。

コンテンツがガラス要素の背景でスクロールし始めるとスクロールエッジエフェクトによりコンテンツは背景に緩やかに溶け込み動いているコンテンツの上にガラスが浮いているように見せてタイトルなどのフローティング要素を常に明瞭な状態に維持します。

暗めのコンテンツが背景をスクロールするとガラス自体がダークスタイルに移行するようにトリガーされ、インテリジェントな切り替えにより微弱な調光を適用することでコントラストと読みやすさを確保します。

ツールバーの下に列見出しなどのアクセサリビューが固定されている場合などは「ハードスタイル」エフェクトを適用します。

Liquid Glassの環境の動作は私たちの周の物理世界と同様です。この環境内の光源から素材に光が照射されると想定される通りに幾何特性に応じたハイライトが生じます。

iPhoneのロック／ロック解除などの操作を行うと光は空間内で移動し素材の様々な箇所に映り影を形成します。場合によっては 光はデバイスの動きに反応して Liquid Glassが実世界での自らの位置を反映している印象を与えます。

影も重要であり、要素が平面上の特定の位置にあるという印象を生むのに役立ちます

背後のコンテンツを認識してテキストに重なっている場合、影の不透過度を高めます。

逆に 明るい無地の背景に重なる場合、影の不透明度を低めます。

これにより、要素がコンテンツから分離され常に見つけやすい状態に維持されます。

Liquid Glass要素を操作すると、アクションフィードバックの1つとして 素材が内部から照らされます。

光はタップした箇所から現れ要素全体へと広がって近くのLiquid Glass要素にも及びます。

各要素は素材の柔軟な特性に基づき自然かつ滑らかな形で相互作用します。

これらの動作がインターフェイスに生命感をもたらす物理世界およびデバイス入力に直接反応している印象を与えます。

UIの階層における明確さとフォーカスを維持するために複数のレイヤーが連動して適応することもあります。

例えば MacやiPadのウインドウがフォーカスから外れた時Liquid Glassは外観を変え、背景に移動したように見せて注意を引きます。

Liquid Glassにはバリエーションとして「標準」と「クリア」の2つがあります。

2つを組み合わせて使わないでください。各々に固有の特性とユースケースがあるためです。

レギュラーは汎用性に優れ、使用頻度の高いものです。先に紹介したビジュアル効果と 適応機能のすべてを提供し、コンテキストを問わず、読みやすさを維持します。

あらゆるサイズにでき背景や前面のコンテンツの種類も問いません。

一方 クリアでは動作の適応機能がありません。常に透明度が高いため背後のコンテンツが 十分に素材を透過してガラスと美しく相互作用します。

シンボルやラベルの読みやすさを確保するためにはレイヤーの光を微弱にして背景のコンテンツを暗くする必要があります。そうしないと読みやすさが著しく損なわれます。

アプリのLiquid Glass要素のサイズが小さい場合は、局所的な光の抑制によりコンテンツの元のバイブランスを維持できるようにします。

ナビゲーションバーやタブバーのような小さい要素は背景のコンテンツに応じて常に見た目を適応させます。

また 背景に基づいてライト／ダークを切り替えて可能な限り素材の見た目を向上させ 見分けがつきやすいようにします。

メニューやサイドバーなど大き目の要素もコンテキストに応じて適応しますが、ライト／ダークは切り替えません。表面積が大きすぎてそうした切り替えはユーザーの気を散らせます。

Liquid Glass上のシンボルやグリフも読みやすさのために小さい要素 同じようにライト／ダークを切り替えてコントラストを最大化するために ガラスと同様に動作します。

レギュラーに配置されたコンテンツはすべて自動的にこの処理を実行します。カスタムの色も使えますが、使いどころは選びましょう。

Liquid Glassでは素材の原則に従い読みやすさを最大限に高める新しい方法で要素に色を付けられます。

この手法はすべてのLiquid Glass要素に一貫して適用できます、

ラベル テキスト 全体に色を付けたボタンやロック画面の時間表示などで 素材に生命感と活力を与え 周囲のコンテンツとの 結びつきをより強めます。

色を選ぶとその色を付ける要素の背後のコンテンツの明るさに対応した様々な色調が生成されます。

これは実世界の色付きガラスを参考にして想定した色から離れすぎることな 背景の物体に応じて色合い明るさ彩度を変更するようにしています。

読みやすさに関するこれらの考慮事項とは別に Liquid Glassはすべての人の特性やニーズに対応できるよういくつかのアクセシビリティ機能を搭載しています。

例えば「透明度を下げる」では、Liquid Glassのフロスティ感を上げて背後のコンテンツをより強くぼかします。

「コントラストを上げる」では、要素を主に白と黒で表示しコントラストを高める枠線で強調します

「視差効果を減らす」では、一部のエフェクトの強さを減らし、素材の柔軟な動きに関する特性を無効化します。