SUMOとは?ポップアップウィンドゥを簡単に設定できるツールの機能や設定方法

みなさんがウェブサイトを読み進めていると、にょきっと表示してくるバナーに遭遇しませんか?

これは「ポップアップ」や「スクロールボックス」と呼ばれるもので、サイト管理者がユーザーにとってほしい行動や知ってほしいことを表示します。
これと似たような言葉でモーダルウィンドウというものがあります。これはポップアップと異なり、表示されたウィンドウで何らかの操作をしないと元の画面に戻れないという仕組みになっています。

これを設定することで、ウェブサイトのコンバージョン率を上げることができます。サイト内でEメール収集やコンテンツのダウンロード、ECでの購入を促したいときにポップアップを活用することで、ユーザーにより訴えかけることができます。サイト内で設置されているボタンやバナーより反応がよく、ユーザーの行動を促す(CTA)ための仕組みとして優れいています。

ポップアップやモーダルウィンドゥ自体はHTML/CSSやJavascriptでも設定することができますが、ツールを使って簡単に設定することもできます。今回はCTAツールの一つである「SUMO」を紹介します。

目次

SUMOの特徴とは?

SUMOは、ウェブサイトにポップアップバナーなどを設置することで、ユーザーのアクションを誘導し、コンバージョンに結び付けるためのツールです。

「ページを開いて〇秒後に表示」
「ページの〇%までスクロールしたら表示」
「〇ページ以上遷移した人にだけ表示」
など、表示させるタイミングや条件を簡単に設定することができます。

また、クリック率などの結果を管理画面上で確認できるので、どういったタイミング・条件が最適だったのかを検証し、最適化していくことも容易になります。このあたりは通常のコード記述ではなかなか難しい点であり、SUMOを使うメリットと言えます。

簡単に設定できて詳細なデータ分析もできる、それがSUMOなのです。

SUMOの料金は?無料で使用可能

シンプルながら非常に便利で高機能なSUMOですが、無料版でたくさんの機能を使うことができます。

機能一覧FREEPRO
料金無料39ドル/月
Email form
訪問者追跡
ABテスト×
SUMOロゴ×
サンクスメール
Eメールキャンペーン
ECストア接続
ディスカウントコード
分析
拡張Eメール接続×
Email・フォームの数値データ30日無制限

ひとまず無料版を使ってみて、使い勝手や実際の効果を確認してから課金すると良いでしょう。
特に有料版ではABテストや数値分析において優れていますので、マーケティング担当者は有料版がオススメです。

SUMOを実際に使ってみよう

それでは実際に、SUMOを使ってポップアップを設置してみましょう。

SUMOの導入方法

公式サイトにアクセスした後、Sign Upからログインします。SUMOアカウント作成とGoogleアカウントによるログインが選択できます。
※2020年10月26日現在、Googleアカウントでのログインが一時的に無効になっている模様です。

アクセスが完了すると、SUMOをサイトに設置する方法が複数選択できます。
また、下のタグを直接入力することで設置もできます。

また、Wordpressを使用している人は、プラグインからダウンロードすることもできます。今回はその方法で導入してみましょう。
Wordpressのプラグインから「sumo」と検索するとプラグインが表示されます。
今すぐインストールをクリックし、有効化します。

その後、Wordpress内でSUMOの画面を開くとこのような画面が表示されます。「Connect」をクリックして、先ほど登録したメールアドレスとパスワードを入力すると接続することができます。

SUMOのサイトでこのような画面になったら設定完了です。

SUMOでバナーを新規作成する

①SUMOにログインしたら、右上のタブから設定したいウェブサイトを選択します
②上部のメニューバーから、「Forms」をクリックします
③「+ Create New Form」をクリックします

バナーの作成画面が開きます
まずは、左側の「My Goal」で、「Add a Call to Action」にチェックをいれます

次に「Form Type」で表示するバナーのタイプを選択します
おすすめは、「Popup」「Scroll Box」「Smart Bar」の3つです

(参考)SUMOで使えるバナーのタイプについて
• Popup
画面中央部に表示されます。バナーが表示されると、背景はグレーになります ユーザーは、バナー右上の「×」マークを押すか、画面をスクロールすると消すことができます ページの読み込み後、「〇秒後に表示」という設定が可能です
• Scroll Box 画面の右下、左下、右上、左上のいずれかの角に表示させることができます バナーが表示されている状態でも、ユーザーは背景のページを読むことが可能です ユーザーが「画面を〇%スクロールしたら表示」という設定が可能です
• Smart Bar
画面の上部または下部に表示されます。 バナーが表示されている状態でも、ユーザーはページを読むことが可能です 画面をスクロールするとついてくる「Sticky型」 ページの一番上または一番下に固定されている「Static型」 ページの下にスクロールすると隠れ、上にスクロールすると表示される「Smart型」から選択できます

次に「Design」で表示するバナーのデザインを決定します
まず編集画面から「背景」と「×」以外の要素を削除します

背景と×だけの状態になりました
次に、「+Add New」から「Image」を選択します

メールのアイコンが追加されます
次に、左側の設定画面の「Image」の画像部分をクリックします

画像選択の画面が表示されます。まずは「Upload Your Media」をクリックして、バナーをアップします
アップした画像が一覧に追加されますので、選択して、「Select」をクリックします

画像が挿入されました
画像と背景のサイズを調整します。また、×を画像の右上にくるように移動します

バナー画像のリンクを設定します
「Click Action」で「Redirect To」「リンク先URL」「Open in new window」とします

×が後ろに隠れてしまっているので、レイヤーを編集します
バナー画像を選択した状態で、「Layer」→「Down」をクリックします

編集が完了しました。「Preview」をクリックして確認します
プレビュー画面で「Ctrl+Shift+I」でスマホでの表示も確認できます

「Visibility」をクリックし、「Manual Mode」を選択します
設定できる項目はバナーのタイプによって異なります

(参考)タイプ別Visibility設定
• Popup
「When」→「Timed」→「Show Popup After」にて、「〇秒後に表示」を設定できます 「When」→「Timed」→「If a visitor hasn’t seen a popup in」にて、一度ポップアップを表示した ユーザーに対して、次にいつポップアップを表示させるかを設定できます
「always show」の場合は、アクセスするたびに毎回ポップアップが表示されます
• Scroll Box
「Where」にて、「ページを〇%スクロールしたら表示」を設定できます 「When」にて、一度ポップアップを表示したユーザーに対して、次にいつポップアップを表示させるかを 設定できます
• Smart Bar 「Where」にて、「Sticky型」「Static型」「Smart型」を選択できます(※6ページ参照)
「When」にて、一度ポップアップを表示したユーザーに対して、次にいつポップアップを表示させるかを 設定できます
(参考)Display Rules設定
• Popup/Scroll Box/Smart Barいずれのタイプにおいても、
下記の条件を設定し、条件に合致する場合に表示or非表示を指定できます
複数の条件を組み合わせることも可能です
1. URLs
URLを「完全一致」「~から始まる」「含む」で指定できます
2. Devices
Desktop/Mobileを指定できます
3. Refferrer
どのURLから遷移してきたかを指定できます。ドメインまたはURLでの指定が可能です
4. Visitors
「最初にアクセスしたページ」または「閲覧したページ数(以上、以下の指定も可能)」を 指定できます

すべての設定が完了したら保存をします
すぐに有効化せず下書きする場合は「Save Draft」、すぐに有効化する場合は「Publish」をクリックします

①作成した設定は、一覧画面から「停止」「再開」「コピー」などの操作が可能です
②また、バナーの表示数やクリック数、クリック率を確認できます

ポップアップ作成に意識すべき3つのポイント

SUMOで簡単にポップアップウィンドゥを作成する方法を解説しました。
ここでは、実際にポップアップを作るときに意識すべきポイントを紹介します。

表示タイミングはスクロールを進めた後に

ポップアップウィンドゥはユーザーがある程度読み進めてから表示するようにしましょう。
ページを訪問していきなり表示されるとユーザーにとって不快な体験を与えてしまいます。
注目して欲しい気持ちはわかりますが、読み手が不快になってしまっては逆効果です。

クリックしたくなる言葉で

単に文章だけで情報を表示するのはもったいないです。
ユーザーがクリックしたくなるような文言や画像を試行錯誤しましょう。
例)2択の問いかけ
「50%オフ」などの数字の強調
「今すぐ〇〇する」といった具体的な行動を表示
「さらに詳しく見る」といった文言付きクリックボタン

ABテストはほどほどに

色や大きさ、文言を変えてテストするのはいいと思いますが、あまり神経質にやりすぎないようにしてください。
それよりも、ユーザーにとって魅力的なコンテンツを用意する方がはるかに有効です。
また、ページに合わせたコンテンツを用意する方が、ユーザーの行動を促すことができます。
訪問者の立場になって、どのようなコンテンツなら魅力的に映るかにより時間を割くのをオススメします。

弊社では、企業のSEO対策・Web集客支援を行なっております。
下記フォームよりお気軽にお問い合わせください。

お問い合わせはお気軽にどうぞ

株式会社ベンチャーネットでは、BtoB・BtoCともに豊富なSEO関連のご支援実績がございます。
現在のウェブサイトの問題点の洗い出しから、コンテンツの作成やウェブサイトの修正、リニューアルなど専門のコンサルタントを中心にライター、エンジニアなど各分野のプロがチームでご支援します。
よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!
目次