楽天でフローティングバナーを設置する方法｜PC・スマホ別の手順と注意点

楽天市場の店舗にフローティングバナー（スクロールに追従する固定バナー）を出したいときは、RMSの「店舗設定＞デザイン設定＞ヘッダー・フッター・レフトナビ」にHTMLとCSSを貼り付けて設置します。PC版とスマホ版で手順・置き場所が違い、スマホ版は楽天特有の制約（禁止タグ）を回避する工夫が要ります。この記事は、楽天に出店する店舗運営者・ページ制作担当向けに、①フローティングバナーの仕組みとメリット、②PC版とスマホ版の設置手順、③ペナルティを避ける注意点、を実務目線で整理します。

フローティングバナー（追従バナー）とは

フローティングバナーは、ページをスクロールしても画面の決まった位置に留まり続けるバナーです。「追従バナー」「固定バナー」とも呼ばれます。常に視界に入るため、クーポン・特集・LINE登録などへの導線として使われます。

「入り口（商品ページ）と出口（買い物かご）の間で、ついで買いの導線を増やす」のが基本の考え方です。ただし常時表示だからこそ、大きすぎると本文の邪魔になります（後述）。

設置前に知っておく楽天の制約

楽天のページは自由なHTMLが書ける一方、スマホ版では使えるタグ・CSSに制限があり、PC版とは仕組みが異なります。ここを理解しないと「PCでは出るがスマホで出ない」という事故になります。

• PC版は比較的自由で、position: fixed; right: 0; のようなCSSで左右端に固定できます。
• スマホ版は楽天が一部のタグ（style・script等）を弾くため、そのまま貼っても効かないことがあります。GOLD（無料のFTPスペース）にファイルを置き、タグを工夫して読み込ませるのが定番です。
• 楽天の仕様変更でこれらの手法が使えなくなることがあります。設置後は実機で表示を確認し、定期的に見直してください。

GOLDは楽天が提供する店舗用のWebスペースで、CSSや画像を置いてRMSのページから読み込む用途に使います。RMS内の文字数制限を超えるコードや、共通で使い回すCSSはGOLD側に逃がすのが基本です。

PC版フローティングバナーの設置手順

PC版は、RMSのデザイン設定にHTMLとCSSを貼り付けるだけで設置できます。

1. RMSにログインする
2. 店舗設定→デザイン設定→ヘッダー・フッター・レフトナビを開く
3. 編集するテンプレート（ヘッダーコンテンツ等・文字数に余裕のある場所）を選ぶ
4. バナー画像の<img>タグと、固定表示用のCSS（<style>内にposition: fixed）を貼り付ける
5. 保存し、店舗ページを開いてスクロールしても追従するか確認する

位置やタイプによって貼るコードが変わります。用途に合わせて選びます。

貼り付ける場所は「文字数に余裕のあるテンプレート」を選びます。ヘッダー・フッター・レフトナビには文字数の上限があり、超えると保存できないためです。長いCSSはGOLDに逃がすと安全です。

スマホ版（追従バナー）の設置手順と現実

スマホは楽天市場の売上の主戦場ですが、スマホ用のRMS欄は使えるHTMLタグが限定されているため、PCと同じようには固定できません。ここは正確に押さえてください。

スマホ用の共通説明文などで一般に使えるのは、<a> <img> <table> <tr> <td> <br> <p> <font> <b> <center> <hr> といった限られたタグです。<div>・style属性・position: fixed は使えない、または楽天側で削除されることがあり、標準のRMS欄だけで「本当の追従（固定）」を実現するのは難しいのが実情です。

そのうえで、現実的な選択肢は次の3つです。

「どうしても画面追従させたい」場合は②のGOLD独立ページが軸になりますが、まずは①の通常バナーで導線を作り、効果を見てから固定表示に踏み込むのが安全です。ネット上にはstyleタグに全角スペースや=""を混ぜて制約を回避する裏技も出回っていますが、楽天公式の推奨ではなく、仕様変更で無効化・表示崩れのリスクがあるため、実機確認を前提に慎重に扱ってください。

スマホは「アプリ」と「Webブラウザ」で見え方が違う

見落としやすいのが、スマホには楽天市場アプリとスマホWebブラウザの2経路があり、店舗が設定したバナーが同じように表示されるとは限らない点です。アプリではHTMLが変換されたり、楽天側の購入UIがバナーに重なったりします。スマホ施策は最低でも iPhone Safari・Android Chrome・楽天市場アプリ の3つで表示を確認してください。追従バナーは画面下部に薄く置き、閉じるボタン（×）で本文を隠さない配慮も必須です。

邪魔しない・ペナルティを避ける注意点

フローティングバナーは常時表示だからこそ、置き方を誤ると回遊を妨げたり、規約に触れたりします。

とくに購入ボタンへの重なりはペナルティ対象になり得るため、商品ページでの表示位置は必ず実機で確認してください。「クリックさせたい」あまりに本文の可読性を犠牲にすると、かえって離脱を招きます。

コードを書くのが難しいときの選択肢

HTMLやCSSに不慣れな場合、無理に自作すると表示崩れや規約違反のリスクがあります。次の選択肢があります。

• 制作会社・運営代行に依頼する：楽天ページ制作に慣れた事業者に、設置とメンテナンスを任せる。
• バナー管理ツールを使う：バナーの差し替えや期間切替を管理画面から行えるツールを使い、コードの手作業を減らす。
• まずはPC版だけ試す：制約の少ないPC版で追従バナーを試し、効果を確かめてからスマホ版に広げる。

いずれの場合も、「買い物かごに重ねない」「サイズを抑える」「実機で確認する」という原則は変わりません。

FAQ

フローティングバナーはどこに設置しますか？

PC版はRMSの店舗設定→デザイン設定→ヘッダー・フッター・レフトナビに、スマホ版はデザイン設定（スマートフォン）のスマートフォン用トップページ／カテゴリページに設置します。長いCSSや画像はGOLDに置いて読み込みます。

スマホで追従バナーが表示されません。

楽天スマホ版はstyleなどのタグが弾かれることがあります。GOLD経由でCSSを読み込む、タグのすり抜け（全角スペースや=""）を使うなどの対処がありますが、いずれも公式推奨ではないため実機確認が必須です。仕様変更で急に表示されなくなることもあります。

バナーを設置するとペナルティになりますか？

バナー自体は問題ありませんが、商品詳細ページの買い物かごボタンに重ねて設置するとペナルティの可能性があります。購入導線を隠さない位置・サイズにしてください。

バナーの大きさの目安は？

PCの縦帯なら横幅100px前後が目安です。マウスオーバーで開くタイプはそれより大きくても構いませんが、通常表示時は本文や商品画像に被らないサイズにします。

まとめ

楽天のフローティングバナーは、PC版はRMSの「ヘッダー・フッター・レフトナビ」にHTML/CSSを貼るだけで設置でき、スマホ版はGOLDと禁止タグ回避を組み合わせて画面下部に固定するのが定番です。効果を出す鍵は「常時表示で導線を増やす」一方で「買い物かごに重ねない・サイズを抑える・閉じられるようにする」こと。楽天の仕様は変わるため、設置後は必ず実機で表示を確認し、定期的に点検してください。