スプリットスクリーンレイアウトの特長と事例

皆さんはWebレイアウトの一つである「スプリットスクリーンレイアウト」をご存知でしょうか？
スプリットスクリーンレイアウトとは、画面を大きく分割して見せるレイアウトです。
使い方によっては、様々な動きや見せ方が行えるため、より印象的なページを作成できます。
2017年に流行したレイアウトですが、2019年中旬から再度人気が出てきていると聞きました。 そこで今回、このスプリットスクリーンレイアウトについて、改めて理解を深めていきたいと思います。

目次

・スプリットスクリーンレイアウトの効果とは？

・デメリットからみる改善点とは？

・ゴマシオカンパニーの制作事例

・まとめ

スプリットスクリーンレイアウトの効果とは？

まずはスプリットスクリーンレイアウトを利用することで、どんな効果が生まれるのか？一緒に見ていきましょう。

【効果:01】対比的な見せ方が強い印象につながる

画面を大きく分割するため、各ブロックごとに伝える内容を変えることができます。
対比的な見せ方を行うことで、見ている人の印象に強く残ります。

【効果:02】テーマを分けて見せられる

伝えたいことが複数ある場合、テーマを分けて見せることが可能です。
テーマに合わせて、色合いや見せ方を変えるとわかりやすいです。

【効果:03】レスポンシブデザインに最適

PCのレイアウトから、スマートフォン用にレイアウトを組み替える場合、各ブロックを組み替えるのみで良いため、とても組み替えやすいです。 レスポンシブデザインへの対応のしやすさも、スプリットスクリーンレイアウトが注目される理由の1つです。

デメリットからみる改善点とは？

良い部分が多いスプリットスクリーンレイアウトですが、デメリットもあります。

視線の誘導が難しい

複数の伝えたいことを同じ画面で見せるため、視線の流れが難しくなります。
一度に見せる情報量や、各ブロックごとの視線の流れを考えながら構成することが大切です。

文字と色のバランスが取りづらい

複数の情報を組み合わせるため、ページが見にくくなる可能性もあります。
各ブロックの色合いのバランスや、全体と文字とのバランスにも気をつけてレイアウトを考える必要があります。

ゴマシオカンパニーの制作事例

伊藤忠メタルズ株式会社 新卒採用サイト

伊藤忠メタルズ株式会社 新卒採用サイト
伊藤忠メタルズ株式会社の新卒採用サイトは、画面をビジュアルとコンテンツに分けたスプリットスクリーンレイアウトを採用しています。スクロールに合わせて左側の画像が切り替わるため、各セクションのテーマや企業イメージが直感的に伝わる設計です。

まとめ

スプリットスクリーンレイアウトは、上記のデメリットに注意すれば、アイデア次第でより魅力的なWebデザインをすることが可能です。
他社よりも目を引くwebサイトを考えている方は、このスプリットスクリーンレイアウトをぜひ検討してみてください。

執筆者：株式会社ゴマシオカンパニー 代表取締役　山崎準也

ゴマシオカンパニーは、採用広報支援を目的としたクリエイティブを得意とする企画制作オフィスです。この分野で20年以上実績を積み上げてきた代表を中心に、様々な分野のクリエイティブを得意とするスタッフが、日々アイデアを出し合い、お客さまの採用課題解決に尽力しています。

採用サイト制作・採用動画制作・採用パンフレット制作なら、ゴマシオカンパニーにお任せください