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

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

無料ランディングページの作り方(コーディング不要)

How to Create a Free Landing Page in WordPress (No Coding Needed) 

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

WordPressでランディングページを無料で作成したいですか?

Building a website is the first crucial step in marketing your brand online. But if you really want to generate more leads and sales, you’ll need a high-converting landing page. Luckily, there are plenty of free website landing page builders to make the process easier.

In this article, I’ll show you how to create a free landing page in WordPress with no coding needed.

How to Build a Landing Page in WordPress for Free:

ランディングページは何に使われるのか?

ランディングページは、訪問者をリードや顧客に変えるための独立したウェブページです。ランディングページは、Eメールリストへの登録、製品の購入、または他の類似したアクションのような特定のアクションを実行するように促すことによってこれを行います。

ランディングページは、訪問者に行動を促すために使われる。

本格的なウェブサイトとは異なり、ランディングページは、訪問者にクリックしてもらって最終的な目標を達成するという、1つの特定の目標を持った1つのページです。ランディングページがうまく機能すれば、マーケティングキャンペーンで望む結果を得る可能性を大幅に向上させることができます。

ランディングページの仕組み

ランディングページを成功させるには、ターゲットを絞ったトラフィックを誘導する必要があります。これには、次のような方法があります:

  • Sending your landing page to your mailing list to encourage click-throughs.
  • ランディングページのリンクをソーシャルメディアネットワークに投稿し、トラフィックを誘導する。
  • ブログ記事内にランディングページのリンクを追加する。
  • 検索エンジン向けにランディングページを最適化し、オーガニックなトラフィックを誘導する。
  • 検索エンジンでPPC広告キャンペーンを作成し、ランディングページにリンクします。

これらはすべて、あなたのランディングページにトラフィックを誘導する優れた方法です。しかし、ランディングページにたどり着いた人はどうすればいいのでしょうか?

コール・トゥ・アクションをクリックした後、ユーザーはショッピングカート、問い合わせフォーム、またはウェブサイトの内部ページに送られるのでしょうか?次のステップをよく考え、1クリックでそこに到達できる簡単な方法を作りましょう。

良いランディングページを作るために考慮すべきこと

無料のランディングページを作り始める前に、以下のようないくつかのことを心に留めておく必要があります:

  • ランディングページのゴール:ランディングページに何を達成させたいかを明確にし、その詳細をデザイン全体に一貫性を持たせます。
  • 明確な視覚的階層:どのページ要素が最も重要かを把握し、それらを目立たせることで人々の行動を促す。
  • CTAでアクションを起こす:ランディングページの訪問者が何をすべきかを明確にし、簡単に実行できるようにしましょう。
  • 目を引くデザイン:クリックしたくなるような魅力的なデザインで訪問者を惹きつけましょう。また、重要なページ要素は折り目の上に配置するようにしましょう。
  • 簡潔なコピー:ボディコピーは短く、要点を押さえ、有益なものにする。次の文章、次の文章と読みたくなるような魅力的な見出しを使いましょう。
  • パワフルな画像:画像を使って話の内容を説明する。一般的なストックフォトは避け、ストーリーのある画像を選びましょう。
  • Focus on value: Explain to people how clicking your CTA button will benefit them. What will they get? How will it improve their lives?

1時間以内に無料のランディングページを作成する方法

Now that you know what a landing page is and how it works, let’s look at how to create a free landing page on WordPress with a website builder.

For this tutorial, I’ll be using SeedProd‘s landing page builder to build a free landing page.

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

SeedProd is one of the best free landing page plugins for WordPress, with coming soon and maintenance mode functionality. It makes it easy to build any landing page on your WordPress site without hiring a developer.

With its drag-and-drop visual page editor, you can create custom landing pages quickly without writing a single line of code. SeedProd also includes various customizable landing page templates. You can then customize them in the visual editor by adding signup forms, contact forms, and other page elements.

SeedProd also integrates with various email marketing tools to help grow your email list.

他のページビルダーとは異なり、SeedProdは電光石火の速さで、あなたのウェブサイトを遅くすることはありません。最小限のコードと最良のデザインプラクティスを使用し、あなたのサイトが可能な限り高速であることを保証します。

さあ、飛び込もう!

ビデオ・チュートリアル

書面によるチュートリアルをお読みになりたい場合は、以下の手順に従ってください。

1.SeedProdの無料ランディングページ作成ソフトをインストールする。

最初のステップは、SeedProdの無料ランディングページ・プラグインをインストールすることです。これは、WordPressのダッシュボードからプラグイン " 新規追加に移動して行うことができます。

次に、右側の検索ボックスに「SeedProd」と入力してください。すると、次のような結果が表示されます:

SeedProd無料ランディングページ・プラグインをインストールする。

Click Install next to the Website Builder by SeedProd option. Then, go ahead and click Activate.

SeedProdの無料ランディングページ・プラグインを有効にする

After activating the plugin, you’ll see the SeedProd setup wizard, which helps you get started with building a landing page in just 2 minutes. So go ahead and click “Get Started”.

Starting the SeedProd setup wizard

For the first step in the wizard, you’ll need to enter an email address to create your free SeedProd account. Then, decide what type of landing page you want to create.

SeedProd setup wizard step 1

There are 3 free options to choose from:

You’ll also see several Pro options which allow you to setup login pages, 404 pages, online stores, and even a custom WordPress theme.

For this guide, let’s focus on the free options and select the “Marketing Landing Page”, then click “Save and Continue”.

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

The next step in the setup wizard allows you to choose a free landing page template.

You can filter the templates by clicking the different categories along the top of the screen:

  • 近日公開
  • メンテナンス・モード
  • 404ページ
  • 売上高
  • ウェビナー
  • リード・スクイーズ
  • ありがとう
  • ログイン
Choosing a free landing page template for WordPress in SeedProd.

By default, there are 7 free landing page templates across the different page categories. You can also unlock 9 more free templates by subscribing to the email list for free. To unlock over 300 more templates, you can upgrade to SeedProd Pro.

Choosing a free landing page template in SeedProd

このチュートリアルでは、無料のフィットネス・セールスページ・テンプレートを使用します。テンプレートのアイコンにマウスカーソルを合わせて、チェックマークをクリックしてください。

After choosing your template, you’ll automatically move onto the final step of the setup wizard. Here, you can take advantage of a discount for upgrading to SeedProd Pro. You can also choose to install other optional free WordPress plugins.

Installing optional WordPress plugins

If you’d prefer not to install these plugins, unclick the toggle. Then, go ahead and click “Finish Setup & Start Building Your Page”.

Now you’ll exit the setup wizard onto the SeedProd setup page. Here, you’ll see that the “Setup a Landing Page” option is crossed out, which means you’ve completed this task.

SeedProd setup page

You’ll also notice the option to “Edit Landing Pages”. Click this button.

Now, SeedProd will take you to the landing page dashboard. Here, you can see the free landing page you just setup under the “Landing Pages” heading.

Edit free landing page in WordPress

Hover your cursor over the landing page link, then click the Edit option to open and start customizing your page.

3.独自のランディングページコンテンツを追加する

SeedProd’s visual page builder is divided into 2 distinct sections. On the left-hand side are the different blocks used to design your page, while on the right is a live preview of your landing page.

SeedProdの無料ドラッグ&ドロップ・ランディングページ・エディタは、2つのセクションに分かれています。

コンテンツを追加するには、左のパネルからブロックをドラッグしてライブプレビューにドロップするだけです。変更がリアルタイムで表示されます。

There are various landing page blocks to choose from, including:

  • 見出し
  • テキスト
  • リスト
  • ボタン
  • 画像
  • ビデオ
  • ディバイダー
  • スペーサー
  • コラム

You can also use 5 of SeedProd’s Advanced page blocks – Giveaway, Payment Button, Contact Form, Envira Gallery, and Custom HTML – for free.

Free advanced landing page blocks in SeedProd

With these blocks, you can:

Start adding your unique content by clicking any block on your live preview. This will show a settings panel on the left-hand side, where you can replace the default content with your own.

SeedProdインラインテキスト編集

また、SeedProdのインラインテキスト編集機能を使って、プレビュー上で直接コンテンツを編集することもできます。

デフォルトの画像を置き換えるのも簡単です。ライブプレビューで画像をクリックし、右側の設定パネルでゴミ箱アイコンをクリックするだけです。

ランディングページの画像を差し替える

次に、「自分の画像を使用する」ボタンをクリックして、コンピューターまたはWordPressのメディアライブラリから写真をアップロードします。

新しいランディングページ画像のアップロード

全体的な外観に満足するまで、コンテンツを追加し続けます。その後、画面右上の緑色の保存ボタンをクリックします。

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

無料のランディングページに独自のコンテンツを追加したら、スタイリングがあなたのブランドと一貫していることを確認したい。

左下の歯車アイコンをクリックして、グローバルページの設定を表示すれば、簡単にできます。

ランディングページのグローバル設定を編集する

この設定により、ランディングページをカスタマイズすることができます:

  • 背景
  • カラー
  • フォント
  • カスタムCSS

まずは、ランディングページの背景をカスタマイズするために、背景オプションをクリックしてみましょう。このエリアでは、背景色を変更したり、カラーグラデーションを追加したり、カスタム背景画像をアップロードしたりすることができます。

カスタムランディングページの背景を追加する

カスタム背景画像を追加するには、[独自の画像を使用]ボタンをクリックします。

カスタム背景画像のアップロード

フォントセクションでは、ランディングページの見出し、リンク、本文に使用する無料のGoogleウェブフォントをほぼ無制限の数から選ぶことができます。

ランディングページの無料フォントをカスタマイズ

Just click any of the drop-down menus to pick your preferred fonts.

The Colors section has similar point-and-click settings where you can select custom colors for headers, text, links, buttons, and more.

ランディングページにカスタムカラーを追加する

Just click any option and use the color picker to select one that matches your branding and overall page design. This will edit those colors for your whole landing page.

ランディングページのデザインに満足したら、保存ボタンをクリックして設定を保存します。

5.ランディングページが正しく機能しているかチェックする

無料のランディングページのデザインが完成したら、ウェブサイトに公開する前に、すべてが正しく機能することを確認しましょう。デザインに目を通し、CTAボタンのリンクが機能しているか、誤字脱字や文法の間違いがないかをダブルチェックしてください。

You’ll also need to make sure your landing page looks good on mobile devices. This is super-easy with SeedProd’s mobile preview option.

SeedProdのモバイルプレビューアイコンをクリックします。

Just click the mobile icon at the bottom of your screen to preview your landing page on mobile, tablet, and desktop.

無料ランディングページをモバイルデバイス用に編集する

そこから、あなたのページがモバイル画面とデスクトップ画面の両方で美しく見えるまで、いろいろなものを移動させることができます。あなたが加えた変更は、自動的に両方のバージョンのページに適用されます。

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

ランディングページが正しく機能し、モバイルでも見やすいことを確認したら、次はいくつかの設定を行います。

無料ランディングページの設定を編集する

画面上部のページ設定タブをクリックすると、SeedProdの様々なページ設定が表示されます:

  • 一般設定:無料ランディングページの名前とURLを変更し、ページを下書きまたは公開にします。
  • SEO対策: All in One SEOWordPressプラグインを使用して、ページのSEOタイトル、メタディスクリプションなどを設定します。
  • アナリティクス WordPressに最適なGoogle AnalyticsプラグインMonsterInsightsでランディングページのパフォーマンスを監視しましょう。
  • スクリプト: Facebookトラッキングピクセルなどのカスタムトラッキングスクリプトをランディングページに追加します。

ページ設定の編集が終わったら、忘れずに「保存」ボタンをクリックしてください。

7.WordPressで無料ランディングページを公開する

無料のランディングページの仕上げを終えたら、WordPressのウェブサイトに公開しましょう。

そのためには、画面右上の緑色の「保存」ボタンの横にある下向き矢印をクリックし、「公開」をクリックします。

WordPressで無料のランディングページを立ち上げるには、「公開」をクリックします。

すると、ランディングページが公開されたことを知らせるポップアップが表示されます。

ライブページを見る」ボタンをクリックして、無料のWordPressランディングページをプレビューしてください。

ライブページを見る」ボタンをクリックして、無料のランディングページをプレビューしてください。

SeedProdで作られた無料のWordPressランディングページ

おめでとう!

WordPressで無料のランディングページを作成する方法がお分かりいただけたと思います。そして何より素晴らしいのは、技術的な専門知識もコーディングも必要なく、お金もかからなかったということです!

SeedProdのプレミアム機能の詳細については、こちらのチュートリアルをご覧ください:WordPressでランディングページを作成する方法

あるいは、すぐに飛び込んで...

Bonus: More Landing Page Tips

If you’re looking to learn more about landing pages, take a look at these landing page resources:

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

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

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

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