2018年１月現在のモニター解像度のシェアによると、一時代を築いたスクエア型のディスプレイはもうほとんど利用されておらず、ワイドディスプレイが主流となっているようです。Webデザインでも、ワイド画面を活かして、メインビジュアルをダイナミックに画面一杯表示するデザインを数多く見るようになってきました。そんな中、画面を大胆に分割した、ユニークで印象的なデザインを見たことがある方も多いのではないでしょうか。
この、画面を大胆に分割するデザイン手法は、「Split Screen Layout スプリットスクリーンレイアウト」と呼ばれ、ここ数年、特に海外のWebサイトでは数多く採用されていることもあり、Webデザイントレンドのひとつとして取り上げられています。スプリットスクリーンレイアウトは、同時に複数の情報を見せることができるため、片方をメインエリア、もう片方をサブエリアとして使用できたり、画面遷移の数を減らすことができるといったメリットや、PCサイトでは横にならべられたコンテンツを幅の狭いデバイスでは縦に並べられることができ、スマートフォンでの表示にも適していることなどから、レスポンシブWebデザインとの相性もよいと言われています。2017年頃から注目されてきたスプリットスクリーンレイアウト、はじめは、真ん中から2つに分割するものが目立っていましたが、2018年に入る頃から、左右の比率を変えてアシンメトリーに分割されたもの、上下に分割するものなど、レイアウトのバリエーションに広がりを見せてきています。
スプリットスクリーンレイアウトをうまく取り入れたWebサイトをいくつかご紹介します。
２つの対になるようなコンテンツがある場合、ユーザーに二者択一してもらうのに最適です。左右それぞれが各コンテンツへの導線になっています。
メインとなる左側のコンテンツが固定表示され、右側のその他のコンテンツがスクロールされます。このタイプは複数の記事を見せるオンラインマガジンなどで採用されています。
左右の分割が非対称なアシンメトリーなタイプ。ビジュアルと文字のバランスが絶妙でとても美しくレイアウトされています。
上下に2分割されたタイプ。真ん中に商品を置き、上部で商品のカラーと文字、下部ではイメージ写真とシンプルな構成で見せています。上下分割ですが、レスポンシブWebデザインにもうまく対応しています。分割することでそれぞれのコンテンツを引き立たせられ、さまざまな見せ方ができるスプリットスクリーンレイアウト。サイトによっては向き不向きがあると思いますが、うまく取り入れることが出来ればユニークで印象に残るWebサイトになるでしょう。
モバイルファーストインデックスの導入でこれまで以上にレスポンシブWebデザインが注目される中、相性が良いとされるプリットスクリーンレイアウトを採用するWebサイトが増えるのではないでしょうか。
