スプリットスクリーンレイアウトの特徴と最新デザイン事例11選。2019年は"ひとひねり"加えて再流行の兆し

Webデザインのトレンドは刻々と変化していますが、近年注目されているのが「スプリットスクリーン」というレイアウト手法。その名のとおり、画面を分割するデザインです。

2017年ごろから流行し始め、多くのWordpressテーマも作られましたが、その後は徐々に衰退していきました。しかし2019年の今、かつてのスプリットスクリーンレイアウトに「ひとひねり」加えたデザインが再流行の兆しを見せています。

▲Dropboxのスプリットスクリーン

ページを大胆に分割するスプリットスクリーンレイアウトは、シンプルながらもユーザーに分かりやすく情報を伝えられます。

今回はスプリットスクリーンレイアウトのメリットと制作のポイント、そして2019年最新の「アシンメトリー（非対称）」なスプリットスクリーンレイアウト事例をご紹介します。

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

スプリットスクリーンとは、ひとつの画面がふたつに分けられたレイアウトのWebデザインです。

画面内にふたつのパネルが配置され、それぞれにメインメッセージや写真、文字などが表示されます。

カード型レイアウトに着想を得て発明されたといわれていますが、従来のカード型レイアウトと違うのは、コンテンツの羅列には不向きということです。

スプリットスクリーンレイアウトは、次のようなWebページに向いています。

• LP（ランディングページ）
• ユーザーに選択肢を2つだけ提示する時のページ

スプリットスクリーンレイアウトのメリット

1. フルスクリーン時に特別感をもたせらせる

ハッとするようなインパクトの画像を活用した、フルスクリーンレイアウトのWebサイトは増えています。

フルスクリーン時のデザイン手法としても、スプリットスクリーンは有効です。

2. ふたつの選択肢を強調できる

スプリットスクリーンは、特に推したいものが2つだけあるときに便利です。このデザインにより、右のブロックと左のブロックから、どちらかひとつだけを選ぶという明快な道を示せます。

これはつまり、簡単に両方の重要性を伝えられるということです。

3. あらゆるデザインと親和性がある

左右に隔てられた要素に、必ずしも統一感は必要ありません。そのため、強弱や動きのあるデザインを作りやすいのがメリットです。（それ故に近年、アシンメトリーなスプリットスクリーンレイアウトが流行しているのです）

また、スプリットスクリーンレイアウトであればレスポンシブデザインにも対応しやすいでしょう。ブロックの縦横比に大きな差が出ないので、細かいデザインの調整が少なくて済みます。

なお、PC画面用レイアウトでは縦長ブロック2枚を横に並べることが多いと思われますが、スマートフォンの場合は横長ブロック2枚を上下に並べるのが良いでしょう。

スプリットスクリーンレイアウトをデザインするポイント

1. 鮮やかなカラーと、目立つフォントを組み合わせよう

フラットデザインやマテリアルデザインが人気になるにつれ、色やフォントがとても重要な要素になりました。

鮮やかなカラーは視覚に直接訴えかけ、目立つフォントでメッセージを強調できます。

2. ユーザーの注意をCTAボタンに引こう

CTAボタンに視線を集めやすいのも、スプリットスクリーンデザインの特徴です。

見栄えの華やかな要素とシンプルな要素を組み合わせ、ボタンがある箇所にユーザーの注意を引きつけましょう。適度なホワイトスペース（余白）を意識することも大切です。

3. 分割されたスクリーンをカードとして考えよう

スプリットスクリーンレイアウトは、カード型レイアウトの考え方に基づいて生み出されました。ブロックはそれぞれ独立したものであり、左右に配置するブロックが必ずしも対照的である必要はありません。また、必ずしも「2つだけ」に分割する必要もありません（2つが最も分かりやすくベストですが）。

分割されたスクリーンは「ただちょっと大きいだけのカード」であり、ひとつの画面で、異なるふたつのものを表示しているのだということを念頭におくべきでしょう。

それぞれユーザーに向けて、ブロックごとに一つのメッセージと一つのアクションを提供するよう意識してみてください。

またスクリーンを複数並べることによって、エントリーポイントをより多く増やすこともできます。

下のデザイン例はスクリーンが幾つにも分割されていますが、そうすることによって次のページへと進む入り口が増えます。

4. ユーザーの視線を左右に誘導しよう

片側の写真だけをみて、肝心のCTAをクリックしてもらえないのでは意味がありません。ユーザーにボタンを見てもらうためのに、色づかいで視線を誘導しましょう。

両方のスクリーンで一色だけ目立つ同じ色を選ぶことで、ユーザーは自然と目を移動させ、目的のスクリーンを見てくれます。ブランドカラーや、目立つ色を使えば、特に効果があるでしょう。

他にもテキストなどの要素を、ふたつのスクリーンに両断させる手法もあります。両スクリーンの結びつきを強調できますね。

また、半透明のブロックをオーバーレイさせるのも有効な手段です。

5. アニメーションを取り入れる

上手にアニメーションを取り入れて、ユーザーのクリックを誘いましょう。

ユーザーはアニメーションが一巡するまでサイトを離れない傾向にあります。その間に、クリックすべきボタンに気づくでしょう。

2019年は “アシメ” が流行る!? 非対称なスプリットスクリーンレイアウト11選

冒頭にも書いたとおり、スプリットスクリーンレイアウトは一度衰退し、最近はひとひねり加えた形で再注目されつつあります。それが「アシンメトリー（非対称）」なスプリットスクリーンレイアウトです。

今回はアシンメトリーなスプリットスクリーンレイアウト事例を11個ご紹介します。

1. Nourisheats

スプリットスクリーンレイアウトを採用して、なんの変哲もないスライダーをWebサイトの目玉に変身させています。

フルスクリーンのスライダーがナビゲーションバーをサポートする、あまり見ないWebデザインです。2つの異なるセクションを同時に確認できます。

Nourisheats

2. Golden Green

ヒーローエリアではなく、Webサイト全体にスプリットスクリーンレイアウトを採用しています。

ブロックの配置を入れ替えることで、コンテンツの流れと読みやすさを向上させた点もお手本にしたいところ。メッセージをドラマチックに伝えるのにぴったりのデザインです。

Golden Green

3. Effect Lab

訪問者がまず目を向ける左側に、スペースを広くとっています。ロゴタイプやスローガンなどの重要な要素は、この事例のように左側に配置するのがおすすめです。

左側の大きなスペースにタイトルとCTAを、右側のカラフルなボックスに補完的な要素を配置することで、バランスをとっています。

Effect Lab

4. Artificial Intelligence – Cytora

Effect Labの事例とおなじく、左側にスペースを広くとったレイアウトです。

このWebサイトのトピックである人工知能は、伝えかたによっては威圧的になりえます。そこでデザインチームが活用したのが、スプリットスクリーンレイアウトとキャッチーなアニメーション。難しいトピックを、デザインによって楽しい印象に変えています。

Artificial Intelligence – Cytora

5. Home Societe

ここまでにご紹介した事例は、鮮明なコントラストによって左右をはっきり区別していました。しかしこの事例では、同じスプリットスクリーンレイアウトでありながら、線やナビゲーションで絶妙にユルくエリアを区切っています。

エリア間のシームレスなトランジションが特徴です。

Home Societe

6. Felix Lesouef

クリーンで洗練されたWebデザインの、ミニマルなポートフォリオサイト。

左側にナビゲーションがあるため3つに分割されているように見えますが、ブロックは2つしかありません。左側のエリアは静的で、右側のエリアに動的にメニュー内容を表示しています。

Felix Lesouef

7. 15 Finches

ホワイトスペースや要素の重なりを活用し、遊びをもたせたWebデザインです。ブロックは2つで、右側にたっぷりと余白を確保し、タイトルを横断させています。

分割されていながら統一感もある、シンプルでエレガントなスプリットスクリーンレイアウトです。

15 Finches

8. Fru.it

余白にひとひねり加えたスプリットスクリーンレイアウト事例です。

左側のブロックが小さく見えるのは、画像の大きさや余白が左右で異なるため。ブロック自体はどちらも同じ大きさですが、自然と右側に視線が誘導されます

Fru.it

9. GQ Japan

スプリットスクリーンレイアウトを活用したスライダーの事例として、ぜひ参考にしたいのがGQ JapanのWebデザイン。

左側のエリアにナビゲーション、ロゴ、タイトルなどを配置し、その内容を右側のエリアに表示する仕組みです。双方のエリアの中間にあるブロックは訪問者の目をひくだけでなく、左右のブロックを結びつける役割も果たしています。

GQ Japan

10. Locomotive

GQ Japanがエリアの中間にあるブロックに写真を表示するのに対し、Locomotiveは動画を表示しています。レイアウト自体はGQ Japanとほぼ同じです。

11. Event Filming – New Flight

スプリットスクリーンレイアウトと相性がいい要素のひとつが、この例のような「対角線」です。

対角線で画面を分割したことにより、まるでパズルのピースのような、ユニークなデザインに仕上がっています。

Event Filming – New Flight

まとめ

かつてスプリットスクリーンレイアウトの利点は、2つの異なる情報を同時に伝えられることだと考えられていました。しかし現在はそれに加え、よりクリエイティブな役割が与えられています。

分割の比率を変えるだけでも、印象はガラッと変わります。スプリットスクリーンレイアウトを使って、Webデザインにひねりを加え、コンテンツをユニークに表示してみましょう。

（参考：Best Practices for Split Screen Design / Beautifully Designed Examples of Asymmetrical Split Screens in Web Design　翻訳：Satake Yutai / Nakajima Asuka）

こちらもおすすめ！▼