商品ページから転換率UPの楽天RMSヘッダーHTMLコンテンツ
![楽天RMS 楽天rms 楽天市場rms 楽天市場 楽天RMS編集 楽天RMSデザイン 楽天RMSヘッダー 楽天RMSヘッダーデザイン 楽天RMS装飾 楽天RMSカスタム 楽天RMSデザインカスタム](https://jhbrablog.com/wp-content/uploads/2021/08/20210801_003414_0000-1024x597.png)
楽天市場出店店舗さんの悩み、売上を上げたい、転換率を上げたい、ショップ内回遊率を上げて客単価をUpさせたい。こんな時にお勧めなのは楽天RMSPCデザイン設定から楽天ヘッダーHTMLコンテンツに目玉商品を配置して常にお客様が流入してくる商品ページのファーストビューにお勧め商品をアピールする!という方法です。
ヘッダーコンテンツにジャンルやセール商品のバナーを配置している店舗さんは多いですが、個別商品のアピールもかなり有効なので是非試してみてください。
![楽天RMS 楽天rms 楽天市場rms 楽天市場 楽天RMS編集 楽天RMSデザイン 楽天RMSヘッダー 楽天RMSヘッダーデザイン 楽天RMS装飾 楽天RMSカスタム 楽天RMSデザインカスタム](https://jhbrablog.com/wp-content/uploads/2021/08/20210801_003415_0002-1024x597.png)
【楽天RMS】ヘッダーHTMLコンテンツ配置前の注意
楽天RMSデザイン設定R-StorefrontにおけるHTMLタグは、セキュリティの向上を考慮する為、年々使用できるHTMLタグの制限が厳しくなりcssやjavaによりサイトを装飾して賑わいを作ることが出来ません。
今回ご紹介するのはサイト構築知識が無い初心者さんや、出店したばかりの店舗運営者さんでも出来る最低限のHTMLタグのみを使った【楽天RMS】PCデザイン設定ヘッダーコンテンツのデザイン装飾です。
【楽天RMS】コピペOK楽天ヘッダーコンテンツに商品テーブル配置
![楽天RMS 楽天rms 楽天市場rms 楽天市場 楽天RMS編集 楽天RMSデザイン 楽天RMSヘッダー 楽天RMSヘッダーデザイン 楽天RMS装飾 楽天RMSカスタム 楽天RMSデザインカスタム](https://jhbrablog.com/wp-content/uploads/2021/08/20210801_003415_0003-1024x597.png)
以下の楽天ヘッダーHTMLは画僧5・7枚用、ヘッダー幅が100%で作って有ります。
楽天RMSのデフォルトヘッダー横幅は確か960px程なので、配置する画像枚数を減らしたり、2段構えでアピールするのもいいですね!画像幅を%で指定しているのでお好みにあわせて指定をかえてくださいね。
【楽天RMS】PC楽天ヘッダーコンテンツ画像5枚用サンプルコード
サンプルがこちら
ソースコードがこちら、コピペOKです。
<!--画像5枚用-->
<table border="0" width="100%" cellpadding="0"">
<tr>
<a href="ここにリンク"><img src="ここに画像" border="0" width="19%"></a>
<a href="ここにリンク"><img src="ここに画像" border="0" width="19%"></a>
<a href="ここにリンク"><img src="ここに画像" border="0" width="19%"></a>
<a href="ここにリンク"><img src="ここに画像" border="0" width="19%"></a>
<a href="ここにリンク"><img src="ここに画像" border="0" width="19%"></a>
</tr></table>
楽天市場 デザイン カスタマイズには今回ご紹介している静的な画像コンテンツ以外にバナーを動的に視覚に訴求できる楽天ヘッダーHTMLコンテンツスライダーもオススメです。賑わいツールとして回遊率アップに貢献してくれるので良ければこちらの記事を参考にどうぞ。
【楽天RMS】PCヘッダーコンテンツ画像7枚用サンプルコード
サンプルがこちら。
横幅100%で枚数分を均等に配分しているので配置する枚数が増えるだけ画像は小さくなります。楽天 ヘッダー HTMLのテンプレートソースコードがこちら。
<!--画像7枚用-->
<table border="0" width="100%" cellpadding="0"">
<tr>
<a href="ここにリンク"><img src="ここに画像" border="0" width="14%"></a>
<a href="ここにリンク"><img src="ここに画像" border="0" width="14%"></a>
<a href="ここにリンク"><img src="ここに画像" border="0" width="14%"></a>
<a href="ここにリンク"><img src="ここに画像" border="0" width="14%"></a>
<a href="ここにリンク"><img src="ここに画像" border="0" width="14%"></a>
<a href="ここにリンク"><img src="ここに画像" border="0" width="14%"></a>
<a href="ここにリンク"><img src="ここに画像" border="0" width="14%"></a>
</tr></table>
ただヘッダーコンテンツに画像を配置するだけではなく、画像にも工夫をするとクリック率も上がります。魅力的なECサイト画像デザインについてはこちらでの記事でご紹介しています。
画像作成はPhotoshopやIllustrator以外にも初心者にも優しく7500万点の素材が無料 なCanvaや、ECサイト向け画像編集&白抜き加工ソフトウェア【ECフォトアシスタント】
、画像管理、RAW現像、高度な画像編集が可能なあらゆるレベルのクリエイターのための写真編集ソフト【Luminar AI】
を使用してクリックしたくなる画像作成をし、静的なヘッダーコンテンツ、動的なスライダーと合わせてアピールするのもオススメです。
【楽天RMS】ヘッダーコンテンツで商品転換率激的UP まとめ
![楽天RMS 楽天rms 楽天市場rms 楽天市場 楽天RMS編集 楽天RMSデザイン 楽天RMSヘッダー 楽天RMSヘッダーデザイン 楽天RMS装飾 楽天RMSカスタム 楽天RMSデザインカスタム](https://jhbrablog.com/wp-content/uploads/2021/08/20210801_003416_0004-1024x597.png)
毎日ショップのアクセス分析とにらめっこをしているとき、ショップのトップページよりも直接商品ページへのアクセスの方が段違いに高い為これを利用できないかな~と思いショップの商品ページを疑似ショップトップページとして魅せるような装飾をしたらいいのではないか?と思い実行してみました。
結果、かなり効果がでたのでおススメします!ヘッダー楽天 ヘッダー HTML以外にもレフトやフッターのエリアが有りますが、効果としてはファーストビューであるヘッダーが今のところ一番手ごたえがあったので是非試してみてくだいね~
![](https://jhbrablog.com/wp-content/uploads/2021/09/20210925_114854_0000.png)
客単価UPは商品ページからの回遊率にあり!