ウェブサイト検索

WordPress でランディング ページをゼロから構築する方法

ランディング ページは、リード フォームを介して訪問者の注意とその詳細 (電子メール アドレスなど) を獲得することを主な目的として設計された Web ページです。マーケティング対象の商品に応じて、特定のユーザーをターゲットにするように設計されています。

ランディング ページは、トラフィックをメイン Web サイトにリダイレクトするために使用されるスクイーズ ページとしても機能します。サイトにはランディング ページを必要な数だけ配置できます。実際、ランディング ページが多ければ多いほど、より多くのリードを獲得できる可能性が高くなります。

たとえば、電子メール キャンペーンを通じて新製品をマーケティングしている場合、ターゲットを絞った電子メール キャンペーンから特別に設計された製品ランディング ページにトラフィックをリダイレクトできます。電子メールやその他の手段で行うプロモーションにも同じことが当てはまります。重要なのは、開始するキャンペーンごとに独自のランディング ページを作成することです。

ランディングページの基本

ランディング ページがどのようなものでなければならないか、どのようなものでなければならないかについて、明文化されたルールはありません。しかし、私は何年にもわたってさまざまなランディング ページ スタイルを試した結果、ランディング ページをデザインする際には特定の重要な側面を考慮する必要があるという結論に達しました。上位 4 つは次のとおりです。

  1. 具体性: ランディング ページをデザインするときは、提供する内容を具体的にします。また、自分にとって何が役立つのかも知っている必要があります。たとえば、ユーザーがランディング ページにサインアップするときに無料の情報を提供するとします。どのように利益を得ますか？
  2. メリット: 最高のマーケティング用語を使用すると、訪問者の注意を引くことができます。しかし、どのようなメリットがあるのかを明確に説明しないと、コンバージョンが薄くなる可能性があります。優れたランディング ページでは、ユーザーがオファーからどのようなメリットを受けるかを明確にする必要があります。
  3. 緊急性: ランディング ページの文言は、緊急性を感じさせるものでなければなりません。ページ訪問者があなたのオファーを後ではなく今受け入れる必要がある理由を説明してください。
  4. コンバージョン: これで、訪問者の注意を引き、素晴らしいオファーについて説得することができました。では、彼らはどうやってそれを手に入れるのでしょうか？ランディング ページでは、リードの変換を可能な限りシンプルにする必要があります。

WordPressでランディングページを作成する

WordPress には、魅力的なランディング ページを構築するためのさまざまな方法が用意されています。ランディング ページの作成に使用できる 2 つのオプションと、開発者またはコーディングの知識を持つ上級 WordPress ユーザーのみにお勧めする 3 つ目のオプションについて説明します。

1. WordPress テーマを使用してランディング ページを作成する方法

ランディング ページの作成用に特別に設計された WordPress テーマが大量にあります。これらの単一ページのテーマには、ローカル スクロール、目を引くスライダー、機能ボックスなど、独自のランディング ページを簡単に作成できる優れた機能が含まれていることがよくあります。ここでは私たちのお気に入りをいくつか紹介します。

Zerif Pro WordPress テーマ

Zerif Pro は、非常に人気のある Zerif lite シングルページ ビジネス WordPress テーマのプレミアム バージョンです。ドラッグ アンド ドロップ ページ セクション、Site Origin ページ ビルダー、カスタマイズ可能な色、スライダーなど、プロフェッショナルなウェブサイトを作成するための使いやすいオプションを備えており、ランディング ページに最適なオプションです。

合計 WordPress テーマ

もちろん、トータル WordPress テーマ (40 以上のクイック スタート デモが含まれています) は、特にランディング ページにとって優れたオプションです。このテーマには、500 を超えるライブ テーマ カスタマイザー デザイン オプション (色、フォント、ページ幅など)、フロントエンドのドラッグ アンド ドロップ ページ ビルダー、100 のページ ビルダー要素、カスタム投稿タイプ (スタッフ、ポートフォリオ、紹介文用)、カスタマイズ可能なヘッダーが含まれています。フッターやその他にもたくさんあります。 Total で構築できないものはありません。

ただし、お気に入りのテーマを決めたら、インストールしてアクティブ化してください。新しいテーマを追加するには、[外観] > [テーマ] > [新規追加] に移動し、WordPress.org リポジトリから素晴らしい無料テーマを参照するか、アップロード リンクをクリックしてインストールします。他の場所からのプレミアムまたは無料のテーマ。

テーマを使ってホームページを作成する

この例では、ThemeIsle の Zerif Lite を使用します。これは、Web サイトまたは WordPress ダッシュボードから入手できます。簡単にテーマをインストールしてアクティブ化して開始します。

ほとんどのシングルページ WordPress テーマは、簡単に開始できるように「ホーム」ページ テンプレートを使用しています。テンプレートを使用するには、[ページ] > [新規追加] に移動し、ページに名前を付けて、サイドバーのページ属性セクションからページ テンプレートを選択します。 Zerif では、これはフロントページテンプレートです。次に、ページを公開します。

ホームページを公開したら、訪問者が URL にアクセスしたときに表示されるように、トップ ページとして設定する必要があります。 [設定 > 閲覧] に移動し、フロント ページの表示 > 静的ページで作成したページを選択します。次に、変更を保存します。

これで、ランディング ページのコンテンツのカスタマイズを開始できます。 Zerif Lite は、カスタマイザーの「フロントページ セクション」オプション (外観 > カスタマイズからアクセスできます) のテーマ オプションを使用します。青い鉛筆アイコンをクリックして、ページ コンテンツの一部を簡単に編集することもできます。完了したら保存するだけで、ランディング ページの準備が整います。

すべてのランディング ページ テーマでフロント ページ オプションに WordPress カスタマイザーが使用されるわけではありません。一部のテーマでは、WordPress ダッシュボード（通常は投稿、メディア、ページなどのオプションの近く）に表示されるカスタム投稿タイプを使用します。一部には、ホーム テンプレート専用の組み込みのドラッグ アンド ドロップ要素が含まれ、その他にはページ ビルダーが含まれます（これは、次に話します）。テーマの使用方法について質問がある場合はドキュメントを参照するか、プレミアム テーマの場合はサポートにお問い合わせください。

2. WordPress プラグインを使用してランディング ページを作成する方法

テーマは素晴らしいものですが、WordPress でランディング ページを作成する最も簡単な方法の 1 つはプラグインを使用することです。無料のものからプレミアムなものまで、ランディング ページ プラグインがたくさんあります。これらはすべて多かれ少なかれ同じように機能します。通常、さまざまな目的に応じたランディング ページ テンプレートのコレクションが提供されます。

インストールしてアクティブ化した後、プラグインの設定ページを使用してページのカスタマイズを管理できます。一部のプラグインでは、フック、フィルター、アクションを使用してランディング ページにさらにカスタマイズと機能を追加できるサードパーティの拡張機能を使用できます。考慮すべき注目すべき WordPress ランディング ページ プラグインがいくつかあります。

  • 繁栄のランディング ページ
  • WordPress ランディング ページ
  • 視差重力ランディング ページ
  • プレスの最適化

ただし、次のような一般的なページ構築プラグインを検討することもおすすめします。

  • WPベーカリーページビルダー
  • ビーバービルダー
  • エレメンター

私たちの個人的なお気に入りは WP Bakery Page Builder で、これはトップセラーの Total WordPress テーマに無料で付属しています。

プラグインを使用してランディング ページを作成する方法

ページビルダープラグインを使用するには、まず互換性のあるテーマをインストールしてアクティブ化する必要があります。ほとんどのテーマでは問題はありませんが、好みのプラグインで動作するように特別に作成またはテストされたテーマを見つけられるとより良いでしょう。この例では、Total テーマで WP Bakery Page Builder を使用します。これにより、推奨プラグインをインストールしてアクティブ化するよう求められます。

テーマにプロンプトが含まれていない場合は、ドキュメントを参照して、含まれているプラグインをインストールする方法を確認してください。または、ページ ビルダーを独自に購入した場合は、[プラグイン] > [新規追加] > [プラグインのアップロード] に移動してインストールしてアクティブ化します。

ページビルダープラグインがアクティブになったら、[ページ] > [新規追加] に移動して構築を開始します。

合計には、「ランディング ページ」ページ テンプレートの特別なオプションが含まれています。ページを作成するときに、このテンプレートによりヘッダー セクションとフッター セクションが削除されます（これらの領域は、ページ間を移動する必要がある複数ページのウェブサイトに適しているため、これは当然のことです）。テンプレートを選択する場合は、必ずページを保存してください。

ページの準備ができたら、構築を開始します。 Visual Composer を使用している場合は、バックエンド エディターまたはライブ フロントエンド エディターを使用するオプションが表示されます。 Total はフロントエンド エディターを完全にサポートしており、構築中に各要素を確認できるため、フロントエンド エディターを使用することを強くお勧めします。編集が完了したら、必ずページを更新または公開してください。この特定のページ ビルダーの使用方法について詳しく知りたい場合は、Visual Composer ガイドを参照してください。

次に、フロント ページを作成したばかりのページに設定する必要があります（ほとんどのテーマではこの設定を編集する必要があるため、この手順は少し馴染みがあるかもしれません）。そのため、[設定] > [閲覧] > [フロント ページ表示] > [固定ページ] に移動し、新しいホームページを選択します。

ボーナス: 既製のテンプレートをインポートする

ああ、Total WordPress テーマを使用している場合は、事前に作成されたランディング ページ (または複数ページのサイト デザイン) をインポートして開始するオプションもあります。合計には、テーマ パネル > デモ インポーターの大量のインポートが含まれます。

クリックしてインポートを開始します。 Total では、インポートする特定のデモに必要なプラグインをインストールしてアクティブ化するように求められます。

そこから、XML コンテンツ、画像、テーマ カスタマイザー設定、ウィジェット、さらにはスライダー (該当する場合) をインポートするオプションが表示されます。インポートが完了したら、好みに合わせてページを編集およびカスタマイズできます。

変更を加えるには、ページに移動し、編集したいページにカーソルを合わせて「ページビルダーで編集」オプションをクリックするだけです。これにより、フロントエンド エディタが開きます。ポイントアンドクリックするだけで編集を開始し、画面上部の「更新」ボタンをクリックして変更を保存します。それは本当に簡単なことではありません！

その他のオンラインツール

プラグインと同様、ランディング ページを作成するためのオンライン ツールが多数あります（Google で簡単に検索すれば、自分の目で確認できます）。これらは基本的に WYSIWYG Web サイト ビルダーのように機能し、ユーザー インターフェイス コンポーネントを選択して使用して、ランディング ページをすぐに作成できます。ただし、それらには制限があり、柔軟性のないものもあります。適切にデザインされ、手作業でコーディングされたページは、多くの場合、はるかに優れており、無限に柔軟です。

3. WordPress ページテンプレートを使用してランディングページを作成する方法 (上級)

開発者または WordPress の知識が豊富または上級ユーザーの場合は、現在の WordPress テーマを編集して、ランディング ページ用のカスタム ページ テンプレートを追加できます。多くの商用 WordPress テーマには、それぞれ特定の目的を持つ多数のページ テンプレートが付属しています。テーマには 1 つまたは複数のテンプレートを含めることができます。ただし、高品質のテーマには、さまざまな目的に合わせて、事前に構築されたランディング ページ テンプレートがいくつか用意されています。

ただし、空白のページ テンプレートから独自のランディング ページを作成することもできます。必要なのは、ある程度の CSS スキルとデザインに対する洞察力だけです。説明のために、<i>TwentyThirteen テーマの空白のページ テンプレートを使用して、シンプルなランディング ページを作成します。空白のページテンプレートに、大きなボタンと一緒に大きなキャッチーな見出しを配置するだけです。

この方法は、専用のドメインを持つランディング ページを作成する場合、つまり、メイン Web サイトの一部にならない場合に最適であることに注意してください。マルチサイトではデザインにあまり柔軟性がありませんが、専用ドメインを使用すると、他のページを気にせずにテーマを自由に解体できます。

注: このオプションは、知識と経験が豊富な開発者または上級 WordPress ユーザーにのみお勧めします。 WordPress を初めて使用する場合は、ランディング ページを作成するときにテーマとプラグインに固執することを強くお勧めします。

ステップ 1: 子テーマフォルダーを作成する

別のテーマに変更を加えるので、まず子テーマを作成することが重要です。こうすることで、コアテーマが更新されても、テーマへの変更が失われることはありません。

始めるには、まず FTP 経由で Web サイトに接続し、wp-content/主題 ディレクトリに子テーマ用の新しいフォルダーを作成する必要があります。編集中のテーマの末尾に「child」を追加することをお勧めします (たとえば、twentythirteenchild または類似したもの)。ここに新しいファイルを追加して、コアテーマに変更を加えます。

ステップ 2: 子テーマの新しい style.css ファイルを作成する

作成した子テーマ フォルダを開き、style.css という名前の新しいファイルを追加します（これが新しいスタイルシートになります）。次に、WordPress ダッシュボードで外観 > エディターに移動します。エディター ウィンドウに、テーマのデフォルトのスタイルシートが表示されます。

元のテーマ ファイルをガイドとして使用して、作成したばかりの子テーマの style.css ファイルの見出しセクションを作成します。これは次のようになります。

/*
Theme Name: TwentyThirteenChild
Theme URI:
Description: A child theme for the default Twenty Thirteen WordPress theme
Version: 1.0.0
*/

新しいスタイルシートの準備ができたら、次のステップでは、親スタイルシートをキューに入れて読み込みます。

ステップ 3: 子テーマの function.php ファイルを作成する

子テーマをアクティブ化すると、Web サイトにはスタイルが読み込まれないため、親テーマのスタイルシートを読み込む必要があります。これを行うには、子テーマ フォルダに functions.php という名前の新しい空のファイルを作成します。次に、次のコードを追加します。

<?php
function my_theme_enqueue_styles() {

    $parent_style = 'twentythirteen-style';

    wp_enqueue_style( $parent_style, get_template_directory_uri() . '/style.css' );
    wp_enqueue_style( 'twentythirteenchild-style',
        get_stylesheet_directory_uri() . '/style.css',
        array( $parent_style ),
        wp_get_theme()->get('Version')
    );
}
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );

これにより、親テーマのスタイルシートの後に、編集した子テーマのスタイルが読み込まれます。これで、TwentyThirteen テーマの子テーマが機能するようになりました。変更を加えます。

ステップ 4: スタイルをカスタマイズする

子テーマの準備ができたら、ランディング ページのカスタマイズを開始できます。まず、ランディング ページを作成しているため、メイン ナビゲーションを削除することをお勧めします。これを行うには、次のコードを子テーマの style.css ファイルに追加します（注: ナビゲーション要素の名前は、ナビゲーション要素の名前と異なる場合があります。要素名を見つけるには、次のコードを使用できます）ブラウザのインスペクタ ツールを使用するか、header.php ファイルを確認してください):

/*
Theme Name: TwentyThirteenChild
Theme URI:
Description: A child theme for the default Twenty Thirteen theme
Version: 1.0.0
*/

/*Custom styling for landing page*/

body .navbar { display: none; }

ここでサイトを表示すると、ナビゲーションが表示されなくなります。代わりに、登録ページにリダイレクトされ、その後メインのウェブサイトにリダイレクトされる大きな CTA ボタンを挿入します。

次に、フォント サイズを変更して、スタイルシートのサイト ヘッダー (h1) をカスタマイズします。サイトヘッダーはクラス .site-title によって識別されます。もう一度、独自のテーマを再確認して、ヘッダーで使用されている要素名を確認してください。例のものとは異なる可能性があります。フォント サイズを拡大するには、このコードの最後の行を子テーマのスタイルシートに追加します。

/*
Theme Name: TwentyThirteenChild
Theme URI:
Description: A child theme for the default Twenty Thirteen theme
Version: 1.0.0
*/

/*Custom styling for landing page*/

body .navbar { display: none; }

body .site-title { font-size: 90px; }

ページを保存して更新します。より大きなタイトルが表示されるはずです。

ステップ 5: 空白のページ テンプレートを作成し、<i>front-page.php という名前を付けます。

WordPress エディターで、ページ テンプレート (page.php) をクリックしてコードを表示します。最初の行を get_header() までコピーします。これは次のようになります。

<?php
/**
* Template Name: My Landing Page
*
* This is the template that displays all pages by default.
* Please note that this is the WordPress construct of pages and that other 'pages' on your WordPress site will use a different template. 
*
* @package WordPress
* @subpackage Twenty_Thirteen
* @since Twenty Thirteen 1.0
*/
get_header(); ?>

コード エディターを開き、front-page.php という新しいファイルを作成します。前の手順でコピーした行を貼り付けます。この新しいファイルを子テーマ フォルダに保存します。

なぜfront-page.phpなのか?これは静的なフロント ページになるため、常に最初に選択されて表示され、front-page.php が WordPress テンプレート階層内で最も高い優先順位を持つようにする必要があります)。また、テンプレート ファイルにフッターを (get_footer() 関数を使用して) 挿入することも、挿入しないこともできます。省略しました。

コメント セクションの最初の行を削除し、テンプレート名に置き換えます。 マイ ランディング ページ と呼びます。

変更を保存します。ここでサイトを表示しようとすると、変更されたヘッダーだけが表示された空白のページが表示されます。それがfront-page.php テンプレートです。まだコンテンツを入れていないので空白です。

ステップ 6: ランディング ページにカスタム コンテンツ マークアップを挿入する

ヘッダーを編集し、空のページ テンプレートを作成したので、実際のコンテンツをランディング ページに追加します。残っているのは、新しいフロントページ テンプレートに大きなボタンを挿入することだけです。このコードをファイルに貼り付けて保存するだけです。これは、div でラップされたリンクだけで、それだけです。

/**
* Template Name: My Landing Page
*
* This is the template that displays all pages by default.
* Please note that this is the WordPress construct of pages and that other 'pages' on your WordPress site will use a different template. 
*
* @package WordPress
* @subpackage Twenty_Thirteen
* @since Twenty Thirteen 1.0
*/
get_header(); ?>

    <div class="landing-page">
        <a href="#" class="button"> Big button here</a>
    </div>

サイトを表示すると、ボタンのリンク テキストとともにページのコンテンツ部分に挿入した見出しが表示されます。

次に、CSS スタイルを使用してページに命を吹き込みます。 <i>[外観] > [エディタ] に移動します。 [<i>スタイルシート] をクリックして <i>style.css ファイルを編集用に開きます。このコードを貼り付けて保存します。

/*
Theme Name: TwentyThirteenChild
Theme URI:
Description: A child theme for the default Twenty Thirteen theme
Version: 1.0.0
*/

/*Custom styling for landing page*/

body .navbar { display: none; }

body .site-title { font-size: 90px; }

.landing-page {
    width: 80%;
    margin: 0 auto;
    text-align: center;
}

.button {
    display: block;
    width: 50%;
    background: #FF6600;
    border: 2px solid #FF8533;
    color: rgba(255, 255, 255, 0.55);
    text-align: center;
    font: bold 3.2em/100px 'Open Sans', 'Helvetica Neue', Arial, Helvetica, sans-serif;
    margin: 100px auto auto auto;
    -webkit-border-radius: 15px;
    -khtml-border-radius: 15px;
    -moz-border-radius: 15px;
    border-radius: 15px;
    text-shadow: 0 3px 3px rgba(255, 255, 255, 0.2);
}

a.button { text-decoration: none }

a.button:hover {
    color: #fff;
    background: #FF8533;
    background: -webkit-linear-gradient(top, #FF8533, #FF8533);
    background: -moz-linear-gradient(top, #FF8533, #FF8533);
    background: -o-linear-gradient(top, #FF8533, #FF8533);
    background: -ms-linear-gradient(top, #FF8533, #FF8533);
    background: linear-gradient(top, #FF8533, #FF8533);
}

ページは次のようになります。

おめでとう！ WordPress を使用してカスタムのランディング ページを作成しました。非常に基本的なものなので実際には使用しないでしょうが、ページ テンプレートを使用してそれを行う方法を示すことが目的です。この方法で、任意のテーマの任意のページを編集し、カスタムのランディング ページを作成できます。

結論

WordPress ランディング ページを作成する 3 つの一般的な方法について見てきました。テーマまたはプラグインを使用することを強くお勧めします。ただし、DIY の道を歩みたい場合は、必ず最初にコーディング スキルを磨いてください。

マーケティング キャンペーンにランディング ページを使用していますか?その過程で見つけた経験、成功、課題について教えていただけますか?それについてすべて聞きたいです!