みなさんこんにちは、セールス部岡村です。

今年も残すところあと2ヶ月となりました。今年も多くのECサイトがレスポンシブwebサイトを導入され、また来シーズンに向け導入検討をされておられます。

私自信、毎月５０社以上のECサイトを運営される事業者様とお会いするのですがその中で様々な質問を頂きます。その中でも一番多く頂く質問が、「レスポンシブwebサイトには興味あるけど簡単にできるの？」という質問です。

特に楽天やYahooなどモールに注力していた事業者様の多くは楽天RMSのイメージが強く、「PCサイト」「スマートフォンサイト」と別々に構築されておられるので、一つのソース、画像でサイトを構築するイメージが湧いてこない方が多くおられます。

そこで今回は楽天サイトをベースに自社ECサイトを構築するポイントを解説していきます。

ステップ１：PCサイトを各パーツに分ける

今回は弊社のレスポンシブECサイトプラットフォームaishipRをお使いのリネアストリア様のサイトを事例に解説致します。

まずは楽天のPCサイトを【ヘッダ】【アサイド】【メイン】【フッタ】に大きく切り分けます。

レスポンシブwebサイトでPCサイトをそれぞれのパーツに切り分けPC/スマホで表示した際にどのように表示させるかレイアウトを決定します。

ステップ２：必要なパーツだけデバイスに合わせたデザインを作成する

レスポンシブwebデザインを導入される懸念点の一つにソースやバナーを一つに統合するので自由なデザインができないのではないか？というご質問を良くいただきますが、自由なデザインは可能です。

基本的には同一のバナーやソースを使いまわしますが、【PC】と【スマートフォン】では【マウス操作】と【タッチ操作】でユーザの動きが全く違うのでそれぞれのデバイスの特徴に合わせたサイト表示をしてあげることが重要です。

例えばヘッダーのメニューでもPC用のヘッダーメニューとスマホ用のヘッダーメニューを用意して上げることにより読み込むピクセルサイズによって表示を切り替えます。

ちなみに弊社aishipRを使うとこの切替もボタン一つで簡単に切り替えが可能です。

ステップ3:楽天CSV情報で商品情報を登録する

次に楽天に登録している商品情報を登録します。

現在ご利用中の商品情報CSVを自社ECサイト用にレイアウトを編集し簡単に登録することができます。

しかしここで注意すべき点は楽天などのモールとまったく同じ情報を登録してしまうとGoogleの検索エンジンからコピーページ（重複コンテンツ）と見なされてしまい検索順位に影響がでる可能性があるということです。

弊社サービスをご利用頂く事業者様の多くも「モール」「自社サイト」と多店舗展開されてますが、月商数千万規模の事業者様になると楽天は画像、自社サイトはテキスト＋画像で登録をして重複コンテンツとならないように調整をされているケースもあります。

ちなみに楽天やYahoo等とのモールとの受注情報/在庫情報の連動は「ネクストエンジン」や「クロスモール」のような外部システムを使うことによりより一層、運用の手間が省くことができ便利です。

自社本店サイトに力を入れようとするとどうしてもリソースがかかってしまいます。また楽天やYahoo等多店舗展開をされておられる事業様であればこれまで以上にコストがかかってしまいます。

これまで築き上げた楽天サイトのコンテンツをできる限り流用し、PCサイト/スマホサイトを別々に構築するのではなく最低限のリソースで自社ECサイトを構築するのであればレスポンシブwebデザインが有効な手段といえます。

岡村