おはようございます！株式会社ファストコーディングの働くおかんです。
先日、上の子と一緒に図鑑を読んでいたんですが、左ページに大きな写真、右ページに説明文という構成がすごく読みやすくて。子どもも写真をじーっと見てから「これなに？」って右側の文章を指さすんですよね。左で興味を引いて、右で情報を伝える。この流れ、Webサイトでもそのまま使えるなと思ったんです。
この「画面を左右に分けて情報を並べる」レイアウトを、スプリットレイアウトと呼びます。コーポレートサイトやサービス紹介ページで見かけることが多い構成です。写真とテキスト、動画と説明文のように、異なる種類のコンテンツを左右にきれいに配置できるので、情報が整理されて読みやすくなります。
今回は、スプリットレイアウトのメリットと、CSSでの実装方法を紹介していきます。
スプリットレイアウトが「読みやすい」理由
Webページ上でユーザーの視線はF字型やZ字型に動く傾向があります。実際の案件でヒートマップを確認しても、ユーザーはまず左側に目を向け、そこから右へ流れていくことが多いです。
スプリットレイアウトはこの視線の流れに沿った構成です。左側にビジュアル（写真やイラスト）を置いて視線を引きつけ、右側にテキストで情報を伝える。視線の移動距離が短くなるので、ユーザーが疲れにくいんですよね。
1カラムで上から下に長く続くページだと、スクロールしているうちに「今どこを読んでいるんだっけ」となりがちです。スプリットレイアウトなら、左右のペアでひとつの情報ブロックが完結するので、区切りがはっきりします。
基本の実装 ─ CSS Gridで左右に分ける
まずは一番シンプルなスプリットレイアウトから見ていきます。左側に画像、右側にテキストを配置する基本形です。
<!-- HTML -->
<section class="split">
<div class="split__media">
<img src="/images/service-photo.jpg" alt="サービスイメージ">
</div>
<div class="split__content">
<h2>フロントエンド開発のプロ集団</h2>
<p>高品質なコーディングで、デザインを忠実に再現します。レスポンシブ対応はもちろん、パフォーマンスとアクセシビリティにも配慮した実装をお届けします。</p>
<a href="/contact" class="split__cta">詳しく見る</a>
</div>
</section>/* CSS */
.split {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0;
min-height: 480px;
}
.split__media {
overflow: hidden;
}
.split__media img {
width: 100%;
height: 100%;
object-fit: cover;
}
.split__content {
display: flex;
flex-direction: column;
justify-content: center;
padding: 48px;
background: #f9fafb;
}
.split__content h2 {
font-size: 1.5rem;
margin-bottom: 16px;
color: #111827;
}
.split__content p {
font-size: 0.95rem;
line-height: 1.8;
color: #374151;
margin-bottom: 24px;
}
.split__cta {
display: inline-block;
padding: 12px 24px;
background: #2563eb;
color: #fff;
text-decoration: none;
border-radius: 6px;
font-size: 0.9rem;
width: fit-content;
transition: background 0.25s ease;
}
.split__cta:hover {
background: #1d4ed8;
}grid-template-columns: 1fr 1frで左右を均等に分割しています。object-fit: coverを使うことで、画像がコンテナいっぱいに広がりつつ、縦横比を保ったまま表示されます。
ポイントは、テキスト側にjustify-content: centerを指定している点です。これで、テキスト量に関係なく上下中央に配置されるので、見た目のバランスが安定します。
レスポンシブ対応 ─ スマホでは縦並びに
スプリットレイアウトで一番注意が必要なのが、スマートフォンでの表示です。横幅が狭い画面で左右分割のままだと、テキストが読めないくらい小さくなってしまいます。
/* レスポンシブ対応 */
@media (max-width: 768px) {
.split {
grid-template-columns: 1fr;
}
.split__media {
max-height: 280px;
}
.split__content {
padding: 32px 20px;
}
}768px以下でgrid-template-columns: 1frに切り替えて、縦並びにします。画像の高さもmax-heightで制限しないと、スマホで画像だけで画面がいっぱいになってしまうので注意が必要です。
夜、子どもが寝た後にスマホで確認してみたら、画像の下にテキストがすっと続く形になって、自然に読み進められました。レスポンシブの切り替えポイントは、案件ごとに実機で確認するのが大事です。
左右を入れ替えてリズムを作る
スプリットレイアウトを1ページに複数回使う場合、毎回「左：画像、右：テキスト」だと単調になります。交互に入れ替えることで、視覚的なリズムが生まれます。
<!-- HTML -->
<section class="split">
<div class="split__media">
<img src="/images/feature-01.jpg" alt="特徴1">
</div>
<div class="split__content">
<h2>高速なコーディング</h2>
<p>経験豊富なエンジニアが、短納期でも品質を落とさない実装を行います。</p>
</div>
</section>
<section class="split split--reverse">
<div class="split__media">
<img src="/images/feature-02.jpg" alt="特徴2">
</div>
<div class="split__content">
<h2>レスポンシブ対応</h2>
<p>PC・タブレット・スマートフォン、すべてのデバイスで最適に表示されるよう設計します。</p>
</div>
</section>/* 左右反転 */
.split--reverse .split__media {
order: 2;
}
.split--reverse .split__content {
order: 1;
}
/* レスポンシブ時はorderをリセット */
@media (max-width: 768px) {
.split--reverse .split__media {
order: unset;
}
.split--reverse .split__content {
order: unset;
}
}orderプロパティで表示順を入れ替えるだけです。HTMLの構造はそのままで、CSSだけで左右が反転します。スマホ表示時はorder: unsetで元に戻すことで、常に「画像→テキスト」の順番になります。
実際の案件でサービス紹介ページにこのパターンを使ったとき、クライアントから「ページにリズム感があって読みやすい」というフィードバックをもらえました。交互に配置するだけで、ページ全体の印象がかなり変わるんですよね。
比率を変えてメリハリをつける
左右を均等に分割するだけでなく、比率を変えることで情報の優先度を表現できます。
/* 画像を大きめにする場合 */
.split--image-large {
grid-template-columns: 3fr 2fr;
}
/* テキストを大きめにする場合 */
.split--text-large {
grid-template-columns: 2fr 3fr;
}
/* レスポンシブ */
@media (max-width: 768px) {
.split--image-large,
.split--text-large {
grid-template-columns: 1fr;
}
}写真がメインのブランドサイトなら3fr 2frで画像を大きく見せる。テキスト量が多いサービス説明ページなら2fr 3frでテキスト側を広くとる。同じスプリットレイアウトでも、比率を変えるだけでまったく違う印象になります。
活用シーンの整理
スプリットレイアウトがとくに効果を発揮する場面を整理してみました。
- サービス紹介ページ ─ 左にサービスのイメージ写真、右に特徴の説明。ひと目でサービスの雰囲気と内容が伝わります
- 会社概要・About ─ オフィスや社員の写真と、企業理念やメッセージを並べるパターン。信頼感を演出できます
- ポートフォリオ・実績紹介 ─ 制作物のスクリーンショットと、プロジェクトの概要を対で見せられます
- LPのファーストビュー ─ 左に商品画像、右にキャッチコピーとCTAボタン。視線が自然にCTAへ流れる構成です
逆に向かないケースもあります。テキスト量が極端に多い記事ページや、比較表のように横幅いっぱいを使いたいコンテンツには不向きです。レイアウトは「コンテンツの性質」に合わせて選ぶことが大事ですね。
実装時の注意点
スプリットレイアウトはシンプルですが、実装時に気をつけたいポイントがいくつかあります。
まず、画像とテキスト側の高さを合わせることです。テキスト量が少ないと、画像側だけが長くなってバランスが崩れます。min-heightを設定するか、テキスト側の余白で調整するのが現実的です。
次に、アクセシビリティへの配慮です。orderプロパティで見た目の順序を変えても、HTMLの読み上げ順序は変わりません。スクリーンリーダーのユーザーにとって不自然な順番にならないか、HTML構造の段階で確認しておく必要があります。
最後に、画像の読み込み速度です。スプリットレイアウトでは大きな画像を使うことが多いので、loading="lazy"の指定や、適切な画像サイズの選定が重要です。夜、子どもが寝てからモバイル回線で確認したら表示が遅かった、なんてことにならないよう、画像の最適化は忘れずに。
まとめ
今回はスプリットレイアウトについて、メリットと実装方法を紹介しました。CSS Gridを使えば、左右分割の基本形からレスポンシブ対応、左右の入れ替え、比率の変更まで、少ないコード量で柔軟に実装できます。
スプリットレイアウトを導入する際に押さえておきたいポイントは以下の3つです。
- レスポンシブ対応では768px以下で縦並びに切り替え、画像の高さを制限する
- 交互に左右を入れ替えて、ページ全体にリズムを作る
- 画像の最適化とアクセシビリティの確認を忘れずに行う
実際にサービス紹介ページで導入した案件では、ページの回遊率が改善し、クライアントからも「情報が整理されて見やすい」という評価をいただけました。構成のシンプルさに対して効果が大きいレイアウト手法なので、次の案件でぜひ試してみてください。
株式会社ファストコーディングでは、こうしたレイアウト設計やレスポンシブ対応を含むフロントエンド実装をサポートしています。スプリットレイアウトの導入やサイトリニューアルをご検討の際は、お問い合わせフォームからお気軽にご相談ください。
