画像分割ヒーロー（左テキスト右画像）
画像分割ヒーローは、左にコピーと CTA ボタン、右にビジュアルを並べた 2 カラム構成のファーストビューです。レイアウトは display:grid と grid-template-columns:1fr 1fr で左右を均等に分け、 align-items:center で縦位置をそろえています。
解説
画像分割ヒーローは、左にコピーと CTA ボタン、右にビジュアルを並べた 2 カラム構成のファーストビューです。レイアウトは display:grid と grid-template-columns:1fr 1fr で左右を均等に分け、align-items:center で縦位置をそろえています。テキストとビジュアルが視線の中で自然に対になり、サービス内容と雰囲気を一目で伝えられる王道の型です。
使う場面
- スタートアップや SaaS のトップページ
- 製品やアプリの紹介 LP の冒頭
- 左に説明・右にスクリーンショットを置く資料的なページ
右側の .hs__r は現在グラデーションのプレースホルダなので、実運用では実写やプロダクト画像に差し替えます。見出しの大きさは h1 の font-size、左右の間隔は gap で調整できます。スマートフォンでは横並びが窮屈になるため、メディアクエリで grid-template-columns:1fr に切り替えて縦積みにすると読みやすくなります。文字色とボタン色のコントラストも確保しておきましょう。
使用例・適したシーン
- LP のファーストビュー
- サービストップの導入
- コーポレートサイトのトップ
よくある質問
スマートフォンでは左右が窮屈になりませんか
横並びのままだと狭くなります。メディアクエリでgrid-template-columnsを1frにして縦積みに切り替えると、テキストと画像が広く使えて読みやすくなります。
右側の画像はどう差し替えますか
サンプルではグラデーションのプレースホルダです。.hs__rのbackgroundに実写やプロダクト画像を指定するか、中にimg要素を置いて差し替えてください。