Appleの新UIに採用されるガラスのような、液体のような美しいUI「Liquid Glass」を簡単に実装できるツール -Liquid Glassifier

Liquid Glassとは、2025年秋にリリースされるiOS 26に採用される新しいUIです。ガラスの光学的特性と流動性を組み合わせ、コンテンツやコンテキストに応じて変化する美しくて優雅なデザインです。

プレーンのHTMLをはじめ、React、Vue、Angularなどでも動作するLiquid Glassのボタンを実装するツールを紹介します。

Liquid Glassifier
Liquid Glassifier -GitHub

上の画像はアニメーションgifです。
実際の動作は、下記でお試しください。ボタンはクリックしても何も動作しないようにしています。単純な一枚のガラス板でないことが分かると思います。

Liquid Glassは、これまでのグラスモーフィズム（Glassmorphism）とは異なります。Glassmorphismはぼかしと不透明度によって奥行きを偽装していましたが、Liquid Glassはリアルな流動性、動き、そして奥行きを実現し、レスポンシブにも完全対応。

Liquid Glassについて詳しくはAppleのリリースをご覧ください。

ツールの使い方は簡単、登録など面倒なことは一切不要です。

Liquid Glassifier

主な特徴な、下記の通り。

• Svelte搭載、高速で、リアクティブで、超軽量。
• フロントエンドのあらゆるスタックに実装できます。
• リアルなリキッドディストレーションとダイナミックライティング。
• ライトモードとダークモードをサポート。
• 複雑なレイヤー構造も違和感なく処理します。

異なる背景にすると、どのように変化するのかがよく分かると思います。

Liquid Glassifier

Liquid Glassは、ダークな背景でもライトな背景でも映えますね。

Liquid Glassifier

左のサイドバーからテキストや形状やカラーをカスタマイズです。テキストは日本語でも大丈夫でした。使用するフォントやフォントサイズなども変更できます。

テキストの変更

角丸にしたり、鋭角にすることもできます。

角のカスタマイズ

サイズは上下・左右ともに変更でき、カラーはホワイト・ブラック・グリーン・ピンク・イエローが用意されています。

サイズのカスタマイズ

カスタマイズが完了したら、「Export」ボタンでコードが生成されます。

コードの生成

まずは、外部ファイルをhead内に記述します。

Liquid Glassの要素はbody内の任意の場所に配置できます。配置された要素はデベロッパーツールなどでコードを見ると、何層にも渡る複雑HTMLとCSSで実装されているのが分かります。