楽天ショップで邪魔しない固定バナーを作る際のポイントと設置方法について

シェアする

楽天ショップで見かける固定バナー。この固定バナーを設置することでどんなメリットがあるのか。
また作成する上での押さえておきたいポイントを踏まえながら設置(設定)するまでの流れを解説します。


楽天ショップで邪魔しない固定バナーを作る際のポイントと設置方法

固定バナーとは?

まずは「固定バナーとはどういったものなのか」簡単にご紹介です。
以下イメージのようにスクロールしてもそのまま残っているバナーのことをいいます。
フローティングバナーとも呼ばれたりします。

固定バナーサンプルイメージ

邪魔しない固定バナーとは?

最近では色んなネットショップで見かけるようになりましたが、カーソルをかざすと「スルスルー」と右から左に出てくるようなバナーになります。
このバナーの良いところは、カーソルをを乗せないかぎりバナーすべてが表示されないのでメインのコンテンツの邪魔になりにくいという点です。

邪魔しない固定バナーサンプル1

邪魔しない固定バナーサンプル2

固定バナーのメリットとは?

一番はユーザーがスクロールしてもコンテンツをアピールできるところにあります。
例えば、ページのボリュームが多いロングページの場合、ヘッダー部分にあるナビゲーションなどは存在自体が弱まりがちです。
ナビゲーションの中でも「これは見てもらいたい」というメニューがあれば、それをピックアップし固定バナーにすることでより目につきやすく見てもらえる可能性が高まります。

また、サンプルページのように「〇〇クーポン」などがあれば購入の後押しになるかもしれません。

固定バナー作成する際のポイント

楽天ショップだけでなく、その他ショップにも共通していえるポイントになるかと思います。

  1. 目立ちすぎない
  2. 大きすぎない
  3. 読みやすくする

ページの主役は商品です。
固定バナーはあくまでも脇役ですからそのことは意識しておきましょう。

固定バナーをデザインする上でのポイント

色見(カラー)

ページ全体の色やヘッダーナビゲーション等の色見と合わせると自然で邪魔になりにくいです。
配色は少なめが良いと思います。2~3色がベター。
アイコンなどを用いてもクリックされやすくなるので効果的です。

大きさ(サイズ)

商品ページの内容や画像にカブらない大きさで作成するようにします。
横幅は100px前後が望ましいと思います。
カーソルをかざすと飛び出すタイプのものは、幅は大きくても問題ありません。

文言(テキストなど)

文言はバナーの大きさにもよりますが、出来るだけすっきり見せるようにデザインします。
文字が読めるようわかりやすくするためです。
その為、あえて伝えたいことを皆まで言わずキャッチコピー等を用意し端的に表現します。

固定バナーの設置方法について

以下の3つを用意します。

  • 固定するバナー
  • html
  • css

サンプル用のHTMLとCSSを用意しました。
コピペでも使えると思うので是非ご参考にしてみてください。

今回サンプル用に用意したバナーのサイズ:幅150×高さ150

サンプルHTML

基本的な押さえておくべきHTML編集箇所

バナーのリンク先を任意のURLに変更。

楽天ショップ固定バナー用html

サンプルCSS

基本的な押さえておくべきCSS編集箇所

以下のイメージが基本的に編集箇所となります。
ちなみに、前述の通り今回サンプルで用意した画像は「幅150×高さ150」となります。

楽天ショップ固定バナー用css1

楽天ショップ固定バナー用css2

楽天ショップ側に設置する場所

RMSトップ画面→PCデザイン設定/共通テンプレート設定/ヘッダー・フッター・レフトナビ→任意のテンプレート編集

ヘッダー・フッター・レフトナビのテンプレート設定


上記で説明した、HTMLとCSSを文字数に余裕がある場所に貼り付けます。
(フッターコンテンツエリアの最下部あたりがベターですかね)

ヘッダー・フッター・レフトナビのテンプレート設定、HTMLタグ挿入エリア


以下のようなイメージです。

フッターエリアに固定バナータグを貼り付けた例

文字数オーバーの場合

もし、文字数がオーバーしてしまったら楽天GOLDを利用しましょう。
CSSファイルを別で作りGOLDのサーバーへアップロードを行います。
アップロード後、ヘッダー・フッター・レフトナビで貼り付けたHTMLタグの前にCSSの読み込みタグを入れます。

最後に

固定バナーのメリットや作る上でのポイント等のお話をさせて頂きました。
使い方次第では、回遊率や売上UPが見込めると思います。
ただ、ネットショップページの主役は商品であり、固定バナーは脇役ということを忘れてはいけません。

そして大事なのは「ユーザーの視界に入り続けても不快にさせない」ことです。

脇役が目立ちすぎると、主役に目がいきづらくなり本来の役割を果たせなくなります。
できるだけ商品を邪魔しない自然な固定バナーを作り、見せたいコンテンツをアピールしていきましょう。

楽天ショップ制作
オリジナルショップ作り

楽天ショップ制作代行

楽天ショップ作成、作り方でお悩みごとはございませんか?
ネットショップ制作等、10年以上の経験やノウハウをもとに、あなたのお店作りのお手伝いをさせて頂きます。お気軽にお問い合わせください。

この記事をお届けした
K Timeの最新ニュース情報を、
いいねしてチェックしよう!

シェアする

フォローする