夏の涼しげな磨りガラスのようなデザイン/グラスモーフィズム

こんにちは。
WebデザイナーのTikoです。

今日は磨りガラスのような涼しさと奥行きを感じさせるGlassmorphism（グラスモーフィズム）についてのお話。

ガラスの質感を自分好みに調整したら、そのままCSSのコードを生成できる便利なページもご紹介するので、ぜひ最後まで読んでいただけたら嬉しいです。

涼しげでミニマルな印象のグラスモーフィズム

2021年のUIデザイントレンドなどにもよく取り上げられていたグラスモーフィズム。
トレンドに上がっていたのは、どちらかというとグラデーションやビビッドな配色にこのグラスモーフィズムを重ねたものよく見かけました。

先日の夏に涼しげな波紋デザイン/jQuery Ripplesに引き続き、夏の暑さが和らぐような、視覚から感じる涼しさをデザインの中で表現したいなと思い、この磨りガラスの質感をデザインに取り入れてみました。

通常のボックスに背景をベタ塗りで入れるよりも軽やかで、ミニマルな印象も崩さず、背景画像の雰囲気を残したまま、要素の差別化や文字の可読性をあげることができて、使い方の幅は広いなという印象です。

まずは実装してみた

シンプルな背景に、柔らかく薄い磨りガラスのような要素が重なります。

今回のデモサイトでは、スクロールアニメーションをつけることで、背景がボケてゆく奥行き感を楽しめるようにしてみました。

⬇︎デモサイト
https://template-artist03.netlify.app/

とても便利なジェネレーター（リンクあり）

背景画像を用意して、実装したい要素に、Glassmorphism CSS Generatorで生成したコードを付与するだけ。

⬇️こちらのジェネレーターを使うと、目で確認しながらコードを生成してくれるので、何度もCSSを調整する必要もありませんでした。

Glassmorphism - simple CSS generator

ガラス部分の色や、縁取りの枠、シャドウの距離や濃さなどによって、かなり印象が変わりますし、内側のぼかし具合も、使用する背景などに合わせて変えてゆくのが面白そうです。

今回のデモサイトでは、こんな感じに調整。

background: rgba( 255, 255, 255, 0.10 ); 
box-shadow: 0 8px 32px 0 rgba(120, 120, 121, 0.37);
backdrop-filter: blur( 10.0px );
-webkit-backdrop-filter: blur( 10.0px );
border: 1px solid rgba( 255, 255, 255, 0.03 );

縁取り(border)は薄くですが入れることで、ガラスの厚みが表現できているような感じがしました。

2020年にトレンド入りしたニューモーフィズムに引き続き、立体感によってサイトに奥行きを持たせるデザインが、どんどん出てきそうで楽しみです。

マット感が大好きな私は、この質感、とても好きになりました！

質感を伝えるデザインで、気持ちよくスクロールしてほしい

グラスモーフィズムは視覚的にも心地よくて、マットで優しく、ソフトな印象。

Webサイトはクライアントさんのビジネスのパンフレットのようなものだから、最後まで飽きさせず、見ていただけるものを作りたい。
そんな思いを強くしながら、涼感を伝えるデザイン制作に勤しむ真夏の暑い1日でした。

では心地よいデザインとともにある、心地よい1日をお過ごしください。