「ブログの収益や問い合わせを増やしたいけれど、難しいコードは書けない…」そんな悩みを持つブロガーにおすすめなのが、WordPressプラグイン「Blog Floating Button（ブログ・フローティング・ボタン）」です。
専門知識なしで、スマホやPCの画面に追従するボタンを簡単に設置することができます。
本稿では、Blog Floating Buttonの主な機能や使い方、注意点などを徹底解説します。
目次
Blog Floating Button（BFB）とは？
Blog Floating Button（BFB）は、WordPressブログに「フロートボタン（追従するボタン）」を実装するためのプラグインです。
読者の目に留まりやすい位置にボタンを表示し続けることで、LPや問い合わせフォームへの誘導を強化し、成約数（CV）の向上を支援してくれます。
主な機能
- フロートボタンの実装：スクロール時に画面下部などに追尾するボタンを表示
- デザイン選択：4パターンの形状から選択可能
- デバイス別設定：PCとスマホで異なるデザインや表示設定が可能
- 自動非表示機能：スクロールの動きに合わせて自動的に隠したり、常に表示させたりする設定が可能
- クリック計測：ボタンのクリック数やクリック率（CTR）を計測し、グラフ付きレポートで確認できる
- 除外記事設定：特定の記事IDを指定してボタンを非表示にできる
メリット
- 高い視認性とクリック率の両立：画面の隅に常駐するため、読者の視線を自然に誘導できる
- クリック計測機能が標準搭載：特別なツールを使わずとも、管理画面から各ボタンのクリック数や反応率を確認・分析できる
- デバイスごとの柔軟な出し分け：PCとスマホでデザインや表示内容を個別に設定できるため、それぞれの画面サイズに最適な訴求が可能
- ユーザー体験への配慮：スクロールに合わせた非表示設定や、ユーザー自身がボタンを閉じる機能（Cookieによる7日間非表示）が備わっている
Webサイトはクッキーやキャッシュを用いてユーザーのスムーズな閲覧を可能にしています。しかし、時としてそれらが原因でWeb制作の妨げになることもあります。クッキーで制御している広告やバナーなどを再表示するには、クッキーを削除しなければならないからです。 というわけで今回は、ブラウザ別の削除方法...
デメリット
- レイアウトの制限：スマホ表示において「説明文＋ボタン」が上下ではなく左右に並ぶなど、レイアウトが制限されている
- デザインの制限：無料版ではボタンの色・形・位置の設定に制限がある
- 表示確認の手間：一度「×」で閉じると7日間表示されなくなるため、設定変更後はシークレットモード等での確認が必須
- 過度な露出による離脱リスク：大きなバナー画像などを常に表示させると、コンテンツの邪魔になりユーザー体験を損なう可能性がある
Blog Floating Buttonの活用法
- おすすめ記事・人気記事：サイトの看板となる記事を配置して回遊性をアップ
- 収益性の高い記事への誘導：「まとめ記事」や「レビュー記事」へ飛ばす
- キャンペーン告知：期間限定のセール情報や、お得なクーポン配布ページへの誘導に最適
- お問い合わせ・資料請求：サービスサイトであれば、常に「相談窓口」を可視化できる
- SNSフォローや登録：XやInstagramのプロフィールページや、LINEの友だち登録を促す
Blog Floating Buttonの向き・不向き
向いている人
- 収益化を加速させたいサイト運営者：ランディングページや会員登録ページへ、効率よく読者を流したい方
- 複雑な設定を避けたい初心者：コードを書くことなく、直感的な管理画面からボタンやバナーの設置・デザイン変更を完結させたい方
- データに基づいた改善を行いたい方：クリック計測の結果を見て、ボタンの文言や色をテストしながら最適解を見つけたい方
向いていない人
- 極限までサイトを軽量化したい方：わずかな読み込み速度の変化も許容できない場合には慎重な検討が必要
- 自由自在なカスタマイズを求める方：細部までCSSを使わずにこだわりたい方には、レイアウトの制約がストレスに感じてしまう可能性がある
- 情報の詰め込みを優先する方：広告を嫌う読者が多いジャンルのサイトでは、フロートボタン自体が敬遠される可能性がある
Blog Floating Buttonの料金プラン
Blog Floating Buttonは「無料版」と、買い切り型の「PRO版」があります。
| 機能 | 無料版 | PRO版 |
|---|---|---|
| 料金（買い切り） | 0円 | 4,980円 |
| フロートボタン基本設定 | ◯ | ◯ |
| 自動非表示・除外設定 | ◯ | ◯ |
| クリック計測 | ◯ | ◯ |
| 設定画面の広告非表示 | × | ◯ |
| 個別記事・カテゴリごとの設定 | × | ◯ |
| 詳細デザイン設定 | × | ◯ |
| リンクのnofollow設定 | × | ◯ |
| A/Bテスト機能 | × | 別途ライセンス要 |
※PRO版ライセンスは複数ブログで使用可能です。
Blog Floating Buttonの使い方
インストール方法
- WordPress管理画面の「プラグイン」＞「プラグインの追加」をクリック
- 「Blog Floating Button」と検索
- 「今すぐインストール」をクリックして有効化する
WordPressで制作したサイトは、プラグインを使って簡単に機能を拡張することができますよね。当記事では、プラグインのインストール方法について解説してきます。 おすすめプラグインを見る プラグインのインストール方法は2つ プラグインのインストール方法は、下記の2つになります。基本的には、...
プラグインの設定方法
共通設定
管理画面の「Blog Floating Button」＞「共通設定」からボタンの表示やクリック計測などの設定を行えます。
- 開発モード：ボタンの公開範囲を設定（例：全体公開、管理者のみなど）
- PCのボタンデザイン：パソコン表示時のボタンの見た目（ボタンのみ、テキスト付きなど）を選択
- スマホのボタンデザイン：スマホ表示時のボタンの見た目（ボタンのみ、テキスト付きなど）を設定
- トップページの表示：トップページでボタンを表示するか、非表示にするかを選択
- 除外記事ID：特定のページでボタンを隠したい場合、その記事IDをカンマ区切りで入力
- 自動非表示機能：「下スクロール時は非表示」など、ユーザーの動作に合わせた表示・非表示の挙動を設定
- クリック計測の有効化：ボタンがクリックされた回数を計測するかどうかを選択
- クリック計測で管理者を除外：サイト運営者自身のクリックをデータに含めない設定
- 解析レポートの保存期間：計測したクリックデータの保存期間を指定
- PRO版ライセンスキー：有料のPRO版を利用する場合に、提供されたキーの入力欄
PC設定 / スマホ設定
PC画面とスマホ画面での表示設定です。ほぼ同じ設定項目のため、併せて解説します。
下層メニューでは、共通設定のボタンデザインを調整できます。4箇所ありますが、実際に使用するボタンレイアウトのみ設定してください。
- ボタン単体
- 説明文＋ボタン：説明文と単体のボタンを表示
- ボタン＋ボタン：左右2箇所にボタンが表示
- バナー画像：任意の画像をアップロードしてリンクを付ける
この内、ボタン単体・説明文＋ボタン・ボタン＋ボタンについては、設定項目がほぼ同じになっています。
- 説明文：ボタンの近くに表示する補足テキストを入力
- ボタンタイプ：ボタンの形状（角丸ボタンなど）を選択
- ボタン色：ボタンの背景色（赤など）を指定
- ボタンの文言：ボタン自体に表示するテキスト（例：「無料登録はコチラ」）を入力
- リンク先URL：ボタンをクリックした際の遷移先URLを設定
- リンクの開き方：クリック時に「同じタブ」で開くか「新しいタブ」で開くかを選択
バナー画像の設定項目だけ若干違い、バナー画像自体を作成してアップロードする必要があります。
- 配置：バナーを画面のどの位置に固定するかを選択
- 画像URL：画像URLの入力か、「画像を選択」からメディアライブラリの画像を指定（PC画面は300px × 300px以内、スマホ画面は640px × 120pxが推奨）
- リンク先URL：バナーをクリックしたときに移動する先のURLを入力
- リンクの開き方：クリック時にページを「同じタブ」で開くか、「別のタブ」で開くかを設定
ボタンの表示確認
ボタンの表示確認ですが、表示されたボタンの右上にある「✕」をクリックして閉じると、7日間表示されない仕様になっています。
もし、閉じてしまった場合は、ブラウザのシークレットモードを使用するか、ブラウザの履歴からCookieを削除しないと表示されませんのでご注意ください。
「ボタンのみ」を設定・表示した場合は、ページ下部に表示されます。
「説明文＋ボタン」は、説明文が左側でボタンが右側に表示されます。
こちらは、スマホ画面でも同様に左右に表示されます。説明文が上でボタンが下にはなりませんでした。
「ボタン＋ボタン」は、ボタンが横並びとなります。スマホ画面でも横並びに表示され、縦並びには表示されませんでした。
「バナー画像」を選択した場合は、プラグイン設定で指定した箇所に表示されます。
ただし、大きめのバナー（PC画面は最大で300px × 300pxまで）を設置した場合、「自動非表示機能」設定の「常に表示」にすると、広告が目立ちすぎてユーザー体験が下がってしまいます。
その場合は、バナーサイズを小さくするか、「自動非表示機能」を「下にスクロール時は非表示」に設定した方がユーザーにとって親切かもしれません。
解析レポート
管理画面の「Blog Floating Button」＞「解析レポート」では、ユーザーがボタン（リンク）を何回クリックしたか、その回数と割合が表示されます。
絞り込み検索では、上部の「レポートの種類」の選択内容に合わせて表示されるグラフが変わります。日別や月別レポートでは、期間ごとのグラフが表示されます。
アクセス詳細では、ボタンがクリックされた記事URL・IPアドレス・デバイスなどが表示されます。
Blog Floating Buttonの注意点
導入・設定時の注意点
- 表示確認の「7日間ルール」に注意：ボタンの右上にある「×」で一度閉じると、その後7日間は同じブラウザで表示されない仕様になっています。設定変更後の確認は、ブラウザのシークレットモードで行うようにしてください。
- レイアウトのズレを確認する：スマホ表示において「説明文＋ボタン」や「ボタン＋ボタン」を選択した場合、横並びのレイアウトが崩れていないか実機で確認が必要です。
- デザインとタブの不一致：「共通の設定」で選んだデザイン形式と、実際に入力を行ったタブが一致していないと、ボタンが正しく表示されません。
- レポート反映の限界：REST API制限やWAF設定などのセキュリティ対策が原因で、クリックデータが正常に送信されず、レポートに反映されない場合があります。その場合は、Googleアナリティクス（GA4）を使った計測が確実です。
Webサイトのアクセス解析に欠かすことのできないGoogleアナリティクス。 しかし、Webサイトを始めたばかりの初心者からするとハードルが高いと感じるでしょう。専門用語が多く、何をどう設定すれば良いのか悩んでいる人も多いかもしれません。 本記事では初心者ユーザーに向けてGoogleアナ...
参考記事：カスタムURLでキャンペーンデータを収集する – アナリティクス ヘルプ
SEO対策の注意点
- 非表示機能の活用：SEO評価を維持するためにも、「下スクロール時は非表示にする」などの設定を活用し、読者の利便性を優先した配置を心がけましょう。
- リンクのnofollow設定：アフィリエイトリンクを設置する場合、無料版は
nofollow属性を設定できないため、わずかにSEO上の懸念があります。その場合は、PRO版の導入も検討してください。
よくある質問（FAQ）
Q. 設定したのにボタンが表示されません。
A. 複数の原因が考えられますが、まずは以下の3点を確認してください。
- 「共通の設定」の開発モードが「全体公開」になっているか
- サーバーやプラグインの「REST API制限」がONになっていないか
- 過去に「×」ボタンで閉じていないか（シークレットモードで確認）
Q. 特定のページだけボタンを消すことはできますか？
A. はい、「共通の設定」タブ内にある「除外記事ID」の欄に、非表示にしたいページのIDをカンマ区切りで入力することで対応可能です。
Q. クリック計測データが反映されません。
A. 「共通の設定」にある「クリック計測の有効化」が「計測する」になっているか確認してください。
また、自分自身のクリックを除外したい場合は「管理者を除外する」設定も併せて確認しましょう。
その他、サーバーやプラグインなどのセキュリティ設定が影響している可能性もありますので、REST API制限やWAF設定をOFFにする検討も必要です。
Q. 推奨されるバナーサイズは？
A. PC版は「300px × 300px」以内、スマホ版は「640px × 120px」が推奨されています。これより大きいと画面を占有しすぎるため注意が必要です。
まとめ
Blog Floating Buttonは、コード知識不要で成果に直結しやすいフロートボタンを設置できる強力なプラグインです。
まずは無料版で導入し、デザインの自由度や記事ごとの最適化が必要になった段階で、PRO版へのアップグレードを検討するのがおすすめです。
コメント