先日お仕事で、楽天ショップのデザインから構築・オープン作業までを担当しました。
今回は楽天のオープンまでにどのような項目があるか、制作側をメインに手順をご紹介します。
楽天のオープン作業とは、あくまで楽天goldを使わない仕様の流れとなります。
楽天goldで自由にサイトを作る前に、きちんと楽天の規約通りのサイトを作り上げる必要があります。
その後、LP（ランディングページ）の作り込みやgoldで作ったサイトの組み込みなどを行っていきます。
制作の前に…
1 コンセプト決め
まず、ショップの方向性をクライアントと打ち合わせをします。
オープン時の商品数や、今後どの様な商材を販売していくかなどを話し合い、ショップ全体のこだわりや伝え方など、全体のコンセプトを決めていきます。
最初にここでブレてしまうと、ショップの方向性がなくなっていき、運用に支障が出てきます。
2 プラン選び
楽天には「メガショッププラン」「スタンダードプラン」「がんばれ！プラン」「ライトプラン」の4つのプランがあります。プランによって、月額出店料やシステム料など用途が違いますので、売り上げ目標や楽天のエリア担当者と相談しながら決めていくと良いです。 契約期間がありますが、プランは運用中にも変更できます。
3 店舗情報設定
契約をすると楽天RMS（管理画面）にログインができるようになります。
基本的な設定から配送・決済、トップページ・商品ページなどの設定も行います。
最初にログインしたRMSトップページに「初めての店舗サイト作り」エリアがありますので、ステップを踏みながら、設定していきます。
4 カテゴリ設定
後で追加や変更もできるのですが、商品数が増えるほどカテゴリも増えていくので、今後を見据えたカテゴリ分けや設定が必要です。
5 画像ファイル名・商品管理番号のルール決め
楽天ではRMS内にR-Cabinetという画像アップロードツールがあり、ファイル名は全角25文字/半角50文字以内と文字制限などもあります。
商品管理番号は商品ページのURLなる部分で、一度決めると後で変更ができません。ファイル名・商品管理番号など、今後運用しやすいようにルールを最初に決めていきます。
審査前に…
すぐにgoldの自由なデザインのトップページでオープンしたい場合は、
審査前に、デザイン・コーディング・設定まで行っておくと、審査後スムーズにオープンへができます。
6 PC・スマートフォンデザイン制作
楽天でも最近はレスポンシブサイトが増えていますが、PC・スマートフォンと分けて商品イメージや訴求をしっかりと見せていくことを考えると、今の所はデバイスは分けて構築しています。
7 PC・スマートフォンコーディング
通常のWEBサイトのようにコーディングをしていけば良いのですが、楽天ではPCの場合、各パーツをiframe化して表示させるのが主流なので、パーツをファイル別で準備しておきます。
8 商品ページデザイン制作
商品ページをLP（ランディングページ）で注力して制作する場合はこの段階で進めます。商品数が多い場合はテンプレートをいくつか作り、写真やコピーだけ差し替え量産していくやり方もあります。
9 楽天RMS商品ページ登録・FTP設定
上記のLP完成後、商品ページの登録をしていきます。
価格・在庫設定・カテゴリ登録などもありますが、表示されるコンテンツエリアには、「PC用販売説明文」「スマートフォン用商品説明文」「モバイル用商品説明文」3つがあります。
スマートフォンは画像のimgタグは10枚しか設置できないのが辛いです。以前は3枚でした。
10 審査用指定画像パーツ制作・設定
審査にはPC・スマートフォンはもちろん「header」「footer」「サイド」に何pxのバナーやボタンを設置しなければならないなどルールが細かく決まっています。「初めての店舗サイト作り」の項目にそって進めていけば問題ありません。
審査クリア後…
審査クリア後は、goldで制作していたサイトを楽天に組み込んでいく作業となります。
11 楽天RMS内トップページ設定・header・footer・サイドナビ設定
RMS内でトップページの設定をしていきます。
通常のトップページURLは、「https://www.rakuten.co.jp/ショップURL/」になりますが、goldを使用すると「https://www.rakuten.ne.jp/gold/ショップURL/」のURLになるので、リダイレクト設定を行い、トップページにgoldが表示されるようにします。
また、header・footer・サイドナビにiframeを設置し、ページ全体で表示されるように設定していきます。
12 スマートフォン設定・リダイレクト
スマートフォンの場合は、トップページから商品ページ・詳細に入ると、楽天のテンプレートが表示される形式になります。トップページはgoldサーバー内に、「sp」などディレクトリを作り、javascriptなどでデバイス判定でリダイレクト設定をしていきます。
まとめ 最終調整・オープン
以上で、制作から、審査、審査後のサイト組み込みなどを行いました。 こちらでPC・スマートフォンのトップページが設定され、商品ページも作り込んで、オープンができます。 ECは運用が大事ですので、ここからどういったコンテンツや施策をしていくかが大事かと思います。
