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

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

ワードプレスでランディングページを作成する方法

How to Create a Landing Page in WordPress with SeedProd 

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

I often create landing pages for our WordPress website, so I know a few things about making pages that convert.

While there are many ways to build them in WordPress, I’ve found the easiest solution is to use a page builder like SeedProd. It has hundreds of high-converting templates and features that make the overall page-building experience easy.

And, in this guide, I’ll walk you through creating a landing page in WordPress step by step.

How to Create a Landing Page in WordPress:

Benefits of a WordPress Landing Page

Let’s start by looking at why using a landing page is a good idea.

A landing page is useful for many reasons. It’s a special page on your website, not your homepage, where people arrive after clicking a link from somewhere else.

Landing page example made in SeedProd

Here are some good reasons to have a landing page on your WordPress site:

  • Get More Sign-Ups: Often, people get lost or confused when there’s too much going on. A landing page has one clear message and action to take, which means people are more likely to do what you want them to, like sign up or buy something.
  • Build Your Brand: You can make a landing page look exactly how you want, with your logo and colors. This helps people remember your brand and makes your business look professional.
  • More Control Over Design: You get to decide exactly what your landing page looks like, which is different from regular pages. This means you can make it match what you want to say and use it with other WordPress tools.
  • No Extra Pages Needed: Sometimes, you want to promote something without making a whole new page that shows up in your website’s menu. Landing pages let you promote just one thing, like a special event or offer, without making a completely separate page.

Whether you want more leads, sell products, get people to sign up for a webinar, or any other goal, a landing page can help. Plus, it can also help your website show up better in search results.

Need ideas? Check out these landing page examples.

Now, let’s see how you can easily make a landing page in WordPress.

What is a landing page?
A landing page is a single web page that people visit after clicking a link in an ad or email. Its main purpose is to get leads, increase sales, test interest in a product, or offer content like e-books. Unlike regular web pages, landing pages focus on one campaign goal and aren’t in the website’s main menu.
なぜWordPressでランディングページを作るのか?
Creating a landing page with WordPress is popular because it’s a widely used platform, running over 43% of all websites. It’s flexible and easy to use, great for making various types of websites.

Plus, there are many plugins, including page builders, that help create landing pages easily. These page builders are user-friendly and don’t require coding skills. They let beginners make effective landing pages without needing a developer.
What’s the easiest way to build a WordPress landing page?
One of the easiest ways to build a WordPress landing page include using a landing page builder or plugin. Some of the most popular options are SeedProd, Thrive Architect, and Divi.

How to Create a Landing Page in WordPress with SeedProd

While you don’t technically need a WordPress landing page plugin to build your page, using one is always my first choice. They’re easy to use, don’t require any coding skills, and allow you to spin up a page in minutes.

I also always use SeedProd instead of the other options available. Let’s look at why.

SeedProd ドラッグ&ドロップWordPressウェブサイトビルダー

First off, SeedProd is fast. Really fast. Independent tests show SeedProd pages loading in under a second, which is crucial because slow pages lose visitors and sales. This speed advantage gives you a head start.

But SeedProd is more than just fast. It’s also packed with tools to boost your conversions. Features like countdown timers (proven to be effective – one company saw a 300% increase in conversions using them) are built-in and ready to go.

And the best part? Building your pages is incredibly easy. You don’t need any coding skills. The drag-and-drop system and pre-built templates make designing a professional-looking landing page (or even a whole website) a breeze.

custom WordPress website made using SeedProd

I built my entire site with SeedProd without writing a single line of code.

So, let’s jump right into the steps for using SeedProd to create a landing page in WordPress:

ステップ1.SeedProdランディングページ・プラグインをインストールする。

Click here to get started with SeedProd and quickly download the plugin. In just a few clicks, you’ll have it installed on your WordPress site.

If you’d like a walkthrough, we have a guide on installing SeedProd.

✏️ Note

While there’s a free version available, this tutorial will focus on the Pro version, which provides access to advanced features like premium templates and powerful integrations.

After activating the plugin, navigate to SeedProd » Landing Pages from your WordPress dashboard and click the Add New Landing Page button.

新しいランディングページを追加 SeedProd

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

On the next page, you can choose a landing page template to jumpstart your design process. Whether you need a landing page for sales, lead generation, webinar registrations, or a custom project, there’s a template to match your goals.

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

These fully customizable templates eliminate the need for design experience, allowing you to create a professional-looking landing page with ease.

また、ブランク・テンプレートを選択して、ビジュアル・エディターで独自のページを作成・デザインすることもできます。

このチュートリアルでは、ニュースレター・スクイーズページ・テンプレートを選びます。このテンプレートを使うには、テンプレートにマウスカーソルを合わせ、チェックアイコンをクリックします。

ランディングページのテンプレートを選び、起動する

その後、ライトボックスのポップアップが表示されるので、そこにページの名前とカスタムURLを入力します。保存してページの編集を開始する」ボタンをクリックすると、ドラッグ&ドロップビルダーにテンプレートが読み込まれます。

ワードプレスのアンディング・ページに名前とカスタムURLを付ける。

Step 3. Customize Your Landing Page Template

After creating your new page, you’ll see the visual drag-and-drop page builder. This makes it simple to customize your landing page’s layout and content.

Drag and drop elements like headlines, images, buttons, and more directly onto the page. No coding required.

ドラッグ&ドロップのビジュアルページビルダーでワードプレスのページをカスタマイズできます。

You’ll find various blocks in the sidebar, each with customizable options to match your brand.

例えば、ボタンブロックをクリックして設定を開くと、いくつかのテンプレートスタイル、色、グラデーション、アウトラインが表示されます。

WordPressでランディングページのコンテンツ要素のテンプレートを選ぶ

The Advanced tab also allows you to change the block’s content, size, alignment, color, and typography.

Need to boost conversions? The Advanced blocks have you covered, with options for lead generation forms, countdown timers, testimonials, and more.

WordPressにコンバージョンに特化したランディングページ・ブロックを追加する

To learn how to add some of these features, check out the following tutorials:

Adding Landing Page Sections

Want to create entire sections quickly? SeedProd offers pre-made layouts for headers, hero areas, FAQs, and more, giving you a head start on your design. 

SeedProd WordPressのランディングページのセクション

ランディングページにセクションを追加するには、マウスカーソルを例の上に置き、プラス+アイコンをクリックします。

新しいランディングページのセクションを追加する

その後、SeedProdはあなたのページにセクションを挿入します。その後、ブロックと同じように要素をクリックして編集することができます。

ワードプレスのランディングページのセクションをカスタマイズする

Customizing Global Styling Options

To maintain a consistent look and feel across your landing page, use the global styling options to easily control colors, fonts, and background images.

WordPressランディングページのグローバル設定

例えば、動画背景や背景スライドショー機能をページに追加することができます。また、背景色を変更し、ランディングページの色調を統一することもできます。

ランディングページのグローバルカラー設定

Remember to save your changes during the design process by clicking the Save button at the top-right corner.

Restoring to an Older Landing Page Version

時には、以前のランディングページのバージョンに戻る必要があるかもしれません。

画面左下の時計アイコンをクリックしてください。すると、リビジョン履歴が表示され、別のバージョンに切り替えることができます。

ワードプレスのランディングページ改訂履歴

Step 4: Connect Your Email Marketing Service

Seamlessly grow your email list by integrating your favorite marketing tools.

Connect to popular email providers like Constant Contact, GetResponse, Mailchimp, ActiveCampaign, and more, ensuring every lead captured through your landing page goes straight to your email list.

ランディングページ統合

また、Zapierを使ってGoogle Analyticsのトラッキングやスパム対策、その他のアプリを設定することもできる。

統合リストでそれを見つけ、あなたの電子メールサービスをリンクするために接続をクリックします。

Eメールマーケティングサービスをランディングページに統合しましょう。

その後、指示に従ってアカウントの接続と認証を行ってください。その後、すべてのオプトインフォームをメールリストにリンクさせることができます。

ステップ5:ランディングページの設定

Next, take control of your landing page’s performance with easy-to-use settings.

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

Adjust SEO settings to boost your page’s visibility in search results, ensuring more potential customers can find you. You can also connect to analytics platforms to track your landing page’s effectiveness.

For advanced users, there are options for custom header, body, and footer scripts, giving you full control over your page’s functionality.

変更を保存するには、忘れずに「保存」をクリックしてください。

ステップ6:WordPressでランディングページを公開する

ランディングページを公開する前に、プレビューする必要があります。そうすれば、デスクトップとモバイルデバイスの両方で見栄えが良いかどうかを確認できます。

ページをプレビューするには、ランディングページビルダーのプレビューアイコンをクリックします。すぐにモバイルページのプレビューが表示されるので、スクロールして変更を加えることができます。もう一度アイコンをクリックすると、デスクトッププレビューに戻ります。

モバイルでランディングページをプレビューする

ページのライブプレビューを見たい場合は、目のアイコンをクリックして新しいタブでランディングページを開いてください。

すべての外観に満足したら、「保存」ボタンの下にある矢印をクリックし、「公開」をクリックします。

このガイドのために私がテストサイトで作成したランディングページの例です:

SeedProdを使ったWordPressでのランディングページ作成例

💡 Expert Tip

This landing page took me around 15 minutes to create.

You can make that time even quicker by using SeedProd’s Import and Export feature. It lets you export your designs as a .zip file so you can quickly reuse them for other projects.

For example, design a stock template and use it as a framework for your client projects to make the design process faster.

How Do I Make My WordPress Homepage a Landing Page?

ランディングページをウェブサイトの訪問者が最初に目にするものにしたい場合は、静的ホームページとして設定する必要があります。

これを行うには、WordPressのダッシュボードからSettings " Readingに進みます。次に、「静的ページ」オプションを選択し、ドロップダウンメニューから先ほど作成したランディングページを選択します。

静的ページが設定され、ランディングページがホームページとして設定されたWordPressの読書設定を強調するスクリーンショット

通常のホームページと同じではありません。代わりに、カスタムランディングページは、訪問者があなたのメインのWordPressサイトにクリックスルーしたときに着地する場所であることを意味します。

次に、ランディングページを最適化する

このガイドが、WordPressでランディングページを作成する方法を学ぶのに役立てば幸いです。ページが完成したら、最高の結果を得るためにテストと最適化をお忘れなく。

その際には、以下のガイドが役に立つだろう:

お読みいただきありがとうございました!ご質問やご意見がありましたら、お気軽にコメントをお寄せください。

また、YouTubeX(旧Twitter)Facebookでも、ビジネスの発展に役立つコンテンツを配信しています。

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

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