縦に分割した大胆なデザインとレイアウトがトレンドになっている。見た目にもインパクトがあって、話題性も期待できる。一見すると二分割するだけのシンプルな構造で制作しやすそうだしメリットも多いように感じますが、実際のところは果たしてどうなのか考えてみましょう。

分割レイアウトによるWEBデザインのトレンド 40+

40+ Web Design Trend with Split Layouts

分割レイアウトに向いているWEBサイトとは

• 2つの商品を同時に宣伝したい場合
• 製品やサービスは2つのバリエーションで販売されている
• 2つの異なるターゲットやグループに提供されている

このケースの場合、通常のボタンサイズで表現するコール・トゥ・アクション（CTA）より効果的に働きます。見た目にもインパクトがあり、スクロールアクションなどと組み合わせることで、印象にも記憶にも残り、ユーザーにとっても楽しめるwebサイトになるでしょう。
しかし、逆に上記の要件を満たさないケースではコンバージョンを下げる結果に繋がり兼ねないので、評判が良かったとしても継続することはできません。

スプリット・レイアウトのメリット

• 違った2つの要素を同じ重み付けで視覚的に表現できる
• ユーザーがひと目で2つの選択肢を選べてわかりやすい
• 独創的で目を引く特徴的なデザインで差別化できる
• シンメトリー、コントラスト、カラー、タイポグラフィで遊べる
• ユーザーをコンテンツに誘導する新しい方法

スプリット・レイアウトのデメリット

分割画面のレイアウトは大きな画面で最も効果的に機能します。モバイルのような小さいデバイスではレスポンシブではあっても、それぞれのカラムが狭すぎるか、2つの画面が左右で隣り合うレイアウトではなく、上下に配置される子0都になり、同じ価値を持つ2つの要素という望ましい効果が打ち消されてしまいます。

分割レイアウト – split layout –

Showcase of split screen layout

スプリット・レイアウトを活用したwebサイトはいかがでしたか。これらのwebサイトを参考にして、スプリット・デザインにチャレンジしてみてください。

追加・削除： 2017年 1月11日 53サイト
追加・削除： 2023年10月23日 48サイト

分割エフェクト – split effect –

ここからはスプリット・デザインをより効果的に演出するスクロールアクションやエフェクトを幾つか紹介します。

Split Slick Slideshow

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

Split 3D Carousel

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

Website – Split Screen

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

Split Landing Page

See the Pen Split Landing Page by Brad Traversy (@bradtraversy) on CodePen.

Split-Screen UI

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

Split screen layout

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

Split sections

See the Pen Split sections by Tino Fileccia (@TinoF) on CodePen.

10KB Challenge – Story Board – Split Design

See the Pen 10KB Challenge – Story Board – Split Design | SVG (Vote for Me) by Sven Creations (@svencreations) on CodePen.

Conclusion

まとめ

今回はトレンドとなってるスプリット・レイアウトを紹介しました。前半はスプリットの参考となるレイアウトやデザインを、後半はそのスプリットを効果的に表現するのに役立つ、CSSやJSのサンプルを。

トレンドは時代と共に移り変わりますが、webサイトで達成させたい目標や目的に合致していて、サービスや製品を効果的に魅せる目的であれば、スプリット・レイアウトを活用することも、一つの選択肢として検討してみてください。

追加・削除： 2023年10月29日 29サイト
追加・削除： 2024年11月12日 29サイト