今回は高島屋グループのオンラインショッピングサイト「SELECT SQUARE」をご紹介します。2013/6/3からレスポンシブWebデザインに対応し、端末サイズに合わせて最適表示ができるようになりました。

サイト名	SELECT SQUARE
URL	http://www.selectsquare.com/
QRコード

端末のサイズによってPCサイトとモバイルサイトの2パターンで切り替わるようです。タブレットではiPadではPCサイトと同じ表示で、Nexus7ではモバイルサイトが表示されました。

ヘッダー部分も、PCではメニューがたくさんありますが、スマホではこれだけの数を表示するとデザイン的によくないので、右上のアイコンにコンパクトにまとめられています。

右上のアイコンをクリックすると、上図のように右からメニューがスライドして表示されます。Facebookなどでも使われているフライオーバーという技術ですね。

参考：レスポンシブデザインで参考になるナビゲーション5パターン

TOPのスライド画像やニュースも、スマホ表示の時は画像数を減らしたりテキストを表示させなくしたりと工夫がされています。

商品一覧ページは、PCでは3列表示ですが、スマホでは一列に。商品をそれぞれ上手くブロックでまとめてモバイル表示の場合の配置転換がしやすくされています。

フッターも折りたたみできるようにすることでコンパクトに。

ショッピングカート内もレスポンシブになっており、どの端末でも購入がしやすくなっていました。

レスポンシブデザインで制作されたサイトが徐々に増えてきてるものの、まだまだECサイトでは少ない状況です。

2015年にはインターネットアクセスにおいて、モバイルのトラフィックがPCのトラフィックを抜くという予想がCiscoから発表されています。大きなパラダイムシフトが起こってきてる中で、ECサイトも変化しなければ生き残ることは難しいかもしれません。

参考：Cisco Visual Networking Index：全世界のモバイル データ トラフィックの予測