BLOG

MMPブログ

2022.04.18

近年のトレンド!グラスモーフィズム

ウェブ

こんにちは!ウェブ担当のニシウラです。
4月に入り、段々と暖かくなってきましたね~。
ウェブデザインのトレンドも季節の移り変わりと同じように、どんどん新しいものに切り替わっていく昨今ですが、その中でも近年のトレンドである「グラスモーフィズム」について少しご紹介したいと思います!

皆さんはグラスモーフィズムというものをご存じでしょうか?

上の画像のように、半透明でぼかした部分をグラスモーフィズムといいます。
写真などの画像の上から、磨りガラスやつや消しガラスを重ねているような表現方法です。

今ではiPhoneのホーム画面(フォルダやコントロールセンター画面)やMacOS、Windows11などのUIでも採用されているので、私たちの日常に自然と溶け込んでいる表現とも言えますね。

※イメージ

近年のトレンドではこのような質感のあるモーフィズム系が取り入れられることが増え、MMPのウェブサイトもメニュー画面の背景をこの仕様にしています!
“磨りガラス越し”ではっきりとは見せないという表現が、なんだかオシャレな感じがします。

このグラスモーフィズムをウェブに取り入れる場合は主にCSSのコードで調整するのですが、今回は簡単にグラスモーフィズムを表現できる、おすすめのCSSジェネレーターをご紹介します!

■Glassmorphism Generator

UIが直感的で操作しやすいシンプルなジェネレーター。CSSがリアルタイムで生成されるので、数値の変化がわかりやすいです。

https://hype4.academy/tools/glassmorphism-generator

■Toolbox

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

http://santhoshsivan.com/glass.html


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

nishiura

nishiura

(株)MMPのウェブ制作担当。趣味は読書とゲーム。2022年はもう少し外に出るようにしたいと思い、ベランダで家庭菜園を始めてみようと計画を立てている。

CONTACT

ご提案依頼、ご相談、お見積もりなど
お気軽にお問い合わせください。