😊

楽天RMSのサイト制作したお話しについて

2023/05/14に公開

久々の投稿です。うえむーです。
5月も入りどんどん暖かくなってきましたね。
4月下旬に楽天RMSでサイト制作してリリースしました。
今回は短期間で楽天RMSでサイト制作したことについてお話ししたいと思います。

楽天RMSとは?

楽天RMSとはRakuten Merchant Serverの略で、楽天市場での店舗運営を円滑に進めるためのシステムです。Amazonのセラーセントラルに似ております。

依頼背景・担当

今年の2月中旬に先方様の要望でブランドサイトではなく、4月下旬に楽天市場をオープンして売上を伸ばしたいと要望をいただき、フロント担当は自分が決まりました。
今まで楽天RMSを触った事がないので少し不安でしたが、6年前-去年まで別の担当者が楽天RMSでサイト構築してオープンした事がありそのデータが残っていたので、それを頼りに自分や他のメンバーと連携してオープンに向けて進行しました。

メンバー3人で担当を以下のように分担して、自分はフロント担当で進行してました。

・フロント(トップ・一覧・詳細の実装など)
・バックオフィス(商品登録など)
・規約系(ご利用ガイド・お問い合わせ・トランザクションメールなど)

段取り

MTG参加

まずは、楽天RMSのデザインMTGに参加しました。
先方様は楽天RMSに導入されているサイトを参考にトップ・一覧・詳細ページ(PC・スマホ)のワイヤーフレームを展開して、どこまで再現できるかを調査依頼をいただき早速調査しました。

調査について

トップPC・スマホ / 一覧 / 詳細ページを先方様の要望通りに実装可否を調査しました。
RMSの公式ドキュメントから調べればすぐに実装可否の判断がすぐにつくのですが、楽天様から共有いただいたのログイン情報でログインしないと見れないので、申請しなければなりません。
エンジニアがRMSに関しての記事投稿したものはあるのですが、実装可否が判断がつかないコンテンツも多かったので、先方様にRMSのログイン情報を申請してもらい、そこから実装可否の調査をしました。

トップのスマホの仕様について

RMSのログイン情報をいただき、色々と調査をしました。
調査して分かったことは、RMSの仕様が、エンジニアが過去にRMSに関しての記事の内容とは乖離があり、随時仕様が変更されている事がわかりました。

一番衝撃が走ったのはスマホのトップの仕様が2023年の上旬で大きく変更されており、
オリジナルデザインはできなくなり、楽天標準で作成しなければいけないということです。
※PCは引き続きGOLD(自由にカスタマイズ)で使えるようです。
※GOLDはHTML/CSS/JavaScriptのファイル自由にコーディングしてFTPにアップできるものであり、楽天の名称です。詳細は後ほど説明します。

以前トップのスマホはGOLDでindex_sp.htmlで作成できたみたいですが、2023年上旬より楽天のルールが変更され、トップのスマホは楽天標準になったそうです。

過去の記事や実績を確認するとスマホはGOLD「index_sp.html」で作成してたと書いており、自分も当初はそれで実装すると思っておりました。
この仕様変更されることに気づいた私は、即社内・先方様に共有して、要件の詰め直さなければいけませんでした。
先方様も楽天のスマホトップは自由にカスタマイズできると認識していたので、相当焦っていました。

トップのスマホだけでなく、トップのPC・一覧・詳細ページのPC・スマホでRMSの仕様で何ができるのか?を先方様から調査依頼をいただき、再調査することになりました。
この時は、予定よりも少しスケジュールが遅れていたので、急いで楽天様にお問い合わせをしたり、仮実装して各パーツの詳細を調べたりして、結果をFigmaで詳細をまとめて展開しました。

デザインデータ・各パーツの詳細をまとめた結果、先方様には「わかりやすくて助かる」と褒めていただきました。

当時自分がFigmaで作成したデザインデータ

以下の画像が当時自分が作成したデザインデータです。スマホの仕様がわからなかったので、RMSの管理画面で色々と調べながらイメージ図を作成して先方様に展開しました。

RMS・GOLDについて

サイト制作方法ですが少し特殊で、制作する方法は2パターンあり「RMS」「GOLD」があります。

RMSは楽天の管理画面でヘッダー・フッター・サイドナビをHTML・CSSでコーディングします。
GOLDというのはRMSとは違い自由にコーディングにできて、楽天用のFTPサーバでHTML・CSS・Javascriptをアップロードします。GOLDは楽天用の名称です。
GOLDはどんな事ができるのかは以下に記載しております。

GOLDを利用う事で

GOLDを利用する事で以下のような事ができます。

・外部CSSを読み込める
・javascriptが使えるようになる
・オリジナルのページ作成ができる
・商品ページ・カテゴリページ・スマホはオリジナルデザインが出来ない
・PDFファイルなどをアップロードできる(RMS内ではgif、JPGのみ)

仕様について

・基本料金は無い
・容量は1GBまで無料(100MBごとに 月額に対して5000円費用発生 )
・容量追加がされるのは申請後10営業日。いきなり増やせない
・外部リンクの設定が使えない(申請が必要)

GOLDを利用する箇所について

・PCトップページ・特集ページなど静的コーディングしたページ
・ヘッダー・フッター・サイドナビ
※ヘッダー・フッター・サイドナビは一覧・詳細にも利用するのでGOLDでパーツを作成してiframe化してRMSの管理画面で読み込んでいます。詳細は以下の記事にてご確認ください。

https://captainec.jp/rakuten/spin_off/gold_iframe

実装について

先方様より以下の方針で進行してほしいと依頼をいただきました。

・PC トップ・・・GOLDでHTML/CSSコーディング
・PC カテゴリ・詳細一覧 ・・・ヘッダー・フッター・サイドナビ(GOLDで作成してRMSの管理画面でIframeで埋め込み) / コンテンツ(商品登録 / CSS調整など)
・SMP トップ・一覧・詳細・・・楽天標準で設定
・特集ページ・・・GOLDでHTML/CSSコーディング

構成は以下になります。

実装は5営業日で先方確認・修正期間は3営業日と合計8営業日であり、
他のタスクと並行しながら実装しました。
また、修正確認依頼もや先方からの質疑応答も自分で対応しながら実装・修正を行いました。

オープン審査

オープン審査について

楽天は契約してもそのままオープンすることはできません。
オープンする際にオープン審査申請フォームが楽天様より送られるので、フォームを入力してオープン審査依頼して、審査を行いそれに通過する必要があります。

オープン審査は2〜3営業日がかかります。もし、審査が通らないと修正してオープン再審査する必要があり、納期に遅れる可能性がありますので、事前に楽天の担当者様にフロントチェックしてもらいました。

楽天の担当者様のフィードバックについて

オープン審査する前に、事前に楽天の担当者様にフロントチェックしてもらったのですが、フィードバック修正対応が15点以上いただいており、それを修正しないと審査が通らないとご指摘をいただきました。
取り急ぎ、社内と先方様と緊急MTGを行い、残タスクのすり合わせを行い、審査日までに修正対応を行いました。全ての課題をクリアをして、ギリギリの時間帯で楽天の担当者様にオープン審査依頼をしました。

オープン

オープン審査依頼して無事審査が通り、オンスケ通りにオープンできました。
オープンする時間に関しては時間して出来ず、楽天様の仕様で12時〜16時の間にオープンするそうです。
当日の12時〜16時に無事オープンされて早速受注が入りました。

注意点

着手からオープンまでの間色々と注意事項がありますので以下を押さえていればスムーズに進められるよ思います。

楽天RMSの仕様が随時変更される

楽天RMSの仕様は随時変更されると思った方がいいでしょう。
他の店舗のサイトを参考にしながら要件定義していくと、いざ着手する際に仕様の問題で要件を再度詰め合わさなければならなくなるのでRMSのログイン情報をいただいてから要件をつめた方がいいかもしれません。

オープン審査する際のガイドラインはしっかり確認しよう

オープン審査する際は、ガイドラインはしっかり確認しましょう。
ガイドラインに従って実装してないと、楽天の担当者より指摘が入り、
審査が通らなくなります。

楽天様にお問い合わせをするようにしよう

不明点な事があったら些細なことでもいいのでお問い合わせをしましょう。
大丈夫だろうという思いは後々になって出来ないことに気づく事が結構多いので念入りにお問い合わせをした方がいいです。
お問い合わせ方法は契約してして入ればメール・電話・チャットがありますが、個人的にはチャットがおすすめです。そっちの方が返答が早いですし、的確に回答していただけます。

最後に

1ヶ月間の短い期間で着手〜リリースまで対応しました。
もし、楽天RMSを導入・実装する方がいらっしゃいましたら参考にしていただけると嬉しいです。

Discussion