ネットショップにレスポンシブwebデザインは本当に必要なのか?

マルチデバイス

ここ数年、スマートフォンやタブレット端末の普及台数が急速に伸びています。

つまり、インターネットはパソコンだけでなく、iPhoneやAndroidなどのスマートフォン、iPadなどのタブレット端末など様々なデバイスで閲覧されているということです。

 

ネットショップ運営者にとって重要になってくるのが、それぞれの端末でwebサイトがどのように見えているのか?という事です。

 

当然パソコンで見る画面と、スマートフォンで見る画面はその大きさにはとても差があります。

ネットショップにおいて、それは大きな問題となる時があります。

 

例えば、パソコン上では問題なく見えているサイトでも、スマートフォン端末で見ると画面が小さくなり、メニューボタンがタップし辛かったり、文字が読み辛くなってしまうのです。

 

これは、ユーザーからすると想像以上にストレスになることも多く、スマートフォンやタブレットに対応していないサイトというだけで、そのサイトから離れてしまうユーザーも少なくありません。

 

つまり、スマートフォンやタブレット端末に対応していないというだけで、機会損失に繋がるケースもあるということです。

 

これを解決するには、大きく分けて2つの方法があります。

1,端末毎にサイトを用意する

パソコン用、タブレット用、スマートフォン用というようにそれぞれの端末に適したファイルを用意して、アクセスした端末ごとに振り分けて最適なサイトを表示させる方法です。

 

2,アクセスした端末毎に適した表示にする

アクセスした端末のブラウザの横幅を判別して、サイトのレイアウトやデザインを柔軟に変更する方法となります。

 

例えば、パソコンでアクセスした場合、メニュー項目の表示が左側にあるサイトがあるとします。

同じサイトにスマートフォンからアクセスすると、それまで左にあったメニュー項目が自動的に下に移動し、スマートフォンのブラウザに適した縦長のサイトになるのです。

 

これは「レスポンシブwebデザイン」という比較的新しい手法ですが、昨今ネットショップにも導入する方が徐々に増えてきております。

レスポンシブwebデザインの特徴は、ブラウザの横幅で表示されるレイアウトが変化するということです。

パソコン上で閲覧しているサイトもレスポンシブwebデザイン場合、ブラウザの横幅を縮めていくとメニューや項目の位置や表示非表示まで柔軟に変化します。

 

レスポンシブwebデザインのメリット・デメリット

ソースが一つで良いので運用や管理がしやすい

例えば、端末ごとに別々のサイトを作った場合コンテンツの追加時にも全てのサイトで更新をしなければいけません。

新しい商品を登録したらPC用、スマートフォン用という具合にです。

もしこのときにPC用に新商品は追加できたが、スマートフォン用のサイトでは追加し忘れた、ということが無くなります。

 

端末への依存度が低いので将来的に現在ある端末以外のものが出てても対応できる

レスポンスwebデザインは端末ではなくブラウザの横幅に応じて、レイアウトデザインを柔軟に変化させます。

今後新しいサイズのスマートフォンやタブレットが出てきても、現行のブラウザを使って表示するのであれば、わざわざ新たにサイトを作成する必要はないということです。

 

URLが一つでリダイレクト設定が必要ない

リダイレクト設定とはあるURLにアクセスしたときに自動的に転送する機能のことです。

この機能を利用することで、パソコン用のサイト、スマートフォン用のサイト、タブレット用のサイトそれぞれに最適なサイトに転送することが出来ます。

ただ、このリダイレクト設定が失敗や間違ったリダイレクトをしてしまうときもあります。

レスポンシブwebデザインでサイトを作成することで、そのような設定ミスによる表示の不具合の心配はありません。

 

ここまではレスポンシブwebデザインのメリットをお伝えしましたが、当然デメリットもあります。

それは以下の通りです。

 

端末ごとのユーザーに対しての自由度が無い

レスポンシブwebデザインは、PCもタブレットもスマホも基本的な構成要素は同じで、ブラウザにより表示するレイアウトを変えるということです。

 

しかし、スマートフォンとパソコンとでは、売れ筋商品に違いがあるときもあります。

そのような時に、各端末のユーザーの傾向に合わせてお勧め商品やコンテンツの表示など、変更する事が基本的には出来ません。

 

その為、スマートフォンからアクセスした場合にはこのコンテンツを大々的に表示したい、パソコンユーザーはこの商品が購入率が高いのでオススメにとしてトップに表示する。

そのようなユーザーごとの特性に合わせたデザインが出来なくなります。

 

ソースが大きくなりがちで表示に時間が掛かるときがある

ソースが大きくなるということは、データ量が大きくなるということです。

データ量が大きくなるということは、サイトの表示までに時間が掛かるということです。

ユーザビリティーの観点から見て、これはデメリットになります。

スマートフォンやタブレットの場合表示速度の遅さが、ユーザーの離脱に繋がることはよくあることです。

 

スマートフォン用にサイトを作るときは画像や動画のサイズを抑えデータ量を少なくするなどの処理が必要になりますので、htmlソースやcssにも一工夫必要になります。

 

目的にあわせた手法を選択することが、真のユーザビリティーへと繋がる

一見するととてもメリットの多いように思えるレスポンシブwebデザインですが、実際にはデメリットもあり場合によってはレスポンシブwebデザインの手法が不適切なケースもあります。

 

目的に合わせてレスポンシブwebデザインと端末ごとに、サイト表示を使い分ける必要もあるかもしれません。

 

例えば、あなたのショップの見込み客を集める為のページや、今月の目玉商品やキャンペーンの告知を掲載するサイトであれば、レスポンシブwebデザインで作成するのも良いかもしれません。

そのようなサイトであればデータ量が重くなりすぎず、ユーザーごとへの違いもそこまでは出ないでしょう。

 

そこから、本ショップサイトへのリンクを貼り、本ショップはデバイスごとに分けられたサイトを表示すれば、レスポンシブwebデザインでのデメリットに対しての解決策になるのではないでしょうか?

 

他にも扱う商品のターゲット層がはじめからモバイル端末や、スマートフォンからのアクセスが多い場合です。

その場合は、スマートフォンを意識したサイト設計になると思いますので、レスポンシブwebデザインで作成しても良いと思います。

 

大切なのはどの手法でサイトを作るか?ではありません。

どのようなターゲットのお客様向けのネットショップにするのか?

そこから考え、ターゲットとなるお客様が本当に使いやすいサイトを作ることを考えることです。

 

このような新しい手法も積極的に導入しテストを重ねて、本当にお客様が求めているものを提供できる、そんなネットショップ作りを目指してください。

 

山中洋史

コンサルタント紹介:Hiroshi Yamanaka

ネットショップのユーザビリティや導線の設計を手掛けるデザイナー兼コンサルタント。
最近はUSPの構築など戦略全体から手掛ける事も増えているため、
クライアントの価値観や物事の本質を見極めることを心掛けている。

無料テンプレートのご案内
アパレルなどの商品数が多いショップ向きのテンプレートが無料でダウンロードできます

商品点数が多いショップ用のテンプレートとして制作しました。商品ページにまで迷わず辿り着けるように設計しています。
また商品ページではただの商品スペックのみ書くのではなく独自のコンテンツが掲載できるようにスペースもたっぷと確保しています。

是非商品購入後の未来像がイメージできる商品写真とテキストをご準備してご利用下さい

続きを読む