スクロールで表現する訴求力とストーリー性

以前の企業サイトのトップページといえば、すぐに表示され、一目瞭然であることが求められていました。
これにはいくつか理由があります。
①通信回線の速度問題
②表示されるまでの秒数問題
③画面上ですべての要素を訴求するためのレイアウト
④目の動きによる導線設計
⑤わかりやすいコンバージョンへのリンク

tumblr_ndyvantl6V1tubinno1_1280

これらの理由により、パッと見ただけでどんなサイトなのかがはっきりしたサイトが多く制作されることになりました。
メリットは分かりやすさで

すが、デメリットはデザインセンスが無く面白さに欠けたサイトになりやすくなります。
情報を整理してパッと見ただけでおおよその内容が把握できるということは、折込チラシの編集作業に通じるものがあります。

tumblr_n1zurvx7OU1tubinno1_1280

いわゆる企業サイトからの脱却を試みた例として、ランディング型サイトレイアウトです。
10年ほど前から、ポイントサイト(広告を見たりバナーをクリックすることでポイントを獲得し、ある程度たまると現金や商品と交換することができる会員制のサイト)から誘導される1ページのランディング型サイトレイアウトが少しずつ表れるようになりました。
健康食品や情報商材などを販売する目的のみに創られたサイトで、トップページのみで構成されています。
上部でどんな商品かを伝え、次に商品を使うとどんなメリットがあるのかを訴求します。
そして次に使用者や経験者のコメントが並びます。
最後に特別なディスカウントやおまけの紹介があり、最後にこちらをクリックという形で申込フォームへのリンクが用意されています。
スクロールしていくうちに、心理的に購買意欲を強くなり、最終的にクリックしてしまうという流れです。
楽天などのヒット商品の商品紹介ページにも、この手法を取り入れているところが多く存在します。
大手企業のプロモーションサイトでもこの手法を取り入れた訴求方法は今でも見られます。

次に海外から現れた最新技術を取り入れた動的アクションを付与させたスクロールスタイルのレイアウトです。
ここ数年、ファッションや音楽、アート関連のコンテンツにおいて、スクロールさせながら斬新なデザインや画像を動的アクションを用いて流れる手法が出てきました。
まるでファッション誌をペラペラとめくるような感覚なので、見ていて面白く、強烈なセンスに圧倒されることもあります。
スクロールするたびに突然記事となるテキストや画像が現れたり、映像が背景で流れたり、カウントダウンが始まったり、グラフ突然現れたりするので印象に残ります。

hands-coffee-smartphone-technology

そして別の形でスクロールレイアウトを取り入れたのが、ネット配信のマンガのタテ読みです。
基本的にマンガは右から左という法則で書かれるのですが、新しい試みとしてスクロールすることでストーリーが進むマンガがネットで読むことができるようになりました。

タテ読み!タダ読み!人気のオリジナルマンガ・小説が無料読み放題

これらのスクロールレイアウトに変化した理由として、最初にマウスのスクロールローラーの普及によるスムーズなスクロールが可能になったことで物販系1ページモノのコンバージョン型が普及し、次にスマホやタブレットのスワイプによるスクロールができるようになったことで普及が進みました。
それと以前ではモニターがブラウン管でだいた14インチもしくは17インチがほとんどでしたが、最近では20インチ以上の液晶モニターの低価格化により幅がゆったりしたサイトレイアウトが可能になりました。
次にレスポンシブデザインで幅が可変することがプログラムされているレイアウトが海外から普及が進みました。
最近ではスマホ、タブレット、パソコン、大画面モニターなどの幅に合わせたレイアウトが1つのサイトで完結できるようになったことで、Googleがこのレスポンシブという手法を取り入れたサイト制作を推進する流れとなり、検索順位への影響も一部現れるようになりました。

ipad-605439_1280

技術やツールは少しずつ変化し、いまではスマホからのアクセスに対する戦略も考えることが当たり前となりました。
以前よりもスマホのブラウジングが滑らかになり、iPhoneでもアンドロイドでも音声認識が進んだことで音声による検索ができるようになったことでスマホからのアクセスは増え続けています。