WordPressサイトにウェルカムマットを作成する方法（例付き）

ウェルカムマットは、フルスクリーンの動的なオーバーレイで、ニュースレター購読者、eBookダウンロード、商品販売などを増やすのに役立ちます。

WPBeginnerやその他のブランドでは、ウェルカムマットを使用してメールリストを構築し、さまざまな製品を宣伝しています。これは、ウェブサイトでのコンバージョンを増やし、ユーザーの再訪問を促すための優れた方法です。

この記事では、WordPressサイト用のウェルカムマットの作成方法と、参考になる素晴らしいウェルカムマットの例をご紹介します。

なぜウェルカムマットがコンバージョンを向上させるのか

WordPressウェブサイトを離れる訪問者の70%以上は、メール購読者や顧客に転換しない限り、二度と戻ってきません。

ウェルカムマットは、ウェブサイトの他のコンテンツの表示をブロックし、ユーザーの注意を引くための、大きくてフルスクリーンのインターシティシャルです。

それは悪い考えのように聞こえるかもしれませんが、訪問者にすぐにメッセージを伝えるための素晴らしい方法です。

訪問者があなたが提供しているものを望まない場合、彼らはウェルカムマットを閉じるだけで済みます。

もちろん、ウェルカムマットを表示する代わりに出口インテントポップアップを表示する場合は、サインアップする十分な理由を人々に与えたいと思うでしょう。たとえば、割引コードや無料のギフトなどです。

例えば、人気のある eコマースストア が、ゲーミフィケーションを使用した全画面ウェルカムマットで特別割引を提供しているのを見たことがあるかもしれません。

他の場合では、人気ブロガーが全画面ウェルカムマットを使用して メールニュースレターを成長させる のを見たことがあるかもしれません。

例えば、ユーザーのメールアドレスと引き換えに、無料ガイドやPDFファイルを提供することができます。

それでは、ウェブサイトにウェルカムマットを簡単に追加する方法を見ていきましょう。

ウェブサイトのウェルカムマットを作成する方法

WordPressでウェルカムマットを作成する最も簡単な方法は、OptinMonsterを使用することです。これは世界で最高のリードジェネレーションソフトウェアであり、ウェルカムマットを含むオプトインフォームを簡単に作成できます。

詳細については、完全なOptinMonsterレビューをお読みください。

まず、OptinMonsterのウェブサイトにアクセスしてアカウントにサインアップする必要があります。フルスクリーンオーバーレイを作成するには、少なくともBasicプランが必要です。

次に、OptinMonster WordPressプラグインをインストールして有効化する必要があります。詳細については、WordPressプラグインのインストール方法に関するステップバイステップガイドをご覧ください。

このプラグインは、OptinMonsterアプリをウェブサイトに接続します。プラグインを有効にすると、WordPressダッシュボードにセットアップウィザードが表示されます。「既存のアカウントを接続」ボタンをクリックしてください。

次に、新しいウィンドウが開きます。

「WordPressに接続」ボタンをクリックするだけです。

さあ、ウェルカムマットを作成する準備ができました。

ウェブサイトのウェルカムマットを作成する

新しいキャンペーンを作成するには、OptinMonster » Campaigns にアクセスしてください。

「最初のキャンペーンを作成する」ボタンをクリックして、ウェルカムマットの作成を開始してください。

事前に構築されたテンプレートを選択したり、すぐに使用できるキャンペーンや、成功したブランドにインスパイアされたリードマグネットを選択したりできる新しいウィンドウが表示されます。OptinMonsterでは、キャンペーンをカスタマイズするために専門家を雇うオプションも提供しています。

このチュートリアルでは、「テンプレート」オプションを使用します。

これでOptinMonsterキャンペーンビルダーに移動します。

次に、キャンペーンタイプとして「フルスクリーン」を選択します。

キャンペーンのテンプレートを選択する必要があります。「エントランス」テンプレートを使用しますが、必要に応じて別のテンプレートを選択することもできます。

テンプレートを選択したら、キャンペーンの名前を入力し、「ビルド開始」ボタンをクリックします。

次に、ドラッグアンドドロップビルダーを使用してキャンペーンをカスタマイズできます。ここで好きなように変更できます。

キャンペーンには、画像、テキスト、ボタンなど、さまざまなブロックを追加できます。オファーに合わせてテキストを編集することも必要です。

要素をクリックするだけで、左側のペインで編集できることがわかります。

たとえば、デモキャンペーンのフルスクリーンウェルカムマットの見出しを変更します。

次のステップは、ウェルカムマットをスライドインさせることです。これは、左下隅にある設定歯車アイコンをクリックすることで行えます。

ここから、「ページスライドを表示しますか？」オプションを有効にするために切り替える必要があります。

これは、ウェルカムマットが画面上部からフェードインするのではなく、スライドダウンして表示されることを意味します。

次に、ウェルカムマットの「成功」ビューに切り替える必要があります。これは、ユーザーが目的のアクションを実行した後に表示されるものです。必要に応じて、成功ビューをカスタマイズしたり、デフォルトのテンプレートを使用したりできます。

ウェルカムマットに満足したら、サイトにどのように表示されるかを設定できます。

WordPress サイトにウェルカムマットを表示する

OptinMonsterの「表示ルール」タブに切り替えることで、ウェルカムマットポップアップの表示方法を設定できます。

ユーザーの所在地、eCommerceカートに入っているアイテム、サイトでの過去の行動、離脱意図など、多くのパーソナライゼーションとターゲティングオプションがあります。

デフォルトでは、OptinMonsterキャンペーンは、訪問者が5秒間サイトに滞在した後、サイトのすべてのページに表示されます。

これはウェルカムマットなので、すぐに表示したいと思うでしょう。この値を0秒に変更するだけです。

デフォルトでは、ウェルカムマットはサイトのすべてのページに表示されます。OptinMonsterのパーソナライゼーションルールを使用すると、特定のページを簡単に含めたり除外したりできます。

完了したら、「完了？アクションに進む」ボタンをクリックできます。

次に、キャンペーンの表示に関するその他のオプションが表示されます。たとえば、キャンペーンがユーザーの画面に表示されたときにエフェクトを追加したり、サウンドを再生したりできます。

このチュートリアルでは、デフォルト設定を使用します。

スクロールダウンすると、キャンペーンのクッキー設定が表示されます。

例えば、ユーザーが一定日数経過後にすでにコンバージョンした場合に、キャンペーンを再度表示することができます。同様に、ポップアップを閉じたユーザーや、表示されたがコンバージョンしなかったユーザーにキャンペーンを再度表示するオプションもあります。

次の画面で、表示ルールの設定の概要が表示されます。

キャンペーンを公開する前に設定を編集できます。

ウェルカムマットを公開する準備ができたら、画面上部の「公開」タブに移動するだけです。

公開ステータスを「ドラフト」から「公開」に変更してください。

変更を保存してキャンペーンビルダーを閉じるには、「保存」をクリックすることを忘れないでください。

次に、キャンペーンのWordPress出力設定が表示されます。キャンペーンが公開されていることを確認してください。

もしそうでない場合は、ステータスドロップダウンメニューをクリックして「公開済み」オプションを選択してください。完了したら、「変更を保存」ボタンをクリックすることを忘れないでください。

キャンペーンを確認するには、新しいシークレットブラウザウィンドウでウェブサイトにアクセスしてください。

ウェルカムマットが画面の上部からシームレスにスライドインするのが見えるはずです。

素晴らしいウェルカムマットの例

さまざまな業界のウェルカムマットの例を見てみましょう。それぞれについて、うまくいっている点と、提案できる軽微な変更点について説明します。

1. 特異点

Singularityのこのウェルカムマットは、ユーザーにサインアップしてSingularity University Global Summitのライブストリームを視聴するように促しました。これは大成功を収め、9日未満で2,000件以上の新規メールサインアップを獲得しました。

ロゴの活用、明確なフォント、そして明るい「リマインダー」ボタンが特に気に入っています。

2. Goins、ライター

Goins, Writer のこのウェルカムマットは、無料ガイドを提供しています。明確でシンプルなオファーであり、ミニマリストなデザインはウェブサイトの他の部分と調和しています。

「はい」と「いいえ、結構です」のボタンは明確で使いやすく、見出しに数字を使用していることが魅力的なオファーになっていると感じています。

3. AVweb

このウェルカムマットには、小さな飛行機の大きくてはっきりした画像があります。すぐに目を引きます。

素晴らしい画像と明確な「サインアップ！」という行動喚起が良いと思います。小さな調整として、画像の上部を覆わないようにタグラインを短くすることが考えられます。

4. Loaded Landscapes

Loaded Landscapesのこのウェルカムマットは、他の例とは少し異なります。背景がわずかに透明です。

明確なオファーと、赤いコールトゥアクションボタンの熱意が良いです。ウェルカムマットの下のサイトの背景は少し気が散る可能性があるため、完全に不透明に変更する価値があるかもしれません。

5. OptimizeMyBnb

このウェルカムマットは特定のページで使用され、ウェブサイトの所有者がサードパーティの小売業者を通じて販売した書籍の中にクリック可能なリンクとして含まれていました。ただし、これらの小売業者は顧客の詳細を渡しませんでした。このようにウェルカムマットを使用することで、顧客のメールアドレスを収集するのに役立ちました。

非常に明確な見出し、小見出し、そして行動喚起テキストがすべてうまく機能しており、「いいえ、結構です」ボタンがユーザーにFOMO（取り残されることへの恐れ）を感じさせるためにうまく使われていると感じます。

表示できるフルスクリーンウェルカムマットの例は他にもたくさんありますが、このガイドにはすべて含めていません。

さらにインスピレーションを得たい場合は、フルスクリーンのウェルカムマットでできることの例をいくつかご紹介します。

• ターゲットを絞ったオファーまたはクーポンを提示する
• 新製品やサービスを紹介する
• 訪問者にサイトから何を期待できるかを知らせる
• 最良のコンテンツを強調して新しい購読者を獲得する
• 訪問者をソーシャルメディアプロフィールに誘導する
• 事前ローンチ段階でメール購読者を収集する

ウェブサイトのコンバージョン改善に真剣に取り組んでいるなら、ウェルカムマットや全画面インタースティシャル（離脱時表示）は、ウェブサイトに追加できる最もコンバージョン率の高い要素のいくつかです。

この記事がお使いのウェブサイトにウェルカムマットを作成する方法を学ぶのに役立ち、例が刺激的であったことを願っています。また、WordPressでクーポンポップアップを作成する方法に関するガイドや、最高のWordPress通知バープラグインもご覧ください。

この記事が気に入ったら、WordPressのビデオチュートリアルについては、YouTubeチャンネルを購読してください。 TwitterやFacebookでもフォローできます。