INSPIRATION

【Web デザイン】スプリットレイアウトの参考になるサイトまとめ

昨年くらいから見かけるようになった印象の「スプリットレイアウト」のサイト。今回は「スプリットレイアウト」を取り入れる際の参考になるサイトをまとめてご紹介します。
 

目次

  1. スプリットレイアウトとは?
  2. スクロール一体タイプ
  3. スクロール分割タイプ

 

スプリットレイアウトとは?

「スプリットレイアウト」は「スプリットスクリーン」と言っている方もいますが同じものです。

その名のとおりスプリット=分割するデザインレイアウトのことです。画面を縦2つに分割して見せることで左右の対比が生まれデザインの印象が変わります。

また、「スプリットレイアウト」の中でも、デザイン上のスプリットレイアウトのみのスクロール一体タイプと、CSSで画面半分を固定表示にして、残りの半分のみスクロールさせるスクロール分割タイプに大別されます。
 

スクロール一体タイプ

こちらはデザインレイアウトのみスプリットレイアウトになっており、スクロールした際は左右同じく流れていきます。
 

Plantation [ プランテーション ]


 

ハルタ


 

別邸 越の里


 

衣のいのち Vol.37|きもの鈴乃屋


 

スクロール分割タイプ

こちらは画面半分を固定表示にしており、残りの半分のみスクロールされます。
 

minico


 

青色六景 | ISETAN JAPAN SENSES


 

アクセス解析ツール「人工知能AIアナリスト」ブログ


 

東京農業大学


 

Good Morning Sunshine


 

スプリットレイアウトのサイト作成実践編をアップしました。こちらもチェックしてみてください。


 


 

まとめ

いかがだったでしょうか?「スプリットレイアウト」のサイトは工夫次第で目を引く斬新なデザインが可能です。

また、最近では大きいサイズのディスプレイがたくさんありますが、文章を読む場合、人間が見やすい改行文字数はそれほど多くありません。ですので、画面を分割してしまうことで、ビジュアルエリアとコンテンツエリアに分けてしまうという、見せ方もありです。特にブログも記事の見せ方にいいです。
 

それでは良いWEBデザイン日和を!Have a nice WEBDESIGNDAY!
 

スクロールをセクションごとに制御するプラグイン「jQuery Scrollify」を詳しく解説!
NEXT INSPIRATION
【jQuery】コピペでOK!画像や動画を全画面にフィットさせて中央に表示する
PREVIOUS INSPIRATION