【完全ガイド】FigmaでLiquid Glass（液体ガラス）エフェクトを作る方法｜初心者でも簡単！

Liquid Glass(液体ガラス)とは？

Liquid Glass(液体ガラス) エフェクトとは、
ぼかしと透明感を組み合わせたガラスのような質感を再現するデザイン手法です。
近年のUIデザインでは、ネオモーフィズムやグラスモーフィズム（Glassmorphism）の進化系として注目を集めています。

以前はエフェクトの「背景のぼかし」のみでガラスの質感を再現したものもありました。
https://jp.pinterest.com/pin/1105281933552111336/

2025年5月7日の「Config 2025」アップデートでFigmaに「テクスチャー（Texture／Noise）」エフェクトが正式に搭載されたことでよりリアルな表現ができるようになりました。

この記事では、Figmaで簡単にLiquid Glass風のエフェクトを作る方法をステップごとに解説します。

Liquid Glassの作り方

ステップ1 : ベースとなるガラスのフレームを作成

ガラスの作成

フレーム(f) を選択してガラスのベースのスタイルを作成していきます。(下画像左)
インナーシャドウを複数設定してすることで細かいガラスのディティールを再現できます。

フレームの「コンテンツを隠す」にはチェックを入れておきましょう。

ステップ2 : 液体のぼかし、歪みの再現

フレームの作成ができたら、液体を表現するサークルを用意していきます!
大きめのサークルを作成して「背景のぼかし」「テクスチャー」をそれぞれ設定します。(下画像右)

これらを設定することにより、裏に置かれた画像が歪みぼけた状態で表示されるようになります!

ステップ3 : 作成したサークルをフレームに追加

ステップ2で作成した液体エフェクトサークルをステップ1のガラスフレームに追加します。
これでLiquid Glass（液体ガラス）エフェクトが完成です!

ステップ4 : 素材を持ってきて効果を確認!

O-DANなどから背景画像を持ってきて、

背景画像の上にLiquid Glass（液体ガラス）をのせてみましょう!
動かすとより、リアルな歪みが見られとても魅力的ですね。

これらをCSSで応用すればリアルな質感のボタンを作成することもできます。
ぜひチャレンジしてみてください!

まとめ

FigmaでLiquid Glassエフェクトを作るには、背景ブラー＋透明度＋光の演出がポイントです。
複雑そうに見えて、手順を踏めば初心者でも簡単に実装できます。

よくある質問（FAQ）

Q. 「背景のぼかし」が表示されません
→ エフェクトパネルの右上「+」をクリックして追加しましょう。
　 古いFigmaバージョンでは非対応の可能性も。

Q. スマホUIでも使えますか？
→ はい。Liquid GlassはiOSアプリなどでもよく使われる技術です。
　 特にモバイルでのビジュアル表現に効果的です。

最後に：Liquid Glassで魅力的なUIを演出しよう！

Figmaを使えば、コード不要でおしゃれなガラス風エフェクトを簡単にデザインできます。
現代的なUIに欠かせない技法の1つとして、ぜひ試してみてください！

参考記事

💧How to make Liquid Glass Effect in Figma
–
Supafast tutorial, lets go! :🧵 pic.twitter.com/nfpDH80WfO

— Camden @ Designownow (@Designownow_) June 10, 2025