スマホサイトの反応を上げる、ページ下部(右下)のあの固定ボタンの話⇒フローティングボタン

Pocket

 

 

今回は、スマホサイトの反応を上げる、ページ下部(右下)のあの固定ボタンの話をしようと思います。

 

1. フローティングボタンとは?

スマホでWebサイトを見ているとき、下にページをスクロールしていくと、画面の下部や右下などの定位置に、ずっと固定されて追従しているように見えるボタンってみたことありませんか?

よく見かけるのは、「購入する」「ダウンロード」といったボタン。

あの固定ボタン、フローティングボタンと呼ばれています。
ユーザーにとっては次のアクションがしやすくて便利ですよね。

 

KAIZEN PLATFORM

 

私が運営している鉾立榮一朗事務所のWebサイトにもこのフローティングボタンを設置しています。

 

鉾立榮一朗事務所 | 事例集

 

鉾立榮一朗事務所 | 財産承継ミニセミナー

 

2. フローティングボタンを設置する方法

鉾立榮一朗事務所のWebサイトでは、メインのコンテンツはBiNDup(ホームページ作成サービス)を利用、ブログはWordPressを利用しています。

 

2-1. BiNDupでフローティングボタンを設置する方法

BiNDupは、デジタルステージ社が提供しているホームページ作成サービスになります。

BiNDupには「ウィジェット編集モード」という機能があって、それを使うことで簡単にフローティングボタンを設置することができます。

 

 

基本的な設置の流れは次のようになります。

 

ウィジェット編集モード

編集

ボタンに表示するテキストにリンクを設定

デザイン

リンクボタン編集

ブロックエディタの設定

ウィジェットエリア自体の横幅の設定、および、余白の設定

 

詳しい設置方法は、こちらのページが参考になります。

知りたい人続出!スマホから問合せを増やす固定バナーの設定方法[無料データ付]

 

2-2. WordPressでフローティングボタンを設置する方法

WordPressでフローティングボタンを設置する場合は、Blog Floating Button というプラグインを利用するのが簡単で便利です。

 

Blog Floating Button

 

無料版もありますが、私は背景色の変更などのカスタマイズができる有料のPRO版(買い切り4,980円)を使っています。

WordPressにこのプラグインをインストールして有効化したあとは、そんなに難しくなく直感的に設置ができると思います。

 

 

一点、私が気になったのが、フローティングボタンの右上に必ずバツマークがついてしまうこと。

バツマークがあると、なんとなくバツをタップしたくなるもの。
結果的に、結構な確率でフローティングボタンを閉じられてしまうと思うんですよね。

そこで参考になったのが、こちらのサイトにあった情報。

Blog Floating ButtonのCSSカスタマイズとショートコードを解説

こちらのサイトの「Blog Floating Buttonのバツマークのカスタマイズ」にあるCSSをコピーして、Wordpressのカスタマイズの追加CSSにペーストすることで、このバツマークを消すことができます。

 

 

 

フローティングボタンを設置すると、見込客が次のアクションを取りやすくなって、スマホサイトの反応が上がることが期待できます。

ぜひ試してみてください。

 

追伸

また、あなたのビジネスに役立ちそうな情報があったらお届けしますね。

毎週、確実に記事を受け取りたい方におススメです。

プレゼントを受け取って、Webマガジンに登録する

 

Follow me!

Pocket

The following two tabs change content below.
西荻窪の経営・起業アドバイザー/財産承継コンサルタント。 「経営の原理原則」をテーマに研究を重ね、これまで数多くのクライアント支援から得た学びと、自らの事業活動による実証を加えたノウハウ・ドゥハウを体系化。 企業経営者、特にスモールビジネス・オーナーの転ばぬ先の杖となり、「経営の原理原則を実践する経営者を増やしてハッピーな世の中を創る」ことを使命とする。 また、「借り入れ時に個人保証を求められる中小企業経営者にとっては会社の財産も個人の財産も一体」との現実、「事業承継にまつわる諸問題」などとも向き合いながら、クライアントの財産承継コンサルティングに取り組む。 「経営と財産は両輪」との信念のもと、クライアントの身近な参謀役(アドバイザー)として日々活動している。 家族は妻と息子と猫(キジトラ雄)。中野(自宅)⇄西荻窪(事務所)を行ったり来たり。