スプリットスクリーンとは

画面を左右（または上下）2 つの領域にきっぱり分けて、それぞれ別の内容を見せるレイアウト。

概要

画面を左右（または上下）2 つの領域にきっぱり分けて、片方に画像や動画、もう片方に見出しや説明文・ CTA ボタンを配置するレイアウトです。2 つの選択肢を提示するランディングページや、印象的な導入部分（ヒーローセクション）の構成パターンとしてよく使われます。

別名

表記ゆれ：スプリットスクリーン、2 分割レイアウト、左右分割、split screen

「2 分割レイアウト」「左右分割」は見た目をそのまま表した呼び方で、「スプリットスクリーン」は英語表記に由来する呼び方です。

AI への伝え方

「画面を左右に 2 分割するスプリットスクリーンにして」で通じます。画面の狭いスマホでは左右に並べる余地がないため、「狭い画面では上下に積み重ねて」と伝えるとレスポンシブ対応まで含めた実装になります。左右のどちらに画像を置くかも合わせて伝えてください。

似たパーツとの違い

「ヒーローセクション」は画面上部の導入部分を指す言葉で、スプリットスクリーンはその構成パターンの一つとして使われることがあります。本文エリアの一部を 2 カラムに分ける「2 カラムレイアウト」とは、スプリットスクリーンが画面全体（またはセクション全体）をきっぱり 2 分割するのに対し、2 カラムは片方が補助的なサイドバーであることが多い点が異なります。

デモ

コード

HTML

<div class="split-screen-demo">
  <div class="split-screen-demo__media" aria-hidden="true"></div>
  <div class="split-screen-demo__content">
    <h2 class="split-screen-demo__heading">新しいプランが登場</h2>
    <p class="split-screen-demo__text">
      チームの生産性を高める新機能を追加しました。まずは無料でお試しください。
    </p>
    <a class="split-screen-demo__cta" href="#">無料で始める</a>
  </div>
</div>

CSS

.split-screen-demo {
  display: flex;
  min-height: calc(100vh - 48px);
  font-family: sans-serif;
}

.split-screen-demo__media {
  flex: 1 1 50%;
  background: linear-gradient(135deg, #0017c1, #333333);
}

.split-screen-demo__content {
  display: flex;
  flex: 1 1 50%;
  flex-direction: column;
  justify-content: center;
  gap: 16px;
  padding: 40px;
}

.split-screen-demo__heading {
  margin: 0;
  font-size: 24px;
  color: #212121;
}

.split-screen-demo__text {
  margin: 0;
  color: #666666;
  line-height: 1.8;
}

.split-screen-demo__cta {
  align-self: flex-start;
  padding: 12px 28px;
  border-radius: 999px;
  background: #0017c1;
  color: #ffffff;
  font-weight: bold;
  text-decoration: none;
}

.split-screen-demo__cta:hover {
  background: #00118f;
}

@media (max-width: 480px) {
  .split-screen-demo {
    flex-direction: column;
  }

  .split-screen-demo__media {
    min-height: 160px;
  }
}