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

執筆者

のざわ しょう(意匠さん)
このは屋の意匠さん。意匠とは現代風にいうとデザイナーのこと。以前は茨城県で工場員だったが、プログラミングを学びたいと思い上京。このは屋では、主にWebデザインを担当。

こんにちは。このは屋意匠の野沢(@nozawa_ya )です。

[wc_row][wc_column size=”one-fourth” position=”first”]
[/wc_column][wc_column size=”three-fourth” position=”last”]
野沢屋(このは屋意匠)
このは屋の意匠さん。意匠とは現代風にいうとデザイナーのこと。以前は茨城県で工場員だったが、プログラミングを学びたいと思い上京。このは屋では、主にWebデザインを担当。

[/wc_column][/wc_row]

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

せっかくのサイト訪問者に、ただ訪問して帰られてしまってはもったいないですからね。

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

形は様々ですが、画面上部や下部にツールバーでメールアドレス取得の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を設置できるWebサービスのHelloBarについて解説しました。

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

私自身こういった機能を実装できなくはないですが、なんせめんどくさがり屋なのでこういったWebサービスは大変助かります(^^)

無料Ebook:スモールビジネス必見!本当に役立つWebツール&サービス50選

Webマーケティングはツールを上手に使うことで、効率的に取り組むことができます。

このEbookでは、

・ランディングページを2時間で作れるツール
・WordPressで会員サイトを作れるツール
・キーワード選定力が10倍アップするツール

などスモールビジネスにおすすめのツール・サービスを50個まとめました。

ぜひ、あなたのWebマーケティングの実践にお役立てください。