左右分割ヒーロー（画像半分）
左にコピー、右にビジュアルを 50/50 で分割したメインビジュアル（ファーストビュー）です。 display:grid の grid-template-columns:1fr 1fr で左右を等分し、左の .hsi__t は flex の縦中央寄せで見出し・補足・ボタンを配置、右の .hsi__v は画像を入れる…
このパーツの使いどころと実装ポイント
左にコピー、右にビジュアルを 50/50 で分割したメインビジュアル（ファーストビュー）です。display:grid の grid-template-columns:1fr 1fr で左右を等分し、左の .hsi__t は flex の縦中央寄せで見出し・補足・ボタンを配置、右の .hsi__v は画像を入れるための枠です。最小高さ 340px を確保しているため、ページを開いた瞬間にメッセージとビジュアルが同時に目に入ります。
向いている場面
サービスサイトやブランドサイトのトップに向きます。たとえば BtoB の SaaS、デザインスタジオ、宿泊施設の紹介ページなど、短い一言と象徴的な 1 枚で世界観を伝えたい場面に合います。左にキャッチコピーと CTA、右に商品やイメージ写真という配置は、視線が左から右へ自然に流れる定番構成です。
カスタマイズの勘所
- 右の
.hsi__vは枠なので、実写や商品写真をobject-fit:coverで全面に敷くと迫力が出ます。 - 左右を入れ替えてビジュアルを先に見せる構成にもできます。
- ボタンは
align-self:flex-startで左寄せなので、コピーの幅と揃えると整って見えます。
SP では 2 分割のままだと両側が窮屈になるため、縦積みにしてビジュアルを上、コピーを下へ並べるのが一般的です。見出しは h1 を 1 ページに 1 つだけにしてください。
よくある質問
右側のビジュアル枠に実際の画像を入れるには？
右側の枠に img を置くか背景画像を指定し、object-fit を cover にすると枠いっぱいに写真が広がります。ファーストビューの画像は読み込み速度に影響するため、WebP 化して適切なサイズに圧縮し、ここだけは遅延読み込みを外すと表示が速く感じられます。
スマホでは左右分割のままで大丈夫ですか？
そのままだと両側が狭く読みにくくなります。メディアクエリで縦積みに切り替え、ビジュアルを上、コピーとボタンを下に並べる構成にするのが定番です。見出しのフォントサイズも画面幅に応じて少し下げると収まりが良くなります。