初心者OKスマートフォン用商品説明文テーブルデザイン【楽天RMS】

初心者にもできる！楽天市場【楽天RMS】HTMLデザイン設定

商品ページデザイン設定には楽天GOLDとは異なるHTMLタグの制限が有ります。自由度の高い楽天GOLDと異なり、cssやjavaによりサイトを装飾して賑わいを作ることが出来ません。

楽天RMSデザイン設定R-StorefrontにおけるHTMLタグは、セキュリティの向上を考慮する為、年々使用できるHTMLタグの制限が厳しくなりました。改変されるたびにエラー部分に修正をかけるのはサイト構築知識が無い初心者さんや、出店したばかりの店舗運営者さんには大きな負担ですね、
今回は最低限のHTMLタグのみを使ってモバイルファーストの商品ページ装飾・楽天市場【楽天RMS】商品ページデザイン設定をご紹介します。

【楽天RMS】スマートフォンデザイン設定

スマートフォン用入力項目で利用できるHTMLタグは楽天市場【楽天RMS】デザイン設定R-Storefrontで説明されており、

スマートフォンで使えるタグは上記の範囲で設定されています。
そしてスマートフォン・モバイル・医薬品以外の入力項目のHTMLレベルについては、レベル0～3の段階に分け、該当する場所ごとに「利用できない」HTMLタグが異なります。

楽天市場【楽天RMS】のスマートフォン・モバイルで使用できないstyleやdiv,link等は上記レベルでいうと1と2の間位にあたり、かなり使えるタグが限られます。

こんなのも楽天市場【楽天RMS】デザイン設定ではＮＧ

参考に、サンプルで楽天市場【楽天RMS】内に商品ページ等を作り置きしている場合【img src=””】という感じの画像未配置の箇所があると『””』だけでもNGになります。ちなみに『””』のNGは間に何か文字を入れるだけでNGを回避出来ます。
【例　<Img Src=” ” width=”100%”>　””の間に半角スペースを挟むだけ】

離脱率を下げる！【楽天RMS】スマートフォンデザイン設定

お客様が読み易い商品ページ構成にするのであればサイズ表記は画像またはテーブルなどの可読性の高い物がおススメです。画像を作成する場合、後で修正をかけたい時に画像の作り直しをしなくてはならないので、画像で表記をしたくない方にはHTMLテーブルでのサイズ表示がおススメ。
ただし楽天市場【楽天RMS】HTMLタグは制限があるため、cssは使用せずかなりシンプルなHTMLのみ使用したテーブルデザインであれば設置可能です。

 

【コピペOK】超簡単【楽天RMS】スマートフォン用商品説明文に使えるtableデザイン

色～colorや横幅widthサイズはお好みに合わせて指定を変更してくださいね。
項目の追加はth、tdの増設で対応してください。

基本のサイズデーブルHTMLデザイン

ソースコードがこちら。※テーブルカラーは仮で記述してます、任意で変更してください。

<!-- 楽天RMS　スマートフォン用商品説明文に使えるtableデザイン1-->
<table width="100%" border="1" bordercolor="#f5f5f5" cellspacing="0" cellpadding="3" bgcolor="#FFFFFF" >
<!--枠線の色変更はbordercolorの指定で-->
<tr bgcolor="#f0f8ff">
<!--行の頭thの色変更はbgcolorの指定で-->

<th></th>

<th>M</th>
<th>L</th>
<th>XL</th>

</tr>

<tr>
<th>肩幅</th>
<td align="center">内容</td>
<td align="center">内容</td>
<td align="center">内容</td>
</tr>

<tr>
<th>身幅</th>
<td align="center">内容</td>
<td align="center">内容</td>
<td align="center">内容</td>
</tr>


<tr>
<th>着丈</th>
<td align="center">内容</td>
<td align="center">内容</td>
<td align="center">内容</td>
</tr>

<tr>
<th>袖丈</th>
<td align="center">内容</td>
<td align="center">内容</td>
<td align="center">内容</td>
</tr>


<tr>
<th>袖口</th>
<td align="center">内容</td>
<td align="center">内容</td>
<td align="center">内容</td>
</tr>

<tr>
<th>裾幅</th>
<td align="center">内容</td>
<td align="center">内容</td>
<td align="center">内容</td>
</tr>



</table>

文章コメントが書けるHTMLテーブルデザイン

サイズテーブルの下に混用率や注意書きが可能なHTMLテーブルデザインです。
項目が増えたらcolspan=”※ここに項目数”で変更してください。

ソースコードがこちら。※テーブルカラーは仮で記述してます、任意で変更してください。

<!-- 楽天RMS　スマートフォン用商品説明文に使えるtableデザイン2-->
<table width="100%" border="1" bordercolor="#f5f5f5" cellspacing="0" cellpadding="3" bgcolor="#FFFFFF" >
<!--枠線の色変更はbordercolorの指定で-->
<tr bgcolor="#f0f8ff">
<!--行の頭thの色変更はbgcolorの指定で-->

<th></th>

<th>M</th>
<th>L</th>
<th>XL</th>

</tr>

<tr>
<th>肩幅</th>
<td align="center">内容</td>
<td align="center">内容</td>
<td align="center">内容</td>
</tr>

<tr>
<th>身幅</th>
<td align="center">内容</td>
<td align="center">内容</td>
<td align="center">内容</td>
</tr>


<tr>
<th>着丈</th>
<td align="center">内容</td>
<td align="center">内容</td>
<td align="center">内容</td>
</tr>

<tr>
<th>袖丈</th>
<td align="center">内容</td>
<td align="center">内容</td>
<td align="center">内容</td>
</tr>

<tr>
<th>袖口</th>
<td align="center">内容</td>
<td align="center">内容</td>
<td align="center">内容</td>
</tr>

<tr>
<th>裾幅</th>
<td align="center">内容</td>
<td align="center">内容</td>
<td align="center">内容</td>
</tr>

<tr>
<th>項目A</th>
<td colspan="3">
文章ここに
</td>
</tr>

<tr>
<th>項目B</th>
<td colspan="3">
文章ここに
</td>
</tr>

<tr>
<th>項目C</th>
<td colspan="3">
文章ここに
</td>
</tr>

</table>

【楽天RMS】スマートフォン用商品説明文に使えるtableデザイン　まとめ

既存商品ページをコピーして倉庫指定のまま上記のテーブルは配置してみてどのようになるか試してみてくださいね！テキストでサイズをつらつらと商品説明文に書くよりもずっと見栄えがよくなりますよ！

たまにサイズ表がどこに書いてあるのか分からなくてしばらくページ内で迷子になるお店もあるので是非見やすい商品ページに改善してページ離脱率軽減を意識してみてくださいね。

管理人が運営するショップではサイズがみやすくて助かった！というショップレビューを頂いたこともあります。