スプリットスクリーンレイアウト

解説

画面を左右に2分割し、片側にテキストとボタン、もう片側にビジュアルを配置する「スプリットスクリーン」レイアウトです。display:flex で左右パネルを並べ、flex:1 を両方に与えて均等な2列にしています。左パネルは縦方向にも flex を使い、見出し・説明・CTAボタンを中央に揃えています。右側はサンプルとしてグラデーションのブロックを置いていますが、ここを写真や動画に差し替える前提です。

向いている場面

• サービスやキャンペーンのヒーローセクション
• 「左に訴求コピー・右にビジュアル」の定番構図
• 製品紹介や採用ページの導入部

狭い画面では @media(max-width:600px) で縦並びに切り替わるよう設定されています。配色は左パネルの背景 #1a1a2e やボタンの #10b981 を変えるだけでトーンを調整できます。右側の ss__img を実画像にする場合は、background-image と background-size:cover を指定すると枠いっぱいに収まります。注意点として、左右の高さが揃うように min-height を設けていますが、コンテンツ量が偏ると間延びするため、文章量を整えると見た目が安定します。

使用例・適したシーン

• LP のファーストビュー
• サービストップの導入
• コーポレートサイトのトップ