WEB業界で働く人や興味がある人に役立つ情報サイト“qam（カム）”

投稿者： もの
カテゴリー： デザイン >WEBデザイン

今回は、数年前にWebデザインに登場した「グラスモーフィズム」デザインについてご紹介します。

はじめは海外サイトの事例がほとんどだったのですが、最近では日本のWebサイトでも少しずつ見かけるようになってきたため、まだチェックしていなかった方は一度挑戦してみてください！

「グラスモーフィズム」デザインとは？

「グラスモーフィズム」デザインとは、影やぼかし効果を使用することですりガラスのような質感と立体感を表現する手法のことです。

当記事では、「グラスモーフィズム」デザインの作り方、メリットとデメリット、そして国内事例をご紹介していきます。

「グラスモーフィズム」デザインをPhotoshopで作る

まずは、Photoshopで「グラスモーフィズム」を作ってみましょう。

1.背景と枠を作る

ぼかしが分かりやすいように、背景にはグラデーションと大きなテキストを置きます。

その上に、少し不透明度を下げた白いボックスを作ります。この時、ボックスのレイヤー全体の不透明度は100％のまま、「塗り」の不透明度のみ50％としてください。

枠ができましたら、その中にテキストを置きます。

2.境界線とシャドウをつける

次に、先ほど作った白いボックスに、白い境界線とシャドウ（影）をつけて立体感を出します。

境界線の不透明度が100％だと少しギザついてしまうので、80％程度の不透明度にします。シャドウはボックスの右下にふわっと入るように「角度135°、距離4、サイズ30、不透明度50％」と設定します。

3.背景要素をぼかす

背景のグラデーションと、背景に置いた大きなテキストをぼかします。
ここがPhotoshopでの作業だと少々手間がかかります。

背景要素をコピーします。
背景要素に直接ぼかしをかけることはできなかったり、一度ぼかしをかけると編集できなくなってしまうという問題があるため、ぼかしをかける前の状態の背景要素は編集できる状態で残しておく必要があるのです。

背景要素をコピーしてスマートオブジェクト化したら、そこにぼかしをかけます。
今回は「ぼかし（ガウス）」で「半径」4くらいにします。

4.ぼかした背景要素にマスクをかける

スマートオブジェクト化した背景要素（以下、背景要素）にぼかしをかけられたら、それに白ボックスの形のマスクをかけましょう。
背景要素に白ボックス型のベクトルマスクをかけます。

背景要素のレイヤーをグループ化し、白ボックスレイヤーのレイヤー名の左にある正方形にカーソルを持っていき「Ctrl＋alt」キーを押しながら背景要素グループへドラッグアンドドロップすると、背景要素に白ボックス型のベクトルマスクをかけることができます。

これで、白ボックスの裏側にのみぼかしがかかった状態のデザインが完成しました！

「グラスモーフィズム」デザインをコーディングする

コーディングする時は下記のようなコードになります。

See the Pen
Glassmorphism by qam (@qam)
on CodePen.

実はPhotoshopでデザインを作るよりもコーディングで表現するほうが比較的簡単です。

白ボックス自体に「backdrop-filter: blur(◯px);」の記述を足すとボックス内のみ背景要素がぼやけてくれるので、ぼかしに関しては背景要素には特に何も指定しなくてOKです。

「グラスモーフィズム」デザインのメリット・デメリット

メリット

「グラスモーフィズム」デザインのメリットは下記になります。

• ボックス内の要素が見やすい
• 立体感、奥行き感が出て現代的な印象になる
• 涼しげ、スタイリッシュでお洒落に見える

個人的に一番のメリットは、背景要素の明瞭度が下がることで「ボックス内の要素が見やすくなる」ということですね。
また、単純な透明のボックスに文字が載っているデザインと比べてもう一工夫してある感じがあり、デザインのクオリティが高く見えます。

デメリット

「グラスモーフィズム」デザインのデメリットは下記が考えられます。

• Photoshopで制作すると修正が入った場合に手間がかかる
• 少し海外のような雰囲気があるので使いどころが限られる

デザイン制作時の懸念については、手間がかかるだけでなく、例えば「ボックスのサイズが変わった際に、ぼかしの範囲を修正し忘れる」などのミスも起こりやすそうです。

ただ、「グラスモーフィズム」がデザインコンセプトに合っている場合に、それだけを理由に却下してしまうことはしたくないですよね。

「グラスモーフィズム」を取り入れる場合は、チェックを入念に行いましょう。

デメリットとしてより注意したいのは、「グラスモーフィズム」はやはり「海外っぽさ」「新しさ」を感じるデザインなので、古風な雰囲気のデザインや堅いデザインを作りたい場合は適さないかもしれません。

使いどころに注意して取り入れていきましょう。

「グラスモーフィズム」デザインの国内事例

日本語ページで「グラスモーフィズム」が取り入れられているサイトを2つご紹介します。

https://www.apple.com/jp/macos/sonoma/

「macOS Sonoma」のサイトは、スクロールするとヘッダーの背景がすりガラスのような質感になります。
ヘッダーのテキストはシンプルなので背景に色柄が入ると読みづらくなりそうですが、これなら常にテキストが読みやすいです。

このちょっとしたお洒落で機能的な工夫が、さすがAppleだなぁという感じがします。

その他、Apple製品では「グラスモーフィズム」デザインが多く使われているため、iPhoneやMacがお手元にある方はチェックしてみてください。

https://www.arluis.com/fair/miyakojima/

「宮古島チャペル」のサイトは、背景の海や空の清々しいムービーに涼しげな「グラスモーフィズム」がぴったりで、とてもお洒落でロマンチックです。

同じ「グラスモーフィズム」でも、シンプルにぼかしだけを入れるのか、シャドウや境界線を入れるのか、などちょっとした違いで質感が変わってくるので、こうして見ると、思ったよりも利用できる範囲は狭くないのかもしれませんね。

まとめ

このように、「グラスモーフィズム」を上手く取り入れることでデザインのクオリティを上げることができます。
2024年のトレンド予想でもよく挙げられているデザインですので、まだ作ったことがない方はぜひ試してみてくださいね！