エムタメ!について facebook twitter

マーケティング担当者のために
マーケティングに関わるためになる情報をためていく

理想動画制作会社

スグ見つかる!

動画を探す

movieprint
MoviePrint
TOP > デザイン > BtoB企業でも使える!「スプリットスクリーン」でトレンド感のあるWEBデザインに

BtoB企業でも使える!「スプリットスクリーン」でトレンド感のあるWEBデザインに

  • LINEで送る
  • このエントリーをはてなブックマークに追加
2017/05/30
BtoB企業でも使える!「スプリットスクリーン」でトレンド感のあるWEBデザインに

webサイトの作成を進めるうえで非常に重要な要素となるのがデザインです。
今回は数あるデザインの中でも「スプリットスクリーン」と言われるデザイン手法について紹介していきます。

特長的でバラエティに富んだサイトが多い事から、BtoCサイトに適したデザインと思われがちですが、今回はBtoBサイトでの活用例も交えながらスプリットスクリーンの良さに触れていきます。

一般的なメインイメージ

スプリットスクリーンの紹介の前に、まずはBtoB企業様のwebサイトで一般的によく見られるメインイメージを紹介します。
下のイメージの通り、一枚の画像の上に訴求したい製品、キャッチコピーが表示されています。

特に自社製品を扱うメーカーなどに多く見られるデザインで、一つの製品を訴求するのに適したメインイメージとなります。

一般的なメインイメージ

http://www.crestec8.co.jp/
-参考 株式会社クレステック

スプリットスクリーンとは

画面(英:Screen)を分割(英:Split)したような特長的なレイアウト配置のデザインをスプリットスクリーンといいます。
印象的で目を引くデザインである事が多く、レスポンシブデザインとも相性の良い非常に優れたデザイン手法の一つです。

スプリットスクリーン

http://stria-clinic.com/
-参考 ストリアクリニック

スプリットスクリーンで得られる効果

コンテンツの強調がしやすい

画面を大きく分割する為、片方を抽象的なデザイン、片方を具体的なデザインにするなど対比的な構造を持たせる事でコンテンツをより強調して見せる事が出来ます。

レスポンシブデザインと相性が良い

パソコン時は横並び、スマホ時は縦並びのようにレイアウトの調整が比較的簡単に行えます。

印象的なサイトが作れる

ファーストビューのエリアいっぱいに分割されたデザインが広がる為、非常にユニークなサイトを作る事ができます。
片方はスクロールせず常に動画が流れるようなデザインや、配色やタイポグラフィの工夫によって視覚に訴えるような印象的なデザインを実現できます。

複数のコンテンツへの入口を分かりやすく表現できる

一つのサイト内に全く違った要素のコンテンツがある際にも、スプリットスクリーンは非常に有効な手段と言えます。
コンテンツ毎に異なる背景色を使うなど工夫次第でユーザーが自分の求める情報に辿り着きやすくなるデザインを実現できます。

BtoB企業での使用例

紅屋オフセット株式会社

左に事業イメージ、右にキャッチコピーを置く印象的なデザインになっています。

BtoB企業でのスプリットスクリーン使用例

https://www.beniya-print.co.jp/
-参考 紅屋オフセット株式会社

株式会社英揮ビジネス

印刷、AR作成、倉庫管理の3つの事業展開をしており、それぞれの事業を偏りなくメインイメージで訴求しています。

BtoB企業でのスプリットスクリーン使用例

http://eiki-business.co.jp/
-参考 株式会社英揮ビジネス

まとめ

BtoB企業でスプリットスクリーンを採用する場合、過度に派手なデザインや奇をてらったデザインは諸刃の剣となりがちです。BtoC企業と比べ、ターゲットとなるユーザーがwebに不慣れな事も多く、普段見慣れないデザインのwebサイトに直面した際に反射的に離脱してしまう可能性が高いからです。

しかし、BtoB企業での使用例で取り上げた事例のようにスプリットスクリーンの利点をうまく利用する事ができれば、競合サイトとは一味違うデザインで自社の伝えたい事を訴求する事も可能です。

自社のメインイメージにお悩みの企業様は是非この機会にスプリットスクリーンを検討してみてはどうでしょうか。

セミナー情報

セミナー情報

無料資料ダウンロード

BtoBマーケティングハンドブック 表紙

BtoBマーケティングハンドブック

無料ダウンロード

展示会の効果を最大化させる12の手法 表紙

展示会の効果を最大化させる12の手法

無料ダウンロード

エムタメ!ニュース

デジタルマーケティングについての
最新情報やお役立ち資料を自動受信

登録する(無料)

Follow us!

twitter hatena google Eight rss follow us in feedly

特集

WEBリニューアル物語

WEB制作のよくある失敗に全て引っ掛かるけど憎めない青木の奮闘記

はじめての展示会物語
メールマーケティング