スプリットスクリーンレイアウトとは?参考になるWebデザインを紹介

スプリットスクリーンレイアウトは、画面を大胆に分割することで情報やコンテンツを引き立たせることができる、Webデザインの新たなスタイルです。作成する際のポイントや、実際にスプリットスクリーンレイアウトを作成する際に参考になるWebデザインを紹介します。

Offers」は、時代の変化や環境にあわせてスキルを磨きたい、そんな人にぴったりのサービスです。「副業・複業」で、本業では経験できない、新しい環境/開発スタイルを経験しよう!

→「Offers」をもっと詳しくみる! かんたん60秒で副業を始めてみる

スプリットスクリーンレイアウトとは

Webデザインの方法の一つとして『スプリットスクリーンレイアウト』を採用する企業が増えています。まずは、どのようなデザインなのか詳しく見ていきましょう。

画面を分割したデザイン

スプリット(Split)は『分割する』という意味です。画面を2分割、あるいはそれ以上に分割するデザインで、従来の1画面スクロール型のデザインとは一線を画します。

スプリットスクリーンを採用することで、どちらか一方の画面をメインとして、もう片方はサブスクリーンとして情報に格差をつけたり、異なる情報を対比させたりするといった新たな画面の使い方が可能です。

レイアウトは、全画面をスクロールさせる『スクロール一体型』と、片方の画面を固定して残りの画面をスクロールできるようにした『スクロール分割タイプ』と、用途によってタイプが分かれます。

スプリットスクリーンのメリット

スプリットスクリーンを使うことで生じるメリットについても注目しましょう。

まずは『レスポンシブデザインとの相性がよい』という点です。レスポンシブデザインは、『画面の大きさによって適切なサイズで表示される』デザインのことで、PCのような大画面やスマホのような小さな画面でも、見やすく表示させることができます。

Googleは今後、パソコンではなくスマートフォンを規準にページを評価することを発表しているため、レスポンシブデザインへの注目度は今後あがっていくことが予想されます。ひいては、スプリットスクリーンへの期待も高まっていくと見られているのです。

スプリットスクリーンを使うポイント

スプリットスクリーンを使う際のポイントについて解説していきます。作成するにあたってどんな点について配慮していくのが適当かを考えていきましょう。

配色や書体で楽しませる

スプリットスクリーンを使うことで、彩りをつけたWebデザインの作成が可能です。鮮やかな配色の組み合わせによって視覚的な刺激を強調します。左右でそれぞれ異なった背景やフォントを使用することで、異なった二つの世界を同じページで表現することもできるでしょう。

お問い合わせ、サービスへの登録など、ユーザー側のアクションにつなげやすいボタンに興味を引かせやすいのも魅力の一つです。

画面をカードとして考える

もともとスプリットスクリーンレイアウトは、カード型のデザインから派生したという側面があります。スプリットスクリーンをデザインする場合、一つ一つの画面を1枚のカードとして捉え、メッセージ性を持たせることがポイントです。

Webページの方向性によって、カードの重要性に順位をつけることもできます。『スクロール分割タイプ』を用いて、左側をメインメッセージ、右側をスクロールで動くようにしてメインメッセージの補足やリンクにするといった使い方も可能です。

アニメーションで行動を促す

アニメーションは演出的にも映えるため、ユーザーの注目度を集めたり、ユーザー側からのアクションを促したりするきっかけにもなるでしょう。

画面の一つに商品を実際に利用しているプロモーション動画を流し、別の画面で商品へのリンクや紹介をするといった手法は、よく使われている形です。

参考になるWebデザイン

スプリットスクリーンレイアウトを利用しているWebサイトの中で、特に参考になる洗練されたデザインを紹介します。自身がスプリットスクリーンレイアウトを考える際の参考にしましょう。

代表的なNew From Bose

『New From Bose』のWebデザインは、大胆に洗煉されたスプリットスクリーンレイアウトとして有名です。画面を斜めに5分割し、それぞれ別の商品を取り上げています。

商品にカーソルを合わせると商品が拡大され、クリックするとその商品ページに飛びます。文字は最小限ですが各所に配置されたボタンのおかげで不便さを感じることもありません。秀逸なデザインのサイトと言えるでしょう。

New From Bose

白黒で分割されたRoman Kirichik

『Roman Kirichik』のWebページは最初の画面は左側が白、右側が黒をベースに二分割されていて、右側が制作実績、左側がコンテンツメニューへのリンクとなっています。

製作実績を大きく取り上げることで、注目度を上げている意図がくみ取れるでしょう。

そのまま画面をスクロールして、通常のメニューを見ることも可能です。シンプルながらも印象的に残るスプリットスクリーンデザインといえるでしょう。

Roman Kirichik. Punctual Web Designer

アニメーション付きのユニメディア

『ユニメディア』の最初の画面は三つに分けられています。それぞれの画面をクリックすると、クリックした画面のさらに詳しい情報をアニメーションで表示するという工夫されたデザインです。

画像をスクロールしていくと次々とアニメーションで内容が表示されるという凝った作りになっていて、訪れた人を不思議な雰囲気で魅了します。

バリューデザインカンパニー 株式会社ユニメディア

まとめ

スプリットスクリーンレイアウトは画面を分割するデザインの手法で、『スクロール一体型』と『スクロール分割タイプ』に分かれます。それぞれの特徴を捉えた上でWebデザインを考えていくことが、ユーザーを惹きつけるポイントです。

配色やアニメーションを駆使して、スタイリッシュなデザインに仕立てているサイトがいくつもあります。そういったサイトを参考にしつつ、独自性のあるデザインを新たに作成することが訪問者の獲得にもつながっていくでしょう。

Offers」は、時代の変化や環境にあわせてスキルを磨きたい、そんな人にぴったりのサービスです。

いくつもの転職媒体を使って、企業を探し回るのはもう終わり。「副業」から始まる新しい働き方を実現します!

本業では経験できない、新しい環境/開発スタイルを経験しよう!



この記事をシェア

関連記事


副業・フリーランス

プログラミング

インタビュー

シニアレベルを2名採用!現場の負荷を軽減した採用活動、その打ち手がOffersだった

700万ダウンロードを突破し、コスメの口コミアプリとして急成長を続ける「LIPS」。これまで正社員や業務委託問わず、各専門性をもったエンジニアが集うことでグロースを続けてきた。そんな同社のハイス...

インフラとフロントエンドの3名を採用! Hotspringが考える採用方針と旅行サービスの未来とは

旅行予約サービス『こころから』を運営するHotspringは、今後の旅行業界の変化を見据えたプロダクト開発を推進している。これまでリファラルやTwitter採用を行ってきた同社が、なぜOffer...

フロントエンジニアの採用に成功!複業採用の秘訣はコンシェルジュの伴走と、独特な1on1にあった

AIチャットボット市場で圧倒的なシェアを誇る「HiTTO(ヒット)」を展開するHiTTO株式会社。今後さらなる顧客満足の向上に向けて、自社プロダクトの強化を加速していく。そこで重要になるのが開発...

専任CSメンバーがサポート。わずか1ヶ月半で、採用難易度の高いリードクラス2名の採用に成功!

女性限定コミュニティに注力する株式会社SHEでは女性の「自分らしい生き方」の実現を目指し、クリエイティブスクール「SHElikes」に加え、美容領域「SHEbeauty」や金融領域「SHEmon...

デザイン

お金

採用・組織

グルメ