左右 2 分割ヒーロー（テキスト + ビジュアル）
左にコピーと CTA、右にビジュアルを置く、SaaS の LP でよく見る 2 分割ヒーローです。 display:grid の grid-template-columns:1fr 1fr で左右を均等に分け、左カラムは flex で中身を縦中央に揃えています。
解説
左にコピーと CTA、右にビジュアルを置く、SaaS の LP でよく見る 2 分割ヒーローです。display:grid の grid-template-columns:1fr 1fr で左右を均等に分け、左カラムは flex で中身を縦中央に揃えています。右のビジュアルはグラデーションを clip-path:polygon で斜めに切り、平凡な四角を避けて動きを出しています。小さめのアイブロウ文字を等幅フォントで添え、見出しは clamp() で可変サイズにしています。
使う場面
- BtoB SaaS やツールのサービス紹介トップ
- アプリの機能訴求ランディングページ
- 資料請求・無料登録を促す導線ページ
スマホ向けには @media で 1 カラムに切り替え、縦並びにする想定です。右の clip-path の角度や linear-gradient の色を変えるだけで印象が大きく変わり、ビジュアル枠には画像を入れても成立します。注意として、本番では右側を装飾のままにせず、実際のプロダクト画面やイラストを入れると訴求が強まります。左右の余白とボタン位置を揃えると、整った第一印象になります。
使用例・適したシーン
- LP のファーストビュー
- サービストップの導入
- コーポレートサイトのトップ
よくある質問
スマホでは縦並びになりますか。
なります。メディアクエリで列を 1 カラムに切り替えているため、狭い画面ではテキストの下にビジュアルが回り込む縦並びレイアウトに変わります。
右側のビジュアルに画像を入れられますか。
入れられます。グラデーションの代わりに img を置くか background に画像を指定すれば、斜めに切り取られた枠の中にプロダクト画像などを表示できます。