新トレンド発見!レスポンシブ・アップスケーリング

新トレンド発見!レスポンシブ・アップスケーリング

レスポンシブWebデザインを聞いたことないという人は余り居ないと思うけど・・・
レスポンシブ・アップスケーリング(Responsive Upscaling)は、どう?

レスポンシブ・アップスケーリング?なにそれ?

実験から始めましょう

まず、幅(解像度)1280px以上のモニターで確認。ブラウザのウインドウの幅を1024pxにして、下記の2つのレスポンシブのECサイトを比較しましょう。

サイト#1:
http://tattly.com/products/brilliant-bracelet-set

サイト#2:
https://www.nitori-net.jp/store/ja/ec/%E3%82%A4%E3%83%B3%E3%83%86%E3%83%AA%E3%82%A2%E9%9B%91%E8%B2%A8%E3%83%BB%E7%94%9F%E6%B4%BB%E5%B0%8F%E7%89%A9/%E3%82%AC%E3%83%BC%E3%83%87%E3%83%8B%E3%83%B3%E3%82%B0%E3%83%BB%E3%82%A8%E3%82%AF%E3%82%B9%E3%83%86%E3%83%AA%E3%82%A2/8240894s

うん?まだ、ちょっとわかりにくいかな?

では、次に、ブラウザのウインドウを1280px以上に広げましょう。
出来れば、フルスクリーンで!

で、もう一度比べましょう・・・

image05

image03

もう分かったよね?
そう、サイト#1の場合、とても広い画面で見ると白いスペースが目立つ。
逆に、サイト#2の場合、スペースの無駄を無くして適切なコンテンツが現れた。

ECサイトとして、どちらが、よりベストのアプローチ?
間違い無く、サイト#2だと思う。白いスペースは無駄でしかないし、ファーストビューに商品の購買動機を裏付けるコンテンツを見せた方がずっと良い。

そこでレスポンシブ・アップスケーリング

レスポンシブ・アップスケーリングは、レスポンシブデザインの技術を使って、一番広いディスプレイ向けの対策を行う。 

なぜ重要?

まず、画面サイズの直近のシェアをみましょう:
http://brandongaille.com/10-most-common-screen-resolution-statistics-and-trends/

幅1280px以上のディスプレイはとても多い。
HD解像度の1920pxも6.1%!意外と多いね!

で、先に書いた通り、ECサイトを管理するチームは、少しでも売り上げを確保したいはず。

スマートフォンからの購入がメインのサイトも多いから、そちらの対策ももちろん必要。でもヘビーユーザーのリピータはPCアクセスも多く、そちらのアップセルも重要。

(当たり前だが)白いスペースが販売に貢献する機会はあまりないので、大きな画面では、そこを有効活用するのはベストのアプローチ。

そこがレスポンシブ・アップスケーリングのミッション。 

これからは?

この記事によると、アメリカのトップECサイトの中で18%がレスポンシブ・アップスケーリングの戦略を導入した。

ユーザー側でもECサイトの営業者側でも無駄なスペースは気になるはずなので、今後も導入促進されると思う。

では!

Franck VESCHI

Franck VESCHI

シニア UI/UX デザイナー・デベロッパー at 株式会社ショーケース・ティービー
毎日、デザイン・UX・コーディング等に関係ある新しい技術・情報をわくわくしながら探しています。昔から好奇心の強い性格なのです!新規プロジェクトをいつも「冒険」のように受け取っています。このスタンスのお陰で、毎日の仕事が非常に面白いです。

今まで書いた記事:
http://bitwave.showcase-tv.com/author/franck/
Franck VESCHI

コメント