PCロール

PCロール

【Liquid Glass】 Figmaにガラスのエフェクトが追加

【Liquid Glass】 Figmaにガラスのエフェクトが追加
event
person
person@chnotchy
tag
# Figma
# Apple
# WWDC
# WWDC25
# iOS
# iOS 26
# Liquid Glass
# Glass Effect

Liquid Glassとは？

Appleは、日本時間6/10（火）から始まったWWDC25で、iOS 26、macOS 26などを発表しました。 それとともに、Appleのデザインシステムを刷新し、Liquid Glassという新しいデザインを発表しました。

Liquid Glassは、単なるUIコンポーネントではなく、OSを超えたApple製品全体にわたる新しいデザイン言語です。 AppleはこれまでもUI/UXデザインの流行に影響を与えてきましたが、Liquid Glassはまったく新しいエフェクトを発明したという点で、これまでのデザインシステムとは大きく異なります。

Figmaが新たなエフェクト "Glass" をリリースするまでの経緯

FigmaがLiquid Glassのエフェクトを追加すると発表

WWDC25から数日後、日本時間6/14（土）に、FigmaはXに以下の投稿をしました。

https://x.com/figma/status/1933624715714965947

これにより、FigmaでLiquid Glassのエフェクトを利用できることが明らかになりました。

このポストは1万以上のいいねを獲得しており、関心の高さが伺えます。

ちなみにFigmaのYouTube公式アカウント（@Figma）でも同じ投稿が行われています。

https://www.youtube.com/post/UgkxHU9gpAAt1x2SOBKnQMNjgc_eCriE1s1u

それまでCSSやモバイルアプリでは存在しなかった新しいエフェクトが、短期間のうちにデザインツールであるFigmaのエフェクトとして追加されるというのは驚愕です。 サードパーティのプラグインとしてではなく、Figma自体の機能としてエフェクトが追加されることで、デザイナーはLiquid Glassのエフェクトを簡単に利用できるようになります。

Liquid Glassのエフェクトが公開

日本時間7/17（木）に、Figmaはついに "Tomorrow" と投稿しました。

https://x.com/figma/status/1945513823949222239

数秒間の動画には、"Glass"が選択されたUIが表示されており、Figmaのエフェクトとして新しく"Glass"が追加されることが明らかになりました。

ちなみに、もともとFigmaのエフェクトには以下の6種類があり、今回発表された"Glass"は7つ目のエフェクトとなります。

  1. Inner shadow
  2. Drop shadow
  3. Layer blur
  4. Background blur
  5. Noise
  6. Texture

そして7/18（金）、YouTubeに30秒ほどの動画が公開されました。

https://www.youtube.com/watch?v=H_HN0nwdox0

動画公開時点では、ガラスエフェクトはBetaと表示されていることがわかります。

Liquid Glassのエフェクトの詳細

それでは、Liquid Glassのエフェクトの詳細を解説します！

Glassエフェクトの設定項目

Figmaのエフェクトとして追加された"Glass"は、以下の設定項目を持っています。

設定項目説明
Light光の当たる角度や強さを調整
Refraction屈折率（縁での光の曲がり具合）を調整
Depthガラスの厚みを調整
Dispersion縁での分光（虹色エフェクト）の強さを調整
Frost背景のぼかしの強さを調整

Light

光の当たる角度や強さを調整できます。

光の強さは、0%から100%まで調整可能です。

Refraction

縁で光がどの程度屈折するかを調整します。 値を上げると、縁の周りで背景が歪んで見えるようになります。

値を0にすると歪みが全くなくなります。 値を大きくするにつれて、縁から順に背景が歪んでいきます。

Depth

単語の意味的には「奥行き」ですが、ガラスの「厚み」という表現の方がわかりやすいかもしれません。

これは、レンズにおける、中央部分の厚さを調節している感覚です。 ルーペ（虫眼鏡）をイメージするとわかりやすいと思いますが、倍率の高いレンズほど中央が厚くなります。

1から100までの範囲で調節でき、1にすると凹凸のない完全に平たいガラスのように、歪みがなくなります。 この値のみ最小値が1となっており、0に設定することはできません（厚さが0のガラスは存在しない、と考えるとわかりやすいと思います）。 値を上げると拡大率が上がったようになり、歪みも大きくなります。

Dispersion

光の分光の度合いを0から100の範囲で調整できます。 プリズムのように光が分光されて虹色に見える度合いを調整します。 0にすると単に背景が歪むだけですが、値を上げるにつれて歪んだ部分がさらに虹色に分かれて見えます。

注意点として、これは歪んだ部分が虹色に分光されるため、Refractionの値が0の場合やDepthの値が1の場合は、分光されません。 特にRefractionの値を大きくするほど、分光の効果が強くなります。

Frost

これは、ガラスのぼかし具合を調整するものです。 0から100の範囲で調整でき、0にすると完全に透明なガラスのようになります。 値を上げると、すりガラス（くもりガラス）のように背景がぼやけて見えるようになります。

Glassエフェクトを使う際の注意点

Figmaが公開した Glass playground では、Glassエフェクトを使う際の注意点・制約が以下のように書かれています。

  • フレーム専用

    • Glassは現時点では「フレーム」にのみ適用可能です。シェイプやテキストには適用できません。

  • 角丸は統一する必要がある

    • 角丸（Corner radius）が混在しているフレームには適用できません。四隅すべてが同じ半径である必要があります。

  • Glassを重ねても効果は合成されない

    • Glassフレームを別のGlassフレームの上に重ねても、下のGlass効果は合成されません。

  • 背景ブラーとの併用に制限あり

    • 同じレイヤーにGlassと背景ブラーを同時に適用することはできません。両方を指定した場合は、先に適用された方のみが有効になります。
    • また、背景ブラーがかかったフレームの上にGlassを重ねるとGlassが正しく描画されませんが、逆（Glassの上に背景ブラーを重ねる）の場合は正常に動作します。

  • 不透明度100%の塗りではGlassは見えない

    • フレームの塗りが100%不透明だとGlassは表示されません。

  • SVGとしてエクスポートできない

    • Glassを適用したフレームはSVGとしては出力できません。画像としてエクスポートするか、PNGコピーなどで利用してください。

  • Figma Sitesでは完全対応していない

    • GlassはFigma Sites上ではキャンバス上に表示されますが、公開時にエラーとなるため完全には対応していません。

  • 環境反射は非対応

    • AppleのLiquid Glassには周囲の環境を反映する機能がありますが、Figmaでは非対応です。

  • パフォーマンスに影響する場合がある

    • Glassは複雑なレンダリングを行うため、大規模なデザインや旧型PCでは動作が重くなることがあります。

詳しくは、Figma公式のドキュメントを参照してください。

https://help.figma.com/hc/en-us/articles/360041488473-Apply-effects-to-layers

おわりに

最後までご覧いただきありがとうございます。

PC ロールでは、テクノロジーに関する情報をまとめて発信しています。

また、おすすめのガジェットについて幅広く紹介するガジェロールもあります。

ガジェットやソフトを使うエンジニア・クリエイターのみなさん、ぜひご覧ください。

ガジェロール | ガジェットの巻物

PC ロール | PC の巻物

arrow_backBack to home