画像右寄せヒーロー（テキスト左）
このパーツは、左にキャッチコピー・説明・CTA、右に大きなビジュアルを並べた 2 カラムのヒーローです。 display:grid で 1fr 1fr に分割し、 align-items:center で左右の高さを揃えます。
このパーツの使いどころと実装ポイント
このパーツは、左にキャッチコピー・説明・CTA、右に大きなビジュアルを並べた 2 カラムのヒーローです。display:grid で 1fr 1fr に分割し、align-items:center で左右の高さを揃えます。テキスト側は主見出し h1・補足の p・主ボタンと補助リンクの 2 種 CTA で構成され、右側は今はプレースホルダのグラデーション枠です。左で語り右で見せる、IT・SaaS 系コーポレートの王道レイアウトです。
向いている場面
- サービスの価値を一言で伝えたい SaaS・ツールのトップ
- 製品写真やダッシュボード画像を主役にしたい BtoB サイト
- 無料相談・資料請求へ素早く誘導したいコーポレートの冒頭
カスタマイズと注意点
右の hsr__img は aspect-ratio で比率を保ったプレースホルダなので、製品スクリーンショットや実写へ差し替えると完成度が上がります。CTA は主ボタンを 1 つに絞り、補助リンクは控えめにすると視線が散りません。狭い画面では 2 カラムが 1 カラムへ折り返す設計で、その際はテキストを上、画像を下にすると読み順が自然です。h1 はページに 1 つだけ置く要素なので、サイト全体で重複しないよう注意し、画像を入れるときは内容を表す alt を付けてください。
よくある質問
右側のビジュアルは何を入れるのが良いですか
サンプルはグラデーションのプレースホルダです。製品のスクリーンショットやサービスを象徴する実写写真を入れると、左のコピーと噛み合って説得力が出ます。比率は元の枠が保つので、画像側でトリミングを調整してください。
CTAボタンは2つとも目立たせるべきですか
主ボタンを1つに絞り、もう片方は控えめなテキストリンクにするのがおすすめです。サンプルもダークの塗りボタンと文字だけのリンクで強弱を付けています。両方を強く出すと、どちらを押せばよいか迷わせてしまいます。