これはあなたの好きなビジネスが成長するためにウェブサイトのポップアップを使用する方法です(そしてあなたもそうすることができます!)

公開: 2020-04-02

人には2つのタイプがあります。

ウェブサイトのポップアップが好きな人と嫌いな人。

最初のグループは、ウェブサイトのポップアップがいかに途方もなく効果的であるかを知っています。 2番目のグループは、彼らが途方もなく迷惑だと感じています。

しかし、良いウェブサイトのポップアップと悪いウェブサイトのポップアップの本当の違いは何ですか?


それらの数百を調べることにより、次のように結論付けました。 それはすべて3つのことに要約されます:

  • これらのポップアップはどのように見えるか

  • 彼らが提供する価値

  • 正確に表示されるとき

つまり、はい、一部のポップアップは迷惑で、不快で、醜い体験の邪魔になります。

しかし、それはそれらが間違った方法で設定されているためです。

たとえば、NikeのWebサイトでこの見事なポップアップを見てください。

ナイキのウェブサイトのウェブサイトポップアップがサイト全体の販売を発表

誰かがそれを不快または迷惑と呼ぶことはありますか?

私も同じように考えました。

ナイキのポップアップはエレガントに見え、価値を提供します(チェックアウト時に自動適用される割引です、イェーイ!)。 そしてそれは確かに経験を中断しません。 どちらかといえば–それはそれの不可欠な部分です。

ウェブサイトのポップアップを使用してメールを収集し、売り上げを発表し、行動を呼びかけることに成功している有名な大企業は何千社もあります。 New York Times、Adidas、The Guardian、Century 21、またはSlackを例にとると、リストはどんどん増えていきます。

だから、最高のものから学び、あなたのビジネスを成長させるために彼らのアプローチを適用してみませんか?

あなたはおそらくあなたがあなたのウェブサイトにプロ並みのポップアップを追加するために開発者またはこれらの大企業の予算が必要だと思うでしょう。 まあ、それは真実ではありません。

このブログ投稿では、さまざまなニッチで最も有名な企業のいくつかが使用するWebサイトポップアップの15の例を紹介します。 また、各ポップアップが非常に効果的である理由についても説明します。

最良の部分? Getsitecontrolを使用して、数分以内にWebサイトでそれらを再作成する方法を正確に説明します。

ナビゲートしやすいように、リストを3つのカテゴリに分類しました。 次のようなウェブサイトのポップアップが表示されます。

  • メール購読者を取得する

  • 召喚状を表示する

  • 更新を発表する

最も興味のあるカテゴリに自由にジャンプしてください。

ブランドがメーリングリストを作成するのに役立つウェブサイトのポップアップ

誰もが今自分のメールリストを増やすことに夢中です。 そして、あなたもそうあるべきです!

あなたがそれを見逃した場合のために、電子メールは費やされた1ドルあたりなんと44ドルのROIを持っています。

あなたの電子メールリストに人々がいるということは、あなたが彼らの受信箱で彼らに直接会い、関係を築き、そして彼らをリピーターに変える独占的な許可を所有していることを意味します。

待ってください、しかし、メーリングリストを増やすための最良の方法は何ですか? 私はあなたがすでに答えを知っているに違いない。

それはウェブサイトのポップアップです。

確かに聞いたことがある(そしておそらく購入した)ブランドがポップアップを使用してメールアドレスを収集する方法を見てみましょう。

1.ニューヨークタイムズストア–最初の注文が10%オフ

New York Timesは、有料サブスクリプションのオンラインメディアに進化した最初の企業の1つです。

今日、これは最も訪問された新聞サイトです。 そして、彼らはさまざまな目的のためにウェブサイトのポップアップを使用します。

たとえば、ニューヨークタイムズのオンラインストアにアクセスするとすぐに表示されるこの最小限の電子メールサブスクリプションフォームを見てください。

New York Timesストアは、Webサイトのポップアップを使用して電子メールを収集します

このウェブサイトのポップアップが素晴らしい理由は次のとおりです。

  • 一体感のあるデザイン
    ポップアップには、NYTストアの他の部分と同じ色のテーマと同じフォントがあります。 それはウェブサイトの不可欠で信頼できる部分として現れます。

  • リードマグネット
    新しいオファーを購読するように提案されるだけでなく、リストに参加すると、最初の注文が10%割引になります。

  • 瞬時の出現
    Webサイトのポップアップを一度に表示するのか、訪問者がページにしばらく時間を費やした後に表示するのかは、常に不明確です。 この場合、潜在的な顧客が購入した後よりも、フォームを即座に表示する方が確かに優れていますね。

あなたのウェブサイトに同様のサブスクリプションポップアップを追加したいですか?

ニューヨークタイムズのクリエイティブスピリットに従って、同様のサブスクリプションフォームを作成しました。 下のウェブサイトのポップアップをクリックして、実際の動作を確認してください。 次に、ページの右側に表示される簡単な手順に従います。

Getsitecontrolを利用した最小限のメーリングリスト作成ポップアップ ライブプレビューを見る→

ライブプレビューテンプレートは、Getsitecontrolダッシュボードに直接追加されます。 そこから、割引率、見出し、色のテーマなどの詳細を微調整して、Webサイトに完全に一致させることができます。

その後、あなたは使用できるようになりますターゲティングポップアップを表示するページを指定する設定。

2.センチュリー21– $ 25オフのロックを解除するか、全額を支払う

センチュリー21は、オフプライスのファッション小売大手が数年前にオンラインになり、メーリングリスト作成ゲームにも参入しました。 あなたが彼らのウェブサイトに到着した数秒後に表示されるポップアップをチェックしてください。

Century 21は、ポップアップにネガティブオプトアウトボタンを使用しています

このウェブサイトのポップアップの優れている点は次のとおりです。

  • メール形式のマイクロコピー
    Century 21は、顧客が正しく理解できるように、電子メールアドレスをどのように表示するかを指定することを選択しました。 彼らの聴衆は非常に広く、必ずしも技術に精通しているとは限らない人々を含むことを知っているので、これは素晴らしい決断です。

  • ネガティブオプトアウトボタン
    もちろん、サインアップしたくない場合はサインアップする必要はありません。 しかし、それはあなたが全額を支払う用意があることを意味しますよね? オプトアウトボタンは、オファーを拒否する前によく考えさせる小さな詳細です。

  • 色の賢い選択
    このポップアップの色がWebサイトのテーマと相関しているだけでなく、[続行]ボタンも赤で強調されていることに注意してください。 一方、オプトアウトボタンは背景に溶け込むだけです。

あなたのウェブサイトのオプトアウトボタン付きのポップアップが欲しいですか?

このウェブサイトのポップアップが気に入ったら、1-2-3と同じくらい簡単に再作成できます。 以下のテンプレートをクリックして、指示に従ってください。

Getsitecontrolによるボタン付きの電子メールサブスクリプションポップアップ ライブプレビューを見る→

ダッシュボードに到達したら、 コンテンツ必要に応じて、コピーとカラーテーマを調整するための設定。 Century 21の例に従って、ロゴを上部に追加することもできます。

3.マリークレール–実際のFOMO効果

ネガティブオプトアウトボタンがオンラインストアでのみ機能すると思われる場合は、もう一度考えてみてください。

電子メールで高品質のコンテンツを提供する場合は、購読しないことの結果について人々に思い出させることもできます。 マリークレール誌がオプトアウトボタンでFOMO効果をどのように使用しているかを見てください。

マリークレールはサブスクリプションと引き換えにリードマグネットを提供しています

このウェブサイトのポップアップについて私たちが気に入っている点は次のとおりです。

  • ネガティブオプトアウトボタン
    FOMO効果とは別に、マリークレールがオプトアウトボタンを自己愛の声明に変えた方法に注目してください。

  • メールサインアップCTAコピー
    「購読」だけでなく、サインアップボタンに配置できる、刺激的な行動の呼びかけがたくさんあります。 「何が入っているのか見せて!」 それらの1つです。

  • 画像の選択
    そしてこの場合、それは単なる画像ではありません。 これは、ほとんどの読者が確実に認識する才能のある女優、SaoirseRonanの写真です。

ここで画像がそれほど重要なのはなぜですか?

電子メールのサインアップ率を上げるには、サブスクライバーの期待に関連するビジュアルを用意することが重要です。 彼らはいくつかの髪のトレンドを購読しているだけではないからです。 彼らは、レッドカーペットでハリウッドスターのように見えるためのレシピを受け取るために購読しています。

このようなウェブサイトのポップアップが必要だと思いますか?

Getsitecontrolポップアップビルダーには、上記の例を簡単に再作成するのに役立つテンプレートがあります。 以下でそれをチェックしてください。

スペースの半分を占める画像を含むウェブサイトのポップアップテンプレート ライブプレビューを見る→

ダッシュボードに追加すると、画像をビジュアルに簡単に置き換えたり、ギャラリーから別の画像を選択したりできます。

4.アディダス–メール購読と引き換えに15%オフ

アディダスは、新規加入者に15%の割引を提供しており、Webサイトでしばらく過ごした後にポップアップが表示されます。

同意チェックボックスを備えたアディダスからのウェブサイトポップアップ

さて、これがアディダスのウェブサイトのポップアップで特に素晴らしいことです:

  • 下部のマイクロコピー無関係な電子メールでスパムされる恐れを軽減するために、アディダスはあなたが購読しているものを正確に指定しました。

  • 年齢確認チェックボックス児童オンラインプライバシー保護法(COPPA)に従い、各加入者は13歳以上であることを確認する必要があります。このチェックボックスは、マーケティングメールを受信するための明示的な同意を収集するためにも使用できます。

  • 性別ベースのセグメンテーション回答に基づいて、アディダスは後でセグメンテーションルールを適用して、最も関連性の高いコンテンツを送信します。 ただし、アディダスが生産するジェンダーニュートラルなアイテムの数を考えると、このフィールドをオプションとして設定することも賢明です。

  • サブスクリプションの確認サインアップすると、何を期待するかを示す、いわゆる「サブミッション成功メッセージ」が表示されます。

アディダスのウェブサイトでのフォーム送信成功メッセージ

ここでの代替オプションは、チェックアウト時にコピーして貼り付けるための割引コードを表示することです。 このように、彼らは彼らの電子メールを開くために店を離れることなく買い物を続けることができるでしょう。

5. Ahrefs –次の記事をお見逃しなく

ITの世界に移りましょう。

SEOソフトウェアの有名な開発者であるAhrefsは、このかわいいスライドインを使用して、ブログ投稿の最後に到達したら、ニュースレターの購読を提案します。

Ahrefsは、小さなサイドスライドインを使用して、電子メールサインアップフォームを表示します

これがそれの素晴らしいところです:

  • 別の形式
    モーダルポップアップとは異なり、スライドインは目立たないが、注目を集めるのに十分なキャッチーです。 読書体験をできるだけスムーズに保ちたいコンテンツプロジェクトに最適です。

  • ページ上の動作トリガー
    フォームは、ブログ投稿の最後に到達したときにのみ表示されます。 エンゲージメントレベルが高いため、登録を提案する絶好の機会です。

  • FOMOの原則
    Ahrefのロングリードのいずれかを最後までやり遂げた場合、それを楽しんだ可能性が高くなります。 そして、あなたはこのような別の素晴らしい作品を見逃したくありません。

あなたのウェブサイトに同様のスライドインを追加したいですか?

このサブスクリプションフォームの再作成は簡単です。 同様の右側のスライドインを作成したので、Webサイトにすばやくインストールできます。

GetsitecontrolによるEメールサブスクリプションスライドインテンプレート ライブプレビューを見る→

ウィジェットをクリックして実際の動作を確認し、指示に従います。

準備ができたら、 ターゲティングスライドインを表示するWebサイトの特定のページを選択するための設定、および表示するタイミングの条件。

6. Product Hunt –毎日のニュースレターを購読する

Product Huntは、すばらしいテクノロジー製品が毎日発売される最大のオンラインコミュニティの1つです。 毎日ウェブサイトにアクセスして確認する時間がない人は、電子メールサブスクリプションを介して最も重要な更新のまとめを入手できます。

サブスクリプションの数を増やすために、Product Huntは、ページの下部にフローティングメールサインアップバーを備えています。

Product Huntは、フローティングメールオプトインバーを使用してメールを収集します

このサブスクリプションフォームの優れている点は次のとおりです。

  • 最小限の気晴らし
    フローティングバーは、すべてのWebサイトポップアップの中で最も目立たないものです。 コンテンツをスクロールしている間、Webページの上部または下部に留まり、購読する準備ができるまで辛抱強く待ちます。

  • ニュースレターの頻度
    コピーには、ProductHuntからメールを受信する頻度が正確に示されています。

  • 本物のデザイン
    絵文字とボタンの色は、ProductHuntの特徴的な要素です。 フォームでそれらを使用することは素晴らしい決断です。

独自のフローティングメールサインアップバーが必要ですか?

同様のウィジェットをWebサイトに追加して、サイト全体または特定のページに表示できます。 以下の既製のテンプレートを使用して開始します。

Getsitecontrolによる電子メールフィールドを備えたシンプルなフローティングバー ライブプレビューを見る→

テンプレートのコピーとデザインは非常に用途が広いので、そのままWebサイトで自由に使用してください。

召喚状を表示するウェブサイトのポップアップ

次のカテゴリーに移る時が来ました!

企業がWebサイトのポップアップを使用する2つ目の大きな理由は、訪問者に割引を取得したり、新しいブログ投稿をチェックしたり、景品に参加したりすること、つまり行動を起こすことを奨励することです。

実際の企業がどのようにそれを行っているか見てみましょう。

7.センチュリー21–行く前に割引を受ける

センチュリー21オンラインストアを閲覧し始める場合は、膨大な量の意志力を持ち、隅々であなたを待っている特別オファーを手に入れたいという衝動に抵抗する必要があります。

まず、25ドルの割引クーポンと引き換えに購読するように求められます。 そして、購入せずに離れようとすると、次のWebサイトのポップアップが表示されます。

Century 21は、exit-intentテクノロジーを使用して割引を提供します

「はい、お願いします!」を押した場合ボタンをクリックすると、クーポンコードがポップアップに表示されます。 コードをコピーして、チェックアウト時に貼り付けることができます。 単純。 効果的。

これが、exit-intentアプローチが非常にうまく機能する理由です。

  • 注意が保証されます
    終了するためにナビゲートしているときに目の前にポップアップする割引オファーを見逃す方法はありません。

  • 最後の手段
    終了を意図したポップアップは、実際には、離れようとしている人々を回心させるユニークな機会を提供します。 もちろん、すべての放棄された訪問者が応答するわけではありません。 しかし、そのうちのいくつかはそうするでしょう–そしてあらゆる努力が重要ですよね?

あなたのウェブサイトにexit-intentポップアップを配置したいですか?

以下のテンプレートを確認してください。 訪問者がページを終了するためにナビゲートを開始したときに表示されるように、すでに設定されています。

Getsitecontrolによる割引オファーを特徴とする終了意図のポップアップテンプレート ライブプレビューを見る→

数回クリックするだけであなたのウェブサイトにそれを置き、それからに行きますターゲティングポップアップするページを指定する設定。 たとえば、ショッピングカートの放棄を防ぐために、商品ページ、カテゴリページ、またはチェックアウト時に配置することができます。

8.スキルシェア–紹介プログラムのプロモーション

オンライン学習プラットフォームであるSkillshareは、友達を招待して無料の月間クラスを獲得できる紹介プログラムを実行しています。 すべてのページの上部に配置されたフローティングバーに注目してください。

Skillshareは、トップフローティングバーを使用して紹介プログラムを宣伝しています

Skillshareがここで行ったこと:

  • 対照的な色
    スキルシェアは、ダークブルーのウェブサイトの色のテーマを考えると注目を集めているため、白を選択しました。

  • 十分な詳細
    スペースが不足しているにもかかわらず、コピーはあなたが興味があるかどうかを決定するのに十分な情報を提供します。

  • CTAボタンをクリア
    「友達を招待」ボタンは明確な期待を設定します。 それはあなたが詳細を学びそしてあなたの紹介リンクを得ることができる専用のページにあなたを連れて行きます。

9.ニューヨークタイムズ–今すぐ重要な更新を読む

プロジェクトがコンテンツに焦点を合わせている場合は、ポップアップを使用して、ブログの最新の記事、選択したトピックの重要な更新、または関連資料のみを宣伝できます。

たとえば、これはニューヨークタイムズがCOVID-19の発生に関するライブアップデートに読者の注意を向けさせていた方法です。

New York Timesは、重要なニュースに注目を集めるためにフローティングバーを設置しました

Webページの下部にある召喚状バーは、さまざまなメディアがさまざまな目的で使用しています。 同様に見えるポップアップを特徴とする次の例をチェックしてください。

10.ガーディアン–今日のガーディアンをサポート

ニューヨークタイムズとは異なり、ガーディアンはすべての資料をオープンアクセスで維持することを選択しましたが、読者は寄付の形で新聞への資金提供に参加できます。 ページ下部のポップアップを使用して、このメッセージをどのように伝えているかを確認してください。

ガーディアンは、訪問者に寄付を促すために黄色の粘着性のあるバーを使用しています

あなたのウェブサイトで同様のポップアップを使用したいですか?

あなたがメッセージを強調したいとき、明らかに、これらの粘着性のあるバーは完璧な注意を引くものです。 ウェブサイトにテンプレートを追加したい場合は、以下のテンプレートを確認してください。

Getsitecontrolによる下部のスティッキーバーテンプレート ライブプレビューを見る→

Getsitecontrolダッシュボードに追加したら、 コンテンツタブをクリックしてボタン設定を開き、目的のページへのリンクを配置します。

サイト全体のアナウンスを行うためのWebサイトポップアップ

Webサイトのポップアップの最後のカテゴリは、訪問者に行動を促すのではなく、訪問者に通知することを目的としています。

ニュースや最新の用語で視聴者を最新の状態に保ちたい場合は、Webサイトのポップアップが最適です。

それらを使用して、ビジネスオペレーションの変更、現在のオファー、またはCookie同意ポリシーなどの新しいポリシーについての情報を広めることができます。

Reebok、Tiffany、Nespresso、Intercom、Slackがこの種の通信をどのように処理するかを見てみましょう。

11. Reebok –サイト全体の販売発表

ウェブサイトにアクセスしたすべての人にサイト全体の販売について通知するために、リーボックはウェブページの上部にフローティングアナウンスバーを配置しました。

リーボックは、ページ上部の黒い粘着バーを使用したサイト全体の販売を発表しました

この発表は、ウェブサイトの訪問者からのアクションを必要としません。 あなたはそれを素晴らしい驚きであり、店を閲覧し続けるインセンティブと考えることができます。

12. Tiffany&Co。–無料のサービスリマインダー

ティファニーがオンラインストアの訪問者に、すべての注文で送料と返品が無料であることを通知する方法は次のとおりです。 彼らはウェブページの上部に署名のティファニーブルーフローティングバーを使用しています。

ティファニーは、粘着性のあるアナウンスバーの署名色を選択します

ウェブサイトのテーマのカラーコードがある場合は、ポップアップで使用できます外観/ CSS ティファニーのように、完全に一致するアナウンスバーを作成するための設定。

13.ネスプレッソ–配達遅延の発表の可能性

最後のフローティングバーの例は、ネスプレッソのWebサイトに属しています。 彼らはオンラインの顧客に配達の遅れについて通知することで注意を促しています。

ネスプレッソは、スティッキーパーを使用して配達の遅延について顧客に通知します

繰り返しになりますが、フローティングバーの色がランダムに選択されていないことに気付いたかもしれません。これは、下の[検索]ボタンと完全に一致します。

これらのウェブサイトのポップアップを再現したいですか?

短いが重要なメッセージで聴衆に到達するには、フローティングバーが最適です。 ウェブサイトに追加するには、下のテンプレートをクリックして、コピーを編集してください。

Getsitecontrolは、最小限のスティッキーアナウンスバーテンプレートを提供します ライブプレビューを見る→

あなたのウェブサイトでよりよく見えるかもしれないものに色を自由に変えてください。 カラーテーマはで利用可能です外観Getsitecontrolダッシュボードのタブ。

14. Slack –Cookie同意バナー

リストの最後の2つの例は、Cookieバナーです。

ご存知かもしれませんが、2018年以降、EUからの訪問者を受け入れるすべてのウェブサイトは、ユーザーデータを追跡するCookieを使用するためのインフォームドコンセントを取得する必要があります。

これは、SlackWebサイトのCookieメッセージがどのように表示されるかを示しています。

Slackは、Webサイトのポップアップを使用してCookieの同意メッセージを表示します

Slackは、Cookieの同意ポリシーにリンクし、クリックすると閉じる右側のスライドインを使用することを選択しました。

同様のものを配置したい場合は、以下のテンプレートを使用してください。

Getsitecontrolを使用すると、Cookieバナーをインストールしてカスタマイズできます ライブプレビューを見る→

このポップアップをそのままWebサイトに追加することも、Slackと同じように、Cookieポリシーページへのリンクをウィジェットのコピーに挿入することもできます。

15.インターコム–Cookie同意スティッキーバー

人気のあるメッセージングプラットフォーム開発者であるインターコムは、訪問者にCookieポリシーについて通知するために、Webページの上部にある目立たないスティッキーバーを選択しました。

インターコムは、フローティングバーにCookie通知を表示することを選択しました

このオプションをご希望の場合は、ここをクリックして、GetsitecontrolテンプレートでCookieの同意バーを確認してください。

あなたのビジネスを成長させるためにウェブサイトのポップアップを使用する準備はできましたか?

あなたがいつもウェブサイトのポップアップがあなたのビジネスを成長させるのを助けるかもしれないかどうか興味があったなら-今日はそれを見つける日です。

何から始めたらいいのかわからない?

最も人気のあるウェブサイトのポップアップトップ3は次のとおりです。

  • メール購読フォーム、

  • クッキー同意バナー、

  • 特別オファープロモーション。

Getsitecontrolを使用して、ビジネスに最も関連性の高いものを選択し(または、それらすべてを一度にWebサイトに追加し)、無料で試してみてください。

あなたは、マーケティングの専門家があなたのオンラインビジネスを成長させるための実証済みの戦術を共有するGetsitecontrolブログを読んでいます。 この記事は、カスタマーエンゲージメントセクションの一部です。

ニュースレターを購読する→ Icons8によるメインイラスト