AppleがWWDC 2025で発表した、新UI「Liquid Glass（リキッドグラス）」が注目を集めています。
iOS 26やmacOS Tahoeなどに導入されたこのデザインは、半透明のレイヤーとやわらかなぼかしが特徴で、まるで“ガラスの上に情報が浮かぶ”ような見た目です。
視認性については賛否がありますが、Figmaなどでも再現が広がり、新たなデザインの流れとして注目されています。
本記事では、Appleの発表や海外記事をもとに、Liquid Glassの素材や活用方法を紹介します。
🧊 Liquid Glassとは？Appleが描く“触れたくなるUI”
Liquid Glassは、Appleが提唱する新しいデザインスタイルで、視覚的な“奥行き”と“やわらかさ”を重視したユーザーインターフェースです。
このスタイルでは、以下のような表現が使われています：
- 半透明のレイヤー：背景がうっすら見えることで、コンテンツが空間の中に“浮かんで”見える
- 自然なぼかしと光の反射：ガラス越しに見たような柔らかさと透明感
- 丸みを帯びた角や立体的なシャドウ：従来よりも有機的で触感のある見た目に
AppleはLiquid Glassを、ただの見た目の変化ではなく、「情報の見せ方」や「触れたときの心地よさ」まで考えた、新しいUI体験の土台としています。
iOS 26では通知センターやウィジェットに、macOS Tahoeではウィンドウやサイドバーに使われるなど、OS全体にこのスタイルが広く取り入れられています。
🔍 どうして今、Liquid Glassが使われるようになった？
Liquid Glassは、「かっこいい見た目」にするためだけのものではありません。
その背景には、Appleが長年かけて進めてきた“デザインの進化”があります。
🕹 UIデザインはこう進化してきた
- むかしのiPhoneは、リアルな見た目（スキューモーフィズム）だった
- そのあと、シンプルで平らなデザイン（フラットデザイン）に変わった
- そして今は、ガラスのような透明感や光のぼかしで、見た目に“奥行き”を出すように
💡 Liquid Glassが生まれた理由
- スマホやパソコンの性能が良くなり、ぼかしや光の表現ができるようになった
- ガラスっぽい見た目にすることで、画面の中にある「どれが大事な情報か」がわかりやすくなる
- Appleは、「見やすくて気持ちいいデザイン」を大切にしている
つまり、Liquid Glassはかっこよさと使いやすさを両立した、新しいデザインを目指しています。
🧰 Liquid GlassをWebで再現するには？実践＆ツールまとめ
🧪 CodePenで見て学ぶ！Liquid Glass風UIスニペット集
Liquid Glassのような見た目を、実際にWebサイトでどう再現できるのでしょうか？
ここでは、世界中のクリエイターが公開しているCodePenのサンプルをいくつか紹介します。
See the Pen "liquid glass" — scroll, drag, configure [Chromium] by Jhey (@jh3y) on CodePen.
“liquid glass” — scroll, drag, configure [Chromium]
他の”Liquid Glass”系と比べても、繊細なアニメーションが特徴です。要素を重ねて透明度とぼかしを組み合わせるのがコツですね。
See the Pen Liquid Glass Effect by Esther k (@Esther-k) on CodePen.
ただのブラーじゃない！SVGフィルター×backdrop-filterで“光のゆらぎ”まで再現した、新感覚のフロストガラス。
See the Pen Apple Liquid glass switcher by Den (@DenDionigi) on CodePen.
同じような仕組みですが、今回はテーマはトグルスイッチをつかったもので、ガラスが着色される仕組みを説明したスニペット。
See the Pen Apple Liquid Glass Experiments by Valentin (@nitnelav) on CodePen.
Apple Liquid Glass Experiments
CSS BlurとSVGを使ったHTML/CSSオンリーのスニペット。
See the Pen Slider Button Liquid Glass Apple iOS 26 – 2025 by Photoshop VIP (@photoshopvip) on CodePen.
Slider Button Liquid Glass Apple iOS 26 – 2025
Liquid Glassエフェクトでスライダーボタンを表現してみた。
See the Pen Liquid Glass Shader by shingidad (@shingidad) on CodePen.
WebGLをつかってLiquid Glassエフェクトを表現したスニペット。
See the Pen Apple Liquid Glass UI (2025) by Avaz Bokiev (@samarkandiy) on CodePen.
ぼかしゼロでもここまで“ガラス感”！歪みだけで表現する大胆なフロスト演出が新鮮。
See the Pen Apple Liquid Glass (from lucasromerodb/liquid-glass-effect-macos) by David Lassiter (@lassiterda) on CodePen.
Apple Liquid Glass (from lucasromerodb/liquid-glass-effect-macos)
上下に動きが逆転!? 歪みの強調で“錯視”すら感じる、まさにリアルな光の屈折表現。
See the Pen Frosted Glass Gooey Gravity Nav by Simon Goellner (@simeydotme) on CodePen.
Frosted Glass Gooey Gravity Nav
“ぼかし”だけじゃない！現実のガラスのように、テクスチャで再現された“触感のあるフロスト感”。
🖼️ Figmaで使えるLiquid Glass素材まとめ
「Liquid Glassっぽいデザインを自分でも作ってみたい！」
そんな人のために、FigmaやWeb上で使える便利な素材やツールを紹介します。
コードが書けなくても、ドラッグ＆ドロップやスタイル設定だけで使えるものがそろっているので、ぜひ試してみてください。
さらに、FigmaのBeta版では、エフェクトに「ガラス」が追加され、ワンクリックでLiquid Glass効果を適用できるようになっています。
🛠️ 便利なLiquid Glassジェネレーター
数値をスライダーで調整しながら、自動でCSSコードを出力してくれる超便利ツール。背景色・透明度・ぼかし具合など、すべてリアルタイムで確認できます。
🧑💻 Apple公式の開発者向けリソースも公開中
Appleは、Liquid Glassを自分のアプリやUIに取り入れたい開発者向けに、すでに複数の技術資料やガイドを公開しています。
macOSやiOSアプリの開発に関わる人は、ぜひ以下のリソースもチェックしてみてください。
🔹 公開されている主なドキュメント
- リキッドグラスの紹介（英語）
→ デザインの概要と目的をわかりやすく説明 - リキッドグラスの採用方法（英語）
→ どのような場面で使うべきか、ベストプラクティスを紹介 - ランドマーク：Liquid Glassでアプリを作る（英語）
→ 実際のサンプルアプリを通して使い方を解説 - カスタムビューにLiquid Glassを適用する（英語）
→ SwiftUIなどでの実装方法もサポート
これらの情報は、Apple Developerサイト内で順次公開されています。
📚 Liquid Glassをもっと深く知りたい人へ：学習リンク＆チュートリアルまとめ
ここでは、海外の現役デザイナーによる学習記事やチュートリアルをまとめてご紹介。英語ですが、画像やコードがたくさん使われているので、見ているだけでもヒントが得られます。
- Adopting Apple’s Liquid Glass: Examples and best practices (LogRocket) – Liquid Glassの仕組みについて多数のサンプル図解付きで紹介したチュートリアル記事。
- Create this trendy blurry glass effect with CSS (Kevin Powell) – Liquid GlassエフェクトをCSSのみで表現するYouTube動画。デモコード付き。
- CSS Liquid Glass Effects (DesignFast) – CSSのみで実現できるエフェクトで、プレビューを見ながらコードを確認できて便利。
- Liquid Glass UI Framework – ReactとNext.js向けに開発されたLiquid Glass UIコンポーネント集。
✏️ Liquid Glassを使うときのちょっとしたコツ（かんたん3ポイント）
① 文字が読みにくくならないように
背景がぼけていると、文字が見えづらくなることがあります。
→ 影をつける・背景のぼかしを強くすると改善できます。
② スマホでの表示に注意
古いブラウザではぼかしが効かないことも。
→ シンプルな背景に切り替えるなど、予備スタイルを用意しましょう。
③ 使いすぎに注意
全部にLiquid Glassを使うと、逆にごちゃごちゃした印象に。
→ 見せたいところだけに使うのがポイント。
✅ まとめ：Liquid Glassは“美しさ”と“使いやすさ”のちょうどいいところ
Appleが導入した新しいUIスタイル「Liquid Glass」は、ただの見た目の変化ではなく、情報の伝え方や、操作の心地よさまでを考えたデザインです。
- iOSやmacOSなど、すべてのOSで導入
- WebでもCSSやFigmaを使って再現可能
- コツは「読みやすさ」「使いやすさ」「やりすぎないこと」
今後、iOSやmacOSアプリでの採用も進むことで、Liquid Glassはさらに身近な存在になるはずです。
今後のUIデザインにも影響を与えそうなこのスタイル、ぜひ一度、手を動かして試してみてください。
アドビだからストック素材サービスも ここまでクリエイティブ。
Adobe Stockは、アドビがクリエイターのためにつくったストックサービスです。写真やイラストなど高品質な素材が約3億点。無料素材も100万点。
検索、プレビュー、ライセンスの取得をPhotoshopから直接できるので効率の良さが抜群。
たくさんのAdobe Creative Cloudユーザーに選ばれているのには理由があります。
最初のひと月は素材が10点まで無料なので、気軽に始めてみませんか。
