【Photoshop(フォトショ)】現場で使える！Liquid Glassのようなガラスエフェクトデザインの手法

WWDC 2025でAppleが発表した注目のデザイン「Liquid Glass（リキッドグラス）」。この記事では、そのガラスのような質感を作るテクニックを取り上げます！

ガラスエフェクトデザインの手法

①特徴

背景がふわっと透けて、周りの光や色を拾ってキラッと反射するツヤ感のあるデザイン。いわゆる「グラスモーフィズム」をベースにしつつ、そこに光の演出を加えることで、まるでガラスが生き物みたいに動き出すようなUIになっています。

②ボタンの作り方

それでは、やっていきましょう。丸みのあるボタンを制作していきます。

長方形ツール「シェイプ」を使用、「ストロークなし」と「角丸」を選択します。ここでは角を90pxに設定しています。

塗りの不透明度:0にします。

輪郭がわかるように境界線でサイズ：2、位置：外側、カラー：白とします。

ボタンの中の反射を作っていきます。

シャドウ（内側）でカラー：白、不透明度：50％、角度：45°、距離：0px、チョーク：0%、サイズ：20pxと設定。

続いて、シャドウ（内側）レイヤーを複製し、重ねて効果をつけていきます。

描画モード：覆い焼きカラー、カラー：白、不透明度：50％、角度：-45°、距離：50px、チョーク：0%、サイズ：80pxと設定。

さらに、シャドウ（内側）レイヤーを複製し、重ねて効果をつけていきます。

描画モード：覆い焼き（リニア）-加算、カラー：白、不透明度：20％、角度：130°、距離：20px、チョーク：0%、サイズ：40pxと設定。

質感を出すために、サテンレイヤーを適用。

描画モード：乗算、カラー：黒、不透明度：25％、角度：90°、距離：10px、サイズ：50pxと設定。

ドロップシャドウで影をつけます。

描画モード：通常、カラー：黒、不透明度：40％、角度：145°、距離：0px、スプレッド：25%、サイズ：15pxと設定。

最初に輪郭がわかるようにつけた境界線の描画モード：オーバーレイと変更。

背景画像の色によってボタンの境界線の色が変化します。

③背景の加工

次は、背景画像の加工をしていきます。

画像を複製し、フィルターメニューから、ぼかし＞ぼかし（ガウス）を選択。

半径：3.0pixelに設定します。

画像に質感を加えていきます。

フィルターメニューから、フィルターギャラリーを選択。

光彩拡散で、きめの度合い：2、光彩度：1、透明度：10を設定。

画像に歪みを加えていきます。

フィルターメニューから、変形＞ジグザグを選択。

量：10、折り返し：5、スタイル：左上、右下方向に設定します。

最後に、ボタンを表示させ、ボタンを選択範囲にしてマスクをかければ完成です。

④完成

まとめ

ガラスエフェクトデザインの手法を解説しました！

レイヤー効果の設定値はあくまで参考です。図形の大きさや形によって見え方が変わるので、確認しながら調整するのが良いでしょう。

ではまた！