テキスト＋メディアスプリットヒーロー
「テキスト＋メディアスプリットヒーロー」は、左にキャッチコピーとCTAボタン、右にビジュアルを置いた 2カラム構成のヒーローセクション です。Grid の grid-template-columns:1fr 1fr で左右を均等に分け、 align-items:center で縦位置をそろえています。
このパーツの使いどころと実装ポイント
「テキスト＋メディアスプリットヒーロー」は、左にキャッチコピーとCTAボタン、右にビジュアルを置いた2カラム構成のヒーローセクションです。Grid の grid-template-columns:1fr 1fr で左右を均等に分け、align-items:center で縦位置をそろえています。コピー・補足文・主従2つのボタンという、コンバージョンを意識した王道の並びです。
向いている場面
- サービスサイトやSaaSのトップ画面
- 採用ランディングページのファーストビュー
- 商品やアプリの紹介ページ冒頭
差し替えどころは、見出し・補足コピー・ボタン文言と、右側の画像です。サンプルはUnsplash配信の写真を使っており、自社の事業に合った実写へ替えるだけで一気に自分たちのページになります。主ボタンと副ボタンの役割（申し込みと実績閲覧など）を整理して並べると効果的です。
実装上の注意
狭い画面では2カラムのままだと窮屈なので、1カラムに切り替えて縦積みにする設計が前提です。画像には loading="lazy" と意味のある alt を入れ、見出しは h1 として1ページに1つに保つとSEOと読み上げの両面で素直な構造になります。
よくある質問
右側の画像は何に差し替えればいいですか
自社の事業やサービスを表す実写写真に差し替えるのがおすすめです。サンプルはストック写真を使っています。img の src を自社画像に変え、alt も写真の内容を表す文に書き換えてください。意味の薄いプレースホルダのままにしないことが大切です。
スマホでは左右が窮屈になりませんか
標準では狭い画面で2カラムを1カラムに切り替え、コピーの下に画像が来る縦積みに変わります。テキストと画像が無理なく読める配置になるので、スマホでも窮屈になりにくい構造です。