スプリットスクリーンレイアウトを採用しているwebデザインのショーケース

スプリットスクリーンレイアウトを採用しているwebデザインのショーケース

画面を大胆に分割することでそれぞれのコンテンツを引き立たせるスプリットスクリーンレイアウト(分割画面レイアウト)を採用しているwebデザインのまとめです。
同レベルのコンテンツを並べる、対比をより効果的に見せる、イメージとテキストをはっきりわける、半分を背景のように見せる、スクロール時に半分だけアニメーションを加えるなど、紹介するサイトにもあるように様々な見せ方が可能です。

Renate Rechner

Renate Rechner

半分が現在のメインコンテンツ、もう半分が次のメインコンテンツという形で分割しており、スクロールした際の動きが特徴的です。

McKinney York Architects

McKinney York Architects

FOOD AND SAKE

FOOD AND SAKE

OTANIJUN.

OTANIJUN.

Roman Kirichik.

Roman Kirichik.

F L P L N Y

F L P L N Y

User guide - Dropbox

User guide - Dropbox

ガイドのフロントページで、ユーザーとビジネス管理者とで分割しています。

うどん・おでん 久丸 | 旬家 莉久

うどん・おでん 久丸 | 旬家 莉久

Dropboxと同じタイプで、異なるコンテンツの入り口でスプリットスクリーンレイアウトを採用しています。

FESSIダンススクール

FESSIダンススクール

Twitter

Twitter

翠江堂

翠江堂

下層ページでは、商品の詳細情報を画面左側に表示させる作りになっています。

東京農業大学

東京農業大学

LOWORKS INC.

LOWORKS INC.

左右それぞれをスクロールできるようになっています。

Good Morning Sunshine

Good Morning Sunshine

The Official Squarespace Blog

The Official Squarespace Blog

半分にタイトルやイメージを大きく表示させ、半分に内容を掲載したブログデザイン。

Troa

Troa

スクロールすると画面右側のイメージが切り替わります。

Fillet

Fillet

スプリットスクリーンレイアウトは2分割でなければいけないことはないので、このようにさらに分割しているパターンもあります。

Bukwild

Bukwild

Benchmark International

Benchmark International

5分割されているパターンで、それぞれホバーでムービーが再生されるようになっています。

New From Bose

New From Bose

最後も同じく5分割されているパターンですが、こちらは大胆に斜めで区切っています。

Close the search window,
please press close button or esc key.