ホーム  /  すべて  /  Creative Website Popups Design Examples and Inspiration

Creative Website Popups Design Examples and Inspiration

August 31, 2022
Creative Website Popups Design Examples and Inspiration

すべてのマーケターは、ポップアップデザインのインスピレーションや例を示すスワイプファイルを必要としています。この記事では、新しい魅力的なポップアップを作成する必要があるときに使用している、私自身のスワップファイルを紹介します。

このギャラリーにあるポプチン自身の例以外にも ギャラリーこのギャラリーで紹介されている例以外にも、ぜひ他の例でも創造力を発揮してみてください。

In this article, we’ll look at some creative and inspiring popup designs and examples to make our 2022 lead magnet conversion rates better.

それでは早速、ご紹介しましょう。

誠実さと信憑性 コピーデザイン ポップアップ 

私はいつも、正直で本物のコピーデザインのポップアップをお勧めしています。それは、読者にメールアドレスを与えるように誘う魅力を常に持っています。

ウィキペディアは、成長を続けるために、正直に寄付を募るという素晴らしい仕事をしています。私たちは皆、情報が自由で偏りのないものであることを必要としており、ウィキペディアはその点で素晴らしい仕事をしています。ゆえに、シンプルなデザインのこのコピーには、それなりのメリットがあるのです。

イメージ9

私が見つけたもう一つの正直なポップアップは、ProfitWellが作ったものでした。私がProfitWellのウェブサイトにいたとき、彼らは価格設定ページのティアダウンを宣伝していました。内容は良いのですが、ブログでの私のユーザー体験を邪魔していたので、「私たちはポップアップが嫌いです...」と始めたのですが、これにはとても共感しました。 

イメージ10

なぜですか?正直で、率直で、Eメールアドレスと引き換えに何かを与えてくれるからです。さらに、画像は本物で、上のポップアップの二人は素晴らしい仕事をしています。 

すぐに登録しました。

ポップアップのデザインに関連性や共感性があり、良いコピーがあれば、おそらく適切なコンバージョン率を得ることができます。

シンプルなデザインのポップアップ

時には、シンプルであることが必要であり、それがうまく機能するのです。なぜシンプルなポップアップデザインが有効なのでしょうか?シンプルなデザインが有効なのは、提供するサービスが優れていて ソーシャルプルーフがあり、コピーが素晴らしい場合に有効です。

それに伴い、マーケターに提供された素晴らしい例を紹介したいと思います(私たちマーケターは、普段から他人に対して批判的です)。

イメージ12

ハリーはこの小さなプロジェクトをドライに実行し、出口の意図で上記のようなポップアップを表示します。社会的証明(9691人のマーケター)、実用的なヒント、2分で読める(障壁が低い)、そして、購読を中止する人が0.4%以下であること、無料であることなど、正直な内容になっています。 

このような素晴らしいオファーのコピーは必ず効果があります。もしあなたが、インスピレーションを得るためにシンプルなデザインの例を探しているなら、これは勝者となるでしょう。

最後に、「サインミーアップ」ではなく、「私のマーケティングをアップグレードしてください」と書かれていますが、これは実際に価値のあるコールトゥアクションを与えていることになります。

すばらしいハリー!

編集部からのお知らせです。 マーケティング事例から学ぶコピーライティングのコツをチェック

また、非常にシンプルなポップアップのデザイン例としては、Ahrefsからインスピレーションを得ています。

イメージ2

Ahrefsは、ブログの訪問者はファネルに入れることができないと仮定しており、したがって、訪問者に新しいコンテンツを継続的に提供する方が良いとしています。そのコンテンツはセールスページのようなものなので、読者・訪問者は最終的にコンバージョンします。

そのため、マスコットを使った上記のシンプルなポップアップは、コンバージョンにおいて素晴らしい働きをしています。Ahrefsによると、月に25万人の訪問者のうち、0.5%以上のコンバージョンがあったそうです。なるほど、効果がありますね。

The last simplistic popup design inspiration is from the growth hackers I follow. These are a bunch of guys teaching growth marketing and their popup is simple yet effective for learners like me. It’s just an amazing copy plus a lot of social proof. 

イメージ1

マスコットポップスのデザイン例 

正直に言うと、私はマスコットポップが大好きです。個性があって、ブログやウェブサイトのクリエイティブな側面を感じさせてくれます。言うまでもなく、ブランド認知にも最適です。

私はPoppin社の社員ではありませんが、彼らのインコのマスコットのポップアップが大好きです。

イメージ8

上の例では、ポプちんが出口の意図でそれを示し、恐怖のアプローチでサインアップさせています。ほとんど2分もかからないので、サインアップの障壁はとても低いです。オウムのマスコットはいつも飛んでいるので、注目されますよね。

ポップアップのデザインにマスコットを使う場合は、そのマスコットが注目されるようにしましょう。

最後に、無料アカウントを開始して、その訪問者を経由して顧客を増やすことを提案しているコピーです。素敵ですね。

あまりにもエレガントな仕上がりなので、それだけで契約してしまいそうです。

また、文脈をうまく利用したクリエイティブな発想では、Hipmunkがあります。

イメージ4

このポップアップは、マスコットと待ち時間&読み込み時間を利用しています。Hipmunkは注目を集めるためにマスコットを上手に使っていますが、配置やトリガーはさらに上手にできています。 

シンプルで効果的だと思います。アプリケーションの待ち時間が多い場合は、このタイプのポップアップをお勧めします。

コンテンツ・マーケティング・ポップアップ・デザイン・インスピレーション

もし、簡単に宣伝できて、ついでにリードも獲得できる良いコンテンツを持っているなら、それを提供したいと思わないでしょうか?電子書籍、ウェビナー、インフォグラフィック、コミュニティのオファーなど、様々なものを簡単に宣伝することができます。

Appcues社は、数年前にオンボーディング・アカデミーを公開し、良い仕事をしてくれました。彼らのアカデミーは、多くのSaaS起業家やプロダクトマネージャーを教育してきました。これは、彼らの以前のポップアップデザインの例です。

イメージ7

 The above popup has been done by a good designer and with a great copy. They have a similar popup for their blog updates too.

イメージ6

個人的には、ブログよりもオンボーディング・アカデミーのポップアップの方が好きです。しかし、より多くの訪問者を獲得するためには、両方を使用する必要があります。

個人的には、ブログのオファーを見ると、いつもAirfocusのようにコピーにちょっとした工夫を加えることをお勧めしています(製品ロードマップツール)が行っているように

イメージ13

続きを読む製品ロードマップ

また、製品に関連したコンテンツをたくさん宣伝し、Poptinのフォームを使用していたので、かなりのコンバージョン率が得られました。

Userpilotのメール講座と製品採用塾の宣伝をしてきました。意外なことに、ポップアップよりもブログ内の埋め込みフォームからのコンバージョンが良かったのです。これらは間違いなく良い例です。

イメージ3

これは、私が使っているPoptinのテンプレートで、これはかなりうまくいっています。 

イメージ5

どちらのデザインインスパイアも、コピーでコンテンツを効果的にアピールしています。 

私が得た、もう一つの良いコンテンツポップアップデザインのインスピレーションは、Demioでした。Demioはウェビナー管理ツールで、私は彼らの電子書籍に昇格しました。私は「ウェビナーを管理する方法」についてもっと知りたいと思っていたので、これは適切な配置でした。

しかし、最も効果的だったのは、「ダウンロード」をクリックさせるデザインとコピーでした。 

イメージ11
何と言ったらいいのか。上のポップアップデザインは、ダウンロードさせるのに適切なタイミングと場所(彼らのブログ)にありました。背景の効果的な使い方も気に入っています。

これらのポップアップデザインが何かのヒントになれば幸いです。 

結論

上記のポップアップデザインのインスピレーションや例は、あなたがインスピレーションを得るためのものです。しかし、1つのヒントとして、自分のスワイプファイルを作ってみてはいかがでしょうか。これらのデザインやインスピレーションは、すぐに古くなってしまいます。

だからこそ、常に最新の情報を入手し、インスピレーションを得続けることが重要なのです。

Aazar Ali Shadは、起業家であり、グロースマーケター(ハッカーではない)であり、ベテランのSaaS担当者でもあります。 彼は、コンテンツを書き、学んだことを世界と共有することが大好きです。 Twitter @aazarshad または aazarshad.com でフォローしてください。