プロダクトローンチ告知ヒーロー
プロダクトローンチ告知ヒーローは、新製品の発表を伝える Apple / Tesla 風の構成です。背景に radial-gradient で中心を明るく周囲を黒く落とすスポットライト表現を使い、製品を浮かび上がらせます。
解説
プロダクトローンチ告知ヒーローは、新製品の発表を伝える Apple / Tesla 風の構成です。背景に radial-gradient で中心を明るく周囲を黒く落とすスポットライト表現を使い、製品を浮かび上がらせます。見出しは background-clip:text でグラデーションを文字の形に切り抜いた塗りつぶし文字、letter-spacing:.4em を効かせた発売時期ラベル、強い box-shadow で浮かせた製品ブロックを縦に並べ、上品で静かな発表感を作っています。JavaScript は不要です。
適した場面
- 新製品・新プランのローンチ告知ページ
- 予約注文や事前登録を促す発表系 LP
- ブランドの世界観を重視するプレミアム訴求
発売時期や製品名は HTML を書き換えるだけで差し替えられます。見出しのグラデーション色は linear-gradient の 2 色で調整します。製品ブロック（.hero-launch__product）は単色のプレースホルダなので、実際の製品画像に置き換えると完成度が上がります。background-clip:text は一部の古い環境で文字が透明になることがあるため、フォールバックの文字色を用意しておくと安全です。
使用例・適したシーン
- LP のファーストビュー
- サービストップの導入
- コーポレートサイトのトップ
よくある質問
グラデーション文字が表示されない環境がありますか？
background-clip:text に対応しない古いブラウザでは文字が透明になることがあります。通常の color でフォールバックの文字色を指定しておくと、対応していない環境でも見出しが読めます。
製品のプレースホルダを実画像にできますか？
できます。.hero-launch__product のグラデーション背景を製品写真の background-image に置き換えるか、その位置に img を配置します。box-shadow の浮遊感はそのまま活かせます。