こんにちは！ウェブ担当のニシウラです。
4月に入り、段々と暖かくなってきましたね～。
ウェブデザインのトレンドも季節の移り変わりと同じように、どんどん新しいものに切り替わっていく昨今ですが、その中でも近年のトレンドである「グラスモーフィズム」について少しご紹介したいと思います！
皆さんはグラスモーフィズムというものをご存じでしょうか？
上の画像のように、半透明でぼかした部分をグラスモーフィズムといいます。
写真などの画像の上から、磨りガラスやつや消しガラスを重ねているような表現方法です。
今ではiPhoneのホーム画面（フォルダやコントロールセンター画面）やMacOS、Windows11などのUIでも採用されているので、私たちの日常に自然と溶け込んでいる表現とも言えますね。
※イメージ
近年のトレンドではこのような質感のあるモーフィズム系が取り入れられることが増え、MMPのウェブサイトもメニュー画面の背景をこの仕様にしています！
“磨りガラス越し”ではっきりとは見せないという表現が、なんだかオシャレな感じがします。
このグラスモーフィズムをウェブに取り入れる場合は主にCSSのコードで調整するのですが、今回は簡単にグラスモーフィズムを表現できる、おすすめのCSSジェネレーターをご紹介します！
■Glassmorphism Generator
UIが直感的で操作しやすいシンプルなジェネレーター。CSSがリアルタイムで生成されるので、数値の変化がわかりやすいです。
https://hype4.academy/tools/glassmorphism-generator
■Toolbox
背景色をライトとダークから選択でき、イメージを確認しながらの調整がしやすいジェネレーター。ガラス部分だけでなく角丸部分なども同時に調整できます。
http://santhoshsivan.com/glass.html
いかがでしたか？
実際にジェネレーターを操作してみると、その変化が面白く感じられると思います！
シンプルで汎用性が高くオシャレなグラスモーフィズムを、どんどんウェブデザインに取り入れてみましょう！
