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

画面分割(スプリットレイアウト)デザイン

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

おわりに

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

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

(執筆: Eric Karkovack 翻訳:中島あすか 編集:泉 提供元:speckyboy

※Workship MAGAZINEでは日々情報の更新に努めておりますが、掲載内容は最新のものと異なる可能性があります。当該情報について、その有用性、適合性、完全性、正確性、安全性、合法性、最新性等について、いかなる保証もするものではありません。修正の必要に気づかれた場合は、サイト下の問い合わせ窓口よりお知らせください。

30,000人以上が使う日本最大級のお仕事マッチングサービス『Workship』

「フリーランスとして、もっと大きな仕事にかかわりたいな……」
「企業で働いてるけど、副業でキャリアを広げていきたいな……」
「報酬が低くて疲弊している。もっと稼げるお仕事ないかな……」

フリーランス・複業・副業向けお仕事マッチングサービス『Workship(ワークシップ)』が、そんな悩みを解決します!

  • 30,000人以上のフリーランス、パラレルワーカーが登録
  • 朝日新聞社、mixi、リクルートなど人気企業も多数登録
  • 公開中の募集のうち60%以上がリモートOKのお仕事
  • 土日、週1、フルタイムなどさまざまな働き方あり
  • 時給1,500円〜10,000円の高単価案件のみ掲載
  • お仕事成約でお祝い金10,000円プレゼント!

登録から案件獲得まで、利用料は一切かかりません。一度詳細をのぞいてみませんか?

>フリーランス・複業・副業ワーカーの方はこちら

>法人の方はこちら

Workship CTA

SHARE

RELATED

  • お問い合わせ
  • お問い合わせ
  • お問い合わせ