デザインや技術の流れが早く、乗り遅れないよう頑張っています！
今日は「グラスモーフィズム」デザインを作ってみたので、ご紹介したいと思います。
グラスモーフィズムとは？
グラスモーフィズムとは、磨りガラスのような半透明のレイヤーをベースにしたクールな印象のUIデザインです。昨年頃より、デザインメディアなどで注目され始めています。
参照） グラスモーフィズム？CSSコピペできる新Webトレンドの参考HTMLスニペット、ツールまとめ – PhotoshopVIP
https://photoshopvip.net/126760
グラスモーフィズムの特徴は？
- 見た目が軽く、涼しげ
- 奥行きがあり、立体的
注目のきっかけは？
Appleが昨年リニューアルした「MacOS Big Sur」が流行の先駆けと言われています。リニューアルに携わったAppleの担当者によると、人が複数のデバイスを持つようになり複数のデバイスを切り替えながら作業をする機会が増えたことや、自宅で作業をする機会が増え、それらの切り替えをより自然にしたいと思ったことがきっかけだそうです。
また、OSをリニューアルする上で目指したところは、自然なアニメーションや見た目の重さを取り除き、印象を軽くシンプルな見栄えを目指したそうです。
OSをbig surにアップデートした社員に使い心地を聞いてみると、違和感や迷うことがなく使いやすいという意見がありました。
https://www.apple.com/jp/macos/big-sur/
ニューモフィズムとの違いは？
ニューモフィズムというデザイン手法が2019年頃に流行しました。シンプルなフラットデザインに特徴的なシャドウがついたデコボコしたような見栄えのUIデザインになります。
海外のキュレーションサイトなどでよく取り上げられていましたが、今ではあまり見かけなくなりました。個人的には好きなデザインだったので残念です。
ニューモーフィズム？CSSコピペ実装できる新Webトレンドの参考HTMLスニペット、ツールまとめ
https://photoshopvip.net/120672
作り方は難しい？
グラスモーフィズムの作り方はシンプルです。
注意点はある？
他にもレイヤーは重ねるほど明るくなるため、作成する際は少し注意が必要です。
実装はできる？
参照） https://glassmorphism.com/
グラスモーフィズムのCSSを抽出するジェネレーターがありました。
他にもコピペで使えるスニペットなどがあり、実装も問題なさそうです。
作ってみた感想
作成する前は少し難しそうな印象がありましたが、作成してみると
簡単なステップで、あっという間に作成できました。
涼しい見た目のグラスモーフィズム、いかがでしたでしょうか？
今回、ご紹介した「グラスモーフィズム」ですが、アプリ制作に活かすことが可能です！
自社のアプリを作りたいけど、どうしたらいいかわからない。
または、「グラスモーフィズム」を取り入れたいなど！！ご興味のある方は、下記のお問い合わせボタンよりお問い合わせください。
コメント