レスポンシブECサイト事例～ファッション雑貨通販事例から見るレスポンシブ化2つのポイント〜

楽天でも部門で非常に有名なECサイト様の本店レスポンシブECサイト事例をご紹介します。これまでスマホ・PC・ガラケーなどデバイス毎に運用されていた本店ECサイトを、aishipRであらゆるデバイスに対応した１つのレスポンシブECサイトに統合され、2013年4月に再オープンされた事例です。

ファッション雑貨通販 Linea-Storia（リネアストリア）
http://www.ilovewig.jp/

画像を見る

スマートフォンやタブレット対応方法の主流であるレスポンシブ化の魅力は、マルチデバイス向けに効率的かつ効果的なECサイト運用が図れることです。この事例で紹介するファッション雑貨通販サイト様でも、リニューアル後の運用の手間が半分以上低減しているとのことです。

参考：ファッション雑貨ECサイト　最新技術の「レスポンシブECサイト」を展開、商品購入者はスマートデバイスでの購入が容易に

このECサイト様のレスポンシブ化でのポイントは、デザインや素材、javascriptも現状のECサイトのものをそのまま流用しレスポンシブ化されたことで、移行コストや手間が非常に少ないということです。また商品ページ等の商品データやこれまでの顧客情報、レビューなどの情報もそのまま移行されているため、レスポンシブ化の手間のほとんどが「レスポンシブ化の調整」です。

この事例サイト様を参考に、既に運営しているECサイトを手間なくレスポンシブ化する際に必要となる「レスポンシブ化の調整」の中でも、事前に必ずおさえたい重要な２つのポイントをご紹介します。

レスポンシブECサイト事例　元サイトの運用状況と問題

元サイトの対応デバイスはPC・スマートフォン・携帯（図1参考）、デバイス毎に別々のソースコード（コンテンツ）でデバイス向けECサイトを構築運用されていました。そしてデバイス毎に制作してきたために、デザインやサイト内のページ構成はデバイス毎にバラバラという問題がありました。（図2参考）

これらの問題は、ECサイト運営に手間がかかるにとどまらず、ECサイト利用にとってもアクセスするデバイスでコンテンツやページが異なるという問題が生じ、結果的にユーザ満足度を低下させてしまいます。

画像を見る
図１　各デバイスの元のECサイト

画像を見る
図2　スマートフォン向けサイトにしかないコンテンツ

本来はユーザがどのようなデバイスで閲覧しても、そのデバイスに最適な表示を行い、またどのようなデバイスでも同じコンテンツ（URL）を閲覧することが理想です。レスポンシブ化での利点は、この理想を実現するためで、どのようなデバイスでも同じコンテンツを利用することで、ユーザが混乱することなく、運営者も手間が減るということが実現します。

レスポンシブECサイト事例からみる、既存ECサイトのレスポンシブ化のポイント

実際に本件事例サイト様の移行の際に、このポイントをおろそかにしてしまい結果膨大な手間が発生し、なかなか前に進まない状況に陥りました。結局これらのポイントを再度整理して進めましたが、かなり遠回りをしています。

そのポイントとなる調整作業はデバイス毎に構成されていたページやコンテンツを全デバイス共通にするための、「サイト全体のサイトマップ再構成」と「各ページのコンテンツの共通化」という2つの事前整理作業です。

[1]　サイト全体のサイトマップ再構成

デバイス毎にバラバラにページが作られている場合、例えばPCにあってスマホに無い、スマホにあってPCに無いというようなページが存在します。またPCでは１ページだが、スマホでは3ページくらいに分割しているようなページも存在します。このままレスポンシブ化すると、同じようなページが重複するなどの不整合が生じてしまいます。

「サイト全体のサイトマップ再構成」の作業は再度サイト全体のサイトマップを整理し、スマホサイト、PCサイトページのサイトマップを統合し、レスポンシブ化した後のサイトマップを予め作成しておくことで移行作業をスムーズにするために必須です。（図3参照）

画像を見る
図3　レスポンシブ化のサイトマップ再構成

例えばモバイル向けキャンペーンなど、モバイルのみのコンテンツやページなども発生しますが、その際には「本当に共通化ページではダメなのか？」と考えてください。ほとんどの場合、ページコンテンツはデバイスで共通でき、デバイス特有ページを減らすことが可能です。

[2] 各ページのコンテンツの共通化

デバイス毎に制作したページは、できる限り同じようなページとして制作してきた場合でも、微妙にコンテンツが異なっていることが多くあります。レスポンシブ化での利点はコンテンツをデバイス間で共通化させて、あらゆるデバイスで同じコンテンツデザインを利用することによる運用手間の低減です。

ですから、デバイス毎にバラバラのデザインレイアウトをそのままレスポンシブにしても、結局運用の手間が大きく低減できません。そこで重要なのが各ページのコンテンツの共通化です。事例ECサイトについて以下の図4、5をご参考ください。各ページ共にデバイス毎にバラバラに制作されていたコンテンツを共通化しています。

画像を見る
図4　商品カテゴリページのコンテンツの共通化

画像を見る
図5　特集ページのコンテンツの共通化

TOPページなどデバイス毎にコンテンツが多く異なるページはワイヤーフレーム上で共通化コンテンツの見える化を実施するなども有効な手段です。どのコンテンツを共通化させるのか、逆に共通にしないコンテンツはどれかを必ず事前に必ず整理しておくようにしてください。

参考：今運営中のECサイトをレスポンシブ化する～ワイヤーフレーム作成2つのポイント～

レスポンシブECサイト事例から見えてくること

これらのことは実作業を通じて初めてその手間の膨大さがわかったものですので、是非ともみなさんが移行作業される際には注意していただきたいと思います。もし弊社で既存ECサイトのレスポンシブ化をお手伝いさせていただく場合には、このような点も含め、実作業の経験から得たポイントをアドバイスしながら進めさせていただきます。

次回以降は既存ECサイトをデザインそのままレスポンシブ化する事例から、その実作業でおさえておくべきポイントを紹介したいと思います。

岩波

＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
掲載元のブログではわかりやすい画像つきで公開しています。
■aishipスマートフォン＆モバイルEC事例・ノウハウ集
http://www.aiship.jp/knowhow/archives/8948
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝