販促担当者のためのデジタルマーケティング情報メディア|baXooka[バズーカ]

スクロールを活用、コンテンツを注目させるWEBサイト事例

皆さん、こんにちは☆バズーカ運営チームの「やまちゃん」です。

ここ最近のWEBデザインの状況をメインに配信していきます!
近年ディバイスが多様化する中「どうやって情報(コンテンツ)をユーザーに伝えるか」ということが大切です。

中でも注目するべきなのがスマホです。

スマホの普及率は日本で71%、世界規模では約50%と10年前とはユーザー環境が大きく変化してます。
(※参照URL:http://www.garbagenews.net/archives/2170355.html 2016年調べ)
1画面に表示できる情報が少なくなりスクロールという動きが一般的なものになりました。
こうした現象を踏まえ、webデザインにおいては従来の「ファーストビュー(サイトトップ画面)」より「スクロールビュー」を重視する傾向に。
今回はスクロールをうまく活用したwebデザインについてご紹介します。

Mc Whopper:切れることがない「流れ」で全体を伝える

ハンバーガーチェーン「バーガーキング」が対立する「マクドナルド」に向けて両社の看板メニューである「ビッグマック」と「ワッパー」を組み合わせた「マックワッパー」を作り、それぞれの本社から見て中心地にあたるアトランタに1日限りのコラボ店舗を作って世界平和をアピールしよう、という内容のサイト。
スクロールをすると、2つのブランドが合体することによって生まれるバーガーとともに、ポップアップレストランのオープン、それに伴う双方のブランドイメージを踏襲したユニフォームの提案、そして最終的に商品の売上はNGOに寄付をしようという試み提案が一連の流れで途切れなく紹介されています。多少過激な内容でもユニークかつスクロールを使ったストーリー性のある見せ方で、ユーザーの関心を引きつけるというのが狙いにあると思います。

KLM Ifly 50:ページごとの個別の場面に集中させる

旅行会社のプロモーションサイト。一度は訪れたい、世界の名所トップ50を紹介しています。
写真の臨場感をもたせるために音と合わせた見せ方は、まるでその場所にいるかのような感覚に。先ほど紹介したバーガーキングのサイトとは異なり、スクロールごとにシーンが切り替わるので、一つづつの内容に集中させることができます。

For Better Coffee:「豆」という主人公を設定

http://forbetter.coffee

ヘルシンキにある喫茶店が美味しいコーヒーを作るためのルールを紹介しているサイト。
フラットなイラストを使用し、アニメのように主人公を決めて注目されるサイト作りもスクロールデザインの魅力の一つと言えます。

Voitures de Collection – Hess Classic depuis 1946:上下スクロールをうまく活用して、多い情報を伝える

1946年からの車のコレクションサイト。
車好きの方なら一目見ただけでもわかるようなクラッシックカーがシンプルなデザインで構成されています。TOPは横スクロールが出来好きな車を選ぶことができます。そこから下にスクロールすると車の詳細に関してもわかりやすく掲載しているので、機能性もきちんと伝えれているサイトです。TOPで見る人を惹きつけ、スクロールするたびに深く知ることができるスクロールをうまく活用したデザインとも言えます。

スマホユーザーを中心にデザインを考える。

いかがでしたでしょうか。スクロールすればするほど変化があり見ていて飽きないデザインになっていました。
しかも上記の参考サイトは全てレスポンシブ対応なのでスマホでもPCでもこの動きを楽しめます。
ここ数年でインターネット環境も大きく変貌し、パソコンは持ってないけれどスマホなら持っている、
という方も多く、モバイルファーストでデザインを発見したり考える必要性があります。
最後までご覧いただきありがとうございました!

これからも、ちょっと気になると思ったことをどんどん書いていきます。
それでは、また☆

The following two tabs change content below.
やまちゃん

やまちゃん

デザイナー。 海外のWEBデザインに興味があります。 紙ものでもWEBでもイラストでも基本なんでも大好き。 アンテナを常に貼って情報発信頑張ります!
販促の最新トレンド、事例をお届け!
メルマガ登録情報入力
必須
必須
メールアドレス 必須
会社名 必須
SNSでフォローする