2021年頃から流行りだしている磨りガラスのような半透明のレイヤーを用いたデザイン「グラスモーフィズム（Glassmorphism）」がWebデザインやUIデザインを中心によく見かけるようになりました。
macOSやiOSのデザインで使われたことで、爆発的に広がったデザイントレンドの１つです。
今回は、そんな「グラスモーフィズム（Glassmorphism）」をAdobeXDとPhotoshopで作る方法をそれぞれでご紹介していきます。
グラスモーフィズムデザインとは？
「グラスモーフィズムデザイン（Glassmorphism Design）」とは、磨りガラスのような処理をした半透明のレイヤーを使ったデザインのことです。
通常は、レイヤーの不透明度を数値を落としていけば透明に近づきます。しかし『グラスモーフィズム』の加工を行ったレイヤーだと、背景が透過してますが、磨りガラスのようなぼかしが入っているのが特徴です。
グラスモーフィズム加工をすることによって、デザインに以下の効果が期待できます。
- 上のレイヤーに乗る要素の可読性や視認性などが高まる
- 上に乗る要素を強調させることができる
- 奥行き感が生まれ、立体的に見える
Adobe XDで「グラスモーフィズム」を作る方法
XDでは『アピアランス』と『効果』でとっても簡単にグラスモーフィズムを作ることが可能です。
シェイプのオブジェクトを作る
長方形ツールを使いお好きな形のオブジェクトを作成します。
（作成工程の中で、磨りガラスのぼかし具合がわかりやすいように背景が半分になっていますが、お好きな背景を設定して大丈夫です。）
アピアランス→効果「背景のぼかし」を設定
『アピアランス』を以下のように設定します。デザインに合わせてお好みで調整してもOKです。塗りより線の透明度を濃くすると仕上がりが良い感じになります。
- 【塗り】カラー：#FFFFFF ／ 透明度（アルファ）： 20%
- 【線】サイズ：１〜２ ／ カラー：#FFFFFF ／ 透明度（アルファ）： 50%
合わせて『効果』も設定します。
- 背景ぼかしにチェック
- それぞれの数値を調整→ぼかし量：20% ／ 明るさ：0 ／ 不透明度：100%
- ドロップシャドウはお好みで（X：0 ／ Y：20 ／ B：20）
完成！
とっても簡単に作ることができました。
ベタ塗りの単色の背景の場合だと、ぼかし具合がわかりづらいので、グラデーションなどの背景と合わせて使うことで、グラスモーフィズムは効果的に見せることができます。
Photoshopで「グラスモーフィズム」を作る方法
XDより工程が多く複雑ですが、Photoshop（フォトショ）を使っても「グラスモーフィズム」を作ることが可能です。
『背景用』デザインと『グラスモーフィズム』レイヤーを準備
フォトショ上で、デザインができたらレイヤーをすべて選択してから「スマートオブジェクト」に変換し、1枚のレイヤーにしておきましょう。（スマートオブジェクトにしておくことで、デザインはあとから編集できます）
シェイプツールで、お好きな形を作成します。このレイヤーが「グラスモーフィズム」用のレイヤーになります。
ぼかし効果を付ける
まずは、背景のデザインを最前面に複製します。
複製した背景レイヤーと、シェイプレイヤーで『クリッピングマスクの作成』し、マスクを適用します。
複製した背景レイヤーを選択した状態で、画面上部メニュー［フィルター］→［ぼかし］→［ぼかし（ガウス）］を選択します。
ぼかし（ガウス）の数値は、プレビューを見ながらお好みで設定しましょう。いい具合にぼかしが入っていればOKです（あとから変更できます）
『グラスモーフィズム』レイヤーにレイヤー効果を付ける
シェイプレイヤーをダブルクリックして「レイヤー効果」をつけます。
レイヤー効果は［境界線］［ドロップシャドウ］［光彩（外側）］につけます。
数値はデザインやキャンパスサイズなどに合わせて適宜調整していきますが、参考として以下のように設定してみましょう。
境界線
- サイズ：1〜2px ／ カラー：#FFFFFF ／ 不透明度：50%程度
ドロップシャドウ
- カラー：#000000 ／不透明度：20%程度 ／ 角度：90° ／ 距離：20px ／ サイズ：20px
光彩（外側）
- カラー：#000000 または背景色の彩度を低くした色 ／不透明度：20%程度 ／ スプレッド：10%／サイズ：30px程度
ここまででもいい感じの『グラスモーフィズム』に仕上がっています。最後に、磨りガラスのような質感を足していきます。
磨りガラスの質感を足す
複製した一番最前面のレイヤーを選択し、画面上部メニュー［フィルター］→［ノイズ］→［ノイズを加える…］を選択します。
［ノイズ］オプションから【量：1%】程度でOKです！
ノイズを足すことで、磨りガラスのようなザラっとした質感を演出することができました。
完成
Photoshopで作ると細かく調整ができたり、ディテールにこだわることが可能になります。
さいごに
「XD」と「Photoshop」を使って、「グラスモーフィズム」デザインの作り方でした！
https://glassgenerator.netlify.app/
WebデザインやUIデザインで用いる場合は「実装上で再現できるか？」も確認しましょう。オンラインジェネレータなどで「グラスモーフィズム」を作ることができ、CSSを書き出してくれるサービスもあります。
