Tres Innovation

2017年06月16日

スプリットスクリーンレイアウトの実装が簡単にできる「multiScroll.js」

Pocket

  (2017/2/2 投稿)

前回2017年のトレンドになるであろうグラーデーションについての記事を書かせて頂きましたが、今回も引き続き2017年のWEBデザインの中心となるであろうスプリットスクリーンレイアウトの実装が簡単にできる「multiScroll.js」についてお伝えします。

 

スプリットスクリーンレイアウト皆さんはご存知ですか?

分割スクリーン、分割レイアウトと呼ばれることもあるのですが、昨年から海外のサイトでも多く取り入れらていますね。

最大の特徴としては画面の左右でデザインを分けてしまい、それぞれ別の目的の内容を表示するデザインが可能なことですかね。

 

 

という事で早速「multiScroll.js」の使い方をお伝えしていきます。

 

スプリットスクリーンが実装できるmultiScroll.js使い方

 

必要ファイルのダウンロード

 

公式ページまたは

GitHubページ「Download ZIP」からダウンロードしてください。

 

 

基本的な使い方

 

基本的な使い方ですが、CSSに【jquery.multiscroll.css】jQuery本体と【jquery.multiscroll.min.js】【jquery.easings.min.js】を</body>直前に設置します。HTMLとCSSの記述も併せてご確認ください。

 

JS

 

HTML

CSS

 

 

SAMPLE

基本的な設定は以上になります。

サンプルは下記からご覧ください。

SAMPLE01

 

 

ちょっぴり応用編

 

上記では基本的な設定でしたが画像を入れ込んだり背景画像を設定する事が可能です。

参考に下記のようなページを作成してみました。

SAMPLE02

見せ方は別として画像を入れ込むでより分割レイアウトの良さが際立ちますね。

 

オプション・その他の設定について

 

オプションやその他設定についてはGitHubで確認できます。

私もどんな事ができるか調べてみたいと思います。

 

スプリットスクリーンレイアウトを取り入れたウェブサイト

 

実際にスプリットスクリーンレイアウトを取り入れたサイトをご紹介します。

ドロップボックス

 

ユニメディア

Camper

McKinney York Architects

La Grande Evasion

Joris Delacroix | Backinbizness Experience

Studio Meta, agence Web à Strasbourg

Pedro Duarte

A Verona, l’arredamento per la tua casa: Galvan Mobili


 

スプリットスクリーンレイアウト導入のメリットとデメリット

 

メリット

スプリットスクリーンレイアウトのメリットは片方にビジュアル、片方にコンテンツと人画面で両方のコンテンツを視覚的に訴求できることや、
同レベルの重要度があるコンテンツを同じ重要度で見せたい時に活かせることができることでしょうか。
例でいうと上記でご紹介したドロップボックスのガイドラインのページがそれにあたるかと思います。

 

デメリット

スプリットスクリーンレイアウトのデメリットを強いて言うのであれば、分割にする意味がなくデザインしてしまうとシンプルすぎる(寂しい)サイトになってしまうことでしょうか。

 

まとめ

 

いかがでしたか?

左右で背景色やフォントなど違うものを使用すれば、全く違う世界観のページを1つの画面に共存させることも可能ですね。

そのほかにも商品を販売しているページであれば商品のカラーリングを左右別に表示させたり等、メリットはサイトごとに異なりますが、そのWebサイトが何を目指しているか明確にして活用すれば効果的なレイアウトになりそうですね。

 

 

この記事を書いた人

I hope share!この記事をシェアする