全面背景 + オーバーレイ MV

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

背景いっぱいに画像（このサンプルではグラデーション）を敷き、その上に半透明のレイヤーと中央テキスト・CTA を重ねたフルスクリーン型のメインビジュアルです。display:grid;place-items:center で中身を上下左右の中央へ置き、::after の擬似要素で光のにじみを足して奥行きを出しています。最初の数秒でブランドの世界観を印象づけたいときに効きます。

向いている場面

飲食店や老舗、ブランドサイト、周年記念の特設ページなど、写真や物語で雰囲気を伝えたい業種に向きます。「SINCE 1947」のような小見出し、大きな見出し、一文の説明、CTA という縦の流れで、迷わず読み進められます。

カスタマイズと実装上の注意

• 背景を実写に差し替える場合は、文字の上に重なる暗いオーバーレイ（半透明の黒など）を必ず入れて可読性を確保します
• 見出しの改行位置を br で整え、語のまとまりで折り返すと読みやすくなります
• 背景が明るい画像だと白文字が沈むため、文字側に影を足すか色を反転します

高さは min-height で確保しつつ、小さな画面では文字が画面外へあふれないよう余白とフォントサイズを抑える調整が要点です。