Webサイトを印象的に!スプリットスクリーンデザインのメリットと使い方

Webサイトを印象的に!スプリットスクリーンデザインのメリットと使い方

Webデザインのトレンドは刻々と変化していますが、2017年特に注目を浴びたのが、スプリットスクリーンという手法。ページを大胆に分割するスプリットスクリーンを効果的に仕上げるコツはとてもシンプルです。

今回は、そのメリットと制作のポイントをお伝えします。

ドロップボックス画面

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

スプリットスクリーンとは、ひとつの画面がふたつに分けられれたデザインのこと。

画面内にふたつのパネルが配置され、それぞれにメインメッセージや写真や、文字などが表示されます。

カード型レイアウトに着想を得て発明されたといわれています。しかし従来のカード型レイアウトと違うのは、コンテンツの羅列には不向きということです。

次のような場面で使うのが最適でしょう。

  • ランディングページ
  • ユーザーが選べる選択肢が2つだけのとき

スプリットスクリーンを使うメリット

要素の違いを強調できる

スプリットスクリーンは、特に推したいものが二つあるときに便利です。このデザインにより、右のカードと左のカードから、どちらかひとつだけを選ぶという明確な道を示せます。

これはつまり、簡単に両方の重要性を伝えることができるということです。

Webサイトに特別感をもたらせる

ハッとするようなインパクトの画像を活用したフルスクリーンレイアウトのWebサイトは増えています。その手法としても、スプリットデザインは有効です。

あらゆるデザインとの親和性がある

左右に隔てられた要素に、統一感は必要ありません。そのため、強弱や動きのあるデザインを作りやすいです。

また、スプリットスクリーンであればレスポンシブデザインに対応しやすいです。カードの縦横比に大きな差が出ないので、細かいデザインの調整が少なくてすみます。

PC画面用レイアウトでは縦長のカードを2枚並べるかたちになりますが、スマートフォン表示にする場合は横長のカードを上下に並べましょう。

スプリットスクリーンを効果的にデザインするポイント

鮮やかな色と、目立つフォントを組み合わせる

フラットデザインやマテリアルデザインが人気になるにつれ、色やフォントがとても重要な要素にな理ました。鮮やかな色は視覚に訴えかけに興味を引き寄せ、適切なフォントでメッセージを強調します。

文字を強調させる

画像とホワイトスペース

CTAボタンにユーザーの注意を引く

CTAに視線を集めやすいのも、スプリットスクリーンデザインの特徴。見栄えの華やかな要素とシンプルな要素を組み合わせれば、ボタンがある箇所にユーザーの注意を引きつけられます。

中心にハチドリをレイアウト

分割されたスクリーンをカードとして考える

スプリットスクリーンデザインは、カード型レイアウトの考え方に基づいて生み出されました。カードはそれぞれ独立したものですから、左右に配置するカードが対照的である必要ありません。

分割されたスクリーンはただちょっと大きいだけのカードであり、ひとつの画面で、異なるふたつのものを表示しているのだということを念頭におくべきでしょう。それぞれユーザーに向けて一つのメッセージと一つのアクションを提供します。

非対称

スクリーンを複数並べることによって、エントリーポイントをより多く増やすことができます。下のデザインはスクリーンが幾つにも分割されていますが、そうすることによって次のページへと進む入り口が増えます。

walls

ユーザーの視線を左右に誘導しよう

片側の写真だけをみて、肝心のCTAをクリックしてもらえないのでは意味がありません。ユーザーにボタンを見てもらうためのに、色づかいで視線を誘導するという手法を使いましょう。両方のスクリーンで一色だけ同じ色を選ぶことで、ユーザーは自然と目を移動させ、目的のスクリーンを見てくれます。ブランドカラーや、目立つ色を使えば、特に効果があるでしょう。

bumpのcta

オレンジ色に統一

他にも、形成したテキストなどの要素を、ふたつのスクリーンに両断させる手法があります。両スクリーンの結びつきを強調できますね。

サーフな画像¥

また、半透明のカードをオーバーレイさせるのも有効な手段です。

グレーをかぶせる

アニメーションを取り入れる

上手にアニメーションを取り入れて、ユーザーのクリックを誘いましょう。ユーザーはアニメーションが一巡するまでサイトを離れないでしょう。その間に、クリックすべきボタンに気づいて

アニメーション付き

まとめ

スプリットスクリーンデザインは、楽しく、実用的で、ユーザーを引きつけるデザインです。

あなたのデザインにも、組み込んでみては?

(翻訳:Yutai Satake)

SHARE

RELATED

  • お問い合わせ
  • お問い合わせ
  • お問い合わせ