Top
ホーム > EC  > スマホ対策していますか?参考にしたくなる “レスポンシブウェブデザイン”ECサイト5選
responsive

こんにちは!優介です。

最近では、スマホの需要が増えたことに伴い、
Webサイトのスマホ対応が欠かせない時代になりました。

2014年11月19日には、Google社より、モバイル検索ユーザーの利便性を妨げない「モバイルフレンドリー」なサイトであることをランキング要素として使用する実験をしている、とのコメントが発表されているほど。

今回は、そんな「モバイルフレンドリー」なサイトになるための手段のひとつ、”レスポンシブ”な5つのECサイトをご紹介します。
「スマホ対応はまだしていない」という方はぜひ参考にしてみてください。

 

GAP

201605_06_gap
http://www.gap.co.jp/
アメリカ発大手服飾メーカーのGAP

スマホサイズにした場合でもコンテンツの並びは変わらず、サイズが縮小されるタイプのレスポンシブです。メンズやウィメンズ、キッズなどジャンル分けが明確で見やすいデザインです。全体的にスッキリした作りなので、小さな画面になっても分かりやすいのがポイントです。1つのショッピングバッグをPC、タブレット、スマホ、それぞれのデバイスから見ることも可能です。

 

ニトリ

201605_06_nitori
http://www.nitori-net.jp/store/ja/ec/
大手家具メーカーのニトリ

スマホサイズにすると、情報量が減るタイプのレスポンシブです。
サイト内検索をしようとすると、文字入力欄が少し拡大されるのが特長です。
スマホは文字の打ち間違いが多いため、こういった配慮はとても大事です。
サイト内検索をするユーザーは、目的の商品があってサイトを訪れた、「顕在層」であると言えますので、顕在層に正しくサイト内検索を利用してもらうためにもこういう細かい工夫をしていきたいものですね。

 

SONY

201605_06_sony
http://www.sony.jp/
大手家電メーカーのSONY

スマホサイズは情報量を減らしている他、サイズの縮小、配置の変更など、ユーザビリティを考えられた設計になっています。
Googleのページスピードインサイトでも、ユーザー エクスペリエンスがほぼ満点の99/100という結果が出ていることが何よりの証拠。

撮影のコツや楽しみ方などのちょっとしたコラムもあり。
スマホサイズに合わせて内容が分かる見出しを載せることで、閲覧する方が読みやすい工夫がなされています。

 

Neiman Marcus

201605_06_neimanmarcus
http://www.neimanmarcus.com/en-jp/index.jsp
アメリカで展開している百貨店ECサイトニーマン・マーカス•グループ

海外のWebサイトに共通して言えることですが、ページの作りがシンプルで見やすいことが特長的です。スマホサイズにするとコンテンツが縦並びになり、項目の多いグローバルナビはすっきりカテゴリごとに格納されて、タップしやすい大きさに設計されています。
スマホからの操作の場合、この「タップのしやすさ」というのは必ず意識する必要があります。
また、希望商品を取り置きできる「ストア・ピック・アップ」フォームを設置したり、日本とアメリカのサイズが比較できる一覧表を作ったりとコンテンツが充実しています。
全て英語表記ながら、サイズも分かりやすいので日本人でもショッピングしやすいのが特長です。

 

SKINNY TIES

201605_06_skinnyties
http://skinnyties.com/
シンプルなフォーマットの中に、色鮮やかなネクタイのデザインが映える海外のレスポンシブECサイトです。

SKINNY TIESでは、その名のとおりネクタイを取り扱っています。
配色もバランスもすべてにセンスが光るサイトですが、中でも、サイト上部に設置されたグローバルナビ(Collection、Color、Width、Fabric、Pattern)部分にカーソルを合わせると表示されるリストが画像付きでオシャレ!
201605_06_skinnyties2
一般的にはこのリストは文字のみのものが多い中、画像が添えられるとイメージしやすいのでよりわかりやすくなりますね。
もちろん、スマホでもご覧いただけます。

 

最後に

いかがでしたか?
全体的にスッキリとしたデザインだと、スマホサイズに縮小しても見やすいですね。

その中でも特に見てほしいコンテンツをトップに持ってきたり、色や見出しを変えて目立たせたりすると効果が高まるでしょう。

モバイルフレンドリー対応がまだという方は、スマホユーザーからの流入を獲得するためにも早めの対策をおすすめします。
ちなみにモバイルフレンドリーテストは下記から行えますので、一度チェックしてみてはいかがでしょうか。

 

この記事を書いた人

高校を卒業後に上京。東京在住。 昼間はWEBに携わる仕事をしており、帰宅後に時間を有意義に使うために記事の作成をしています。

ニアセが気に入ったらフォローしよう!

こちらの記事も人気です。

  • 【消費体験を設計すること】ARASLモデルに見るネットと実店舗の融合【消費体験を設計すること】ARASLモデルに見るネットと実店舗の融合
    ネットも店舗も消費者にとって重要なチャネルです。それぞれが上手に連携し、消費者にとっての利便性が増し、結果として企業の売り上げ増加につながるようにするには、どのように考えればよいのでしょうか。   ネットと実店舗をまたがった消費体験の創造 ネットと実店舗には、それぞれ長所と短所があります。   ネット店舗の […]
  • どんなデザインにしよう…と頭を抱えている方へ。参考にしたくなるwebデザインまとめ5選どんなデザインにしよう…と頭を抱えている方へ。参考にしたくなるwebデザインまとめ5選
    こんにちは!優介です。 今やほとんどの企業がもっているWebサイト。 企業だけではなく、個人の方も運営していたりしますよね。 検索結果からクリックしたとき、そのサイトをじっくり見てみるか即座に閉じてしまうかは、「デザイン」にかかっていると言っても過言ではないくらい、デザインは重要な要素のひとつだと思います。 今回は、 […]
  • 通販サイトにアプリを導入するメリットとは?通販サイトにアプリを導入するメリットとは?
    通販サイトでは従来のインターネット上にウェブサイトを公開する形態に加え、スマートフォン向けの「アプリ」を提供するケースも増えてきました。 メジャーなところではAmazonや楽天などが従来のウェブサイトに加え、iOS/Android端末に対応した専用アプリを提供しています。   通販サイトにアプリを導入するメリット […]
  • サイトネーミングがむずかしい!そんなときのためのポイント&コツ3選サイトネーミングがむずかしい!そんなときのためのポイント&コツ3選
    ECサイトを開設するうえで、サイトネーミングは非常に重要です。 ネーミングの出来次第で売上が左右するといっても過言ではありません。 また一度サイト名を決めてしまうと変更するのが大変なので、最初の段階で慎重に検討する必要があります。 ECサイトのサイトネーミングの3つのポイント まず、ECサイトのサイトネーミングを […]
  • 【基本編】どこから手をつければいい?スマホ対策の5つのポイント!【基本編】どこから手をつければいい?スマホ対策の5つのポイント!
    こんにちは。WEB営業部の上柿です。   今やパソコンからのアクセス数よりもスマートフォンからのアクセス数が多くなっています。   わかるよ。だってスマホ、超便利だもん。   電車で移動するとき、ちょっと時間があいたとき、ついスマホをいじってしまうときってありますよね.. […]