動画風アニメーション背景ヒーロー

このパーツの使いどころと実装ポイント

このパーツは、動画ファイルを使わずにCSSグラデーションのアニメーションで動きのある背景を再現したヒーローセクションです。背景は深い紺・紫・青を含むlinear-gradientをbackground-size:400%に拡大し、@keyframesで位置をゆっくり往復させることで、色がにじみながら流れる印象を作ります。実際の動画より軽量で、読み込み待ちや通信量の心配が少ないのが利点です。

向いている場面

• ブランドの世界観を出したいサービスサイトの最上部
• 動画素材を用意できないがリッチに見せたいLP
• テキストとCTAを主役にしたいシンプルなトップ

カスタマイズの勘所

雰囲気を変える一番の勘所は背景の色の組み合わせと、アニメーション速度（既定は12秒周期）です。色をブランドカラーに寄せ、速度を遅くすると落ち着いた印象になります。文字は半透明の黒いoverlayを重ねて可読性を確保しているので、明るい配色に変えるときはこのオーバーレイの濃さも合わせて調整してください。CTAは主ボタンとゴーストボタンの2種類が用意されています。

実装上の注意

常時動く背景は人によっては気が散るため、動きの控えめなユーザーを尊重する設計（過度に速い往復を避ける）が望ましいです。min-heightで高さを確保していますが、長い見出しを入れると窮屈になるので、文言は短くまとめると映えます。