スプリットスクリーン Split Screen

画面を2分割して異なるコンテンツを並列表示するレイアウト。

使用場面: ランディングページのヒーロー、ビフォー/アフター比較、左右パネル 採用例: Slack LP, Notion LP

ライブデモ

プロダクトを
もっとシンプルに

直感的なUIで誰でもすぐに使い始められます。チーム全体の生産性を向上させましょう。

ソースコード

<div class="demo-split">
  <div class="demo-split-left">
    <h2 class="demo-split-title">プロダクトを<br>もっとシンプルに</h2>
    <p class="demo-split-text">直感的なUIで誰でもすぐに使い始められます。チーム全体の生産性を向上させましょう。</p>
    <button class="demo-split-btn">無料で始める</button>
  </div>
  <div class="demo-split-right">
    <div class="demo-split-visual">
      <div class="demo-split-shape"></div>
      <div class="demo-split-shape small"></div>
    </div>
  </div>
</div>
.demo-split {
  display: flex; min-height: 220px; border-radius: 12px;
  overflow: hidden; border: 1px solid #e5e7eb;
}
.demo-split-left {
  flex: 1; padding: 30px 24px;
  display: flex; flex-direction: column; justify-content: center;
}
.demo-split-right {
  flex: 1; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--ui-primary) 8%, #fff),
    color-mix(in srgb, var(--ui-primary) 20%, #fff));
}
.demo-split-title {
  margin: 0 0 12px; font-size: 22px; font-weight: 800;
  color: #222; line-height: 1.3;
}
.demo-split-text {
  margin: 0 0 18px; font-size: 13px; color: #666; line-height: 1.6;
}
.demo-split-btn {
  align-self: flex-start; padding: 10px 24px; border: none;
  border-radius: 8px; background: var(--ui-primary); color: #fff;
  font-size: 14px; font-weight: 600; cursor: pointer;
  transition: opacity 0.2s;
}
.demo-split-btn:hover { opacity: 0.85; }
.demo-split-visual { position: relative; }
.demo-split-shape {
  width: 80px; height: 80px; border-radius: 20px;
  background: var(--ui-primary); opacity: 0.3;
  transform: rotate(15deg);
}
.demo-split-shape.small {
  width: 40px; height: 40px; border-radius: 12px;
  position: absolute; top: -20px; right: -30px;
  background: var(--ui-primary); opacity: 0.5;
  transform: rotate(-10deg);
}

AIプロンプト

Basic 
スプリットスクリーンレイアウトをHTML/CSSで作ってください。画面を左右2分割し、左にテキスト、右にビジュアルを配置します。
Custom 
以下の仕様でスプリットスクリーンレイアウトを実装してください。
- 左右50:50のFlexbox分割
- 左側にヘッドライン、説明文、CTAボタン
- 右側にグラデーション背景と装飾図形
- プライマリカラー: #2563eb
- レスポンシブ（モバイルでは縦並び）
- スクロール連動のパララックス効果
Advanced 
アクセシビリティ対応のスプリットスクリーンを実装してください。
- セマンティックなHTML構造（main, section, heading hierarchy）
- 縦並びモバイル時の読み順序を論理的に
- フォーカス可能な要素の順序を確保
- prefers-reduced-motion でパララックス無効化
- prefers-color-scheme 対応（ダーク/ライト）
- container queriesで表示を切り替え
- フルハイトビューポート対応（100dvh）
- リサイズ可能なディバイダー（リサイズハンドル付き）
← カタログに戻る