【初心者向け】フローティングバナーの効果やWebサイトでの表示方法について

フローティングバナーとは？

フローティングバナーとは、別名で追従バナーとも呼ばれています。
フローティングバナーはサイト内でサイドバーや画面下部などに設置されることが多く、常にバナーが画面内で追従されていますので、ユーザーにそのページを見てもらっているうちは常にアピールすることが可能です。
通常、バナーなどを設置する際には、ページの下部などに設置することが多いですが、ページの下部に設置するとユーザーが下部までのコンテンツを読まないと気がついてもらえず、クリック率などが上がらないといった問題点がありました。
しかし、そうした部分的に固定されているバナーからフローティングバナーへ変更することで、このような問題を解消することができ、ユーザーが使いやすくなったりクリック率などをあげることが可能となります。

フローティングバナーを設置するメリット・デメリット

フローティングバナーは有効的かつ効果的だとお分かりいただけたかと思いますが、フローティングバナーにもデメリットがあります。
ここでは、フローティングバナーを設置するメリットとデメリットについてそれぞれ解説していきます。

フローティングバナーを設置するメリット

フローティングバナーを設置することで、常にユーザーの目に止まる位置にバナーを設置できるので、サイトのユーザビリティやクリック率を高めることができます。
購入・予約・資料請求など目的に合ったバナーを設置することで、ユーザーが目的に対してのアクションを起こしやすくなります。

フローティングバナーを設置するデメリット

フローティングバナーの目的とは異なった目的でサイトを見にきたユーザーにとっては、フローティングバナーが邪魔になる可能性があります。
場所によってはそこまで気にならない可能性もあるかもしれませんが、例えばスマホでサイトを見ていて画面の下側に常に興味のないフローティングバナーが設置されていたら、ユーザーにとっては見えにくくなり、サイトのユーザビリティは悪くなります。
フローティングバナーが邪魔だと思う方への対策として、フローティングバナーを非表示にできるようにしたり、スクロール時のみに表示するなどのユーザーに対しての配慮が必要です。

フローティングバナーをサイトに設置する方法について

ここからはフローティングバナーを設置する方法について解説していきます。今回は、フローティングバナーを「画像」で作って設置する方法とフローティングバナーを「HTML・CSS」で作って配置する方法の2パターン解説します。

フローティングバナーを画像で作る場合

フローティングバナーを「画像」で作る場合について解説します。
まず、設置する画像を事前に用意してください。設置する画像を用意したうえで、コードを書いていきましょう。

HTML

<div class=”floating-banner”>
     <a href=”リンク先ページのURL”>
        <img class=”floating-banner_img” src=”フローティングバナーのURL” alt=”フローティングバナー”>
    </a>
></div>

HTMLの構造としてはシンプルです。今回は、スマホもPCも同じ画像・同じリンク先として設定しています。スマホ・PCで違う画像の設定が必要な場合は、imgタグを増やして、スマホ用・PC用をそれぞれ設けてCSSで表示を切り替えてください。
では、次にCSSを見ていきましょう。

CSS

.floating-banner {
    width: calc(100% / 3);
    /* 画面の1/3の幅 */
    position: fixed;
    /* 固定表示 */
    bottom: 16px;
    /* 画面下から16px */
    right: 16px;
    /* 画面の右から16px */
    z-index: 9999;
    /* 常に前面に出す */
    transition: 0.3s;
    /* ホバー時ゆっくり透過 */
    cursor: pointer;
    /* ホバー時カーソルがポインターに */
}
.floating-banner:hover {
    opacity: 0.8;
    /* ホバーで透過させる */
}
.floating-banner_img {
    width: 100%;
    /* 画像をfloating-bannerの幅に合わせる */
}
@media screen and (min-width: 481px) {
    /* 画面幅481px以上 */
    .floating-banner {
        width: calc(100% / 6);
        /* 画面の1/6の幅 */
    }
}

CSSは少し記述が長いと感じる方もいるかもしれませんが、構造はシンプルです。positionプロパティで右下に固定配置しているだけなのでそこまで難しくはないと思います。
設置環境に合わせて適宜CSSを変更する必要があるのは、以下の点です。

• 「floating-banner」クラスのwidth（幅）の変更
• @media screenを設置サイトに合わせる。

※今回はモバイルファーストを意識したCSSの記述です。

フローティングバナーをHTMLとCSSだけで作る場合

では次に、「画像」ではなく、HTMLとCSSでフローティングバナーを作る方法を解説していきます。画像との違いは、デザインソフトを使わなくてもコードを書き換えるだけで内容の書き換えが可能となりますが、デザインの自由性は画像より劣ります。基本的な配置方法については、先ほどの「画像」を配置したときと同じです。
まずはHTMLから見ていきましょう。

HTML

<div class=”floating-banner”>
    <a href=”リンク先ページのURL”>
        <div class=”floating-banner_body”>
            <p class=”campaign”>お得なキャンペーン実施中</p>
            <p class=”more”>詳しく見る</p>
        </div>
    </a>
</div>

先ほどの画像を配置したときのHTMLと比較すると、aタグ内のみ変更となります。今回は、訴求内容とCTAボタンでpタグを2種類書いています。

CSS

.floating-banner {
    width: calc(100% / 2);
    /* 画面の1/3の幅 */
    position: fixed;
    /* 固定表示 */
    bottom: 16px;
    /* 画面下から16px */
    right: 16px;
    /* 画面の右から16px */
    z-index: 9999;
    /* 常に前面に出す */
    transition: 0.3s;
    /* ホバー時ゆっくり透過 */
    cursor: pointer;
}
.floating-banner:hover {
    opacity: 0.8;
    /* ホバーで透過させる */
}
.floating-banner a {
    text-decoration: none;
    /* リンクに下線が入らないように */
    color: #ffffff;
    /* 文字色を白に */
}
.floating-banner_body {
    background: rgb(2, 0, 36);
    /* グラデーションが効かない場合の対策 */
    background: linear-gradient(0deg, rgba(2, 0, 36, 1) 0%, rgba(0, 212, 255, 1) 0%, rgba(104, 104, 193, 1) 100%);
    /* 背景のグラデーション */
    height: 100px;
    /* 高さ指定 */
    padding: 16px 8px;
    /* コンテンツ内側の余白 */
    text-align: center;
    /* 文字中央寄せ */
    border-radius: 8px;
    /* 角丸8px */
    box-shadow: 3px 3px 5px rgba(0, 0, 0, .2);
    /* コンテンツに影を付与 */
}
.campaign {
    /* 「お得なキャンペーン実施し中」 */
    font-size: 14px;
    font-weight: 700;
}
.more {
    /* 「詳しく見る」 */
    border-radius: 30px;
    background: rgb(2, 0, 36);
    background: linear-gradient(0deg, rgba(2, 0, 36, 1) 0%, rgba(208, 29, 124, 1) 0%, rgba(255, 0, 49, 1) 100%);
    font-weight: 700;
    font-size: 14px;
    margin: 0 auto;
    padding: 8px;
}
@media screen and (min-width: 481px) {
    /* 画面幅481px以上 */
    .floating-banner {
        width: calc(100% / 6);
        /* 画面の1/6の幅 */
    }
    .floating-banner_body {
        height: 150px;
    }
    .campaign {
        font-size: 20px;
    }
    .more {
        font-size: 20px;
    }
}

画像と比べると、CSSはデザインの部分も担当するので何倍も多い記述となります。シンプルに記述してもこの記述量になるので、凝ったデザインなどにした場合は、さらに記述量が増えていきます。

フローティングバナーをWordPressで設定する方法

WordPressに設置したい場合は、上記コードをどのように設置すればよいのでしょうか。
設置するページによって記述する場所は変わっていきますが、今回は「すべてのページに掲載する」また、「管理画面で直接編集」を条件に解説していきます。

HTMLの記述箇所について

まずは、管理画面にログインしましょう。そして、「外観」⇒「テーマエディター」を選択します。

テーマエディタが出てくるので、サイドバーの「テーマファイル」よりテーマヘッダー（header.php）を選択します。
※今回はテーマをWordPress公式の「Twenty Twenty-One」で解説していきますので、設置するサイトによっては異なる場合があります。

「テーマヘッダー」を選択したら、<body>タグがあると思います（bodyタグがテーマヘッダー内にない方は、ほかのファイル内をお探しください）。
<body>タグの下部に、先ほどのHTMLを記述して「ファイルを更新」してください。

CSSの記述箇所について

HTMLの記述箇所と同様に「テーマエディター」を開き、スタイルシート（style.css）を選択します。先ほどのCSSをコピーして、スタイルシートの最後に追加し「ファイルを更新」をしてください。

以上で、設置完了です。表示を確認してみましょう。

このように、右下に表示されていたら成功です。

フローティングバナーを設置する際の注意点

フローティングバナーを設置する際の注意点について解説します。
フローティングバナーのデメリットで先述した通り、フローティングバナーの目的と異なった目的でサイトを見にきたユーザーにとってはフローティングバナーが邪魔な存在となります。
そのため、大きさ・非表示のボタンを設置・スクロール時のみに表示させるなど、ユーザーに配慮した設置が必要です。
ただ目立たせたいからといって大きく配置すると、ユーザビリティが低下し多数のユーザー離れも起こり得るので、設置の際は充分に意識したうえで設置しましょう。

まとめ

今回は初心者向けにフローティングバナーのメリット・デメリットや実際の設置方法、また設置する際の注意点などを解説しました。フローティングバナーはユーザーの目につきやすいので、ユーザーへのアクションを促すのには大変効果的ですが、ユーザーに考慮したサイズを作成し設置することが望ましいです。
ぜひ、フローティングバナーを設置して、ユーザーにとって使いやすいサイトにしていきましょう。