画面分割（スプリットレイアウト）を導入したWebデザイン8事例

画面分割（スプリットレイアウト）のUIは、おもにユーザーに2つの選択肢を提示する際に用いられてきました。しかし、最近はよりクリエイティブなデザインも登場しています。

今回は、スプリットレイアウトを使った個性的なWebデザインの事例をご紹介します。

1. 画面分割で2つの選択肢を提示

一般的な方法でスプリットレイアウトを導入した事例。背景画像の色で画面を分割し、Webサイトの訪問者に2つの選択肢を提示しています。全体をまとめる役割を担っている、中央の丸いロゴが特徴的です。

See the Pen Website – Split Screen by Bridget Reed (@BridgetCReed) on CodePen.

2. スプリットレイアウトのスライダー

スプリットレイアウトをうまく活かして、ユニークなトランジション効果を作り出しています。下スクロールすると画面が半分に分割され、次の画像が表示される仕組みです。画面分割を活用することで、上品さを感じるUIに仕上がっています。

See the Pen Split Slick Slideshow by Fabio Ottaviani (@supah) on CodePen.

3. 静的サイドバーとスプリットレイアウトの組み合わせ

画面の余剰スペースを活用しようとするデザイナーは、近年増えてきています。この事例では、スプリットレイアウトと静的サイドバーを組み合わせることで、魅力的なデザインを実現しています。小さな画面でも見栄えがいいのが特徴です。

See the Pen Split screen layout by Travis (@trhino) on CodePen.

4. インタラクティブな画面分割

ビフォーアフターに画面分割を使うのもトレンドのひとつです。この事例では、ユーザーが境界線を移動させられるスプリットレイアウトで、画像の違いを効果的に伝えています。JavaScriptの使いかたという技術的な面においても、興味深い事例です。

See the Pen Split-Screen UI by Envato Tuts+ (@tutsplus) on CodePen.

5. スプリットレイアウトのギャラリー

半分ずつ別の画像を表示するだけではなく、写真が交互に積み重なるようなユニークな演出が印象的な事例。150行以下のCSSのみで作られているため、読み込み時間もかかりません。

See the Pen Scrolling half by half pure #CSS by @Kseso by Kseso (@Kseso) on CodePen.

6. 紙の雑誌のような画面分割デザイン

左側に配置された大胆なタイトルと紹介文、右側に配置された写真とコラムのコントラストは、紙の雑誌を思わせます。スマートな雰囲気のデザインです。

See the Pen Personal Profile // Keanu Reeves by Brian Haferkamp (@brianhaferkamp) on CodePen.

7. スプリットレイアウトをブランディングに活用

分割した画面のうち、片方に静的なブランドメッセージを配置し、もう片方をスクロール可能にするというデザイン。一般的なWebサイトとの差別化を図れます。

See the Pen by Luke Meyrick (@lukemeyrick) on CodePen.

8. 3Dカルーセルの立体スプリットレイアウト

画面分割を新たな次元に昇華した、とてもユニークなデザイン。画像を2次元的に入れ替えるのではなく、立体のように回転させて表示します。ガジェット的な雰囲気は、とくに技術系の会社におすすめです。

See the Pen Split 3D Carousel by Paul Noble (@paulnoble) on CodePen.

おわりに

2つの選択肢の提示から、3Dのカルーセルまで、画面分割は発想次第でさまざまな使いかたができます。

既存の手法にとらわれず、自由な発想で活用してみましょう。

（執筆： Eric Karkovack　翻訳：Asuka Nakajima　編集：泉　提供元：speckyboy）