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

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

レスポンシブ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サイトの営業者側でも無駄なスペースは気になるはずなので、今後も導入促進されると思う。

では!

【週刊bitWave】(メルマガ)始めました!
登録はこちらからメールアドレスを入力してお申込みください。

ご登録いただいたメールアドレスは 【週刊bitWave】の更新情報の配信にのみ使用します。

個人情報の取扱いに関しては、「プライバシーポリシー」をご確認ください。解除はいつでこちらから行うことが可能です。

あなたにおすすめ

ロイヤリティフリーの無料ストックフォト(写真)1+8選... ロイヤリティフリー(ライセンスフリー)の無料写真を集めているサイトも順調に増えてます。全員が発信者となる現在では、こうしたサイトの重要度・便利度は増すばかりですね。 基本的にパブリッックドメイン(商用利用可能・無料・用途の制限なし)で...
リニューアルのケーススタディ、PSDファイルから自動コーディング、ロゴ検索ツール、グラフ用フォント(... こんにちは。 今週の【UX・デザイン】の情報共有です。 UI ・UX アプリのリニューアルのケーススタディ 2年間まったく更新されなかった健康保険アプリのリニューアルの話です。 他社はどのようにしてリニューアルを行...
UI・UXのベストプラクティス、フラットデザインについての実験結果、ATLASSIANの新CI、無料... こんにちは! 今週の【UX・デザイン】の情報共有です。 UI ・UX UI・UXのベストプラクティスまとめ 心理学とマーケティングを双方のスペシャリストであるNick Kolendaさんのサイトです。 彼のサイト内...
「Design Better」ポッドキャスト、CSSでのレスポンシブな端末、無料フォント、日本科学未... お疲れ様です。 今週の【UX・デザイン】の情報共有です。 UI ・UX 「Design Better」のポッドキャスト 他社や海外において、どのようなUI/UXの戦略が実践されているのか、そしてどのような手法がベストプラ...