タブレット対応ECサイトのポイント〜インテリアショップMOMU〜

レスポンシブに対応したECサイト

最近、街中でもタブレット端末を使う人をよく見かけます。総務省が発表しているH24年情報通信白書では家庭内無線LANの端末別利用率で約70％以上の人がタブレット端末を利用しているとの発表がありました。

しかし現状様々なECサイトをみてもタブレット端末に対応（最適表示）したサイトはほんの一部です。サイトを利用するユーザーのユーザビリティを考えるとタブレットに最適化されたサイトを用意することはEC事業を営む方にとって重要事項となっています。

今回はスマートフォンサイトと比較しながらタブレットに最適化されたサイトでタブレット端末を使って実際に購入してみました。

サイト名	MOMU
URL	http://www.momu.co.jp/
QRコード

■タブレットに最適化するポイント～レスポンシブwebデザイン～

多くのECサイトでは、タブレット端末でアクセスした場合は、PCサイトが表示されます。エンドユーザーからするとタブレット端末でPCサイトを表示しても購入はできますが使いにくいのが本音です。

PCとタブレットでは「画面が小さい」という違いと「タッチで操作を前提としてユーザービリティ」という違いがあります。この違いを理解した上でサイトを構築しなければなりません。

参考：タブレットサイトのボタンサイズは32px以上がタップしやすい

今回のMOMUさんはレスポンシブwebデザインでサイトを構築されておられます。レスポンシブwebデザインでは1つのソース・URLでスマホ/タブレット/PCに最適化されたサイトが構築ができECサイト運用/構築のリソースを劇的に改善します。

しかしの1つコンテンツを様々なデバイスに最適に表示させるにはどのデバイスを基準にサイト構築を考えるのかがポイントになります。タブレットサイトの場合「タッチ操作」が基本になるので、サイトのUIもPCサイトを基準に考えながらスマホサイトの要素を取り入れる必要があります。

しかし今回のMOMUさんの場合、PCサイトを基準としてサイトを構築されておられるように感じました。

これはスマホサイトとPCサイトを比べると一目瞭然ですが、スマホサイトを考える上での重要事項に「ファーストビュー」があります。これはユーザーがサイトに訪れた際に初めて目にするコンテンツです。ECサイトの場合特に、このファーストビューで買い物をしたくなる見せ方をしなくてはなりません。

しかしMOMUさんのスマホサイトではTOPにメニューリストが表示され簡素なイメージになっています。

やはりファーストビューでは「売りたい商品」やエンドユーザーに知ってほしい情報を表示させなければなりません。よってレスポンシブwebサイトでマルチデバイス対応をする際のポイントは構築を考える上でデバイスの優先順位を明確にしましょう。基本的にレスポンシブサイトの優先順位としては取り扱う商品で多少は違えど

スマートフォンサイト＞タブレットサイト＞PCサイト

になります。これは既に周知の通り、利用端末のモバイル化、マルチデバイス化が進む中で必然的に優先順位が決まってきます。よってレスポンシブwebデザインでサイトを構築する際にはモバイル端末を中心としたモバイルファーストの概念になります。

タブレットサイトでの商品の魅せ方

MOMUさんの場合、商品ページもそれぞれの端末の特性を考えた見せ方をされています。

タブレットやスマートフォンの場合、タッチで操作するという端末の特性を考えPCとは違った形で商品画像を表示しています。

注意すべき点としてはレスポンシブWebデザインではPC用の画像はできるだけ使わない方がいいところです。

ある程度小さい文字でもPCでは確認することができますが、タブレットやスマートフォンでは文字が見難くなってしまいます。ショップ側が伝えたい商品の魅力などが充分に伝わらないのはもったいないです。

ですのでレスポンシブwebサイトで構築する際には画像はスマートデバイスを中心に考え、伝えたい重要な情報はできるだけテキストで記述しCSSで調整されることが好ましいと言えます。

端末毎に決済ページまで最適化する。

レスポンシブwebサイトでECを展開する場合に重要なのが決済完了まで最適表示ができているかになります。レスポンシブwebサイト自体は1つのコンテンツを様々なデバイスに最適できる有効な手段として注目を集め、多くのサイトで導入がはじまっていますが、ECサイトをみてみるとTOPページのみレスポンシブwebサイトだったりするケースが多いです。

ECの場合、どれだけ綺麗な魅力的なサイトを構築してもユーザーに買って頂かなければ（コンバージョンしなければ）意味がありません。MOMUさんではタブレットサイトはタブレットサイト用の決済ページが用意されていました。

ただ単に商品ページまでのを最適に表示するのではなく決済ページまでしっかりと最適化することによりコンバージョンを高めることができます。またもっとコンバージョンを高める為にはスマートデバイスの特徴を取り入れ、氏名記入欄で姓/名を分けずに記入したりメールアドレス登録は空メール機能を使ったりなど細かい工夫が考えられます。

まとめ

現在、EC事業者様にとってスマートフォンサイトを構築することが当たり前のように、あと半年～一年後にはタブレットサイトを構築することが当然のようになってくると考えられます。

マルチデバイス対応はＥＣ事業者様の必須命題事項となりその際に最も有効な手段としてレスポンシブＥＣサイトが注目を集めていますが、ユーザーの特性、端末の特徴をしっかりと理解しサイト構築に取り入れていくことがマルチデバイス対応成功への一歩だと感じました。

岡村

photo credit: atmtx via photopin cc

商品の販売に“夢中”になれる

クラウド型ECサイト構築ASP