コンパスを使わずに商品ページ・店舗看板を自作する方法について

Question

いつもお世話になっております。
店舗看板と商品ページのデザインについてご相談させてください。

これまでは「コンパス」を使って商品ページを作成していましたが、
HTMLコードの知識があまりなく、コード修正やカスタマイズが
難しいと感じています。

そこで、コンパスを使わずに、もっとシンプルで自分のスタイルに
合った商品ページ・店舗看板に変更したいと考えています。
他店舗様のような見やすいデザインに近づけたいと思っております。

参考として、現在の自店舗の商品ページと、比較したい競合店舗のページを以下に共有いたします。
・自店舗ページ：
https://item.rakuten.co.jp/dynamicdrive/elbowwrapblk003/?l-id=shoptop_widget_in_shop_ranking&s-id=shoptop_in_shop_ranking
・競合店舗ページ：
https://item.rakuten.co.jp/toripurussss/mmpg/?iasid=07rpp_10095___3n-mhyh2cxw-59-962e1d79-bb2c-43da-8b2f-eb31c7a15da6

現在、HTMLコードはChatGPTに作成してもらっていますが、
・RMSの商品説明文や店舗ページに、どのように貼り付けるのが良いか
・楽天GOLDを使うべきかどうか
・コンパスを外して、自作HTMLに切り替える具体的な手順
などが分からず困っています。

教えていただきたいポイントは下記になります。
	1.	HTML初心者でもできる「コンパスを使わない商品ページ作成の手順」
	2.	店舗看板や商品説明エリアを、自分のデザインに変更する具体的な方法
	3.	ChatGPT等で作成したHTMLをRMSや楽天GOLDに反映する際の注意点

現在使用中のページデザインと、参考にしたい他店舗様のページは
スクリーンショットでも添付しています。

初歩的な質問で恐縮ですが、
ステップごとにアドバイスをいただけますと大変助かります。
どうぞよろしくお願いいたします。###HR######IMG07b4884f172de3daf3a4266bf8c322e42.pngIMG0### ###IMG13eb7974206011beb1b6da59e99fb0a4b.pngIMG1###

Answer

ECマスターズの中村です。

>1. HTML初心者でもできる「コンパスを使わない商品ページ作成の手順」

基本的には、ChatGPTなどを用いて
ご自身でHTMLを作成し、

RMSの商品編集画面や
CSV商品一括編集機能を用いて、
HTMLを貼り付けていただく流れになります。

HTMLを貼り付けできる箇所は
下記の3つです。

・PC用商品説明文
・スマートフォン用商品説明文
・PC用販売説明文

どの位置に表示されるかは、
以下のマニュアルで
具体的に説明されていますので、
ぜひご確認ください。

◾️[答えが見つかるナビ]画面イメージから探す PC用販売説明文・PC用商品説明文(PC用)
https://navi-manual.faq.rakuten.net/other/000040460

◾️画面イメージから探す！スマートフォン用商品説明文(スマートフォン用)
https://navi-manual.faq.rakuten.net/other/000040462

なお、上記3箇所はそれぞれ
全角5,120文字が上限となります。

この制限を越えた入力はできかねますので、
あらかじめご了承ください。

また、楽天市場からHTML自動作成ツールも
公開されておりますので、必要に応じて
ご活用いただけますと幸いです。

◾️HTML 制作テクニック
https://mainmenu.rms.rakuten.co.jp/auth/index.php?params=navi/beginner/html/&s=&param2=0&scid=wi_rms_rhelp_294&type=1

>2. 店舗看板や商品説明エリアを、自分のデザインに変更する具体的な方法

商品説明文エリアの編集は前述のとおりですが、

ご参考いただいている店舗様の
商品ページの「看板」部分は
「ヘッダー・フッター・レフトナビ(PC用)」
で設定されているかと存じます。

そのため、作成したHTMLを

RMS＞店舗設定＞5 デザイン設定＞1 共通パーツ設定＞PCデザイン設定＞ヘッダー・フッター・レフトナビ

にて、「テンプレートの新規登録」
あるいは、「テンプレートの編集・削除」を
クリックいただき、

「ヘッダーコンテンツ」に貼り付けて
ご利用ください。

編集手順の詳細は、以下のマニュアルが
画像つきで分かりやすくまとまっています。

◾️[デザイン設定] ヘッダー・フッター・レフトナビを登録する
https://navi-manual.faq.rakuten.net/design/000039238

>3. ChatGPT等で作成したHTMLをRMSや楽天GOLDに反映する際の注意点

R-Storefrontでは使用できない
HTMLタグがあります。

ChatGPTでHTMLを作成する際、
禁止タグを含めないようプロンプトで
指定しておくことが重要です。

PC・スマートフォンでそれぞれ使用可能な
タグが異なりますので、以下のマニュアルを
ご確認ください。

◾️[基本情報設定 店舗情報・その他] R-StorefrontにおけるHTMLタグの制限
https://navi-manual.faq.rakuten.net/shop-setting/000044230

◾️[スマートフォン デザイン設定] スマートフォン用入力項目で利用できるHTMLタグ
https://navi-manual.faq.rakuten.net/design/000038875

楽天GOLDを使用すると
HTMLタグの制限がなくなりますが、

スマートフォン用の商品ページでは
GOLDのファイルを直接読み込むタグが
使えない点に注意が必要です。

今回参考にされている店舗様のような
デザインであれば、GOLDを使わず、
R-Storefront内のHTMLだけで
十分再現可能かと存じます。

なお、コンパス解約後もコンパスで
生成されたページデータは残ります。

自作HTMLが完成した商品から、
順次商品編集画面
またはCSV商品一括編集機能で
置き換える形で問題ないものと存じますが、

念のためコンパス側にもその対応で
問題ないかご確認いただくと安心です。

解約後のページ表示については、
以下マニュアルをご参照ください。

◾️解約したら、今のページはどうなりますか？
https://compass-next.zendesk.com/hc/ja/articles/115002740914-%E8%A7%A3%E7%B4%84%E3%81%97%E3%81%9F%E3%82%89-%E4%BB%8A%E3%81%AE%E3%83%9A%E3%83%BC%E3%82%B8%E3%81%AF%E3%81%A9%E3%81%86%E3%81%AA%E3%82%8A%E3%81%BE%E3%81%99%E3%81%8B

Answer

ご返信ありがとうございます。
ヘッダー・フッター・レフトナビの設定方法は理解できましたが、
実際に使うHTMLコードを自分で作るのが難しい状況です。

手元にロゴ画像やバナー画像は用意しているので、
それを使って配置できる シンプルなヘッダーやレフトナビのサンプルHTML を
教えていただけないでしょうか？

Answer

ECマスターズの中村です。

>手元にロゴ画像やバナー画像は用意しているので、
>それを使って配置できる シンプルなヘッダーやレフトナビのサンプルHTML を
>教えていただけないでしょうか？

申し訳ございませんがサンプルのご用意は
ございませんので、
GoogleChromeを利用し、参考にしたい商品ページで
右クリック> ページのソースを表示
を押下いただきますと
HTMLをご確認いただけます。
こちらをご利用くださいませ。