スプリットスクリーン
画面を左右50/50に割り、片側にビジュアル・片側にテキストを置くヒーロー。枠が狭いと上下に積み替わる、LP冒頭の定番構図。
プレビュー
静的
操作動きのない質感・レイアウトの見本です。
仕様書
- 向く場面
- LP 冒頭でビジュアルと言葉を半々に置く構図
- 枠が狭いと上下積みに切り替えたいヒーロー
- 片側を写真・片側を CTA にする紹介
- 避ける場面
- 両側とも文章で読ませたい場面
- 縦積み時に画像側の高さが確保できないとき
- 構成要素
- ビジュアル面
- コピー面
- アイブロウ
- 見出しと一行
- CTA
- 持っている状態
- 通常
- フォーカス
- 押下中
- キーボード
Tab で CTA（a 要素）へ移動し Enter で遷移。他にフォーカス位置は無い
- 支援技術
ビジュアル面は role=img＋aria-label で内容を伝える。読み上げはビジュアル→アイブロウ→見出し→本文→CTA の順。CTA は focus-visible で藍の枠線。reduced-motion で遷移無効
- 動き
CTA を押した瞬間に透明度 0.75 へ 150ms
デザインの要点
- flex-basis 150px の 2 面が横に入らない幅で自動的に縦積みになる。ブレークポイントを持たず、置かれた枠の幅に追従する
- ビジュアル面には min-height 100px を置く。縦積みで画像側が潰れて「色の線」になるのを防ぐ
- コピー面は justify-content: center で上下中央に置く。ビジュアルの高さに対して文字が上に寄ると半々に見えない
実装メモ
flex-wrap と flex-basis(150px) で、枠幅が足りなくなると自動で縦積みに切り替わります。左右比を固定したい場合は各面に width:50% を指定してください。
コード（コピーして使えます）
<div class="stage">
<section class="split">
<div class="split-visual" role="img" aria-label="ビジュアル面"></div>
<div class="split-copy">
<p class="split-eyebrow">NEW</p>
<h2 class="split-title">半分は絵、半分は言葉。</h2>
<p class="split-text">左右で役割を分けると、視線が自然に流れます。</p>
<a class="split-cta" href="#">はじめる</a>
</div>
</section>
</div>