楽天の商品説明HTMLをプレビューしながら編集する方法｜PC・スマホの表示を確かめる

楽天の商品説明HTMLはRMSのプレビューで確認し、登録後は[商品ページを見る（PC）]から開いて、Chromeのデバイスモードとスマホ実機でも表示を確かめます。 PC用商品説明文・スマホ用商品説明文・PC用販売説明文を取り違えず、閉じタグ・画像の幅・リンクを点検してから登録します。

3つの説明文の違い

編集前には説明文の入力欄を特定し、PC用とスマホ用で同じHTMLを使えると判断せずに確認します。

説明文の種類	表示される場所	使えるタグ	文字数の上限
PC用商品説明文	PC商品ページの商品説明欄	対象欄の案内と登録時の判定で確認	公開デモでは5,120文字、半角10,240文字以内
スマートフォン用商品説明文	スマホ商品ページの商品説明欄	参考例にtable、tr、td、font、a、img、bなど	10,240byte
PC用販売説明文	PC商品ページの販売説明欄	対象欄の案内と登録時の判定で確認	公開デモでは5,120文字、半角10,240文字以内

既存の特徴的な文章を手掛かりに、入力欄と商品ページの表示箇所を照合すると、取り違えを防げます。

PC用の数値は公開デモの表記であり、実際の画面と異なる場合があります。 スマホ用の10,240byteは10,240文字と読み替えず、HTML全体を入力して、対象欄の文字数表示と登録時の判定を確認してください。

楽天の商品説明HTMLをプレビューする方法

方法	主に確かめること	確認できないこと・注意点
RMSのプレビュー	対象商品の説明文が、確認画面でどう表示されるか	未保存の変更が反映されているか、変更箇所を照合する
登録後の商品ページ	購入者が見る説明文・画像・リンク	PCとスマホの両方で、変更箇所と末尾を確認する
手元のエディタとブラウザ	タグの対応、文章、画像、表の組み立て	楽天独自の登録条件に適合するかは判定できない
Chromeのデバイスモード	狭い画面でのはみ出し、文字、画像の読みやすさ	実際のスマホや楽天市場アプリを完全には再現しない

RMSで商品説明HTMLを編集する手順

説明文は[ページデザイン]タブで設定します。公式のシングルSKU新規登録手順では「STEP6-1 ページデザインを設定する（説明文）」に当たります。

1. RMSの「店舗設定 → 1 商品管理 → [商品一覧・登録]」へ進みます。
2. 対象商品の編集画面を開き、商品管理番号を照合します。
3. [ページデザイン]タブで変更する説明文欄を確認し、既存のHTML全体をコピーして保管します。
4. 修正したHTMLを入力し、プレビュー画面で今回変更した文章や画像が表示されているか照合します。
5. 登録時のエラーを確認します。新規登録では「STEP7 登録する」を経て、[商品登録完了]画面が出たら登録完了です。
6. 登録後は[商品ページを見る（PC）]で商品ページを開き、変更箇所と説明文の末尾を確認します。

商品ページURLはitem.rakuten.co.jp/店舗URL/商品管理番号/の形です。開いたページのアドレスバーでも確認できます。

手元のエディタでHTMLを編集する手順

1. PC用・スマホ用・販売説明文を、それぞれ別の原稿として管理します。
2. 編集用コピーを作り、文章や画像など、変更する範囲を絞ります。
3. 確認用のHTMLファイルに説明文を入れ、.html形式で保存します。
4. Chromeで開き、修正するたびに保存して再読み込みします。
5. 表示が整った原稿を、対応するRMSの入力欄へ移します。

確認用ファイルのテンプレートは、次の各行を番号なしで順に入力して作れます。9行目のコメントを説明文HTMLに置き換えてください。

1. <!doctype html>
2. <html lang="ja">
3. <head>
4. <meta charset="utf-8">
5. <meta name="viewport" content="width=device-width, initial-scale=1">
6. <title>商品説明の確認用</title>
7. </head>
8. <body>
9. <!-- ここに確認したい商品説明HTMLを入れる -->
10. </body>
11. </html>

viewportは狭い画面での確認に使う設定です。この枠は手元での確認用なので、RMSへは枠を除いた説明文だけを移します。

このテンプレートを1つ保存しておけば、商品ごとに9行目だけを差し替えて使い回せます。

確認用ファイルだけに画像縮小のCSSを加えると、登録用原稿にある幅の問題を見落とす可能性があります。 また、DevToolsのElements上で直した内容は原稿の保存にならないため、修正をエディタ側にも戻します。

Chromeのデバイスモードでスマホ表示を確認する手順

1. 確認したいページをChromeで開き、右クリックから「検証」を選びます。
2. DevToolsで、スマホとタブレットを表すデバイスツールバーのアイコンを押します。
3. 「Responsive」を選び、表示領域の幅を変更します。
4. 画像・本文・表を読み進め、横へのはみ出しや欠けを探します。
5. 縦向きと横向きを切り替え、リンク先も実際に開いて確認します。

操作	Windows／Linux	Mac
DevToolsを開く	Ctrl + Shift + I	Command + Option + I
デバイスモードを切り替える	Ctrl + Shift + M	Command + Shift + M

Googleの資料には、モバイル向けの確認幅として320px・375px・425pxのプリセットが紹介されています。 これらは確認の出発点であり、楽天の推奨幅や、すべてのスマートフォンでの表示を保証する数値ではありません。

PC用原稿の画面幅を狭めても、別に管理しているスマホ用原稿へ自動的に置き換わるわけではありません。 スマホ用原稿を確認しているかを確かめ、最後は実機でも、商品ページの文章と画像を読み進めてください。

閉じタグの抜けで商品説明が崩れる原因

例えば、次の修正前は</b>が抜けており、太字が意図しない範囲へ続く原因になります。

状態	見出しの行	続く本文の行
修正前	<p><b>お手入れ方法</p>	<p>やわらかい布で拭いてください。</p>
修正後	<p><b>お手入れ方法</b></p>	<p>やわらかい布で拭いてください。</p>

入れ子にした要素は、内側のbから外側のpの順に閉じます。 一方、imgは終了タグを持たない要素なので、閉じタグを一律に追加する方法では修正できません。

ブラウザは誤ったHTMLを補って表示するため、見た目が整っていても、原稿が正しいとは限りません。 崩れた位置だけでなく、その直前に変更したタグや引用符まで戻り、変更前の原稿と比較してください。

商品画像の幅指定と文字の読みやすさ

商品画像の収まりと、縮小後の文字の読みやすさを別々に確認します。

楽天公式のスマホ用参考HTMLでも、そのまま貼る前に点検が必要です。サンプル1の表はwidth="300"の固定幅で、文字装飾の閉じタグにも</fon>という誤記があります。</font>へ直し、幅が画面内に収まるか確認します。

画像を表示領域に合わせる記述としては、width="100%"が登場します。 一方、一般的なHTML仕様ではimgの幅属性は整数とされ、参考例と標準仕様で書き方が異なります。

このため、一般的な構文検査だけで登録可否を決めず、対象欄の案内とRMSでの表示確認を優先してください。

症状	最初に見る箇所	見直す方向
画像の右端が切れる	画像と親の表にある幅指定	幅指定の関係を見直す
横スクロールが出る	固定幅の画像や表	狭い画面でも収まる構成にする
画像内の文字が小さい	縮小後の画像	画像内の情報量や文字の大きさを見直す
画像が表示されない	srcの値と画像URL	正しい画像の参照先へ修正する

画像サイズの上限と表示幅の違い

RMSのマニュアルでは、R-Cabinetに登録できる画像は1枚2MBまで、横3840×縦3840ピクセルまでと案内されています。 この画像サイズは画像ファイル自体の条件で、説明文HTMLのwidthで指定する表示幅とは別のものです。 大きな画像をwidthで小さく表示しても、ファイルの重さは変わりません。表示幅とは別に、登録前の画像の大きさも確認します。

必要に応じてaltも点検し、商品写真が伝える特徴や、画像リンクの移動先が分かる内容に整えます。 代替テキストを付けても、画像内の小さな文字自体が読みやすくなるわけではない点には注意が必要です。

表がスマホ画面からはみ出す場合の直し方

スマホで読みにくい表は、幅の指定だけを変更する前に、列数とセルへ入れる情報量を見直します。

1. 表全体と各セルにある幅指定を調べ、固定幅の指定を探します。
2. 比較が必要な項目だけを残し、長い注意書きは表の外へ移します。
3. 内容ごとに表を分け、見出しと数値の対応を確認します。
4. 狭い表示幅で読み直し、文字の欠けや不自然な改行を点検します。

公式サンプルでは、余白用セルも含めて列数を数えます。見出しを表全体に広げるなら、colspanをその列数に合わせます。

公式サンプル	見出しの指定	実際の列数	点検・修正
9 カテゴリ2列4段	colspan="2"	余白込み3列	全幅の見出しならcolspan="3"にする
11 商品陳列2列1段	colspan="3"	余白込み5列	全幅の見出しならcolspan="5"にする
12 商品陳列3列1段	colspan="5"	余白込み5列	列数は一致。列を増減したら再点検する

公式サンプルでも、閉じタグや列数を点検せずに貼ると崩れることがあります。修正後は狭い画面で見直してください。

「許可されていないURL」のエラーを直す方法

楽天市場では、店舗ページなどへの楽天市場以外のURLの記載が原則として禁止されているため、確認が必要です。 例外として認められたサイトへのリンクには、楽天が発行する専用のURLを使う必要があります。

特に、shop.r10s.jpの画像URLは楽天市場内のURLですが、R-Storefrontでは利用できません。 商品説明文に画像を表示する場合は、image.rakuten.co.jpの画像URLを使用するよう案内されています。

確認順	確認するもの	点検内容
1	エラーメッセージ	全文と対象の入力欄を記録する
2	href	外部リンクの有無と、許可された専用URLかを確認する
3	src	使用できる画像URLか、貼り付け先を確認する
4	引用符と空白	値の閉じ忘れや、コピー時の混入を調べる
5	変更前後の差分	今回追加・変更したURLから順に照合する

メーカー公式サイトであっても、公式であることだけを理由に、商品説明文へ掲載できるとは判断できません。 URLの一部を書き換えて検査を避けず、掲載条件や申請の案内をRMSの管理画面で確認してください。

保存前に確かめること

確認	チェック項目	合格の目安
□	対象商品と入力欄	商品管理番号と説明文の種類が合っている
□	変更前のHTML	元へ戻せる原稿が残っている
□	閉じタグと引用符	抜けや順序の誤りがない
□	画像URLと表示順	正しい画像が意図した順番で表示される
□	画像と表の幅	狭い画面で切れず、横にはみ出さない
□	本文と画像内の文字	縮小された状態でも説明を読める
□	リンク	許可条件に合い、意図したページへ移動する
□	文字数・byte数	対象欄の上限と入力判定に適合している
□	商品情報の整合性	PC用とスマホ用で仕様や注意事項が一致する
□	プレビュー	今回変更した内容と、説明文の末尾を確認できる

よくある質問（FAQ）

Q1 手元のHTMLが正常なら、そのままRMSへ登録できますか？

ブラウザで表示できても、楽天独自の許可タグ・属性・URLの条件を満たしているとは限りません。 対象欄の案内と保存時の判定を確認し、登録後の商品ページでも、文章や画像の表示を点検してください。

Q2 Chromeのスマホ表示だけで確認を終えてもよいですか？

デバイスモードは実際のモバイル端末の近似なので、表示幅の確認後に、スマートフォン実機でも確かめます。 楽天市場アプリでの表示も確認対象にする場合は、ブラウザの確認とは別に、アプリ自体で開いてください。

Q3 スマホ用商品説明文の上限は何文字ですか？

スマートフォン用商品説明文の上限は10,240byteであり、そのまま同じ文字数として扱うことはできません。 本文の文字数だけで判断せず、HTML全体を対象欄へ入力した状態で、文字数表示や登録時の判定を確認します。

Q4 楽天市場内の画像URLでもエラーになりますか？

shop.r10s.jpは楽天市場内の画像URLですが、R-Storefrontでは利用できないと案内されています。 商品説明文ではimage.rakuten.co.jpの画像URLを使い、画像の参照先も含めて確認してください。

Q5 HTMLの表示崩れを楽天のサポートに直してもらえますか？

HTMLタグはRMSコールセンターのサポート対象外で、端末やOSなどに応じた個別の表示保証もありません。 表示崩れは原稿とブラウザで切り分け、登録条件の不明点は、対象欄とエラー内容を整理して確認してください。