レスポンシブ・ショッピングカートASP「aishipR」で、レスポンシブECサイトを実現する方法

今回はスマートデバイスへの３つの対応方法を再度整理し、サービス開始するレスポンシブ・ショッピングカートASP「aishipR」について、現状のECサイトをレスポンシブ化するステップ、レスポンシブ・ショッピングカートが必要とされる理由などをご案内します。

「aishipR」は月額9,800円で今運営中のECサイトをスマホ・タブレット・PC・携帯などのあらゆるデバイス対応のレスポンシブECサイトに移行できる便利なASPです。（aishipRのサービス詳細はhttp://www.aiship.jp/　お問合せTEL0120-173-163）

画像を見る

参考に、このaishipRのサービスサイト（http://www.aiship.jp/）自体もaishiRで構築運用しているレスポンシブWEBサイトですので、以下QRコードを読み取って、いろんなデバイスで閲覧してみてください。

QRコードを表示する

レスポンシブECサイトASPを提供する背景

モバイル化、マルチデバイス化が進む中で、各スマートデバイスへのECサイトの対応は一段と重要な局面を迎えます。スマートデバイスへのECサイトの対応方法は「自動変換」、「デバイス毎にページ作成」、「レスポンシブECサイト」と大きく分けて３つあり、スマホ・タブレット・PC・携帯など複数デバイスに効率的な対応を考慮した場合、レスポンシブECサイトが圧倒的に有効であることは事実です。（以下「スマートデバイスへのECサイト3つの対応方法」参照）

そこで重要なのが、レスポンシブECサイトを運用するための、ショッピングカートシステムやCMSです。今回サービスを開始した「aiship R」は、まさにこのレスポンシブECサイトを効率よく運用するために必要な全て(ショッピングカートシステムやCMSなど)がワンパッケージになった月額9,800円と安価なASPなのです。

なぜレスポンシブECサイト運営に「aiship R」が必要なのか？

レスポンシブなページを作ることはHTML5やCSS3を駆使し、メディアクエリーによりデバイス毎のデザインを調整すればそれほど難しくなく実現できます。

しかしことECサイトの場合、ECサイト内で構成されるページの多くが、動的なページ（例えばTOPページ/ランキングページ/商品一覧ページ/商品ページ/マイページ/ショッピングカート内のページなど）であり、これらの動的ページもレスポンシブWEBデザインにしたいところなのですが、ECサイトを動かすショッピングカートシステムやCMS等の特殊なプログラムで作られているため難しいことになります。（できない、もしくはカスタマイズで費用が発生するケースがほとんどです）

つまり、レスポンシブECサイトを運営しようとすれば、TOPページ/商品ページ/ショッピングカートページ/ランキングページ/マイページなど動的ページ全てがレスポンシブページであるショッピングカートシステムやCMSを導入する必要が出てきます。

また、そもそもレスポンシブWEBデザインでのEC運用ワークフロー自体がこれまでのCMSやショッピングカートとはこと異なるため、これまでのものを改造しても“とってつけた対応”になってしまい、結果的に運用上の不整合が生じてしまします。

新サービスのレスポンシブ・ショッピングカートASP「aishipR」は、まさに、このレスポンシブECサイトを運営するために必要となるサービス（ショッピングカートASP）なのです。

レスポンシブ・ショッピングカートASP「aishipR」でECサイトをレスポンシブ化

「aishipR」とは、要は「レスポンシブECサイトを運営するためのASP」なのですが、その利用方法を“すごく簡単に”言いますと、「今あるECサイト(商品データ、画像、ソース)をaishipRのASP上に乗せると、あらゆるデバイスに対応したレスポンシブECサイトになる」というものです。

もちろん商品ページ/ショッピングカートページ/お問合せページ/マイページなどの動的ページも全てです。

今ECサイトがある場合の具体的な利用方法は

1. 運営中のECサイトのHTMLや画像をaishipR上にコピペやFTP等で移設
2. 今のECサイトの商品情報や顧客情報をCSV等で移設、(楽天CSV可)

という比較的簡単なステップでレスポンシブECサイトになります。実際の移設時の作業量はLPや特集ページなど静的ページが比較的少ない通常のECサイトで3日/人～5日/人程度（デザイン制作実務経験3～5年の方）です。また移設する際に重要なポイントは以下の“レスポンシブ化”の2点です。

また移設する際に大きく2つの“レスポンシブ化”が必要となります。

【１】運営担当者の意識をレスポンシブ化

画像を見る

1つは、運営者の意識のレスポンシブ化です。これまでのデザイン手法と若干異なる点があるため、最低限レスポンシブWEBデザインの知識が必要となります。、必要あればまとめたものを弊社スタッフがご案内しますのでお申し付けください。

【２】 ECサイト自体のレスポンシブ化（デバイス毎のレイアウトの決定）

基本的に今のECサイトの画像等を利用しますが、場合によっては一部新たに画像等の素材が必要となります。

このように今ECサイトがある場合は、大枠上記2つのステップでレスポンシブECサイトに移行が可能です。また新規でECサイトのデザインから必要な場合はそのデザインやHTML等を作る必要が出てきますが、レスポンシブWEBデザインの考慮が必要なため新規構築やリニュールの場合、アドバイスしますのでお気軽にご相談ください。

aishipRセールス窓口（TEL：0120-173-163）

スマートデバイスへのECサイト3つの対応方法

ECサイトをスマートデバイスへ対応させる方法は主に以下の3つになります。それぞれメリット・デメリットを記しましたのでご参考ください。

１．自動変換ツールの利用

Googleが無償で提供している「DudaMobile」などに代表されるものになります。

画像を見る

[メリット]非常に簡単にPCサイトをスマホで表示できるようになることが特徴。
[デメリット]拡張性が無く、PCファーストでの運用に変わりないため、CVRが重要となるサイト(ECサイトやデザイン満足度が重要なサイトなど)には不向き。

２．デバイス毎にページを作成

デバイス毎に別々のページを作成し、アクセスするデバイスに合わせ振分(リダイレクト)し、最適なページへ誘導する方法です。

[メリット]デバイス毎に最適なページを構築するために、完全にユーザ満足度が高いECサイトの構築が可能。
[デメリット]スマホ・タブレット・PC・ガラケーの４デバイスへの対応を考えた場合、4つのECサイトを構築運営するに等しい手間を要するため、マルチデバイスECサイトには不向き。

３．レスポンシブECサイト

レスポンシブWEBデザイン(CSSでの調整)＋サーバサイド技術を組み合わせ、１つのECサイトをレスポンシブに変化させて、あらゆるデバイスに対応させる方法。aishipRで構築可能なサイトになります。

[メリット]あらゆるデバイス向けのECサイト運営が１つのECサイトでまかなえるため、２の方法と比較しても運用の手間が半減、またデバイス毎にデザインの特徴を出すことで、デバイスでのユーザ満足度を高めることが可能。
[デメリット]運営しているECプラットフォーム(CMS)やショッピングカートが対応していない場合は、レスポンシブECサイトのASPやショッピングカートに変更しなければいけない。

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