【成約率アップ】Blog Floating Buttonの使い方と活用例を紹介！無料と有料の違いも解説

約20年のSEO経験や「ウェブ職TV」で有名な中島大介(なかじ)さんがリリースしたBlog Floating Button。

Blog Floating Buttonは、無料でも記事にフロートボタンを設置できるWordPressプラグインです。

Blog Floating Buttonには「自動非表示」や「クリック計測」などの機能が充実しており、ブログに導入するだけで成約率*¹ アップを目指せます！

専門知識がなくても簡単にフロートボタンを設置できるので、Blog Floating Buttonはブログ初心者にもおすすめです。

この記事では「Blog Floating Buttonの導入手順と設定方法」「無料版とPRO版との違い」「WordPressでの活用例」を紹介します。

ブログの収益アップを目指している方は、ぜひBlog Floating Buttonの導入を検討してみてください。

*¹ 成約率とは、Webサイトでの成果の達成率(商品の購入や申し込み、問い合わせなど)を示す指標のことです。コンバージョン率(CVR：Conversion Rate)とも呼ばれています。

Blog Floating Button(BFB)が選ばれる3つの理由

*² CSS(Cascading Style Sheets)とは、Webページで表示する文字の色やサイズ、背景、配置などのスタイル(視覚的な見た目)を設定するプログラミング言語のことです。

Blog Floating Button(BFB)の基本情報

運営会社	株式会社メリル
代表取締役	中島大介(なかじ)
サービス名	Blog Floating Button For WP
主な特徴	・専門知識なしで導入可能 ・選べる4種のデザイン ・複数ブログでの使い回しOK ・PRO版にバージョンアップ可能
無料版の主な機能	・フロートボタンの設置 ・デバイスごとの個別設定 ・自動非表示設定 ・クリック計測 ・除外記事の設定
PRO版の主な機能	・広告の非表示 ・記事やカテゴリ単位の個別設定 ・マイクロコピーの設置 ・背景色やボタンカラーの変更 ・rel属性にnofollowを設定 ・ボタンのライブプレビュー ・A/Bテスト機能(別途有料)
PRO版の販売価格	4,980円(買い切り)

ブログの固定ページや記事内にBlog Floating Buttonを設置すれば、クリック率と成約率の向上を狙えます！

まずは無料版のBlog Floating Buttonでフロートボタンを設置して、クリック率や成約率をモニタリングしてみましょう。

Blog Floating Button(BFB)の無料版とPRO版の違い

Blog Floating Buttonは無料でも導入できますが、ボタンデザインのカスタマイズやページごとの個別設定などには対応していません。

Blog Floating Button PRO版は買い切り型なので、一度購入すれば複数のブログで使い回しができます。

以下の表は、Blog Floating Button無料版とPRO版の機能を比較したものです。

機能名	無料版	PRO版
フロートボタンの作成と設置	可能	可能
ボタンのパターン選択	ボタンのみ/説明文+ボタン/ボタン+ボタン/バナー画像/表示しない/から選択可能	ボタンのみ/説明文+ボタン/ボタン+ボタン/バナー画像/表示しない/から選択可能
トップページでの表示・非表示の選択	可能	可能
自動表示機能の選択	常に表示/下スクロール時は非表示/ から選択可能	常に表示/下スクロール時は非表示/ から選択可能
クリック数の計測	可能	可能
解析レポートの利用	可能	可能
設定画面の広告非表示	不可	可能
記事ごとの個別設定	不可	投稿ページでも固定ページでも 設定可能
カテゴリ単位での個別設定	不可	可能
ボタンデザイン(フォントサイズ・余白)の 詳細設定	不可	可能
設定画面でのライブプレビュー	不可	可能
マイクロコピーの設置	不可	可能
リンクのref属性にnofollowを設定	不可	可能
カラーピッカーによる ボタン色のカスタマイズ	不可	可能
ボタン色の グラデーション明度の調整	不可	可能
カラーピッカーによる ボタン背景色のカスタマイズ	不可(黒背景のみ)	可能
クリック計測用のメモ機能	不可	可能
バツボタンを押して非表示にする 期間の設定	7日間(調整不可)	可能
記事IDがないページでの ボタンの非表示設定	不可	カテゴリ/タグ/検索結果/ 投稿者/404ページでも設定可能
ショートコードによる 表示領域の制御	不可	可能
A/Bテスト	不可	別途で有料ライセンスキーが 必要
複数ブログでの使い回し	不可	可能

Blog Floating Buttonの無料版と有料版で迷っている方向けに、上記の違いをわかりやすく解説します。

Blog Floating Button無料版の機能とおすすめユーザー

Blog Floating Buttonの無料版で設置できるボタン数は、1つのブログにつき1つのみ(PC向け・スマホ向けに1つずつ)です。

「常に表示」「下スクロール時は非表示」のようなフロートボタンの動作設定、記事ごとにボタンを非表示にする除外設定、クリック数の計測などは、Blog Floating Button無料版でも可能です。

フロートボタンの作成と設置

シンプルなフロートボタンを1つ(PC用1つ・スマホ用1つ)のみ作成・設置できる
※ボタン色：5色/背景色：6色

ボタンのパターン選択

ボタンの表示パターンを「ボタンのみ」「説明文+ボタン」「ボタン+ボタン」「バナー画像」「表示しない」から選択できる

トップページでの表示・非表示の選択

トップページでボタンを表示するか否かを選択できる

自動表示機能の選択

ボタンを表示するタイミングを「常に表示」「下スクロール時は非表示」から選択できる

クリック数の計測

設置したボタンのクリック数が自動で計測される

解析レポートの利用

計測されたユーザー数・クリック数・クリック率をグラフで確認できる
※期間やデバイス種別、記事URLなどでフィルタリングすることも可能

Blog Floating Button無料版は、キラーページ*⁴ でのクリック数を計測しながら成約率アップを目指したい方に向いています。

*⁴ キラーページとは、ブログやウェブサイトの中で売上や成果に直結する最も重要なページのことです。商品購入やメールマガジンへの登録など、読者に具体的な行動を起こしてもらうことを目的としています。

Blog Floating Button PRO版の機能とおすすめユーザー

Blog Floating Button PRO版ではカラーピッカーによるボタン色/背景のカスタマイズやマイクロコピーの設置、リンクのref属性の変更などが可能です。

PRO版ではブログのトップページやお問い合わせフォーム、各ブログ記事向けに個別にボタンを設定できるので、Blog Floating Button無料版を使うよりも導線を増やせます。

設定画面の広告非表示

無料版のBFBで表示される広告が消える

記事ごとの個別設定

マイクロコピー/リンク先URL/ボタンの文言/ボタンの色などを個別に設定できる

カテゴリ単位での個別設定

カテゴリ単位でボタンの設定を最適化できる

ボタンデザイン(フォントサイズ・余白)の詳細設定

フォントサイズや余白を調整してボタンの見た目を整えられる

設定画面でのライブプレビュー

プレビュー画面でボタンの仕上がりを確認できる

マイクロコピーの設置

ボタン上部に「＼ ／」付きのマイクロコピーを設置してCTA*⁵ を促せる

リンクのref属性のnofollowを設定

アフィリエイトリンクなどを「nofollow」に設定できる
※プルダウンで選択可能

カラーピッカーによるボタン色のカスタマイズ

ボタン色を自由にカスタマイズできる
※無料版では5色(赤・オレンジ・緑・青・黄)のみ

ボタン色のグラデーション明度の調整

ボタンのグラデーション明度を微調整できる

カラーピッカーによるボタン背景色のカスタマイズ

ボタン背景色を自由にカスタマイズできる ※無料版では6色(黒、赤、黄、オレンジ、緑、青)のみ

クリック計測用のメモ機能

ボタンのクリック数を確認するためのメモを記入できる

バツボタンを押して非表示にする期間の設定

BFB無料版では「7日間に固定」されている非表示期間を自由に設定できる

記事IDがないページでのボタンの非表示設定

カテゴリ/タグ/検索結果/投稿者/404ページでも設定できる

ショートコードによる表示領域の制御

詳細に領域を指定してボタン表示を調整できる

A/Bテスト(別途で有料ライセンスキーが必要)

ボタンのパターンごとにクリック数を比較できる

複数ブログでの使い回し

1回BFBをダウンロードすれば複数のブログで有効化できる

*⁵ CTA(Call To Action)とは、読者に具体的な行動を促すボタンや文言のことです。「今すぐ購入」「無料ダウンロード」「お問い合わせ」などの文言を使用して、ブログやウェブサイトの成果を促す効果があります。

Blog Floating Button PRO版は、ボタンのデザイン性やブログ全体での詳細な導線作りにこだわる方におすすめです。

Blog Floating Button(BFB)のインストール方法＆初期設定

Blog Floating Buttonは、公式サイトからプラグインファイルをアップロードして、WordPressでインストール＆有効化するだけで導入できます。

Blog Floating Buttonの導入手順を図解で詳しく解説します！

公式サイトでBlog Floating Button(BFB)をダウンロードする

Blog Floating Buttonの公式サイトにアクセスして [Download BFB] をクリックします。

画面が遷移したら右下の [ダウンロード] をクリックします。

ファイルの保存ウィンドウが開いたら、任意のフォルダに「blog-floating-button.[バージョン].zip」を保存します。

WordPress管理画面でBlog Floating Button(BFB)をインストールする

次は、WordPress管理画面での操作です。

[プラグイン] から [プラグインを追加] を選択します。

[プラグインのアップロード] > [ファイルを選択] の順にクリックします。

ダウンロードファイルを保存したフォルダから「blog-floating-button.[バージョン].zip」を選択して [開く] をクリックします。

[今すぐインストール] をクリックします。

[プラグインを有効化] をクリックします。

これでBlog Floating Buttonのインストールは完了です！

Blog Floating Button(BFB)の初期設定を行う

Blog Floating Buttonのインストールが完了したら、フロートボタンを設置するための初期設定を行いましょう。

WordPressの管理画面で [Blog Floating Button] から [設定] を選択します。

Blog Floating Buttonの設定画面が開いたら [共通の設定] タブをクリックします。

設定は後からでも変更できますが、以下を参考にA～Mの各項目を設定しておきましょう。

A.開発モード

「全体公開」を選択すると、ブログの管理者以外にもボタンが表示される

B.PCのボタンデザイン/C.スマホのボタンデザイン

「ボタンのみ」「説明文+ボタン」「ボタン+ボタン」「バナー画像」「表示しない」から選択できる

D.トップページの表示

「表示」を選択するとブログのトップページを開いたときにボタンが表示される

E.除外記事ID

記事のIDを入力すると特定の記事でボタンが非表示になる

F.非表示ページ(PRO版)

選択した種類のページでボタンが非表示になる

G.自動非表示機能

ボタンを表示するタイミングを「常に表示」「下スクロール時は非表示」から選択できる

H.非表示の期間(PRO版)

バツボタンを押して非表示にする期間を任意で設定できる

I.PCの出現ポイントの領域(PRO版)

PC向けに記事内でボタンを表示させる位置を設定できる

J.スマホの出現ポイントの領域(PRO版)

スマホ向けに記事内でボタンを表示させる位置を設定できる

K.クリック計測の有効化

「計測する」を選択すると設置したボタンのクリック数が自動計測される

L.クリック計測で管理者を除外

「管理者を除外する」を選択すると自分でクリックした数はカウントされない

M.解析レポートの保存期間

30～360日間の範囲内で解析レポートの保存期間を設定できる
※「ずっと」も選択可能

Blog Floating Buttonの「共通の設定」ですべての項目を設定したら、[設定を保存] ボタンを忘れずにクリックしてください。

Blog Floating Button(BFB)のボタン活用事例と作り方

Blog Floating Buttonの4つのパターンごとに、フロートボタンの作成方法と活用事例を紹介します。

活用事例①「ボタン単体」を作成して主力商品の購入を促進

Blog Floating Buttonの「ボタン単体」は、ボタン1つのみのシンプルなボタンです。

記事内にさり気なくボタンが表示されるので、記事を読んで「商品を買ってみよう」と思った読者を自然に誘導できます。

Blog Floating Buttonでは記事下にボタンを常時表示したり、スクロール時のみ表示したりできるので、読者を不快にさせるリスクもありません。

「ボタン単体」の作成方法

WordPressで記事の投稿画面を下までスクロールしたら、Blog Floating Buttonの「ボタン単体」をクリックします。

「ボタン単体」の設定例は以下のとおりです。

---

活用事例②「説明文+ボタン」で期間限定の情報や特典をアピール

Blog Floating Buttonの「説明文+ボタン」は、ボタンの横に短い説明文を表示できるパターンです。

ボタンの横に商品やサービスの概要やセミナーの日時などを記載すれば、読者の迅速なアクションを促せます。

Blog Floating Button PRO版では説明文とボタンの上部にマイクロコピーを設置できるので、期間や人数限定の特典もアピールできます。

「説明文+ボタン」の作成方法

記事の投稿画面を下までスクロールして、Blog Floating Buttonの「説明文+ボタン」をクリックします。

「説明文+ボタン」の設定例は以下のとおりです。

---

活用事例③「ボタン+ボタン」で読者のニーズに合わせた選択肢を提示

Blog Floating Buttonの「ボタン+ボタン」は、2つのボタンを横並びに表示できるパターンです。

1つの記事内で2つの商品・サービスに誘導できるので、読者のニーズに合わせた導線づくりが実現します。

CSSなどの知識がないと難しいボタンデザインも、Blog Floating Buttonを活用すれば簡単に作成できます。

「ボタン+ボタン」の作成方法

記事の投稿画面を下までスクロールして、Blog Floating Buttonの「ボタン+ボタン」をクリックします。

「ボタン+ボタン」の設定例は以下のとおりです。

---

活用事例④「バナー画像」で商品の魅力を直感的にアピール

Blog Floating Buttonの「バナー画像」では、任意の画像を使用してオリジナルのボタンを作成できます。

アピールしたい商品の画像を全面表示できるので、読者は直感的に魅力を理解しやすくなります。

ボタンの表示位置を「右上」「右下」「左上」「左下」から選べる点もBlog Floating Buttonのメリットです。

「バナー画像」の作成方法

記事の投稿画面を下までスクロールして、Blog Floating Buttonの「バナー画像」をクリックします。

「バナー画像」の設定例は以下のとおりです。

Blog Floating Button(BFB)ユーザーの口コミ評判をチェック！

クラウドワークスで独自にアンケートを実施して、Blog Floating Buttonユーザーの口コミを収集しました。

Xに投稿されたBlog Floating Buttonの口コミも紹介するので、導入を検討中の方は参考にしてください！

独自アンケートで集めたBlog Floating Button(BFB)の口コミ

無料版ユーザーとPRO版ユーザーごとにBlog Floating Buttonの口コミを紹介します。

Blog Floating Button無料版ユーザーの口コミ

Blog Floating Button PRO版ユーザーの口コミ

XでのBlog Floating Button(BFB)の口コミ

売り上げ伸ばすならこのプラグインはあり

SEOで売り上げ伸ばすなら、記事を書くしかないんですが、実はBlog Floating Buttonというプラグインでも伸ばせる

スクロールで非表示にできる
フロートボタンってユーザーにとって邪魔にならないので、とても便利#ブログ書け#ブログ仲間#ブログ初心者

— 久我レイジ＠X/cluster/VRchat全力発信 (@kuga_rage) June 20, 2020

なかじさんの作ったBlog Floating Buttonのプラグイン、控えめに言って凄い。
これ無料で使えるんだ、って感じです。

有料でも安い、買おう。

キラーページへ誘導したい人は、無料でも使う価値アリアリのアリです😊

— カズマ@LINEマガジン構築 (@kazuma_smzw) September 26, 2020

こんばんは！ワードプレスを使われてる方はBlog Floating Buttonがおすすめです。コードで設定しても良いですが、簡単にボタンをつくれます。

— もり web@ec (@mor0813) December 12, 2024

なかじさんのプラグイン、BFBが嬉しいアップデートしてる……！

LPページも表示されるようになっている、これもたくさんの人が購入したからなんだろうなあ

購買は、その商品やサービスなど、応援する形になるね、買ってよかったアプデ。

— 渡辺なおや＠SEOメディア書く人 (@yuruihancho) December 20, 2024

Blog Floating Buttonのよくある質問

「Blog Floating Buttonに関するよくある質問」に回答します。

Blog Floating Button(BFB)はパソコンが苦手でも設置できる？

パソコン操作に自信がない方でも、Blog Floating Buttonで簡単にボタンを設置できます。

Blog Floating Buttonを使用するにあたり、CSSなどのプログラミング知識やWordPressの高度な知識は必要ありません。

WordPressにBlog Floating Buttonをインストールして有効化すれば、あとは管理画面で必要項目を入力するだけOKです！

Blog Floating Button(BFB)はテーマ「MERIL(メリル)」に実装されてるの？

Blog Floating Buttonと同様に、テーマ「MERIL」も株式会社メリルが開発している商品です。

テーマ「MERIL」にはデフォルトで装飾用プラグイン「SIMPLE BLOG DESIGN」が実装されていますが、Blog Floating Buttonは付属しません。

どのWordPressテーマを使用する場合でも、Blog Floating Buttonを別途でインストールする必要があります。

» 一番シンプルなWordPressテーマ「MERIL」の機能と使い方
» 初心者でもおしゃれにブログ記事を装飾できる「SIMPLE BLOG DESIGN」

WordPressでブログを書くための基礎知識

WordPressブログの基本的な機能と活用方法

WordPressブログの基本的な機能を理解しておくと、大切なデータを保護しながら快適にブログを運営できます。

WordPressの以下の機能について、特徴と活用方法を見ていきましょう。

カテゴリとタグの使い分け

WordPressの「カテゴリ」と「タグ」の違いは以下のとおりです。

カテゴリ

ブログ全体のテーマやトピックを整理するための機能。
読者が記事を探しやすくなるように、作成したカテゴリごとに記事を分類できる。

タグ

記事の具体的な内容やキーワードを明確化するための機能。
タグを設定すると、読者が興味のあるトピックで記事を検索しやすくなる。

このブログでも「始め方」「WordPress」「ジャンル」「稼ぎ方」「書き方」の5つのカテゴリを設定しています。

ジャンルやトピックごとにカテゴリを作成するとユーザビリティが高まるため、読者の離脱防止にも効果的です。

リビジョン機能

WordPressの「リビジョン機能」では、以下のような履歴管理を行えます。

リビジョン機能により記事の変更履歴が保存されるので、記事の内容を前の状態に戻すことも可能です。

複数の編集者が共同でブログを書いている場合は、誰がどのような変更を加えたかを追跡できます。

ただし、データベースの容量が圧迫される可能性があるので、必要に応じて古いリビジョンを削除してください。

投稿のスケジュール機能

WordPressの「投稿のスケジュール機能」では、以下のように記事の公開タイミングを設定できます。

記事の自動公開

指定した日時に記事を自動公開する

定期的な公開

定期的なスケジュールを設定して記事を自動公開する

最適な公開時期

最も効果的な時間帯に記事を公開できる

スケジュール機能を使用する場合は、記事の公開日時を正確に設定することが重要です。

記事が自動公開される前に、記事の内容や誤字脱字などをチェックしておきましょう。

コメント機能

WordPressで「コメント機能」を有効化する場合は、以下のポイントに注意してください。

コメント機能を活用すると読者とのコミュニケーションが活発化するため、ブログの認知度や人気が高まります。

読者のコメントには丁寧に返信して、ブログの信頼性を高めましょう。

メディアライブラリの管理

WordPressの「メディアライブラリ」を活用するメリットは、以下のとおりです。

画像の一元管理

画像やファイルを一箇所で管理できる

画像のサイズ変更

画像サイズを最適化してページの読み込み速度を改善できる

画像の再利用

同じ画像を複数の記事で使い回せる

メディアライブラリで画像を管理する際は、ファイル名を分かりやすく設定しましょう。

必要に応じてカテゴリ分けやタグ付けを行えば、膨大な画像の中から必要な画像を探しやすくなります。

パーマリンクの設定

パーマリンクとは、各ブログ記事に設定する固有のURLのことです。

WordPressの「パーマリンク設定」でSEOに配慮したパーマリンク構造を選ぶと、検索順位が上がる可能性があります。

ウィジェットの配置

WordPressの「ウィジェット」を活用すると、サイドバーやフッターにさまざまな情報を表示できます。

最初に配置しておくべきウィジェットは以下のとおりです。

ウィジェットを適切に配置すると、読者がブログ内を回遊しやすくなります。

ただし、ウィジェットを配置しすぎるとサイトのパフォーマンスが低下することがあるため、読者にとって必要なものを見極めることが重要です。

定期的なバックアップ

万が一のエラーに備えて、定期的にWordPressのデータをバックアップしておきましょう。

バックアップを取る際のポイントは以下のとおりです。

WordPressブログの基本的な機能を有効活用できれば、ブログの運営効率と安全性が向上します。

ブログ運営にはSEO対策も欠かせないため、パーマリンクなどを適切に設定して最適化しましょう。

» ブログ運営におけるバックアップの重要性

Blog Floating Button(BFB)を使えば初心者でも成約率アップを目指せる！

この記事では「Blog Floating Buttonの導入手順と設定方法」「無料版とPRO版との違い」「WordPressでの活用例」を解説しました。

この記事のポイントをまとめると・・・

Blog Floating Buttonでさり気なくボタンを設置すれば、読者にポップアップ広告のような不快感を与える心配がありません。

Blog Floating Buttonを導入するだけで「成約率を上げたい」「読者に配慮したブログの動線を作りたい」といったブロガーの悩みが解決します！