グラスモーフィズムの基本
グラスモーフィズムとは？
グラスモーフィズムは、2021年ごろからWebデザインの世界で注目されているスタイルの一つです。
ガラスのように透明感があり、背景がぼんやりと透けて見えるようなデザインを指します。
AppleがiOSのコントロールセンターなど自社プロダクトに積極的に取り入れている手法でもあるので、私たちが普段生活する中でもよく見るスタイルです。もはやグラスモーフィズムは単なる一時的なトレンドではないと言えるでしょう。
同じ新鮮さを感じさせるスタイルであるニューモーフィズムよりも、情報の目立たせ方に工夫のしようがあり使い勝手も良いです。これから先も汎用性の高いスタイルとしてより多くのアプリケーションやウェブサイトで見る機会が増えていくのではないかと思います。
グラスモーフィズムを使う時のポイント
このスタイルは、透明感と軽やかさを同時に表現できるため、ユーザーに清涼感や洗練された美しい印象を与えます。ぼかしや透明度を調整することで後ろの要素をボケさせて、リッチな視覚効果を生み出すことが可能です。以下のポイントを押さえてグラスモーフィズムを使うと良いでしょう。
要素と重なった部分の背景をぼかす
グラスモーフィズムでは、要素が重なった部分の背景をぼかすことで、ガラス越しに見ているような効果を作り出します。このぼかし効果は、CSSプロパティのbackdrop-filterを使用して実現されます。
以下のように指定すると背景を5pxぼかすことができます。これに加えて背景色を半透明にすることで、すりガラスのような見た目を作ることができます。
backdrop-filter: blur(5px); /* ぼかし */
背景をぼかしたときに分かりやすいものにする
グラスモーフィズムを使用する際、背景は非常に重要です。
写真や色の濃い鮮やかな背景を選ぶことで、すりガラスのようなボケ具合が透明感をより際立たせます。グラスモーフィズムの効果を最大限活かすのなら、ぼかしたときに効果が出やすい背景の上で使うことを心がけましょう。
背景色に頼らずに情報が見やすいように工夫しましょう。UIがさまざまなケースで使用される場合を想定し、それ単体でも機能するようなスタイルを定義するのが重要です。不透明度やぼかし具合、フォントのサイズと色、余白の取り方などに注意して作成しましょう。
ドロップシャドウと1pxの境界線を入れる
ドロップシャドウを加えることで、グラスモーフィズムの要素が浮かび上がって見えるようになります。
適切なドロップシャドウの使用は、ユーザーの目を引きつける視覚的なコントラストとしても役立ちます。影は、柔らかくて広がりのあるものを選ぶと、より自然で高品質な見た目になります。
また、グラスモーフィズムの要素に1pxの白い境界線を加えることで、すりガラスのフチのような表現が可能です。これは装飾としての効果だけではなく、要素の範囲が判別しにくいグラスモーフィズムの欠点を補うものでもあります。ドロップシャドウとともに追加することをおすすめします。
CSSでの実装
コピペOK！グラスモーフィズムのCSSコード
HTMLとCSSで実現するグラスモーフィズムのコードについてご紹介します。
コピペして使用してください。
サンプルはこちらになります。
See the Pen Untitled by web design shake (@webdesignshake) on CodePen.
<div class="glass">
glassmorphism <!-- ここに内容を入れる -->
</div>.glass {
background: rgba(255, 255, 255, 0.25); /* 透明背景色 */
border-radius: 20px; /* 角丸 */
-webkit-box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1); /* 影 */
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1); /* 影 */
-webkit-backdrop-filter: blur(5px); /* ぼかし */
backdrop-filter: blur(5px); /* ぼかし */
border: 1px solid rgba(255, 255, 255, 0.25); /* ボーダー */
}まとめ
グラスモーフィズムの紹介とCSSコードを共有しました。
コーディングの際には、今回紹介したポイントを意識してこのスタイルを使用できるといいですね。グラスモーフィズムは綺麗で洗練されたイメージを与えることができます。色々なサイトやアプリケーションで見かけることも多くなっていますので、ぜひ使ってみてくださいね。
