デザイン

デザイン

必要に応じて編集できる!多彩なスプリットスクリーンレイアウトのためのコードスニペット10選!

4,931 views

読了時間 : 約3分14秒

スプリットスクリーンはユーザーが二つのオプションから一つを選ぶ際に使うものだと思いがちですが、最近ではこれを使ったユーザーインターフェース(UI)がコンテンツを見せる手法として人気です。ページのレイアウトとして効果的に使ったり、更には移動するアニメーション(https://speckyboy.com/css-animation/)を使うなど、クリエイティブな使い方をしているサイトもあります。

この記事ではスプリットスクリーンを使った独創的なインターフェース10選を、必要に応じて編集できるソースコードと共にご紹介します。

(イメージをクリックするとCodePenが見られます。)

 

 

1. 二者択一のためのスプリットスクリーン

最もよく使われているスプリットスクリーンで、ウエッブサイトの訪問者に二つのオプションを提示します。背景の色で上手く分割され、中央の丸いロゴが画面全体をまとめています。

 

 

2. 二分割するスプリットスクリーン

スプリットスクリーンで面白い移動効果を演出した例です。スクロールダウンすると画面の半分が上下に移動し次のイメージを表示します。とてもスムーズで高級感のあるUIです。

 

 

3. 固定サイドバーのあるレイアウト

HDスクリーンは当たり前で4Kが進出している今日、多くのデザイナーは画像を表示するスクリーンを確保したいと思っていますが、この例のように固定サイドバーで印象的な画像を表示する方法もあります。スマホ画面ではサイドバーがヘッダーとして表示されます。

 

 

4. 比較させるプリットスクリーン

ビフォーアフター画像を比較するためにスプリットスクリーンを取り入れる手法も流行しています。この例では、ユーザーはマウスを動かすだけで二つのイメージの違いを見る事ができます。少々のJavaScriptを使っただけですが、とても面白いひねりが効いていますね。

 

 

5. 交互に表示される画像

スクロールすると、まるでそれぞれの画面にカードや写真を交互に重ねて行くように見える独創的な例です。たった150行のCSSしか使われていないため、軽快に動きます。

 

 

6. 雑誌レイアウト

左側は目立つタイトルと導入文、右側は写真と複数列の記事を表示する、まるで雑誌のようなレイアウトです。上品でプロフェッショナルな印象になりますね。

 

 

7. サービス一覧表

ブランデイングを重視するサイトに最適なスプリットスクリーンを使った他のサイトとは一味違うUIの例です。左側にブランディング文を固定させ、右側のサービス一覧はスクロールで見せます。

 

 

8. ホバーエフェクトのあるスプリットスクリーン

美しいスプリットスクリーンのデザインはよく目にしますが、インタラクティブなものはまだ少ないのが実情です。この例はホバーするとサイズが変わる楽しいデザインです。

 

 

9. 立体回転するスプリットスクリーン

スライドが立体的に回転するように移動するスクリーンです。次のスライドが3Dフォーマットで表示されるのがクールですね。エンジニアリングや工業会社のサイトにいかがでしょう。

 

 

10. 秘密をあばくスプリットスクリーン

スクロールダウンする作業は退屈ですぐ飽きてしまいますが、このアニメーションはスクロールダウンを楽しめる上に、訪問者をサイトに引き留める手助けになりそうです。

 

 

違いを分けるスプリットスクリーンの効果

 

二者択一の対応策として考案されたスプリットスクリーンですが、最近はそのレイアウトとアニメーションでインタラクティブな要素を加える手法として注目されています。コンテンツや画像を最後までスクロールダウンしてもらう、或いは印刷物のデザインテクニックを導入するなど様々な用途があります。

 

ここでご紹介した例がUIのヒントとなれば幸いです。見栄えがよくて個性的な例をいろいろ試して楽しんでください。

 

 

※本記事は、10 Snippets for Creating Split Screen Layoutsを翻訳・再構成したものです。

 

 

関連記事






【コンビニでも使える!メルペイ初回利用1000円分招待コード】

当サイト限定招待コード:CMUTDF

 
・利用可能店舗:メルカリ、コンビニ、ドラッグストア等
・金額:1000円分
※さらにメルペイスマート払で2000円分ポイント!
 友達招待でお互いに1000円分ポイント!2人以上招待でUSJ貸し切りイベントに抽選招待も!

メルカリ-フリマアプリ&スマホ決済メルペイ

メルカリ-フリマアプリ&スマホ決済メルペイ

無料

 

ピックアップ! さらに今このキャンペーン中です↓

期間中の金・土限定でd払い利用で最大20%のdポイント還元中!
■エントリー期間:2020/2/29(土)23:59 まで
■キャンペーン期間:2020/2/24/(月)23:59 まで

 

 

Seleqtをご覧頂いた方だけに「朗報」
\当サイト限定特別クーポン/

【Uber taxi初回利用2000円オフクーポン】
JP20gd6nv7

 

以下のリンクから『プロモーション コードを追加する』で「JP20gd6nv7」を入れてください。初回利用が2000円オフになります!
※プロモコードは日本国内でのみ利用可能

 

2000円オフで登録» »当サイト限定の初回利用2000円オフのクーポンを使って登録はこちら!

 

アプリDLはこちらから↓

Uber

Uber

 

 

 

Seleqtをご覧頂いた方だけに「朗報」
\当サイト限定特別クーポン/

【UberEats初回1000円オフクーポン】
ins6je2v

 

対象店舗:マック、ガスト、スタバ、ピザハット、松屋 等
※1000円分無料で頼めます。〇〇円以上とかもナシ!完全無料でお試しOK
割引額:1000円引き

 

1000円オフで登録» »当サイト限定の初回利用1000円オフのクーポンを使って登録はこちら!

 

アプリDLはこちらから↓

Uber Eats: 地元で人気の料理をお届け

Uber Eats: 地元で人気の料理をお届け

無料

 

おすすめ新着記事

おすすめタグ