Liquid Glassとは？

Liquid Glassは素材です。カラースキームでもフィルターでも ありません。AppleがWWDC 2025で発表し、iOS 26、iPadOS 26、macOS 26 Tahoe、 watchOS 26、tvOS 26、visionOS 26へ一斉に展開した半透明のサーフェスであり、 2013年のiOS 7がすべてをフラット化して以来、同社最大の視覚的刷新です。

それ以前のすりガラス風パネルすべてと違うのは、この素材が光学的に振る舞う点です。背後にあるものをぼかすのではなく、本物のレンズのように曲げます。端末を傾けると動く鏡面ハイライトを拾い、 下を通り過ぎるコンテンツに応じて自身の色味と影を変えます。 コンテンツが動けば、ガラスが応じる。CSSのエフェクトというより、 シミュレートされた物理的な物体に近い存在です。

Apple日本は機能名を英語表記のまま「Liquid Glass」と呼んでいます。 メディアや技術記事では「リキッドグラス」とカタカナ表記される ことも多く、どちらも同じものを指します。日本語の定訳はまだありません。

混同しやすい言葉が三つあります。

• グラスモーフィズム（glassmorphism）——より古く、より広い 意味を持つビジュアルスタイル。日本語では「すりガラス効果」「フロストガラス」 とも呼ばれます。Liquid Glassとは別物で、後ろに専用のセクションを設けています。
• アクリル素材（Acrylic）——MicrosoftのFluent Designにおける 対応概念。同じく半透明パネルですが、ノイズとぼかしを基礎としており、 屈折はしません。
• 液体金属・アモルファス合金——名前が似ているだけの、 まったく無関係な材料科学の概念です。

もうひとつ注意点があります。「液体ガラス」は日本語では ケイ酸ナトリウム（水ガラス）やガラスコーティング剤を指す既存の語で、 木材保護塗料などの製品名としても使われています。この記事が扱うのは インターフェースの素材のほうです。

Appleが最初に披露したのは2025年6月9日のWWDCで、同じ場ですべてのOSが 年号ベースの番号に改称されました（iOS 19ではなくiOS 26なのはこのためです）。 詳しく紹介したセッションは2本、Meet Liquid Glass と Build a SwiftUI app with the new design です。

ただし系譜は基調講演1回よりずっと長い。Liquid Glassは、Appleが自社の20年分の 実験を1か所にまとめたものと読めます。初期Mac OS XのAquaが持っていた光沢と奥行き、 iOS 7で登場したリアルタイムの背景ぼかし、iPhone Xのジェスチャーと Dynamic Islandが確立した流体的なモーション、そして最も直接的には visionOSのガラスパネル——現実の部屋の中に違和感なく存在しなければならなかった あのサーフェスです。Liquid Glassは、そのvisionOSの素材を平面ディスプレイに 持ち帰ったものだと言えます。

受け止められ方は一様に好意的だったわけではありません。初期ベータは視認性を めぐって批判を浴び続け、Appleは26.1系のアップデートで効果を弱める設定を 追加しました。既定の「クリア」に加えて、より不透明な「着色」の外観を用意した のです。既存のアクセシビリティ設定「透明度を下げる」「コントラストを上げる」 の上に、さらに、という形でした。この見た目をそのまま真似る前に、 知っておく価値のある経緯です。

採用にあたってのApple自身の指針は ヒューマンインターフェイスガイドラインにあります。

この2つはしばしば同義で使われますが、同じものではありません。

グラスモーフィズムのほうが古く、意味も広い言葉です。 デザイナーのMichal Malewiczが2020年11月に名付け、数週間で一気に広まりました。 これが指すのは見た目です。半透明のパネル、その背後でぼけた背景、 輪郭を拾う髪の毛ほどの細い明るいボーダー、浮き上がりを作る柔らかな影。 Web上では4つのCSSプロパティに還元できます——backdrop-filter: blur()、半透明の背景、低不透明度のボーダー、box shadow。そして静的です。 パネルが静止していてもアニメーションの途中でも、ぼけ方は変わりません。

Liquid Glassは、その発想をAppleが2025年に動的なものへと 進化させた結果です。決定的な違いはここにあります——グラスモーフィズムは背後をぼかし、Liquid Glassは背後を屈折させる。そこに端末の動きを追う鏡面ハイライト、下を通るコンテンツに反応する色味と影、 インターフェースの変化に応じて互いに変形し融合する形状が加わると、 一度宣言して終わりのスタイルではなく、フレームごとにシミュレートされる素材になります。

現実には、Web上で「liquid glass」として発表されている作品の大半は、 ライティングが上手いグラスモーフィズムです。ブラウザで本物の屈折を出すには 変位マップかシェーダーが必要で、backdrop-filterでは届きません。 どちらのタイプも UIギャラリーに多数収録しています。見分け方は端で、本物の屈折はパネルの背後を通る直線を 歪ませます。

Appleプラットフォームでは、ほぼ用意されています。SwiftUIでは .glassEffect() モディファイアでカスタムビューにこの素材を適用でき、 GlassEffectContainer は複数のガラス形状をグループ化して、互いにブレンドさせ、同じライティングを与え、 変形し合えるようにします。コンテナはグループを一度に描画するため、 形状ごとに個別に描画するより負荷も軽くなります。

Webには同等のプリミティブがないため、効果を再構築することになります。 出回っているアプローチを、再現度の高い順におおよそ並べると次のとおりです。

• CSSのみ——backdrop-filter に多層のボーダーとハイライトを重ねる方法。安価でどこでも動きますが、 グラスモーフィズム止まりで屈折はありません。
• SVGフィルター——グラデーションで feDisplacementMap を駆動し、縁で背景を曲げます。WebGLなしで本物の屈折が得られます。 Liquid Glass SVG filtersを参照してください。
• WebGL / シェーダー——最も近いアプローチです。屈折、色収差、 ハイライトはまさにフラグメントシェーダーの本領だからです。 Liquid Glass Studio が最も完成度の高いWeb版再現で、 Liquid Glass Vue は同じ発想のより小さなVue 3実装です。
• フレームワークのコンポーネント——実装済みのものとして React 版と Flutter 版があり、デザイン作業には Figma のネイティブなガラス効果が使えます。

これらはすべて リソースにまとめてあります。

失敗の仕方は驚くほど一様で、予測可能です。ごちゃついた背景の上に置かれた ガラスの上の文字は、読めなくなります。Appleでさえ公然とこれに躓き、 マイナーアップデートで不透明度の設定を追加しました。HIGから原則を1つだけ 持ち帰るなら、これにしてください——ガラスはコンテンツの上に浮かぶ層のためのものであり、コンテンツ自体のためのものではありません。ツールバー、 タブバー、シート、コントロールはガラスの上に乗ります。本文は乗りません。

もう2つ、身につけておく価値があります。1つ、コントラストは任意ではありません。 都合のよい背景ではなく、そのガラスが乗りうる最も雑然とした背景に対して 確認してください。そして「透明度を下げる」を例外扱いせず、きちんと尊重すること。 2つ、抑制は意図として読まれます。長く保つインターフェースはガラスを1層か2層に とどめ、残りはソリッドのままにしています。ガラスの上にガラス、その上にまたガラスは、 デモにしか見えません。

このサイトの残りの部分が、そのままリファレンスライブラリです。UIデザインはインターフェースとコンポーネント、アートは同じ視覚言語によるジェネラティブ作品とイラスト、ビデオはモーションの習作です。最後のカテゴリがこの素材を最も理解しやすい場所です。 Liquid Glassを他と分かつ要素の多くは、何かが動いて初めて現れるからです。

すべての作品に、カバー画像から抽出したそのまま使えるAI画像生成プロンプトが 付いています。既存の作例を眺めるだけでなく、同じスタイルで新しいビジュアルを 生成できます。ギャラリー全体を見る →