スマホのサイトのフッタメニュー

Question

お世話になっております。


公開コンサルティングでよく例にあがってる
イーザッカマニアストアーズさんのような
常に表示させるメニューバナーをしたいと考えております。

https://item.rakuten.co.jp/e-zakkamania/32537-1900442/


恐れ入りますがアドバイスよろしくお願いします。###HR######IMG02d65c94b30c59f88e6d1ca5c8bbee3a5.jpegIMG0###

Answer

ECマスターズの田中です。

こちら、カテゴリどおり
楽天市場におけるご相談ということで
よろしいでしょうか。

いただいたスクリーンショットは
イーザッカさんの自社サイトのものですが、

楽天市場の商品ページの場合、
「商品をかごに追加」「購入手続きへ」の
商品購入に必要な２つのボタンや、
「ショップへ相談」「上へ」「クーポン」のような
楽天市場によるボタンが
すでに所狭しと設置されております。

実際に、いただいたイーザッカさんの商品ページURLを
スマートフォンで閲覧していただくと、
フッタメニューは配置されていないことが
おわかりいただけます。

まずは一度、フッタメニューを設置されるかどうか、
再度ご検討いただきますようお願いいたします。###HR######IMG046cae251793f7e20ddc7e8f0c49c8096.jpegIMG0######BR###

Answer

お世話になっております。


楽天市場内では
添付画像のような表現は無理なのでしょうか？

Answer

別のサイトですがこんな感じです。

https://item.rakuten.co.jp/dondon/tnk004/

スクロールしたらヘッダにメニュが出る。

Answer

ECマスターズの田中です。

フッターではなく、ヘッダーでしたら可能です。

ヘッダーとして設置したい内容を
スマートフォン用の商品ページ共通説明文にご設置の上、
その上下に、下記の形式になるよう
HTMLタグを追記していただければ結構です。

= この下の行から ====================

ヘッダーとして設置したい内容


#spFloatHeader {
display: block;
position: fixed;
left: 0;
top: 0;
z-index: 2;
width: 100%;
}
#rstTopSearch, #ipnsh-header, #topFuncShopPopup {
position: relative;
z-index: 3;
background-color: white;
}

= この上の行まで ====================
※ヘッダーとして設置したい内容は、実際のHTMLタグに置き換えてご利用ください。

２つ目にいただいた商品ページのヘッダーとは
動作の仕組みが異なりますが、
ガイドラインの禁止行為に触れない範囲で、
画面上部に常に表示させることができます。

divタグをiframeタグに差し替えて、
GOLDのページをヘッダーとして埋め込むことも可能です。

不明な点がございましたら、返信にてお知らせください。

Answer

お世話になります。

＞※ヘッダーとして設置したい内容は、実際のHTMLタグに置き換えてご利用ください。

こちらのページのようにしたいのですが、
実際のHTMLタグに置き換えとはどのようにすればよいのでしょうか？

https://www.rakuten.co.jp/ace-store/?iasid=07rpp_10095___dz-k5rl8q48-4nh-db9c869c-16d7-4f58-ae52-7cc35df1a8e7


よろしくお願いします。###HR######IMG093d421257f13ec249d012eebc1435f86.pngIMG0######BR###

Answer

お世話になっております。


公開コンサルティングでのＰＣ・アプリ・スマホを
比較して対策を行っているのですが、スマホがアクセスを
集めれているのに購入までつながっていないのでヘッダー
設置が必要と考えました。

アクセス（比率）　　
ＰＣ21％　　　
アプリ 36％
スマホ 43％

転換率
ＰＣ6.64％　　　
アプリ 8.81％
スマホ 2.89％

Answer

ECマスターズの田中です。

ヘッダーの設置方法につきまして、
内容をまとめて、改めてご返信いたしますので
今しばらくお待ちいただきますようお願いします。

Answer

ECマスターズの田中です。

> 実際のHTMLタグに置き換えとはどのようにすればよいのでしょうか？

普段、商品説明文を作成いただいているように、
表示する部分のためのHTMLタグを作成していただく必要がございます。

まずは、
https://www.rakuten.co.jp/ace-store/?force-site=ipn
上記ページの余白を右クリック→「ページのソースを表示」などの方法で
ソースをご確認ください。

このソースが、現在ご覧いただいているページを構成する仕組みとなっており、
その中に含まれる

から

より３行上までの内容が、
ご希望のヘッダーを設置するためのタグとなっております。

このような内容で「実際のHTMLタグ」を作成していただき、
私よりご案内差し上げた「ヘッダーとして設置したい内容」と
差し替えていただく必要がございます。

商品説明文の作成と比べると、
画面上に固定する、メニューボタンの動作を実装する、など
スタイルシートやJavaScriptをフルに活用して
HTMLタグを作成していただく必要がございます。

どうしても難しい、という場合は
ソースに含まれるCSS・JS・画像ファイルを
ご自身のショップのGOLDやR-Cabinetにご用意いただき、
URLをご自身のショップのものに書き換えることでも導入は可能です。

ご自身で設置される場合は、
まず、ヘッダーとして設置される内容を
・横に並べる場合、何列表示にするか
・表示する内容（画像もしくは文字）
・リンク先URL
といった形でご用意ください。
その上で、HTMLタグ作成の上で不明な点がございましたら（何もわからない場合も含め）
返信にてお知らせいただきますようお願いします。

Answer

お世話になっております。

早々のご対応ありがとうございます。

下記の通り表示したいと思っています。

よろしくお願いいたします。

・横に並べる場合、何列表示にするか

横 5列
・表示する内容（画像もしくは文字）
・リンク先URL

左から1番目
https://www.rakuten.ne.jp/gold/auc-craftparts/sumaho-head/head1.jpg
https://item.rakuten.co.jp/auc-craftparts/c/0000000101/

左から2番目
https://www.rakuten.ne.jp/gold/auc-craftparts/sumaho-head/head2.jpg
https://item.rakuten.co.jp/auc-craftparts/c/0000000143/


左から3番目
https://www.rakuten.ne.jp/gold/auc-craftparts/sumaho-head/head3.jpg
https://item.rakuten.co.jp/auc-craftparts/c/0000000124/


左から4番目
https://www.rakuten.ne.jp/gold/auc-craftparts/sumaho-head/head4.jpg
https://item.rakuten.co.jp/auc-craftparts/c/0000000127/

左から5番目
https://www.rakuten.ne.jp/gold/auc-craftparts/sumaho-head/head5.jpg
https://item.rakuten.co.jp/auc-craftparts/c/0000000147/

Answer

ECマスターズの田中です。

それでは、私よりご案内差し上げたタグの
「ヘッダーとして設置したい内容」
の部分に、
タグとタグで、リンク付きバナーをお並べください。

いただいた１枚目の場合は





となり、これを残り４枚分並べる形になります。

並べ終わりましたら、私よりご案内差し上げたタグの
display: block;
を
display: flex;
にご変更いただき、
説明文にご記載いただくことで、
ヘッダーとして並べていただくことができます。

実際に商品ページ共通説明文にご記載いただく前に、
任意の商品のスマートフォン用商品説明文にご記載いただき、
事前に見た目をご確認いただきますようお願いします。

Answer

お世話になっております。


早々のご返信ありがとうございます。


設置することができました。


設置後のスマホの転換率推移をみていきます。