専門知識は不要!サイトにCTAを設置できる「HelloBar」の解説

ブログを利用したWebマーケティングではCTA(Call To Action)設置は欠かせないです。

せっかくのアクセスも有効活用できないですからね。

このCTAとは行動喚起とよばれ、サイトのアクセス者に対して資料請求を促したり、業種によっては無料相談を促したりします。

メルマガの登録をCTAにしている方も多いですが、最近は純粋なメルマガへの誘導では難しいです。

無料オファーへの登録ページであるオプトインページへの誘導がセオリーですね。

みなさんはWebサイトに訪れた際に追尾してくるCTAを見たことはありませんか?

形は様々ですが、画面上部や下部にツールバーで追尾型CTAや数秒経過したらポップアップで表示させているケースが多いです。

通常、この仕組みを設置するのは難しく、

・HTML
・CSS
・JavaScript

というプログラミング言語の知識が必要になってくるんです。全く知らない人からしたら、よくわからないですよね。

JavaScriptに至っては、本格的なプログラミング知識が必要になります。

こういった専門的なプログラミング言語を一切使わずに、ツールバーなどの形式で作成できる「Hello Bar」というWebサービスがあるのでご紹介します。

Hello Barとは?

「Hello Bar」というツールバーでCTAを簡単に設置できるWebサービスについてご紹介いたします。

ツールバーとは、画面上部や下部に固定してサイト訪問者に追尾してくるバーです。

このツールバーに、

・メルマガ登録、ニュースレター登録などでメールアドレスを取得する
・特定のWebサイトへ誘導する
・ソーシャルアカウントのフォロー

などを簡単に設置することが可能なんです。

専門的な知識は必要ありません。画面の操作にそってクリックしていくのみですのでWeb初心者でも簡易的に設置できます。

しかも、無料でも十分すぎるくらい高機能です。

有料のPro版もありますが、それでも月に12ドル(約1200円)とそこまでのコストはかかりませんね。

設定画面は英語ですが、Googleの日本語翻訳を活用しましょう。

ちぐはぐな日本語ですが、ニュアンスはわかるかと思います。

では、早速使い方について解説します。

Hello Barの使い方

公式サイトへログイン

01

公式サイト: https://www.hellobar.com/

まずは、公式サイトにアクセスしましょう。

Hello Barにユーザー登録しよう

Hello Barにユーザー登録をします。

その際に、Googleアカウントが必要になります。

お持ちでない方はまずはGoogleアカウントを作成しましょう。数分で作成できます。

Googleアカウントでログインした状態を確認して「Your website URL」の箇所に、今回HelloBarを設置したいサイトやブログのURLを入力しましょう。

02

入力後は、「log in with Google」をクリック。

次の画面で、「Create a new account」をクリックし、HelloBarに登録したい任意のアカウントを選択します。

最後にリクエストを許可しましょう!

03

04

以上で完了です。たったこれだけです。

すでにアカウントをお持ちでしたら、ほんと数分で完了してしまいますね。

SELECT YOUR GOAL(ゴールの設定)

こちらで、これから設置するツールバーのゴールを設定します。

05

  • Promote a Sale/Discount → 商品の販売を促進
  • Talk to Your Visitors → サイト訪問者からのお問い合わせ
  • Grow Your Mailing List → メルマガ、ニュースレター登録
  • Get Facebook Likes → ソーシャルアカウントのフォロー
  • Other → その他

の5種類があることを確認できると思います。

今回は、このは屋のサイトのように、無料オファーからのメールアドレス取得のCTAを設置しようと思うので、「Grow Your Mailing List」を選択したいと思います。

次の画面に進むと、「What should your Hello Bar say?」「What should the button say?」を入力する画面にきますね。

06

 

  • What should your Hello Bar say? → CTAに関するタイトルを入力 例:メルマガに登録する、〜〜を受け取る
  • What should the button say? → ボタンテキストを入力 例:今すぐ申し込む、今すぐ受け取る

バーの作成

What do you want to collect from visitors?

15

  • Just email addresses → メールアドレスを入力
  • Names and email addresses → 名前・メールアドレスを入力

Which contact list would you like your emails stored in?

07

「リストの保存先」を選択してください。

After visitor submits their email …

08

こちらでは情報を入力し、送信ボタンをクリックした後に表示されるメッセージの設定ができます。

ですが、デフォルト以外のメッセージを設定するには、有料のPro版に申し込む必要があります。

ちなみに、Pro版は月に12ドル(約1200円)です。

設定が済んだら、次へボタンをクリックしてください。

表示させるバーの形式を選択

09

  • Bar → 画面上部式
  • Modal → ポップアップで表示されるウィンドウ式
  • Slider → 画面右下にウィンドウで表示
  • Page Takeover → 画面全体で表示

今回は「Slider」に設定します。

次に詳細設定になります。

18

 

  • Hello Bar branding → Hello Barのロゴを表示・非表示にするかの設定。非表示にするには有料会員にする必要があります。
  • Animations → バーにアニメーションをいれるか・いれないかの設定です。アニメーションがあると訪問者の目を引きますが、こちらはお好みで!
  • Placement → バーを表示する位置を設定できます。右下・右上・左上・左下で設定可能。
  • When does it display? → バーを表示させるタイミングを設定できます。

バーを表示させるタイミングを設定は以下を参照してください。

  • Immediately → すぐに表示させる。
  • 5 second delay → 5秒後に表示させる。
  • 10 second delay → 10秒後に表示させる。
  • 60 second delay → 60秒後に表示させる。
  • After scrolling a little → ページを少しスクロールしたら表示させる。
  • After scrolling to middle → ページの中盤あたりまでスクロールしたら表示させる。
  • After scrolling to bottom → ページ下部までスクロールしたら表示させる。
  • User intends to leave → ユーザーがページを離れようとしたら表示させる。

あまりすぐに表示させると、ページ訪問者にウザがられるので、After scrolling to middle」After scrolling to bottom」あたりがオススメです。

※How often should the Hello Bar be displayed? → どのくらいの頻度でバーを表示させるかを設定できます。

訪問者がなんらかのアクションをした後でも表示させるのか、非表示にするのか設定できます。

デザイン・色・テキストの設定

17

  • Theme → Hello Barに用意されているテーマ(デザイン)を選択できます。プレビュー画面を参考にお好みのテーマを設定してください。
  • COLORS → 背景色・テキスト・ボタン・ボタンテキストの色を任意で設定できます。
  • IMAGE → ご自身のパソコンからアップロードして、お好きな画像を設定できます。
  • TEXT → テキストの設定ができます。見出し・キャプション・フォームのプレースホルダ・ボタンテキスト・フォントの設定が可能です。

最後に誰に見せるかの設定

ここはデフォルトの「Everyone」のままで大丈夫です。

最後に「保存ボタン」を押してください。

実際にWordPressに設置

ここからは作成したHello Barを、利用している人も多いWordPressに設置してみたいと思います。

Step1.プラグインをダウンロードする。

Hello Barからプラグインをダウンロードしましょう。

解凍はせずに、zip形式のままで結構です。

10

Step2.WordPressにプラグインをインストールする。

手順は、「WordPress管理画面 > 新規追加 > プラグイン」のアップロードになります。

11

必ず、「zip形式」のままアップロードしてくださいね!

12

「インストール後は有効化」を忘れずにしてください。

以上でWordPressへの設置は完了となります。

19

編集後記

今回は、専門知識は不要!サイトにCTAを設置できるウェブサービスHelloBarについて解説しました。

こんな機能ほしいけど簡単に実装できるWebサービスないかなーと探してみると、実力のあるプログラマーさんたちがすでに作ってくれているケースは、昨今のWebサービスでは多いですね。

最新のWebサービスに焦点をあてた情報収集が、自身のWebマーケティングの実践に役立ちます。

スモールビジネスの
現場からは以上です.

このは屋の最新情報をツイッターで