code商品説明HTML生成の使い方

ログイン後、ツール一覧の「楽天市場のツール」から 商品説明HTML生成 をクリックします。

まずデザインテンプレート（8種類）からページの雰囲気を選びます。 食品なら「王道」、ギフトなら「プレミアム」、家電なら「テック」など、カードに書かれたジャンルが目安です。

デザインを選ぶと、その下のカラー（8色）がおすすめの色に自動で切り替わります。 そこから好きな色に変えてもOK。たとえば「和の老舗×ピンク」のような組み合わせも作れます。

商品名はページの見出しに、キャッチコピーはその下の一文になります。 入力すると右のプレビューにリアルタイムで反映されます。

商品画像URLには、楽天RMSの「店舗設定」→画像・動画登録（R-Cabinet）にアップした画像のURL （https://image.rakuten.co.jp/… など）を貼り付けます。画像を追加ボタンで何枚でも増やせます。

商品説明文（詳細）には商品の魅力を自由に書きます。 空行（1行あける）ごとに段落として整形され、段落1つずつが並び替えできるブロックになります。

特徴ポイント（最大5個）は、「POINT 01」の番号バッジ付きで特徴を目立たせる欄です。 見出しと説明文を入れるだけで、デザインに合わせた色付きの枠で表示されます。

商品スペック表には、サイズ・素材・内容量などを「項目名＋内容」のペアで入力します。 行を追加で何行でも増やせて、きれいな表として出力されます。

ご案内・ギフト対応などには、ラッピングや発送目安などの案内を書きます。 デザインに合わせた色付きの枠で、ページの締めくくりとして表示されます。

右側のプレビューに、実際の商品ページと同じ見た目が表示されます。 入力を変えるたびに自動で更新されるので、生成ボタンを押す必要はありません。

プレビュー上部のカウンタで文字数（半角換算）を確認できます。 楽天の上限は全角5,120文字（半角10,240文字）で、HTMLタグ部分も文字数に含まれます。超えると赤く警告されます。

プレビューの各ブロックにマウスを乗せると、赤い枠と「⋮ 画像1 ▲▼」のようなハンドルが表示されます。 ブロックをつかんでドラッグするか、▲▼ボタンを押すと並び順を変えられます。

「画像→説明文→画像→説明文」と交互に並べたり、スペック表を上に持ってきたりと、構成は自由自在。 並び順はコピーされるHTMLにもそのまま反映されます。

プレビュー上部の「PC用」「スマホ用（RMS対応タグのみ）」タブで出力を切り替えます。 タブを選んだ状態で「HTMLをコピー」ボタンを押すと、そのHTMLがコピーされます。

「HTMLコード」表示に切り替えると、生成されたHTMLの中身を直接確認することもできます。

楽天RMSの商品編集画面を開き、コピーしたHTMLをそれぞれ次の欄に貼り付けて保存します。

・「スマホ用」タブのHTML → スマートフォン用商品説明文
・「PC用」タブのHTML → PC用商品説明文（またはPC用販売説明文）

保存後、実際の商品ページをスマホとPCで開いて、表示を確認すれば完了です。