スプリットスクリーンレイアウトとは
Webデザインの方法の一つとして『スプリットスクリーンレイアウト』を採用する企業が増えています。まずは、どのようなデザインなのか詳しく見ていきましょう。
画面を分割したデザイン
スプリット（Split）は『分割する』という意味です。画面を2分割、あるいはそれ以上に分割するデザインで、従来の1画面スクロール型のデザインとは一線を画します。
スプリットスクリーンを採用することで、どちらか一方の画面をメインとして、もう片方はサブスクリーンとして情報に格差をつけたり、異なる情報を対比させたりするといった新たな画面の使い方が可能です。
レイアウトは、全画面をスクロールさせる『スクロール一体型』と、片方の画面を固定して残りの画面をスクロールできるようにした『スクロール分割タイプ』と、用途によってタイプが分かれます。
スプリットスクリーンのメリット
スプリットスクリーンを使うことで生じるメリットについても注目しましょう。
まずは『レスポンシブデザインとの相性がよい』という点です。レスポンシブデザインは、『画面の大きさによって適切なサイズで表示される』デザインのことで、PCのような大画面やスマホのような小さな画面でも、見やすく表示させることができます。
Googleは今後、パソコンではなくスマートフォンを規準にページを評価することを発表しているため、レスポンシブデザインへの注目度は今後あがっていくことが予想されます。ひいては、スプリットスクリーンへの期待も高まっていくと見られているのです。
スプリットスクリーンを使うポイント
スプリットスクリーンを使う際のポイントについて解説していきます。作成するにあたってどんな点について配慮していくのが適当かを考えていきましょう。
配色や書体で楽しませる
スプリットスクリーンを使うことで、彩りをつけたWebデザインの作成が可能です。鮮やかな配色の組み合わせによって視覚的な刺激を強調します。左右でそれぞれ異なった背景やフォントを使用することで、異なった二つの世界を同じページで表現することもできるでしょう。
お問い合わせ、サービスへの登録など、ユーザー側のアクションにつなげやすいボタンに興味を引かせやすいのも魅力の一つです。
画面をカードとして考える
もともとスプリットスクリーンレイアウトは、カード型のデザインから派生したという側面があります。スプリットスクリーンをデザインする場合、一つ一つの画面を1枚のカードとして捉え、メッセージ性を持たせることがポイントです。
Webページの方向性によって、カードの重要性に順位をつけることもできます。『スクロール分割タイプ』を用いて、左側をメインメッセージ、右側をスクロールで動くようにしてメインメッセージの補足やリンクにするといった使い方も可能です。
アニメーションで行動を促す
アニメーションは演出的にも映えるため、ユーザーの注目度を集めたり、ユーザー側からのアクションを促したりするきっかけにもなるでしょう。
画面の一つに商品を実際に利用しているプロモーション動画を流し、別の画面で商品へのリンクや紹介をするといった手法は、よく使われている形です。
参考になるWebデザイン
スプリットスクリーンレイアウトを利用しているWebサイトの中で、特に参考になる洗練されたデザインを紹介します。自身がスプリットスクリーンレイアウトを考える際の参考にしましょう。
代表的なNew From Bose
『New From Bose』のWebデザインは、大胆に洗煉されたスプリットスクリーンレイアウトとして有名です。画面を斜めに5分割し、それぞれ別の商品を取り上げています。
商品にカーソルを合わせると商品が拡大され、クリックするとその商品ページに飛びます。文字は最小限ですが各所に配置されたボタンのおかげで不便さを感じることもありません。秀逸なデザインのサイトと言えるでしょう。
白黒で分割されたRoman Kirichik
『Roman Kirichik』のWebページは最初の画面は左側が白、右側が黒をベースに二分割されていて、右側が制作実績、左側がコンテンツメニューへのリンクとなっています。製作実績を大きく取り上げることで、注目度を上げている意図がくみ取れるでしょう。
そのまま画面をスクロールして、通常のメニューを見ることも可能です。シンプルながらも印象的に残るスプリットスクリーンデザインといえるでしょう。
Roman Kirichik. Punctual Web Designer
アニメーション付きのユニメディア
『ユニメディア』の最初の画面は三つに分けられています。それぞれの画面をクリックすると、クリックした画面のさらに詳しい情報をアニメーションで表示するという工夫されたデザインです。
画像をスクロールしていくと次々とアニメーションで内容が表示されるという凝った作りになっていて、訪れた人を不思議な雰囲気で魅了します。
まとめ
スプリットスクリーンレイアウトは画面を分割するデザインの手法で、『スクロール一体型』と『スクロール分割タイプ』に分かれます。それぞれの特徴を捉えた上でWebデザインを考えていくことが、ユーザーを惹きつけるポイントです。
配色やアニメーションを駆使して、スタイリッシュなデザインに仕立てているサイトがいくつもあります。そういったサイトを参考にしつつ、独自性のあるデザインを新たに作成することが訪問者の獲得にもつながっていくでしょう。