シードプロッド最新ニュース

ビジネスの成長に役立つWordPressのチュートリアル、ヒント、リソース

動的ランディングページとは何か、WordPressで動的ランディングページを作成する方法

動的ランディングページとは何か(+WordPressで作る方法) 

執筆者 著者アバター ステイシー・コリン
著者アバター ステイシー・コリン
ステイシーはWordPressとデジタルマーケティングについて10年以上、その他のトピックについてはもっと長い間執筆している。また、ウェブデザイン、ユーザーエクスペリエンス、SEOにも造詣が深い。
     レビュー レビュアーアバター ターナー・ジョン
レビュアーアバター ターナー・ジョン
ジョン・ターナーはSeedProdの共同設立者です。彼は20年以上のビジネスと開発の経験があり、彼のプラグインは2500万回以上ダウンロードされています。

ランディングページが、誰かが検索した内容に合わせて自動的に調整されたらいいのに、と思ったことはありませんか?

それこそがダイナミック・ランディングページの役割です。ダイナミックランディングページは、広告のクリック、検索キーワード、URLに基づいて、それぞれの訪問者にカスタムヘッドライン、ロケーション、オファーなど、パーソナライズされたコンテンツを表示します。

私はダイナミック・ページを使って、リアルタイムで訪問者にメッセージをマッチングさせたことがある。

このガイドでは、WordPressでダイナミックなランディングページを作成する方法をステップ・バイ・ステップで紹介します。

ダイナミック・ランディング・ページとは何か?

ダイナミック・ランディングページとは、ウェブサイトの訪問者によって異なるメッセージを表示するウェブページのことです。ユーザーに表示されるメッセージは、場所や検索キーワードなど、さまざまな要因によって異なります。動的なキーワード挿入は、ページが各訪問者に最も関連性の高い情報を確実に提示する上で重要な役割を果たします。

これは、PPCダイナミックランディングページキャンペーンの広告グループにオファーを合わせたい場合に特に便利です。しかし、動的ランディングページは、潜在的な顧客により良いコンテンツをパーソナライズするために、ほとんどすべての状況で使用することができます。

要するに、ダイナミックランディングページは、人々が検索する内容に合わせて見出しや本文のコピーを変えることで機能する。これは、コンバージョン率の最適化を目的としたランディングページには欠かせない。

とはいえ、パーソナライズされたランディングページにはどのような利点があるのだろうか?

なぜウェブサイトにダイナミック・ランディングページを使うべきなのか?

動的なランディングページを使用する主な理由の1つは、コンバージョン率を高める優れた方法であるということです。

通常、ユーザーは1組のキーワードや1つのデジタルマーケティングキャンペーンに基づいて、一般的な静的ランディングページにランディングする。

ダイナミックページを使えば、場所、製品、サービスの種類など、誰かが探しているものに直接話しかけるような、パーソナライズされたランディングページ体験を作り出すことができる。

例えば、誰かが「私の近くのイベント」を検索した場合、ランディングページは「フロリダのイベント」のように、そのユーザーの特定の場所を反映するように変更される。

このような動的なキーワード挿入は、「そのイベントは私の地域で開催されるのか」といったような、その人自身が考える前にその人のクエリを解決する。これは素晴らしいユーザーエクスペリエンスになり、ユーザーに対して、あなたが彼らのニーズを満たすというシグナルになります。さらに、このような動的コンテンツは、PPCの動的ランディングページにとって非常に重要です。

その結果、その人は競合他社よりもあなたのビジネスを選ぶ可能性がはるかに高くなる。

WordPressで動的なランディングページを作成する方法

さて、上記のことは一見かなり複雑に聞こえるかもしれない。確かに、検索クエリやGoogle広告のテキスト、その他の要因に基づいて自動的に変化する動的なランディングページを作成するには、専門家の助けを借りる必要があるだろう。

場合によってはそうかもしれない。しかし、もしあなたがWordPressのウェブサイトを持っているなら、動的ページを作成するためのいくつかのソリューションが、そのプロセスを簡単にしてくれる。

WordPressで簡単に動的なランディングページを作成する方法を学ぶには、以下の手順に従ってください。

1.適切なWordPressプラグインを選ぶ

WordPressには、ランディングページのパフォーマンスを向上させる強力なページビルダーが豊富にあります。しかし、動的に挿入されるコンテンツに関しては、SeedProdは最高のソリューションの一つです。

SeedProd最高のWordPressランディングページ・プラグイン

SeedProdは、WordPressのための最高のドラッグアンドドロップランディングページビルダーです。あなたのWordPressウェブサイトのための任意のタイプのランディングページを簡単に作成することができます。

あらかじめ用意されたレスポンシブ・ランディングページのデザインテンプレートから始め、ビジュアルエディタでカスタマイズすることができます。または、ゼロから作成し、SeedProdsのドラッグアンドドロップコンテンツブロックを使用してページを構築することもできます。

ブロックを使って挿入することができる:

...そして、あなたのページにもっとたくさんのことを。

さらに、どの見出しやテキスト要素でも、SeedProdのダイナミックテキストオプションを使用して、個々のユーザーに合わせたページを作成することができます。

そこで、WordPressでダイナミックなランディングページを作りたい場合、SeedProdを使った方法をご紹介します。

2.SeedProdのインストールとアクティベーション

ランディングページを作成するためにSeedProdを選択した後、SeedProdプラグインをインストールして有効化する必要があります。

次に、WordPressウェブサイトにプラグインをアップロードします。この作業で助けが必要な場合は、WordPressプラグインをインストールするためのステップバイステップガイドに従ってください。

SeedProdをインストールすると、ライセンスキーの入力を求めるウェルカムスクリーンが表示されます。ライセンスキーは、SeedProdアカウントにログインし、「ライセンスキー、詳細、およびダウンロードを表示」リンクをクリックすることで確認できます。

seedprodライセンス・キーを取得する

キーをコピーし、WordPressサイトのライセンスキーフィールドに貼り付け、Verify Keyボタンをクリックします。

seedprodライセンス・キーをアクティベートする

3.ランディングページの作成

次に、ページを下にスクロールし、「最初のページを作成」ボタンをクリックします。

最初のSeedProdランディングページを作成する

SeedProdのランディングページダッシュボードに移動し、4つの異なるページモードが表示されます:

SeedProdの各ページモードでは、ワンクリックで特定のランディングページを有効にすることができます。

SeedProdランディングページ・モード

例えば、カミングスーンモードを有効にして、新しいウェブサイトを紹介するカミングスーンページを追加することができます。また、404ページモードを有効にして、サイトにカスタム404エラーページを追加することもできます。

これの素晴らしいところは、この機能を得るために別のWordPressプラグインをインストールする必要がないことです。SeedProdは、コンパクトな1つのプラグインにすべてを組み込んでいます。

ページモードのセクションの下には、SeedProdで作成した他のページのリストが表示されます。まだ作成していないので、新規ランディングページを作成ボタンをクリックして開始します。

新しいランディングページを作成する

4.ランディングページのテンプレートを選ぶ

新しいランディングページを作成するボタンをクリックすると、SeedProdのランディングページテンプレートが表示されます。

SeedProdランディングページテンプレート

上部のタブをクリックすると、目標や業種ごとにテンプレートを絞り込むことができます:

どのようなテンプレート・デザインでも使用でき、ドラッグ&ドロップ・エディターで好きなようにカスタマイズできるので、特定のカテゴリーに限定されることはありません。

このガイドでは、「販売」タブにある「自動車販売ページ」を選びます。

ランディングページのテンプレートを選ぶ

テンプレートをインポートするには、テンプレートのサムネイルにマウスカーソルを合わせ、オレンジ色のチェックアイコンをクリックします。

ランディングページのテンプレートをインポートする

次に、ページの名前とURLを入力するポップアップが表示されます。この設定は後で変更できるので、好きな名前をつけてください。

ランディングページに名前とURLをつける

次に、「保存してページの編集を開始する 」ボタンをクリックして、テンプレートをSeedProdのビジュアルエディタにインポートします。

5.ランディングページをカスタマイズする

SeedProdのドラッグ・アンド・ドロップ式ビジュアル・エディター

テンプレートをインポートした後、ビジュアルドラッグアンドドロップエディタに表示されます。SeedProdのWordPressランディングページビルダーは、シンプルな2パネルレイアウトで構成されています:

  1. 左のパネル:ページを構築しカスタマイズするためのページブロックとセクション
  2. 右のパネル:ランディングページのデザインをリアルタイムでプレビューできます。

ページへのコンテンツの追加は、左からブロックをドラッグして右の所定の位置にドロップするだけと簡単です。

テンプレートをカスタマイズして変更するには、任意のページ要素をクリックするだけで、左側のパネルにその設定が表示されます。例えば、箇条書きのリスト要素をクリックすると、左側に変更できるオプションが表示されます。

ここでは、箇条書きリストのテキスト、アイコンの色、間隔などを変更できます。また、「詳細設定」タブをクリックすると、フォントやリストレイアウトなどをカスタマイズするためのその他の設定が表示されます。

ランディングページのコンテンツを編集する

SeedProdのブロックの大部分は、コードを書かずに簡単にカスタマイズできるように、このような構造になっています。

ランディングページの色、フォント、背景を変更したい場合も、同じように簡単です。歯車のアイコンをクリックするだけで、グローバル設定パネルが表示されます。

SeedProdグローバル設定パネル

そこから各タブを展開すると、グローバルなカスタマイズオプションが表示されます。例えば、「背景」タブをクリックすると、以下のようなさまざまなオプションや背景の変更が表示されます:

  • 無地またはグラデーションカラー
  • 背景画像
  • 背景の幅
ダイナミック・ランディング・ページの背景を変更する

ページのフォントや色についても同じことができます。適切なタブを選択し、ボタン、ヘッダー、テキストの色を個別に選択し、ページ上のすべての要素に変更を適用するだけです。

ダイナミック・ランディング・ページの色をカスタマイズする

ページが思い通りになるまでカスタマイズを続けましょう。

6.ページに動的コンテンツを追加する

今度は、検索エンジンや広告経由で製品やサービスを探しているユーザー向けにコンテンツをパーソナライズする番だ。

SeedProdは、動的ページを作成する2つの方法を提供します:

  1. 日付ベースのダイナミック・テキスト
  2. クエリ・パラメータ・ダイナミック・テキスト

日付ベースのダイナミック・テキスト

日付ベースのダイナミックテキストを使うと、ランディングページで日付を動的に作成して表示することができます。例えば、エバーグリーンセールを実施する場合、"セールは[#today :%A]まで "という見出しを作成することができます。 

ユーザーがページにアクセスすると、"Our sale ends Tuesday"(セールは火曜日まで)など、ユーザーにとってその日がどの日であっても、その日の表示に置き換えられます。

クエリ・パラメータ・ダイナミック・テキスト

クエリパラメータのダイナミックテキストを使用すると、さまざまなクエリに基づいてコンテンツをパーソナライズできます。これは、広告キーワードに基づいてランディングページをパーソナライズしたり、誰かの名前でページをカスタマイズしたりする優れた方法です。

例えば、次のような見出しとクエリ・パラメータ・ダイナミック・テキスト・タグを持つページがあるとします:"こんにちは [q:fname=there]"。

クエリーパラメーターがなければ、あなたのページはこう言うだけだ:「こんにちは。しかし、誰かの名前にパーソナライズすれば、"Hi John "と表示される。

SeedProdでは、ランディングページにダイナミックテキストを追加するのがとても簡単で、どこでも使用することができます。これには、検索語やユーザーの詳細情報に基づいて自動的に更新されるダイナミックヘッドラインも含まれます。

見出しとテキスト・ブロックには、ダイナミック・テキストを挿入するボタンがある。

例えば、場所によって異なるテキストを表示するように見出しを編集したい場合、見出しをクリックし、ダイナミックテキストの挿入ボタンを選択します。

ダイナミックテキストの挿入

そこから、「場所」のようなパラメータ名を入力し、「あなた」のようなデフォルト値を選ぶことができる。

デフォルトでは、見出しは「あなたの近くの運転教習所」と表示されます。しかし、location=FloridaのようにURLパラメータに場所がある場合は、'Driving Instructors Near Florida'と表示されます。

場所に基づく動的なランディングページのテキスト用クエリーパラメーター

上記のように、SeedProdの見出しやテキストをカスタマイズするには、これらの手順を実行します。しかし、行動喚起ボタンのような他のSeedProdブロックにダイナミックテキストを追加したい場合は、ダイナミックテキストコードをコピーして必要な場所に貼り付けることができます。

アクションボタンの動的テキスト置換

次のステップに進む前に、緑色の「保存」ボタンをクリックして変更を保存してください。

関連記事 WordPressにFacebookのイベントを埋め込む方法

7.ランディングページの設定

ダイナミックな変更が完了したところで、SeedProdでコントロールできる他の設定をいくつか見てみましょう。まずはメールマーケティング設定です。

SeedProdを使えば、ランディングページとEメールリストを簡単に結びつけることができます。 

画面上部の「接続」をクリックすると、人気のメールマーケティングサービスが幅広く表示されます。ユーザーにニュースレターの購読を依頼したい場合は、このパネルを使ってメールマーケティングサービスをリンクします。

SeedProdメールマーケティング統合

お好きなプロバイダーを選択し、Eメール統合ドキュメントの手順に従ってセットアップしてください。

同じ画面上で、Zapierを介して何千ものアプリにページをリンクしたり、Google Analyticsでサイトのパフォーマンスをモニターしたり、Recaptchaでスパムからページを保護したりすることができる。

その他のseedprodの統合

Eメールリストを接続した後、ページ設定タブをクリックして、さらにオプションを追加してください。

登録ページ設定

設定ページには通常5つのセクションがありますが、これは作成するページのタイプやSeedProdのプランによって異なります。

  1. 一般ランディングページの名前やURLを変更したり、公開と下書きを切り替えたりできます。
  2. SEO対策: WordPressのSEOプラグインを使って、ランディングページのタイトルタグやメタディスクリプションなどを設定しましょう。
  3. アナリティクスお気に入りのGoogle Analyticsプラグインを接続し、ランディングページのパフォーマンスを監視しましょう。
  4. スクリプト:トラッキングやクッキーのようなカスタムスクリプトをページのヘッダー、ボディ、フッターに追加します。
  5. カスタムドメイン:ランディングページに、既存のウェブサイトとは関係のないカスタムドメインを与えましょう。

設定後、変更を保存し、デザインタブに戻ります。

8.動的ランディングページを公開する

ランディングページを公開する前に、モバイルデバイスでテストする必要があります。モバイル・レスポンシブでなければ、タブレットやスマートフォンのような小さなタッチスクリーンでは、見栄えもパフォーマンスも悪くなります。

幸いなことに、SeedProdにはモバイルプレビューオプションがあり、あなたのページがモバイルフレンドリーかどうかをチェックすることができます。画面の下にあるモバイルアイコンをクリックしてください。

モバイルプレビューアイコンをクリック

そこから、ダイナミック・ページがモバイルでどのように見えるかを確認し、正しく見えないものや動作しないものを変更することができます。

ダイナミックランディングページをモバイルでプレビュー

すべてがうまくいったら、いよいよ公開です。緑色の保存ボタンの隣にある下向き矢印をクリックし、公開をクリックします。

ダイナミック・ランディング・ページを公開する

次に、ページが公開されたことを知らせるウィンドウが表示されます。

あなたのページが公開されました

ライブ・プレビューを見るには、「ライブ・ページを見る」ボタンをクリックしてください。

WordPressでダイナミックなランディングページを

ボーナス:ランディングページからより多くを得る

ランディングページをレベルアップさせる方法をお探しですか?これらのガイドがきっとお役に立ちます:

おめでとう!

動的ランディングページとは何か、SeedProdのランディングページビルダーを使ってWordPressで動的ランディングページを作成する方法はお分かりいただけたと思います。SeedProdのユーザーフレンドリーなインターフェースは、あなたのランディングページを超簡単にパーソナライズします。

独自のダイナミックコンテンツ・ランディングページを構築する準備ができたなら、SeedProdは、コーディングも複雑な設定も不要で、プロセスを簡単にします。

この記事を気に入っていただけたなら、ぜひTwitterや Facebookをフォローして、ビジネスの成長に役立つコンテンツをお楽しみください。

著者アバター
ステイシー・コリン ライター
ステイシーはWordPressとデジタルマーケティングについて10年以上、その他のトピックについてはもっと長い間執筆している。また、ウェブデザイン、ユーザーエクスペリエンス、SEOにも造詣が深い。

情報開示私たちのコンテンツは読者支援型です。つまり、あなたが私たちのリンクをクリックした場合、私たちはコミッションを得る可能性があります。私たちは、読者に付加価値をもたらすと信じる製品のみを推薦します。