グラデーション+テキスト左・画像右ヒーロー
左にキャッチコピーとCTAボタン、右にビジュアル画像を置いた 2カラム分割型のヒーロー（ファーストビュー） です。背景には linear-gradient(135deg,...) による濃い紫〜紺のグラデーションを敷き、 grid-template-columns:1fr 1fr でテキストと画像を半々に並べていま…
このパーツの使いどころと実装ポイント
左にキャッチコピーとCTAボタン、右にビジュアル画像を置いた2カラム分割型のヒーロー（ファーストビュー）です。背景には linear-gradient(135deg,...) による濃い紫〜紺のグラデーションを敷き、grid-template-columns:1fr 1fr でテキストと画像を半々に並べています。見出しは clamp(28px,4vw,46px) で画面幅に応じて滑らかに大きさが変わるリキッド指定で、一部を em で色替えして強調しています。CTAは主・副の2ボタン構成です。
向いている場面
- サービスサイトやLPの冒頭で価値提案を一目で伝えたいとき
- SaaS・制作会社・スタートアップなどの強いトップ訴求
- 左にメッセージ、右に製品やオフィスの写真を見せたい構成
カスタマイズの勘所
右の画像はサービス画面や実写に差し替えると説得力が増します。グラデーションの色は linear-gradient の2〜3色を変えるだけでブランドカラーに寄せられます。720px 以下では grid-template-columns:1fr で縦積みになるため、スマホでは見出し→画像→ボタンの順に自然に並びます。ヒーローの画像は最初に見える領域に入るので、無理に loading="lazy" にせず優先読み込みにする選択肢もあります。h1 はページ内で1つに保ち、CTAの文言は「何が起きるか」が分かる動詞にすると迷わずクリックできます。
よくある質問
右側の画像を別のものに差し替えるには？
hero-split__img のsrcを任意の画像URLに変えるだけで差し替えできます。製品画面の実写やオフィス写真にすると訴求が具体的になります。altには内容が伝わる説明を入れ、表示比率が崩れないようサイズの近い画像を選ぶと安定します。
ヒーロー画像はlazy loadingにすべきですか？
ファーストビューに最初から見える画像は表示を急ぐべきなので、あえて遅延読み込みを外し優先的に読み込ませる方が体感速度の指標で有利になりやすいです。逆に下層の画像は lazy のままにして全体の読み込み負荷を抑えます。