画像分割CTAセクション
左にテキストとCTAボタン、右にビジュアル画像を置いた、左右分割レイアウトのCTAセクションです。 display:grid の grid-template-columns:1fr 1fr で画面を均等に二分し、テキスト側は flex で中央寄せにして縦位置を揃えています。
このパーツの使いどころと実装ポイント
左にテキストとCTAボタン、右にビジュアル画像を置いた、左右分割レイアウトのCTAセクションです。display:grid の grid-template-columns:1fr 1fr で画面を均等に二分し、テキスト側は flex で中央寄せにして縦位置を揃えています。画像は Unsplash の写真を loading="lazy" と decoding="async" 付きで読み込み、表示の負荷を抑えています。横幅600px以下では1カラムに切り替わります。
向いている場面
無料相談や資料請求への誘導、サービス申し込み前の最終後押し、キャンペーン告知など、ページ下部で行動を促したい場面に適します。写真でイメージを補強しつつ、見出しとボタンで明確に次の行動を提示できます。
カスタマイズと注意点
- ボタンは
--primary修飾の主ボタンと通常ボタンの2種類で、主従関係を付けています。第1ボタンに最も取ってほしい行動を割り当てます。 - 右の画像は
srcを差し替えるだけで内容を変えられます。意味のあるaltを必ず添えてください。装飾的な背景なら短く、内容を伝える写真なら具体的に書きます。 - スマホでは縦並びになるため、テキスト→画像の順で読まれます。重要な訴求は上に来るテキスト側に集約しておくと安全です。
よくある質問
CTAボタンは2つ必要ですか？
必須ではありません。主ボタン（--primary）に最も取ってほしい行動、もう一方に補助的な導線を割り当てる設計です。1つに絞る場合は通常ボタンのリンクを削除し、主ボタンだけ残せば視線が一本化されます。
右の画像はどんなものに差し替えればいいですか？
サービスやブランドの雰囲気に合う実写写真が向きます。srcを差し替え、写真の内容を伝える具体的なalt属性を必ず付けてください。読み込みはlazy指定されているため、ページ表示の妨げにはなりにくいです。