左テキスト右動画スプリットヒーロー
左半分にキャッチコピーとCTA、右半分にビジュアル（背景動画またはアイキャッチ画像）を置いた、画面を二分するスプリットヒーローです。レイアウトはCSS gridの 1fr 1fr で左右を分け、左カラムは flex の縦中央寄せでコピーを配置します。
このパーツの使いどころと実装ポイント
左半分にキャッチコピーとCTA、右半分にビジュアル（背景動画またはアイキャッチ画像）を置いた、画面を二分するスプリットヒーローです。レイアウトはCSS gridの1fr 1frで左右を分け、左カラムはflexの縦中央寄せでコピーを配置します。右のビジュアルにはsvh__overlayのグラデーションが重なり、画像の上に置く文字や全体のトーンを引き締めます。
向いている場面
- コーポレートサイトやサービスサイトの第一印象を作るトップ
- 動画でブランドの空気感を見せたいWeb制作・クリエイティブ系
- コピーとCTAをしっかり読ませたいBtoBサービスの冒頭
カスタマイズと注意
差し替えるのは左のコピー・CTAリンクと、右のビジュアルです。動画にする場合はミュートの自動再生にし、回線が細い環境向けに画像のフォールバックを用意します。装飾目的のビジュアルにはaria-hiddenが付いており、意味は左のテキストで伝える設計です。モバイルでは縦積みに切り替わり、ビジュアルの高さが固定されるため、動画や写真の主要部分が切れないか確認します。見出しはh1に保ち、CTAボタンは2つまでに絞ると視線が迷いません。
よくある質問
右側を画像ではなく動画にしたいです。
ビジュアル枠のimgをvideo要素に差し替え、muted・autoplay・loop・playsinlineを付けると背景動画になります。データ量が大きいので、モバイルではposter画像や静止画にフォールバックし、再生はWi-Fi時のみにするなどの配慮を入れると安全です。
左のテキスト側が暗い背景で文字が読めるか心配です。
左カラムは濃色の背景に白系の文字を載せる設計なので、コントラストは確保されています。コピーを長くしすぎず、CTAは色付きと枠線の2種でメリハリを付けると、暗い面でも読みやすくクリックしやすくなります。