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

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

固定バナーとは？
邪魔しない固定バナーとは？
固定バナーのメリットとは？
固定バナー作成する際のポイント
固定バナーをデザインする上でのポイント
固定バナーの作成方法
1. サンプルHTML
2. サンプルCSS
楽天ショップで固定バナーを設置する方法
1. 楽天ショップ側に設置する場所
2. 文字数オーバーの場合
最後に

固定バナーとは？

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

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

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

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

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

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

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

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

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

目立ちすぎない
大きすぎない
読みやすくする

ネットショップの場合、主役は商品です。
固定バナーはあくまでも脇役ですからそのことは意識しておきましょう。

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

色見（カラー）

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

大きさ（サイズ）

ブラウザやパソコンなどの環境によっても異なりますが、商品ページの内容や画像に出来る限りカブらない大きさで作成するようにします。
横幅は100px前後が望ましいと思います。
カーソルをかざすと飛び出すタイプのものは、それ以上の大きさでも問題ありません。

文言（テキストなど）

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

固定バナーの作成方法

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

固定するバナー
html
css

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

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

サンプルHTML

<div id="fix-box" class="fix-bn">
 <a href="https://www.k-point.org/blog/"></a>
</div>

押さえておくべきHTML編集箇所

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

サンプルCSS

<style>
html,
body {
    height: 100%;
    margin: 0;
    padding: 0;
}

#fix-box {
    background: url(img/raku-fixbn1.png) 0 0 no-repeat;
    top: 100px;
}

.fix-bn {
    width: 50px;
    height: 150px;
    position: fixed !important;
    position: absolute;
    right: 0;
    -webkit-transition: width ease-in-out 0.5s;
    -moz-transition: width ease-in-out 0.5s;
    -ms-transition: width ease-in-out 0.5s;
    -o-transition: width ease-in-out 0.5s;
    transition: width ease-in-out 0.5s;
}

.fix-bn:hover {
    width: 150px;
}

.fix-bn a {
    display: block;
    width: 100%;
    height: 100%;
}
</style>