企業と求職者を結ぶ「採用おむすび」

2019.12.05

スプリットスクリーンレイアウトの特長と事例

デザイン

皆さんはWebレイアウトの一つである「スプリットスクリーンレイアウト」をご存知でしょうか？
スプリットスクリーンレイアウトとは、画面を大きく分割して見せるレイアウトです。
使い方によっては、様々な動きや見せ方が行えるため、より印象的なページを作成できます。
2017年に流行したレイアウトですが、2019年中旬から再度人気が出てきていると聞きました。そこで今回、このスプリットスクリーンレイアウトについて、改めて理解を深めていきたいと思います。

スプリットスクリーンレイアウトの効果とは？

まずはスプリットスクリーンレイアウトを利用することで、どんな効果が生まれるのか？一緒に見ていきましょう。

【効果:01】対比的な見せ方が強い印象につながる

画面を大きく分割するため、各ブロックごとに伝える内容を変えることができます。
対比的な見せ方を行うことで、見ている人の印象に強く残ります。

【効果:02】テーマを分けて見せられる

伝えたいことが複数ある場合、テーマを分けて見せることが可能です。
テーマに合わせて、色合いや見せ方を変えるとわかりやすいです。

【効果:03】レスポンシブデザインに最適

PCのレイアウトから、スマートフォン用にレイアウトを組み替える場合、各ブロックを組み替えるのみで良いため、とても組み替えやすいです。レスポンシブデザインへの対応のしやすさも、スプリットスクリーンレイアウトが注目される理由の1つです。

デメリットからみる改善点とは？

良い部分が多いスプリットスクリーンレイアウトですが、デメリットもあります。

視線の誘導が難しい

複数の伝えたいことを同じ画面で見せるため、視線の流れが難しくなります。
一度に見せる情報量や、各ブロックごとの視線の流れを考えながら構成することが大切です。

文字と色のバランスが取りづらい

複数の情報を組み合わせるため、ページが見にくくなる可能性もあります。
各ブロックの色合いのバランスや、全体と文字とのバランスにも気をつけてレイアウトを考える必要があります。

スプリットスクリーンレイアウトを利用したサイト紹介

女子美術大学

https://www.joshibi.ac.jp
右面のランダムで変わる写真と、キャッチコピーがとても印象的です。
左面の余白を取ったレイアウトとのバランスが絶妙によく、大学の雰囲気と情報をうまく組み合わせています。

BUMP OF CHIKEN OFFICIAL SITE

https://www.bumpofchicken.com/
左側に次々と変わる画像、右側にバンド情報と、各ブロックの役割をしっかり分けたレイアウトになっています。
バンド情報もサムネイルになっており、直感的に操作できる仕様になっています。

minico

http://minico.handmade.jp/
右面の大きく映し出される作品がとても興味を引きます。
色合いや雰囲気も作品と合わせ、世界観をうまく表現しています。
グローバルナビが縦型に入っているのも特長的ですね。

fillet

http://fillet.com.br/
画面が3つに分割されており、スクロールするとそれぞれがアニメーションして、様々なロゴに変わっていきます。
アニメーションを活用することで、各ブロックの変化が面白く、見た人が楽しめるサイトになっています。

BOSE

http://special.bose.eu/en/
5つのブロックが斜めに区切られており、横にスクロールして動きます。
ゲームの選択画面をイメージするような動きが印象的です。

Plannash

https://nashplan.jp
弊社のwebサイトも、スプリットスクリーンレイアウトを使用しています。
スクロールすると、項目ごとに左側のイラストが変わります。
動きのあるイラストで、見た人に楽しんでもらうようにしています。

以上になります。
最近では3分割、5分割と分割の数が多いレイアウトのものもあり、様々な工夫を凝らしたものが見られます。
スプリットスクリーンレイアウトは、上記のデメリットに注意すれば、アイデア次第でより魅力的なWebデザインをすることが可能です。
他社よりも目を引くwebサイトを考えている方は、このスプリットスクリーンレイアウトをぜひ検討してみてください。