もっともっと、もっと先へ。株式会社アットワークMore and more,
further and further.
Tips
Apple の新しい UI デザイン「Liquid Glass」
2025 年の WWDC 2025 において、Apple は iOS や iPadOS、macOS などの主要なプラットフォームで Liquid Glass（リキッドグラス） という新しい UI デザイン言語を発表しました。これは単なる透明感のある見た目ではなく、ガラスの質感と光の屈折・反射のような挙動をデジタル UI に取り入た新素材です。UI 要素が背面のコンテンツや周囲の光に応じて色や透明度を変え、奥行きと流動性のあるインタラクションを生み出します。
https://www.apple.com/jp/newsroom/2025/06/apple-introduces-a-delightful-and-elegant-new-software-design/
今回紹介する glass.danilofiumi.com — Liquid Glass Generator / Glassify Tool は、Liquid Glass のビジュアルエフェクトを Web 上で体験できるツールです。Apple の公式 UI とは直接関係ありませんが、Liquid Glass の雰囲気を Web ページやコンポーネントに実装可能な形で試せるジェネレーターとして注目されています。
Liquid Glass は iOS 26、iPadOS 26、macOS Tahoe 26 などの OS 世代から採用され、ボタン、サイドバー、ナビゲーションバー、ウィジェットなどさまざまな UI コンポーネントに活用されています。Apple はこのデザインを単なる視覚的な刷新ではなく、直感的で没入感のあるユーザー体験を提供するための「新しい素材」と位置づけています。
「Liquid Glass」を体験できる Web ツール：glass.danilofiumi.com
このサイトではオリジナルの Liquid Glass 効果を簡単に試せるほか、自分の Web ページで使える UI コンポーネントコードを生成してくれます。従来の「glassmorphism（ガラスっぽい見た目）」とは違い、より複雑な層や光の表現を意識した Liquid Glass スタイルとして実装できる点が特徴です。
Glass.danilofiumi.com の基本的な使い方
以下は、画面上の Liquid Glass 効果を使って自分の Web UI へ適用するまでの流れです。
① エフェクトの準備
サイトにアクセスするとデモ画面が表示され、画面上で Liquid Glass の効果を即座に確認できます。
専用の UI コントロールで 透明度、ぼかし、色合い 等をリアルタイムで調整できます。
② コードをコピー
Liquid Glass を Web プロジェクトに組み込むには、サイトが生成する以下のようなコードをコピーします
<script type="module" crossorigin src="https://glass.danilofiumi.com/web-comps/boundle.js"></script>これを <head> 内に追加します。さらに、ページ内に専用タグを設置するだけで Liquid Glass コンポーネントが動作します。
③ Liquid Glass コンポーネントを設置
例えば次のようにコンポーネントを挿入できます
<sv-liquid-glass
styles='{
"style":{"roundness":60,"padding_x":3,"padding_y":3},
"text":{"content":"Glassify →","font_family":"Inter","size_weight":500,"font_size":3.5},
"color":{"accent":"#D7DADD"}
}'
contrast="light">
</sv-liquid-glass>これは ボタン型 Liquid Glass UI の例で、丸み・テキスト・色をカスタマイズ可能なスタイルで実装できます。
Liquid Glass を Web より楽しむためのポイント
- 視覚的な美しさ
Apple の Liquid Glass は実際の光学ガラスの物理挙動を模倣しており、その感覚を Web UI でも再現することで「奥行き感」「透明感」「流れるような動き」を演出できます。 - アクセシビリティへの配慮
実際の Liquid Glass UI は透明効果が強くなりすぎると 視認性や読みやすさが低下するというフィードバックもあります。適用するコンテンツ量や色のコントラストにも注意を払うと良いでしょう。 - モダン UI との相性
リッチなインタラクションや動的 UI をサポートする環境（React / Next.js / CSS フレームワーク）なら、Liquid Glass 効果を効果的に演出できます。
まとめ
Liquid Glass は Apple が提唱する次世代 UI デザイン言語であり、光や透明感を活かした UI 表現が特徴です。これを Web 上で試せるツールの 1 つが glass.danilofiumi.com です。 このサイトでは効果を体験しながら、実際に自分のサイトに組み込むためのコンポーネントコードを簡単に生成できるため、Liquid Glass 風 UI を Web でも実装する際の良いスターティングポイントとなります。
コメントを残す