こんにちは!ウェブ担当のニシウラです。
4月に入り、段々と暖かくなってきましたね~。
ウェブデザインのトレンドも季節の移り変わりと同じように、どんどん新しいものに切り替わっていく昨今ですが、その中でも近年のトレンドである「グラスモーフィズム」について少しご紹介したいと思います!
皆さんはグラスモーフィズムというものをご存じでしょうか?
上の画像のように、半透明でぼかした部分をグラスモーフィズムといいます。
写真などの画像の上から、磨りガラスやつや消しガラスを重ねているような表現方法です。
今ではiPhoneのホーム画面(フォルダやコントロールセンター画面)やMacOS、Windows11などのUIでも採用されているので、私たちの日常に自然と溶け込んでいる表現とも言えますね。

※イメージ
近年のトレンドではこのような質感のあるモーフィズム系が取り入れられることが増え、MMPのウェブサイトもメニュー画面の背景をこの仕様にしています!
“磨りガラス越し”ではっきりとは見せないという表現が、なんだかオシャレな感じがします。
このグラスモーフィズムをウェブに取り入れる場合は主にCSSのコードで調整するのですが、今回は簡単にグラスモーフィズムを表現できる、おすすめのCSSジェネレーターをご紹介します!
■Glassmorphism Generator
UIが直感的で操作しやすいシンプルなジェネレーター。CSSがリアルタイムで生成されるので、数値の変化がわかりやすいです。

https://hype4.academy/tools/glassmorphism-generator
■Toolbox
背景色をライトとダークから選択でき、イメージを確認しながらの調整がしやすいジェネレーター。ガラス部分だけでなく角丸部分なども同時に調整できます。

http://santhoshsivan.com/glass.html
いかがでしたか?
実際にジェネレーターを操作してみると、その変化が面白く感じられると思います!
シンプルで汎用性が高くオシャレなグラスモーフィズムを、どんどんウェブデザインに取り入れてみましょう!