動的ランディングページとは何か（＋WordPressで作る方法） 

ダイナミック・ランディングページについてもっと知りたいですか？

With a dynamic landing page, you can tailor your landing page content to fit your website visitor’s needs. As a result, you can significantly boost conversions and increase conversion rates.

In this post, I’ll explain what a dynamic landing page is and how to create a dynamic landing page in WordPress.

その前に...

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

Now, all the above might sound pretty complicated at first glance. Surely you’d need to hire expert help to create dynamic landing pages that automatically change based on search queries, Google ads text, and other factors.

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

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

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

WordPress has a wide variety of powerful page builders that help to enhance your landing page performance. But when it comes to dynamically inserted content, SeedProd is one of the best solutions.

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

You can start with a premade responsive landing page design template and customize it in the visual editor. Or you can create one from scratch and use SeedProds drag-and-drop content blocks to build out your page.

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

• プレゼント
• お問い合わせフォーム
• ログインフォーム
• 登録フォーム
• ソーシャル・プロフィール
• 画像カルーセル
• 価格表
• グーグルマップ
• カウントダウン・タイマー

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

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

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

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

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

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

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

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

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

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

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

• 近日公開
• メンテナンス・モード
• 404
• ログイン

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

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

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

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

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

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

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

• 近日公開
• メンテナンス・モード
• 404ページ
• 売上高
• ウェビナー
• リード・スクイーズ
• ありがとう
• ログイン

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

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

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

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

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

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

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

1. 左のパネル：ページを構築しカスタマイズするためのページブロックとセクション
2. Right panel: Preview of your how your landing page design looks in real-time

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

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

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

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

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

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

• 無地またはグラデーションカラー
• 背景画像
• 背景の幅

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

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

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

Now it’s time to personalize content for users looking for your products or services via search engines or ads.

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

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

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

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

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

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

Query parameter dynamic text lets you personalize content based on different queries. This is an excellent way to personalize your landing page based on ad keywords or customize a page with someone’s name.

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

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

SeedProdでは、ランディングページにダイナミックテキストを追加するのがとても簡単で、どこでも使用することができます。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Bonus: Get More From Your Landing Page

Looking for more ways to level up your landing page’s success? These guides are sure to help:

• WordPressでランディングページのA/Bテスト：簡単ガイド
• コンバージョン率を高めるランディングページの見出しの公式
• ランディングページのURLの例とベストプラクティス
• 良いランディングページのコンバージョン率とは？
• Landing Page Not Converting? Tips to Fix It Fast
• Anatomy of a Landing Page: Essential Elements
• 驚異的なコンバージョン率を実現するランディングページのベストプラクティス
• ランディングページの直帰率を改善する方法
• How to Increase Landing Page Conversions
• 専門家によるランディングページ最適化のヒント

おめでとう！

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

このプラグインは高速で肥大化しないだけでなく、とても使いやすく、初心者でも開発者を雇うことなくダイナミックなページを作成できる。

だから、自分で試してみてはどうだろう？

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