WEBマスターの手帳 > WEB担当者 > WEBサイトの上部にアクションを促す帯を簡単に表示できるWEBサービス「Hello Bar」

WEB担当者

2015年5月25日

WEBサイトの上部にアクションを促す帯を簡単に表示できるWEBサービス「Hello Bar」

Twitter 2 Facebook Google+ はてブ 1 Pocket 2 チャットワーク Eight Feedly

WEBサイトに訪問した人へ「Facebookページへのいいね」「メールマガジンの購読」「問い合わせ」など、もっとCall to Actionをアピールしたい!WEBサイトの上とか下とかに帯(ツールバー)を表示させたりしたい!

そんな、あなたには「Hello Bar」が良いかもしれません。

スポンサード

侍エンジニア塾無料体験レッスン獲得プログラム

WEBサイトにツールバーを表示できる「Hello Bar」

WEBサイトにツールバーを表示できる「Hello Bar」

「Hello Bar」を使うと、自力でJavaScriptなどを実装するよりも簡単に「ツールバー」や日本では敬遠されがちの「ポップアップ表示」などを導入することが出来ます。

Hello Barでツールバーを表示

A/Bテストも出来る

Hello BarでA/Bテスト
Hello BarではA/Bテストが可能です。帯の色やボタンの色、文言の違いなどで、よりWEBサイトの訪問者に最適化していくことが出来ます。

Hello Bar
A/Bテストを設定しなくても、ビュー数やクリック数などのパフォーマンスは確認できます。

Hello Barで実装できるCall to Action

Hello Barでは4つの「表示」を選択できます。

WEBサイトの上部または下部に帯を表示させる「Bar」
↑WEBサイトの上部または下部に帯を表示させる「Bar」

ポップアップ表示
↑WEBサイト(WEBページ)に訪問したら、ページの上にポップアップ表示される「Modal」

右下に表示
↑WEBサイトのサイドに表示される「Slider」

WEBサイトの表示前にCall to Actionを表示
↑WEBサイトの表示前にCall to Actionページを表示させる「Page Takeover」

最後のWEBサイトの表示前にCall to Actionを表示するタイプは、ユーザーからするとイラっとする可能性が大ですね。ポップアップ表示も、かなり厳しいかもしれません。

誘導先は3つ

Hello Barの誘導先
誘導先として設定できるのは3つです。ソーシャルアカウント、問い合わせ(メール送信)、任意のページへのリンクの3つです。

Hello Barでのツールバーの作り方

簡単に「Hello Bar」の使い方をご紹介しておきます。

Hello Barの誘導先の選択
↑まず誘導先を選択します。

Hello Barを使ってソーシャルアカウントへ誘導する
↑今回は「ソーシャル」を選択してみました。Twitterでのツィートやフォロー、Facebookページのいいね、LinkedInでのシェア、Google+の+1などソーシャルメディアでのアクションが並んでいますので、1つ選びましょう。

Hello Barの表示スタイルを選ぶ
↑続いて「表示スタイル」を選びます。ページ上部に表示する「Bar」、ポップアップ、スライダー(右下の表示ボックス)、ページの差し込みなど1つ選びましょう。

Hello Barの色を設定する
↑帯の色を設定します。メール送信や任意ページへのリンクを選択した場合は「ボタン」の色もここで変更できます。

Hello Barの文言を設定する
↑表示するテキスト(文言)を設定します。

誰に表示するかの設定
↑最後に「誰に表示するのか」の設定です。ここを変更するには「Pro版」へアップグレードする必要があります。

WEBサイトへの実装

Hello BarをWEBサイトへ導入する
↑ツールバーを作ってもWEBサイトへは表示されません。WEBサイトへ実装するにはソースコードを貼り付けるか,WordPressであればプラグインをインストールすることで実装できます。

一度、WEBサイトと同期させてしまえば、その後にツールバーを編集しても保存するだけでWEBサイト側にも反映されます。

Pro版でも月に12ドル

Hello BarのPro版

本格的にHello Barを使いたいという方は、ツールバーを作成する際に設定できる項目も増えますのでPro版にアップグレードしてもいいかもしれません。

日本語対応はしていないので、英語ができないと難しいと思われるかもしれませんが、かなりユーザービリティが高く、感覚的に操作できるので、一度試してみてください。
Hello Bar

関連キーワード:

この記事をシェアして頂けると嬉しいです

LINEで送る
Pocket

この記事に対するあなたの評価をお教え下さい

星印をクリックして5段階評価で、この記事に対する、あなたの評価をお教え下さい。

ヒドイイマイチ普通良い凄く良い
Loading...

Webサイトのターゲット像を明確にする【ペルソナ作成シート】

ペルソナ作成シート

あなたのWebマーケティングをよりレベルアップさせよう!

Webサイトや企業ブログ、SNSであなたが相手にするのはどんな人か?それを明確にするための「ペルソナ作成シート」を無料でプレゼントいたします。

WEBマスターの手帳をフォローして最新情報をゲットしよう!

友だち追加

あなたにオススメする記事

この記事と同じカテゴリーの記事

この記事を書いた人

遠藤 聡
中小企業のWEB担当者&ソーシャルメディア担当者としてWEBサイトの管理運用から企業ブログ、Facebookページ、Twitter、YouTubeチャンネルの管理運用(企画&実施)を行なっております。 具体的なサービス内容はサービス詳細ページをご覧ください。

コメント

  •  Web担当者の勉強会
  • ソーシャルメディア活用チェックシートのダウンロード
  • ペルソナ作成シートのダウンロード
  • @webmaster_note
  • Instagram

最新記事一覧

カテゴリー

ピックアップ記事一覧

人気記事ランキング

  • 本日
  • 週間
  • 月間
  • 殿堂

本日の人気記事

週間の人気記事

月間の人気記事

殿堂の人気記事