フルワイドメインビジュアル（画像背景）

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

高さ480pxの背景画像の上に半透明のグラデーションオーバーレイを重ね、中央に白文字のキャッチ・見出し・リード・ボタンを配置したフルワイドのメインビジュアルです。背景は position:absolute;inset:0 と object-fit:cover で枠いっぱいに敷き、その上の mv__overlay が濃紺〜紫の斜めグラデーションで画像を暗く落とし、文字の可読性を確保します。下端にはCSSアニメーションで上下に伸び縮みするスクロール促進インジケーターが付きます。

向いている業種・場面

観光・宿泊・飲食・コーポレートなど、1枚の写真で世界観を一気に伝えたいトップページの冒頭に向きます。風景写真を背景にした観光サイト、店内写真を使う飲食店、オフィス写真を使う企業サイトなど、ビジュアル訴求が効く業種に幅広く使えます。

カスタマイズと注意

• オーバーレイのグラデーション色と濃さを変えると印象が大きく変わります。背景写真が明るいほど、文字を読ませるにはオーバーレイを濃くする必要があります。
• 見出しは h1 です。トップの主役見出しとして1ページに1つに留めてください。
• 背景画像には意味のある alt が入っています。装飾目的でも、文字が画像に乗る構成ではコントラスト比の確保が重要です。
• 高さは固定480pxです。完全な100vhにしたい場合は height を 100vh に変え、文字量が縦に収まるか確認してください。