WordPressテーマでリードジェネレーションランディングページを作成する方法

*更新：この記事がおもしろいと思った方が多いので、ProteusThemesは面倒な作業をすべて省くことに決め、GrowthPress WordPressテーマを作成しました。これには、特に変換性の高いリード生成ランディングページが含まれます。

既存のWordPressテーマでランディングページを設定するのに苦労していませんか？ この簡単なチュートリアルに従って、今すぐ独自のWPランディングページを作成してください。

このチュートリアルでは、SiteOriginのPage Builderを使用して、基本的に任意のWordPressテーマで単純なリード生成ランディングページを作成する方法を紹介します。

SiteOriginのPageBuilderは、最も人気のある無料のPage Builder WordPressプラグインであり、これまでのWordPressプラグインのトップ20に入っており、100万を超えるアクティブなインストールがあります。 これは、WordPressテーマで使用しているのと同じページビルダーであり、市場で最高のページビルダーソリューションであると確信しています。

このチュートリアルを書く目的は2つあります。 まず、テーマに事前に作成されたレイアウトが含まれていない場合でも、リード世代のランディングページを作成する方法を示します。次に、 SiteOriginのPage Builderが強力でありながら使いやすいことを示します。 。

潜在顧客のランディングページとは何ですか？

ランディングページは、サイト訪問者に特定のアクションを実行させるという1つの目的のために設計されたスタンドアロンのWebページです。 ユーザージャーニーは次のようになります。 有料広告やソーシャルメディアからターゲットを絞ったユーザーをランディングページに誘導します。 ランディングページでは、ユーザーに価値が高くリスクの低いもの、たとえば無料の電子書籍を提供します。そのため、ユーザーは連絡先情報を喜んで提供します。 後で、あなたは彼に連絡して、彼にプレミアムコンテンツまたは製品を販売しようとします。

簡単な歴史または潜在顧客のランディングページ

リードジェネレーションのランディングページは、今日では当たり前のことです。 潜在顧客のランディングページに出くわさずにインターネットを閲覧するのは難しいでしょう。 今日では、それらは洗練された洗練されたものに見えますが、インターネットの初期の頃には、常にそうであるとは限りませんでした。

リードジェネレーションのランディングページは、マイクロソフトの存在に感謝することができます。 2000年代初頭、Microsoftはコア製品であるOfficeの売り上げを伸ばそうとしていました。 当時、ランディングページを作成するプロセスは非常に時間がかかっていたため、InstapageやUnbounceなどのソリューションが生まれるのにそれほど時間はかかりませんでした。

このようなツールの登場により、潜在顧客のランディングページはより洗練され、今日では、電子メールマーケティングプラットフォームやCRMツールなどの他のツールと統合されています。

潜在顧客のランディングページをいつどのように使用するか

リードジェネレーションのランディングページは、訪問者を「スクイーズ」して電子メールアドレスを渡すことを目的としていることが多いため、スクイーズページとも呼ばれます。

リード生成ランディングページの主な目標はリードの数を増やすことであるため、簡単な答えは、プロモーションキャンペーンを実行するたびにそれを使用することです。 自分のビジネスにランディングページを実装するのに役立ついくつかの例を次に示します。

単一の製品またはサービスを宣伝する

単一の製品またはサービスを宣伝したい場合は、潜在顧客のランディングページが最適です。 他に気を散らすものがないので、訪問者が特定の製品またはサービスが提供するすべての利点に簡単に集中できるため、うまく機能します。 宣伝したい製品やサービスに関連する無料または低コストのオファーを提供することで、リードを獲得することもできます。 その後、Eメールマーケティングを使用して、より高額な購入のためにウォームアップすることができます。

ウェビナーの申し込みを増やす

潜在顧客のランディングページは、宣伝したい今後のウェビナーがある場合に最適です。 ウェビナーは高額な製品やサービスを売り込むためによく使用されるため、訪問者をウェビナーに登録するように招待する潜在顧客のランディングページを使用すると、ウェビナー中にオファーを見て購入する準備ができるリードの数が増えます。

ニュースレターを宣伝する

製品やサービスをまだお持ちでない場合は、潜在顧客のランディングページを使用してニュースレターを宣伝できます。 これにより、ブランドに関心のあるリードを獲得し、オファーに取り組んでいる間、リードを育成し続けることができます。

オーディエンスをセグメント化する

潜在顧客のランディングページは、既存のオーディエンスをセグメント化するために使用できます。 たとえば、メーリングリストがある場合、すべての加入者があなたが提供するすべてのものに興味を持っているわけではありません。

コアオファーまたは製品ごとにランディングページを作成し、それらすべてのランディングページへのリンクを電子メールキャンペーンで送信できます。 メールで、チャンネル登録者に最も興味のあるリンクをクリックしてもらい、今後、より関連性の高いメールを受信できるようにします。

そうすることで、特定のオファーに関心のある電子メールサブスクライバーが、関連するプロモーションメッセージを受信したときにそれを購入する傾向が強くなるため、より効果的な電子メールマーケティング戦略と高いコンバージョン率が得られます。

さまざまなトラフィックソースに対応

最後に、潜在顧客のランディングページを使用して、さまざまなソーシャルメディアネットワークやその他のトラフィックソースからの訪問者をセグメント化できます。

たとえば、Twitterの新しいフォロワーは、メールからランディングページにクリックスルーした人ほどブランドに精通していない可能性があります。

そのため、Twitterから来る人は、すでにあなたを知っていて信頼している人よりも、あなたのオファーにサインアップするように説得する必要があります。

また、それらを使用して、トラフィックを促進しようとしているソーシャルネットワークに基づいてさまざまなオファーを宣伝することもできます。

私たちの場合、これは次のようになります。 ソーシャルメディアからユーザーを呼び込み、「光熱費にお金をかけすぎていませんか？」という広告をクリックします。 彼が広告をクリックすると、私たちのランディングページにリダイレクトされます。 そこで、省エネのヒントが記載された無料の電子書籍と引き換えに、連絡先情報を提供するように彼を説得します。 後で、彼に連絡して、彼に省エネ電球を売ろうとします。 彼がエネルギーにお金を節約したいと思っているからです。

良いランディングページには次のものが必要です。

• ランディングページで宣伝しているオファーのメリットに焦点を当てた、ターゲットを絞ったコピー
• 電子書籍やニュースレターの形で高価値であり、短期間で実施でき、即座に満足感を得ることができます。
• オファーを取得するために必要なアクションを簡単に理解できる単一の明確な召喚状（CTA）
• 社会的証明（例：満足した顧客の声、販売数）により、信頼を築き、反対意見を取り除くことができます。これにより、受け取るサインアップの数が向上します。

優れたランディングページには、次のものを含めるべきではありません。

• メインナビゲーションまたはフッターナビゲーション。これにより、訪問者は潜在顧客のランディングページから離れて、サイトの他のページに移動できます。
• 発信リンクとしての他の発信リンクは、訪問者をサイトから遠ざけ、リードを獲得する代わりに失う結果になります
• 複数のCTAが反対のことを達成し、訪問者を遠ざけるため、複数の召喚状（CTA）

リード生成ページとは何か、それらがどのように発生したか、およびリード生成ランディングページを使用するための基本原則について説明したので、簡単に作成する方法を見てみましょう。

ランディングページがどのように表示されるかを簡単にワイヤーフレームで作成しました。 上部にはリンクできないロゴがあり、下部の右側には大きな強力な見出しがあり、何が得られるかを表しています。 見出しの下には、本をダウンロードすることで得られる3つの主な利点があります。 左側には、2つの入力フィールドとCTAがあるフォームがあります。 ページの下部に、社会的証明のための推薦状のセクションがあります。

始めましょう

まず、WordPress管理エリアに移動して新しいページを作成する必要があります。 新しいページを追加する方法は3つあります。

• WP管理者のトップツールバーで[新規]をクリックします。
• [ページ]に移動し、サイドバーの[新規追加]をクリックします。
• または、ページの上部にある[新規追加]ボタンをクリックします。

新しいページを作成したら、そのページに移動して、デフォルトの要素をすべて非表示にする必要があります。 したがって、訪問者はあなたのサイトをそれほど簡単に離れることができなくなります。 ランディングページを離れる唯一の方法は、ブラウザタブの「X」をクリックすることです。 これは、ランディングページをデザインする際の一番の秘訣です。

現在のWordPressページのすべての要素を非表示にする

まず、テーマにヘッダーとフッターのない利用可能なページテンプレートがすでにあるかどうかを確認します。 運が良ければ、記事のこの部分をスキップできます。

テーマにヘッダーとフッターのないページテンプレートがない場合は、子テーマを作成し、ヘッダーとフッターのない独自のページテンプレートを作成する必要があります。 それは正しい方法ですが、簡単にするために、ヘッダーとフッターを非表示にする簡単な方法を紹介します。

WordPressサイトのヘッダー、フッター、サイドバーなどのデフォルト要素を非表示にするには、CSSプロパティdisplay: none;を使用します。 新しく作成したページにすでに表示されているすべての要素。

私の場合、2つのヘッダー要素と2つのフッター要素を非表示にする必要があります。 これは、WPカスタマイザーの追加のCSSに貼り付けたコードです（[外観]> [カスタマイズ]> [追加のCSS]）。

また、すべてのクラスの前にページIDを配置する必要があったため、ヘッダーとフッターはその特定のページでのみ表示され、サイト全体では表示されません。

非表示にしたい要素のクラスをどのように見つけますか？

特にブラウザで検査ツールを見たことがあれば、それほど難しくはありません。 クラスの名前を見つけるには、新しく作成したランディングページに移動する必要があります>非表示にする要素の上にマウスを置き>右クリック>検査し、開発ツールで、要素の親divを見つけてみてください隠したい。

非表示にする要素の親divが見つかったら、クラスの名前をコピーしてカスタマイザーに貼り付けます。 私の場合、その名前はheader__containerです。

*下のコードの行にマウスを合わせると、上部の要素がハイライト表示されます。 *適切なクラスを見つけるのに問題がある場合は、この短いビデオチュートリアルをご覧ください。

WordPressでページIDをどのように見つけますか？

WP Admin> Pages> Landing pageに移動すると、そのページのURLに次のようなものが表示されます。

繰り返しになりますが、追加のCSSは、クラスとページIDを独自に変更した場合のようになります。

何も表示されていないきれいな白いページができたので、ランディングページの作成を開始できます。 まず、SiteOriginおよびSiteOrigin WidgetsBundleによるPageBuilderというプラグインをインストールします（[プラグイン]> [新規追加]> [プラグインの検索]）

次に、サイトに移動し（[ページ]> [すべてのページ]> [ページ]）、[ページビルダー]タブをクリックします。

次に、[ウィジェットの追加]ボタンをクリックして、 SiteOriginImageウィジェットを選択します。 新しいウィジェットが下に表示されます。 このウィジェットにロゴを挿入します。 これを行うには、[ウィジェット]> [メディアの選択]をクリックして、ロゴを選択する必要があります。 ロゴをまだアップロードしていない場合は、今すぐアップロードしてください。 完了したら、[メディアの設定]をクリックします。

ロゴを中央に配置する必要があるため、[画像の配置]をクリックして[中央]を選択します。 準備ができたら、[完了]をクリックします。

*注：ライブプレビューにアクセスして、ロゴがまだ位置合わせされていないことを確認した場合、その理由は、ページに（空の）サイドバーが表示されている可能性があります。 ページを編集するときに、右側のサイドバーでページテンプレートを変更してみてください。 運が良ければ、テーマにはサイドバーのない事前に作成されたテンプレートがあります。 はい、すべてのProteusThemesテーマにはこの機能が含まれています

さあ、ヒーローエリアの時間です。

ここに2つの列が必要なので、編集ページに戻ります。

[行の追加]をクリックし、65％〜35％の比率で2列の行を設定して、[挿入]をクリックします。 ここで、2列の空の行を作成しました。

次のステップは、見出しと3つの箇条書きを挿入することです。 左側の列をクリックして強調表示し、[ウィジェットの追加]をクリックして、SiteOriginEditorというウィジェットを追加します。 私にとって、これは柔軟性があるため、最も便利なウィジェットです。

新しく作成したウィジェットをクリックして、コンテンツの挿入を開始します。

*チェックアイコンがない場合は、私のものをダウンロードできます。 アイコンの優れたリソースもIconFinderですが、アイコンを使用する前にライセンスを確認してください。

リード生成フォームを作成しましょう。

そのために、Contact Form7プラグインを使用します。 まだインストールしてアクティブ化していない場合は、今すぐ実行してください。 Contact Form 7プラグインをインストールするプロセスは、上記のPageBuilderプラグインで行ったプロセスと同じです。

CF7プラグインをインストールしてアクティブ化したら、 [WP管理]> [連絡先]> [新規追加]に移動し、連絡先フォームの名前を入力します。

ユーザーの名前と電子メールのみを収集するため、フォームのコードは次のようになります。

 <ラベル>あなたの名前（必須）
[テキスト*あなたの名前] </ label>
<label>あなたのEメール（必須）
[メール*あなたのメール] </ label>
[submit class：btn class：btn-primary "今すぐ無料の電子書籍をダウンロード"]

スタイルのないボタンは必要ないので、ボタンに2つの事前定義されたクラスを追加しました。 私の場合、それはclass:btnとclass:btn-primaryです。 同じことをしたいと思っていて、ボタンのクラスの名前がわからない場合は、テーマのドキュメントにあると思います。

次に、2番目のタブ[メール]に移動し、ユーザーが確認メールで取得するすべてのフィールドを設定します。 ここに、電子書籍または電子書籍自体へのリンクを含める必要があります。これが、ユーザーが電子メールを提供する唯一の理由になるためです。 完了したら、下部にある[保存]をクリックします。

次に、ページ上部の青い背景にポップアップ表示されるショートコードをコピーします。 私の場合、ショートコードは次のようになります： [ contact-form-7 title="form" ] 。 次に、戻ってページを編集し、適切なSiteOrigin Editorウィジェットに貼り付けて、[完了]をクリックします。

*誤ってブラウザを閉じるタイミングがわからないため、時々[更新]をクリックすることを強くお勧めします。

このヒーローエリアを目立たせたいので、背景を変更します。 あなたはクリックすることによってそれを行うことができます 2列の行の右上隅にあるレンチアイコンをクリックし、[行の編集]をクリックします。

次に、右側のサイドバーの[デザイン]をクリックして、背景画像を設定する必要があります。 Unsplashに基づいて作成された著者RaulPetriの画像を使用します。

*パフォーマンスを向上させるために画像を最適化することを忘れないでください。 私の同僚のマルコは、画像の最適化について素晴らしい記事を書きました。

この背景画像を全幅にしたいので、レイアウトを全幅に設定します（[レイアウト]> [行レイアウト]> [全幅]）。

ライブプレビューに移動すると、暗い背景に暗いテキストが表示されていることがわかります。 テキストの色を変更するには、コンテンツのある左側のウィジェットに移動し、ツールバーの切り替えと呼ばれる行の最後のアイコンをクリックします。

これで、テキストの色など、さらにいくつかのオプションが表示されます。 すべてのテキストを選択し、白に色付けします。

お問い合わせフォームをもう少し目立たせたいので、左側のウィジェットの背景色も変更します。 もう一度、[ウィジェット]> [デザイン]をクリックして、背景色を白に設定します。

上のスクリーンショットでわかるように、間隔はまったく正しくありません。 まず第一に、私のフォームが画像の上部の境界線に触れているのが好きではありません。 これを変更するには、をクリックする必要があります ヒーロー行のレンチアイコン、次に編集行。 右側のサイドバーで、[レイアウト]をクリックしてパディングを設定します。 45px 90px 45px 90pxにパディングを設定しました。 結果は次のとおりです。

次に気に入らないのは、ウィジェットの内側のパディングです。 これを変更するには、そのウィジェットに移動し、右側のサイドバーでレイアウトを再度選択して、内側のパディングを設定します。 45px 60px 0px 60pxに設定しました。

ご覧のとおり、ランディングページはどんどん良くなっています。 すべてのパディングと間隔が適切になるまで、上記の手順を繰り返します。

結果とデスクトップでの着陸の外観に満足したら、モバイルビューを確認します。

？ 少し祈ってもいい瞬間です。

運が良ければ（またはテーマの作成者が仕事をした場合）、スペースが壊れているのは2、3だけです。 それらを修正するには、もう一度 レンチアイコン>行の編集またはウィジェットの編集>モバイルパディングのレイアウトと値の変更。

ランディングページに紹介文を追加する

ページビルダーがどのように機能するかがわかったので、最後の部分でプロセスをスピードアップします。ここでは、紹介文のセクションを作成します。 下部に新しい単一の行を追加し、 SiteOrigin Editorウィジェットを追加して、写真、引用、紹介文自体、およびレビュー担当者の名前を中に入れます。 事前定義された見出しを使用して、さまざまなフォントサイズを取得します。

事前定義されたフォントサイズが気に入らない場合は、インラインCSSを使用していつでも独自のフォントサイズを追加できます。 これを行うには、右上隅の[テキスト]タブをクリックし（ウィジェット内にいる場合）、 font-size：プロパティを追加します。 たとえば、デフォルトのh5 font-sizeを28pxに変更します。

たとえば、デフォルトのh5 font-sizeを28pxに変更します。

<h5>Lorem Ipsum dolor site</h5>

リードジェネレーションのランディングページの最終結果は次のとおりです。

*上級者向けのヒント：潜在顧客のランディングページのデザインに時間をかけすぎないでください。 デザインは、優れたランディングページの一部にすぎません。 コピーやユーザーに提供する実際の価値など、他の重要なことに焦点を当てます。 コンテンツが最も重要です！

あなたのリードを育てる方法

ランディングページが完成したので、ターゲットを絞ったリードの獲得を開始できるように、そこにトラフィックを誘導する準備が整いました。 彼らがあなたの電子メールリストに加わったら、あなたは彼らがバイヤーとクライアントに変わることができるように彼らを育てるのにいくらかの時間を費やす必要があるでしょう。 以下は、まさにそれを達成するのに役立ついくつかのヒントです。

価値の提供に焦点を当てる

潜在顧客のランディングページは通常、無料のオファーに焦点を当てています。 オファー自体は価値があることは言うまでもありませんが、訪問者から連絡先の詳細を入手した後も、価値を提供し続ける必要があります。

価値を提供することにより、あなたはあなたのリードとの信頼を築き、あなたのニッチの権威としてあなた自身を位置づけるでしょう。 これにより、リードがあなたから購入する傾向が高まります。 これは私の次のポイントに私をもたらします…

ウェルカムシーケンスを実装する

ウェルカムシーケンスは、新しいリードに価値を提供するための最良の方法です。 優れたウェルカムシーケンスは通常、リードをさらに育成する5〜7通の電子メールで構成されます（さらに長くなる場合もあります）。

あなたのウェルカムシーケンスは、あなたとあなたのビジネスを紹介するだけでなく、あなたの無料オファーについて詳しく説明する必要があります。 あなたはあなたの起源の物語、あなたのブランドまたは会社の価値観、あなたの使命を共有し、あなたが彼らを助けることができる方法についてあなたのリードを教育することができます。

タイミングに注意してください

タイミングが全てだ。 間違えると、潜在顧客のランディングページで売り上げが見られず、優れたROIも得られません。 正しく理解すれば、リードはバイヤーや忠実なブランドアンバサダーになり、さらに多くのリードや顧客を獲得するのに役立ちます。

そのため、ウェルカムシーケンスは、リードを煩わせたり、[購読解除]ボタンを押すように誘導したりすることなく、リードの頭に浮かぶようにタイミングを合わせる必要があります。

一般に、ウェルカムシーケンスをずらして、新しく獲得したリードが5〜7日間にわたって毎日1回新しいメールを受け取るようにすることをお勧めします。 ただし、それが多すぎると思われる場合は、頻度を減らして2日ごとにメールを送信すると、ウェルカムシーケンスが長くなりすぎる可能性があります。

これには、ある程度の試行錯誤が必要になりますが、ほとんどの電子メールマーケティングプロバイダーでは、ウェルカムメールを送信する頻度を調整できます。 1日に1通のメールから始めて、エンゲージメント率と登録解除率に注意を払い、必要に応じて調整することができます。

あなたが販売を求める前に待ってください

誰かがあなたにメールアドレスやその他の連絡先情報を渡した直後に販売を依頼したくなるかもしれませんが、販売を依頼する前に待つ必要があります。

調査によると、ユーザーは購入の準備が整う前に少なくとも7回ブランドと接触する必要があり、ウェルカムシーケンスは、これらの7つのタッチポイントが実際に発生することを確認するのに最適な方法です。

希少性の使用を検討する

ウェルカムシーケンスの終わりに近づいたら、オファーの紹介を開始する必要があります。 売り上げを得る1つの方法は、希少性マーケティングの原則を適用し、期間限定または数量限定でオファーを利用できるようにすることです。 希少性は、私たちがそれを手に入れることができないかもしれないと知っていれば、私たちがすぐにもっと何かを欲しているという仮定に基づいて機能するので、うまく機能します。

たとえば、省エネ電球には20％の割引が適用される場合がありますが、それは次の48時間以内に購入した場合に限られます。 または、ハイエンドの1対1のプログラムを提供しても、参加者は20人に制限することもできます。

希少性は素晴らしい結果を生み出すことができる人気のあるマーケティング戦術ですが、注意が必要です。あなたのオファーが本当に限られている場合にのみそれを使用してください。 あなたが限られた時間または限られた量で利用できるものとして何かを宣伝し、あなたのリードがそれが真実ではないことを発見した場合、あなたは彼らの信頼を失うだけでなく、あなたのブランドの評判を傷つけます。

あきらめないで

最後に、あきらめないでください。 一部のリードは、最初のウェルカムシーケンスの後でも購入する準備ができていませんが、絶望する理由はありません。 再び販売に行く前に、単にそれらを育て、それらに価値を提供し続けてください。

マーケティングソフトウェアで許可されている場合は、購入していないすべてのリードにタグを付けるか、別のリストに追加して、次のプロモーションキャンペーンに含めて、オファーを再度提案できるようにすることを検討してください。

おめでとう！

チュートリアルの最後に到達しました。 これで、基本的にすべてのWordPressテーマで簡単なランディングページを作成する方法がわかりました。 たくさんのリードをお祈りします！

時間を節約したいですか？

ランディングページを再作成したいが、作成する時間がない場合は、私の.jsonファイルをダウンロードして、レイアウトをページビルダーにインポートできます。 これを行うには、新しいページを作成し、[レイアウト]> [インポート/エクスポート]をクリックしてから、 .jsonファイルをインポートします。

*デモコンテンツをインポートしても、すべてのプラグインをインストールし、新しい連絡先フォームを作成して、ページのヘッダーとフッターを非表示にする必要があります。

PS：

潜在顧客のランディングページを作成したので、A / Bテストを行うことを忘れないでください。

PPS：

不明な点がある場合は、下のコメントでお気軽にご相談ください。