スマホページのヘッダーについて

Question

お世話になっております。

下記の参考サイトのように
https://item.rakuten.co.jp/radica/m7001-c203/
ページを縦にスクロールしてもついてくるページはメリットデメリットどのようなことが想定されますでしょうか？

添付のキャプチャーの部分です

また、こちらの参考サイトと全く同じ（色を変える程度）枠で実装する際はどのようなステップでの作業が必要になりますでしょうか？

ご確認ください、よろしくお願いいたします。###HR######IMG0a0005bde18d862c57dcbd0efde9a50f4.jpegIMG0###

Answer

ECマスターズの田辺です。

> ページを縦にスクロールしてもついてくるページはメリットデメリットどのようなことが想定されますでしょうか？

メリットは、
参考サイトのように
「SALE会場」や「COOLアイテム」など
お客様がショップ内を回遊しやすい動線をつくることで、
ついで買いなどの確率が上がることが考えられます。

デメリットは、
スマホ画面は限られたスペースとなりますので
人によってはメニューがついてくることで
ページを狭く感じ、
商品が見づらいと感じる方もいらっしゃいます。

どちらが良いかは正解がございませんので
実際に試していただきbanliさんのショップで効果があるかどうか
試していただければと思います。

いきなり手の込んだメニューを設置するのが大変な場合は、
特設ページやカテゴリを１つか２つ
バナー設置君で簡単に設置していただいて、
実際に回遊率が上がってから試してみるのもおすすめです。
https://manual.ec-masters.net/index.php?ecm-tools-manual-banarsetti


> また、こちらの参考サイトと全く同じ（色を変える程度）枠で実装する際はどのようなステップでの作業が必要になりますでしょうか？

※RMSの、禁止タグを入力できるバグを利用する方法ですので、
　今後、RMSの改修により、使用できなくなる可能性があります。

まず、メニューとなるHTMLを作成していただき、
GOLDにアップロードをお願いいたします。

次に商品ページ共通パーツ設定に
以下の記述を加えてください。
===== この下の行から ============


iframe#spFloatHeader {
display: block;
position: fixed;
left: 0;
top: 0;
z-index: 2;
width: 100%;
}
#rstTopSearch, #ipnsh-header {
position: relative;
z-index: 3;
background-color: white;
}

===== この上の行まで ============
※HTMLファイルのURLは、実際のURLにご変更ください。


なお、参考サイトは
スマートフォン用ページの共通ヘッダ部分を
独自のフローティングヘッダーで隠す、下にずらすなど
ガイドライン違反に該当しております。

----

楽天市場が提供する共通コンテンツを隠す、または変更する行為を新たに禁止行為に追加します。
楽天市場では、ユーザの利便性を鑑み、全店舗様共通のヘッダーやフッターを提供しております。
ユーザにとって、より使いやすく、より楽しくお買い物をしていただくために、ご協力をお願いいたします。

[重要]取扱禁止商材・禁止行為ガイドライン改定について
https://mainmenu.rms.rakuten.co.jp/auth/index.phtml?params=info_b/20170202-01.html&s=&param2=2

2-（9）-31当社が全店舗に提供している共通コンテンツを隠す行為を禁止行為に新規指定

　［禁止行為］
　以下のような、当社が全店舗に提供している共通コンテンツの一部もしくは全部を隠す、または変更する行為
　・「http://www.rakuten.co.jp/」または「http://item.rakuten.co.jp/」で始まるページにおける共通ヘッダ部分
　（※GOLDページはこれに該当しません）

----

そのため、
ご案内した記述ではガイドライン違反に該当しないように

#rstTopSearch, #ipnsh-header {
position: relative;
z-index: 3;
background-color: white;
}

によって共通ヘッダより下にスクロールすると
メニューが現れる仕組みになっております。