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

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

あい

4種のデザインから選べるフロートボタン！

記事を読むときも邪魔にならないシンプルさが良いですね

ブログ名人

ブロガーの間では「BFB(ビーエフビー)」と呼ばれているぞ

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

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

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

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

買い切り4,980円で成約率アップ！

Blog Floating Button(PRO版)

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

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

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

Blog Floating Button(BFB)の基本情報

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

ブログ名人

BFBでボタンを設置しただけで成約率が倍増したケースもあるんだ

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

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

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

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

ブログ名人

Blog Floating Button PRO版は4,980円(税込み)で購入できる！

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

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

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

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

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

あい

Blog Floating Button無料版で使える機能をまとめました

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

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

ボタンのパターン選択

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

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

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

自動表示機能の選択

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

クリック数の計測

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

解析レポートの利用

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

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

Blog Floating Button無料版がおすすめな人

• プラグインに課金したくない
• 主要な記事にだけボタンを設置したい
• ボタンのデザインにこだわりはない
• まずは成約率の改善傾向を見てみたい

無料版のBFBから試してみてね！

ボタンを1つ設置して効果を試したい方に！

Blog Floating Button(無料版)

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

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

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

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

あい

Blog Floating Button PRO版で使える機能はこちらです

設定画面の広告非表示

無料版の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 PRO版がおすすめな人

• 記事やカテゴリ別にボタンを使い分けたい
• マイクロコピーでCTAを最適化したい
• ブログのデザインに合わせてブランディングしたい
• A/Bテストで成約率を改善したい

オリジナリティを出すならPRO版！

りん太

名人はBFBのPRO版を導入してみてどうだった？

ブログ名人

BFB無料版の導入後はクリック率が約1.8倍、PRO版の導入後は約2.3倍まで上がったんだ。

マイクロコピーでの訴求やブログ非表示期間の設定に効果を感じているぞ

買い切り4,980円で成約率アップ！

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」を保存します。

ブログ名人

わかりやすい場所に保存しておこう

ブログ名人

zipファイルは解凍しなくてもOKだ

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の各項目を設定しておきましょう。

ブログ名人

ここでは「PRO版」の設定画面で説明するので
無料版ユーザーは黄色ハイライトの項目をスキップしてほしい

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無料版ユーザーの口コミ

ユーザー

無料版のBFBでも投稿ページ、固定ページ、トップページなど表示場所を選ぶことができて、全てのページに出す必要はない場合はこの設定しています。特に長文のブログは見た目がシンプルになり、より読みやすくなると感じます。

ユーザー

無料プランでは設置できるボタン数に制限がありますが、個別に設定できるのでユーザーの視覚に入りやすく、導入初期から思ったよりもクリック数が多く、これなら有料版でも直ぐに回収できると思いました。また、アップデートが早い点もGOODです。

ユーザー

フロートボタンの設置がとても簡単で使いやすく、助かっています。特にスクロールに合わせて自動で非表示になる機能が便利で、画面を邪魔せずに快適に利用できます。操作も簡単で初心者にとっても扱いやすく、カスタマイズの自由度も高い点が気に入っています。

ユーザー

「Blog Floating Button」無料版は、初心者でも簡単にフローティングボタンを設置できる便利なプラグインです。スマホとPCで別々に設定が可能で、デザインの選択肢も豊富。クリック数の自動計測機能もあり、導線の強化に役立ちます。

ユーザー

特にBFB固有の特徴は、コード不要で直感的にカスタマイズできるUIと、モバイルファーストな設計にあります。ブログ読者の行動を自然に促しながら、離脱率の低下やCV（コンバージョン）向上にもつながる、実用性の高いツールだと感じました。

ユーザー

無料版のBFBを使って、PCとスマホそれぞれにフロートボタンを設置しました。リンク先のURLやボタンの文言、色、表示位置も自由に設定できるので、目的に合わせたカスタマイズが簡単です。クリック数の計測機能もあるため、どのボタンがよく押されているか確認できるので効果検証に役立っています。

ユーザー

スマホでは下部に常に表示されるので視認性が格段に上がっている。またスクロールに応じて自動で非表示になる機能により読者に邪魔にならない点も良い。アフィリエイトリンクのクリック率向上につながっており、有料版も今後視野に入れたいと考えています。

ユーザー

フロートボタンを簡単に設置できるとのことで利用しました。実際、管理画面でタイプや色を選択して、文言やリンク先URLを入力をするだけで設置できるので知識は要りませんでした。その他、スクロール時にボタンを消えるもの快適さを追求してて好感が持てますが、プロ版でないと機能が制限されているので注意が必要です。

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

ユーザー

各ページごとにフロートボタンの文言やリンク先を自由に設定でき、より狙った導線を作れるのが強みです。マイクロコピー機能も使えるので、ユーザーに一言添えることでクリック率が改善しました。非表示期間の調整や詳細なデザイン編集も重宝しており、全体的に満足しています。

ユーザー

ボタンのクリック数にメモを残せるようになり、A/Bテストを行う際の分析がしやすくなりました。特定のカテゴリーやタグページではボタンを非表示にする設定もできるため、必要な場面だけに的確に表示できる点が便利です。デザインも細かく調整できるので、見た目にも統一感が出ました。

ユーザー

BFBのPRO版では、ボタンごとにマイクロコピーの設定ができるため、訪問者の行動を促しやすくなり、実際にクリック率が上がりました。さらに、ABテスト機能を使って文言の効果検証も行える点がとても便利です。

ユーザー

アフィリエイトブログに行動喚起ボタンをブログに実装させたことで、以前よりもクリック率をアップさせることができました。またPRO版を使っているので、ボタンのデザインをより詳細に設定できるのも良いです。フォントサイズを変更できるので、より自分のアフィリエイトブログに適したボタンデザインにできます。

ユーザー

食品卸のサイトでPRO版のBFBを使っています。以前は記事ごとに問い合わせボタンを設置するのが手間でしたが、BFBの固定ボタンで、どのページからでも簡単に問い合わせへ誘導できるようになりました。特に、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を導入するだけで「成約率を上げたい」「読者に配慮したブログの動線を作りたい」といったブロガーの悩みが解決します！

買い切り4,980円で成約率アップ！

Blog Floating Button(PRO版)