スプリットスクリーンとは？3つのメリットやデザイン10例を紹介

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

スプリットスクリーンとは、1つの画面を複数に分割したレイアウトのことです。異なる要素を上下左右に表示させて対比を際立たせることができます。

近年では多くのサイトがスプリットスクリーンを導入していますが、分割した片方をメインの画面に、もう一方をサブの画面にする２画面のデザインが一般的です。

アニメーションやスクロール要素を取り入れると、さらにパーツを引き立たせるようなデザインを作成することができるので、独創的で魅力的なサイトが仕上がるでしょう。

スプリットスクリーンに期待できる3つのメリット

スプリットスクリーンに期待できるメリットは上記の3つです。それぞれ解説していきます。

コントラストを際立たせられる

スプリットスクリーンでは、画面を分割することでコントラストを際立たせられるメリットがあります。たとえば左右に画面を分割することで、画面中央が明確な境界線となります。左右の画面にそれぞれ異なる要素を配置することで、1つの画面に並べた時よりもそのコントラストが際立ちます。

フォントや背景色も左右の画面で自由に変えられるので、一つの画面に世界観のまったく異なる2つのページを演出することが可能です。

レスポンシブデザインにも対応できる

近年は、パソコンよりスマホで検索されることが多くなっており、SEO効果を得るためにもレスポンシブデザインは欠かせないものとなってきました。

パソコンのモニターでは横方向・スマホの画面では縦方向の場合は、CSSのメディアクエリを設定するだけで簡単に表示を変えられます。モバイルサイトでのUI/UXの向上も見込めるでしょう。

独創的なサイトを作ることができる

従来の一画面のウェブサイトでは、コンテンツは上から下へと順番に表示されていたので、スクロールすると上部の情報が見えなくなるのがデメリットです。スプリットスクリーンを使えば、片方の画面をスクロールし、片方は固定するということができるため、一度に確認できる情報量が増えるというメリットが生まれます。

片方の画面にアニメーションを配置するというような、これまでの発想ではなかったオリジナリティの高いサイトも制作可能です。

スプリットスクリーンを使ったウェブサイトの10例

すでにスプリットスクリーンを使って高い効果を上げているウェブサイトはたくさん存在します。そのなかで、特にデザインに優れているサイトを参考までにいくつか紹介しましょう。

女子美術大学

参照元：女子美術大学

女子美術大学のサイトは、印象的なキャッチコピーと右側の画面に配置された画像がランダムに変化するさまが目を引きます。左側の画面に余白を大きく取ることで、学内の雰囲気まで漂ってくる秀逸なデザインです。

BUMP OF CHIKEN OFFICIAL SITE

参照元：BUMP OF CHIKEN OFFICIAL SITE

右側の画面にバンドの情報、左側の画面にランダムに変化する画像というふうに、各画面の役割を明確に分けたデザインが印象的です。

fillet

参照元：fillet

海外の広告代理店のサイトです。3分割の画面が特徴で、アニメーションとともにそれぞれの画面に配置された要素が変化していきます。

THE FIRST TAKE

参照元：THE FIRST TAKE

THE FIRST TAKEのサイトでは、左画面は固定で画像やアニメーションが交互に表示され、右画面は歌っている動画を表示させてスクロールができるようにしています。アニメーションや歌っている動画を組み合わせることによって、音楽ページにふさわしいオリジナリティを感じさせるレイアウトではないでしょうか。

Roman Kirichik

参照元：Roman Kirichik

ブラックとホワイトで大きくファーストビューのエリアが分割されているのが特徴のサイトです。左側の画面にメニューを配置し、右側には制作実績が表示されています。各要素にカーソルを合わせると変化する仕組みです。制作実績が目立つ作りで、訪問者へのアピール効果を高めています。

丸石織物

参照元：丸石織物

丸石織物のサイトは、3つの画面から構成されていて左画面にはランダムに写真を表示させ、中画面はスクロールして企業概念やプロダクト、右には固定でメニューボタンやカート機能などを配置しています。UI/UXにもこだわった落ち着いた和テイストなサイトに仕上がっています。

Plantation [ プランテーション ]

参照元：Plantation

Plantationでは、デザインのみスプリットレイアウトになっており、スクロールした場合は左右一体に流れます。シンプルな作りで、あえて部分だけスプリットレイアウトにすることによって、他のコンテンツを大きく強調させることができています。

RICANZA

参照元：RICANZA

緑と黄色の2色に分割された画面が印象的なサイトです。リンクが画面の両端にそれぞれ配置されてあり、スプリットスクリーンの効果を高めるようなデザインになっています。

別邸 越の里

参照元：別邸 越の里

別邸 越の里のサイトは、スクロール一体型のスプリットスクリーンデザインです。サイト全体にラグジュアリー感があり、下にスクロールすると、柔らかくコンテンツが表示されるように工夫されています。画像とテキストを左右交互に入れ替えることでユーザーを飽きさせない作りになっています。

madame de

参照元：madame de

フランスの企業のサイトで、スクロール一体型のスプリットスクリーンデザインです。画面の上部のブルーのレイヤーで画面を分割しているサイトです。余白とのバランスがおしゃれで目を引きます。

スプリットスクリーンをデザインする際の3つの注意点

スプリットスクリーンをデザインする際の注意点は上記の3つです。それぞれ詳しく解説していきます。

他社の分割の方法にとらわれない

スプリットスクリーンを採用しているサイトは、画面を2分割を多く採用していますが、2分割にしなければならないという決まりはありません。企業によっては5分割のサイトもあるぐらいです。

分割したそれぞれの画面を独立した画面と考え、それぞれにメッセージをこめてユーザーのアクションを促すようなデザインにするのがコツです。他社にはないスプリットスクリーンレイアウトのデザインで魅力的なサイトを制作してみましょう。

フォントや色の組み合わせを工夫する

スプリットスクリーンは視覚に訴えかけるデザインなので、ユーザーの目を引きやすいように強調したい部分のフォントや色を他と変えることがポイントになります。

ただし、色やフォントの種類を使いすぎてはサイトのまとまりがなくなり、逆効果になる可能性があります。自社のコーポレートカラーや企業イメージなど、トンマナをしっかり考えてフォントや色の組み合わせを工夫するようにしましょう。

わかりやすさを心がける

独創的なサイトが作れるスプリットスクリーンですが、あまり奇をてらうとどこに何があるかわかりにくいデザインになってしまいます。あまりに複雑な効果は避け、ボタンの位置やデザインもわかりやすく、ユーザー目線に立ったデザインを心がけましょう。

スプリットスクリーン　まとめ

今回は、スプリットスクリーンについて解説しました。

独創的なサイトが作れるのがスプリットスクリーンの良さです。

自由にサイトをデザインできるため、他にはない自社だけのオリジナリティを感じさせるサイトができるでしょう。

あまり凝ったデザインにすると、ユーザーの使い勝手が悪くなってしまいます。デザインと使いやすさのバランスに気をつけるようにしましょう。

監修者のコメント

株式会社Weathercock

代表取締役　大野淳

愛媛県でホームページ制作・SEO対策を行なっている会社。コーポレートサイトやECサイトの構築はもちろん、オウンドメディアの構築を行う。クライアントに寄り添ったWEB制作を心がけており、WEBマーケティングを通して見込み客の欲求に合わせたコンテンツ作成を行うことをモットーに行う。

詳しく見る

スプリットスクリーンを採用することで、目立たせたい部分をより鮮明に浮立たせることが出来ます。特にトップページで使用することで、そのサイトの特色を強く出すことが出来ますのでおすすめです。

ただ、多用してしまうとユーザーの利便性を損なってしまう可能性もありますので、サイトの中でも特に注目してもらいたいページに採用されると良いでしょう。

主にトップページで使用すると思いますので、画像もしくは動画を使用する場合、もう片方の画面はシンプルな要素を配置するとデザイン的にも見やすいサイトになると思います。

執筆者

比較ビズ編集部では、BtoB向けに様々な業種の発注に役立つ情報を発信。「発注先の選び方を知りたい」「外注する際の費用相場を知りたい」といった疑問を編集部のメンバーが分かりやすく解説しています。