グラスモーフィズム カード入りヒーロー
ヒーローエリアにすりガラス効果を重ねた印象的な FV。ブランドサイト・SaaS のトップに。背景動画/画像との相性◎。
解説
このヒーローは、カラフルな radial-gradient 背景の上に半透明のカードを浮かべて、奥行きと透明感を出すレイアウトです。質感の要は backdrop-filter: blur(20px) saturate(180%) で、カードの背後にある背景をぼかしつつ彩度を上げ、すりガラスのように見せています。カード自体は rgba(255,255,255,.15) の薄い白と細い白枠、大きめの border-radius と落ち影を組み合わせ、ガラス板が宙に浮いている印象を作ります。
使いどころ
- SaaS やクリエイティブ系サービスの、写真やグラデを主役にした第一画面
- 新製品の告知 LP で、トレンド感と高級感を同時に出したいヒーロー
- イベント・ポートフォリオの表紙的なカバーセクション
カスタマイズは、背景グラデの色と backdrop-filter のぼかし量を変えるだけで雰囲気が大きく変わります。注意点として、背景が単色・白の上に置くとガラス効果がほぼ見えなくなるため、背後に色や写真がある前提で使ってください。backdrop-filter は一部の古い環境で未対応なので、透明度を少し下げた フォールバック背景色 を用意すると安全です。本文と背景のコントラストも確保し、文字が読みにくくならないようにします。
使用例・適したシーン
- LP のファーストビュー
- サービストップの導入
- コーポレートサイトのトップ
よくある質問
ガラス効果が表示されません。なぜですか？
backdrop-filter は背後にある要素をぼかす機能なので、カードの後ろに色や写真がないと効果が見えません。背景が白や単色のときは、まず radial-gradient などの色付き背景を敷いてください。また Safari では -webkit-backdrop-filter も必要で、ごく一部の古いブラウザは未対応のため background の透明度を少し下げたフォールバックを用意すると安全です。
色やキャッチコピーを自分のブランドに変えたいです。
背景は CSS の radial-gradient の色コードを差し替えるだけでトーンが変わります。カードの白の濃さは rgba(255,255,255,.15) の最後の数値、ぼかしの強さは blur(20px) の数値で調整できます。見出しと本文の文言は HTML 内のテキストを書き換えるだけで反映されます。