第3回 海外で増えるスマホのお客さんにも売ろう


必須となったレスポンシブデザイン

~パソコンだけでは売れない時代の真ん中へ~

2014年予測において、モバイル(スマートフォンとタブレット)のシェアは米国オンライン販売のうち13.8%を占めます。しかしこれは全体平均であり、実際にはあるアパレルECサイトにおいてはモバイルによる購入が30%を超えます。また、スマートフォンとタブレットのシェアはおよそ6:4であり、両方ともに無視できる数字ではありません。

smartphoneshare

このような状況の中、モバイルで見づらいECサイトを運営してしまえば、多大な機会損失を招くことになります。

レスポンシブデザインとは

パソコンでもモバイルでも、その状況にあわせて見やすく操作しやすいページを実現するのが、レスポンシブデザインです。幅の広い画面では商品を横に並べ、幅の狭い画面では商品を縦に並べるなど、画面の内容が柔軟に変更されるわけです。

1StopEC も、レスポンシブデザイン

パソコンでの表示

pc

スマートフォンでの表示

smartphone

 

レスポンシブデザインでなくとも、スマートフォンのピンチ機能(指二本でタッチして、その間隔を広げたり狭めたして拡大や縮小を行う機能)を使えば、ECサイトを見ることは可能です。しかし、実際にパソコンのサイズの画面をスマートフォンの画面サイズで見ると、字が小さすぎて読めないし、拡大すると一覧性が悪くなってしまいます。お客さんは、商品を見るためにそれほど大変な操作が必要となると、面倒くさくて見るのをやめてしまうでしょう。

それに対し、iPhoneアプリのように文字やボタンが適切な大きさになっていて、必要なときにメニューを表示できて、スクロールも縦だけで良いとなれば、ストレスなしに買い物ができるので、純粋に買い物を楽しんでいただくことができます。買い物は「楽しい体験」であるべきで、「苦行」ではいけません。この「楽しい体験」を実現するのが、レスポンシブデザインの趣旨なのです。

採用しやすくなったレスポンシブデザイン

レスポンシブデザインの需要拡大に伴い、CSS、JavaScript といったWeb技術も進歩しました。これにより、以前は実現に高度なプログラム技術を要し高価であったレスポンシブデザインも、現在では手軽に対応できるようになり費用対効果が高くなったため、一般的なECサイトでも積極的に導入されています。

さらに、Wixなどのクラウドサービスや、Magento communityなどのECシステムでも、多くのデザインテンプレートが最初からレスポンシブデザインに対応するようになりました。

多くの場合、レスポンシブデザインのデザインテンプレートを選ぶときには、パソコンで表示した場合とスマートフォンで表示した場合を見せるデモが設置されています。デザインを考えるとき、まずはデザインテンプレートのページを見ながら、パソコンとスマートフォンの両方を考えるようにしましょう。これまでのように、パソコン画面だけを考えていると、本来取れるはずの売上が落ちてしまいます。

実際にレスポンシブデザインを体験しよう

それでは最後に実際のレスポンシブデザイン対応デザインテンプレートを見てみましょう。今回はEC対応ではないですがWixの通常のWebサイト用デザインテンプレート選択画面を使います。

以下のリンクをクリックし、Wixのデザインテンプレート選択画面を開けてください。(新しいタブが開きます)

Wixのデザインテンプレート選択画面へ

適当に1つのデザインテンプレートをクリックすると、デザインテンプレートのデモ画面が表示されます。その画面で、デバイス選択ボタンを押してみてください。

wixdevice

 どうですか?スマートフォンで表示した場合の見え方がわかりましたね。

このように、世の中はレスポンシブデザインが当たり前になっています。もちろん、スマートフォンの普及にともなって、全世界で同じ傾向です。