グラスモーフィズム カード入りヒーロー
ヒーローエリアにすりガラス効果を重ねた印象的な FV。ブランドサイト・SaaS のトップに。背景動画/画像との相性◎。
解説
グラスモーフィズム カード入りヒーローは、レイアウトカテゴリの「ヒーロー」に分類される実装パターンです。CSS のみで構成され、難易度は中級レベル。
カラフルな背景にガラス質感の半透明カードを浮かべるトレンドヒーロー。クリエイティブ・SaaS のおしゃれ系で話題。
ヒーローセクション全体にグラスモーフィズム効果を適用したパターンです。背景に動画・大きな画像・グラデーションを敷き、その上にすりガラスのカードでコピー + CTA を載せます。
2024 年以降流行している「マルチレイヤー × 透明感」の代表的なデザイン。Apple の WWDC ページや Linear のような洗練されたサイトでよく見られます。
仕組み
下記コードタブから HTML / CSS をそれぞれ確認・コピーできます。プレビュー領域では実際の動作をその場で確認可能です。
CSS プロパティだけで完結しているため、フレームワーク非依存・軽量に組み込めます。React / Vue / Astro / 静的 HTML どれにも持ち込み可能です。
注意点 / カスタマイズ時のポイント
背景動画を使う場合は、autoplay + muted + playsinline 属性が必須（iOS 自動再生対応）。動画ファイル容量に注意（モバイルは 1MB 以下推奨）。
使用例・適したシーン
- LP のファーストビュー
- サービストップの導入
- コーポレートサイトのトップ
よくある質問
動画背景を画像に変えたい
<video> を <img> または背景画像 CSS に置き換えるだけです。動画より軽量で、モバイルにも優しい。このスニペットは商用利用できますか？
はい。moatway がオリジナルで制作したスニペットは商用・個人問わず自由にご利用いただけます。クレジット表記も不要です。
そのまま貼り付ければ動きますか？
はい。HTML / CSS / JS タブのコードをそれぞれ自分のファイルにコピーして貼り付ければ動きます。クラス名が他の CSS と衝突しないよう、必要に応じてリネームしてください。
ブラウザ対応は？
最新 2 世代の Chrome / Safari / Firefox / Edge で動作確認しています。Internet Explorer はサポート対象外です。
Tailwind CSS でも実装できますか？
可能です。クラスベースのスタイルを Tailwind のユーティリティクラスに置き換えれば同じ動作になります。アニメーション・疑似要素については
@apply や arbitrary values が必要な場合があります。