簡単!Wordpressのプラグインを使ってランディングページを作成する方法

インターネットを使ってビジネスをしていると、ランディングページ(LP)と呼ばれる、縦長レイアウトの1枚のページが必要になることがあります。

「WordPressでランディングページを作成したいけど、方法がわからない」
「初心者でも簡単にランディングページを作成できるWordPressのプラグインを知りたい」
「どんなところに注意してランディングページを作ったらいいの?」

この記事では、WordPressを使って自分でランディングページを制作したいと考えたときによくぶつかる上記のような疑問にお答えしていきます
また、記事の最後ではランディングページを外注する際の注意点についても解説しています。

ぜひ最後までお読みください。

【プロが厳選】ランディングページ(LP)に強い制作会社を見る

目次
  1. 1. Wordpressでランディングページを作成する方法|やりたいことや自分のレベルに合わせて方法を変えよう
    1. 1-1. デザインやコーディングを1から行う
    2. 1-2. テーマやテンプレートを利用する
    3. 1-3. ビルダープラグインを使う
  2. 2. ランディングページが簡単に作れるプラグイン4選
    1. 2-1. Elementor Page Builder【日本の利用者も多く関連情報も豊富】
    2. 2-2. Landing Page Builder|シンプルな操作でランディングページが作成できる
    3. 2-3. Divi|豊富なテーマや様々な関連プロダクトで拡張性が高い
    4. 2-4. Danganページビルダー|日本人が開発したプラグインで英語ができなくても安心
  3. 3. 代表的なプラグインを使ってみよう【Elementor Page Builderの使い方】
    1. 3-1. STEP1:Elementor Page Builderをインストールしよう
    2. 3-2. STEP2:「固定ページ」の「新規追加」から作成を始めよう
    3. 3-3. STEP3:テンプレートを選ぼう
    4. 3-4. STEP4:変更したい画像やテキスト部分を選択して編集しよう
  4. 4. ランディングページを作成する際の注意点
    1. 4-1. ランディングページを作成する目的を明確にしよう
    2. 4-2. どんな人に向けたランディングページなのかを考えよう
    3. 4-3. ランディングページを見る人がどんな情報を求めているか考えよう
  5. 5. 【コラム】ランディングページ制作外注先選定のポイント
  6. 6. まとめ
    1. 6-1. ランディングページ制作をプロに任せたい方へ

Wordpressでランディングページを作成する方法|
やりたいことや自分のレベルに合わせて方法を変えよう

自分でランディングページを作るとき、ポイントとなるのは2点です。

  • どんなランディングページを作りたいか?
  • 自分の技術レベルはどれぐらいか?

もし、理想のランディングページを自分で作るのは難しそうだということであれば、制作会社に外注することをおすすめします。
この記事の最後で外注先を選定するときのポイントを解説しますので、そちらを参考にしてみてください。

以下では、Wordpressでランディングページを作成する方法を3つ紹介します。
「この方法なら自分の技術でもできて、イメージ通りのランディングページが作れそう!」
というものがあれば、是非挑戦してみてください。

デザインやコーディングを1から行う

最も自由度が高く、自分の思い通りのランディングページを制作できるのがこの方法です。
一方、デザインやコーディングをすべて自分で行うことになるため、プログラミングの知識や技術がない初心者が挑戦するには少しハードルが高い選択肢でもあります。

WordPressでランディングページをコーディングする際、必要になる技術は主に以下の4つ。

  • HTML(Webページ作成によく利用されているマークアップ言語)
  • CSS(スタイルシート言語の一種)
  • JavaScript(スライドショーなどの動的コンテンツ実現のための言語)
  • PHP(サーバー側で使用される言語)

プログラミングの知識・技術を持っていたり、習得する意欲がある場合には、完全オリジナルのランディングページを制作できるこの方法がおすすめです。

テーマやテンプレートを利用する

WordPressのテーマには、ランディングページ制作機能がついているものがあります。
こういったテーマを利用することで、初心者でも簡単にランディングページの制作が可能です。

ランディングページ制作機能付きのテーマは「アルバトロス」や「賢威」などの有料のものだけでなく、「Xeory Base」や「Lightning」など無料のものもあります。
デザインが自分のイメージに合うか、機能は充分か、予算内で導入できるかなどの観点からテーマを選びましょう。

また、テーマ内に用意されているデザイン・機能では満足できない場合は、HTML、CSS、JavaScript、PHPなどの知識・技術があれば、テーマをカスタマイズすることも可能です。
一から自分でコーディングするよりも少ない労力でオリジナリティのあるランディングページを制作できます。

ビルダープラグインを使う

  • 自分が使っているWordPressテーマにはランディングページ制作機能がない
  • ランディングページ制作機能がついているテーマの中には、自分が使いたいテーマがない

こういった場合にはページビルダープラグインがおすすめです。
すでに運用している、もしくはこれから運用するWordPressテーマにプラグインを導入することで、ランディングページ制作機能を追加できます。

ドラッグ&ドロップや項目選択などの簡単な操作で制作できることに加えて、使用しているテーマのデザインを崩すことなくランディングページを別途制作できるというメリットもあります。

WordPressテーマと同じように、有料のもの無料のものがあり、プラグインごとに機能や操作性が異なります。導入する際の注意点は、ページビルダープラグインに限った話ではありませんが、使っているテーマや他のプラグインとの相性で正常に動作しない場合があることです。

テーマやプラグインの組み合わせは無限にあるため、実際に試してみて判断するしかありませんが、プラグインによっては互換性テストを行っているものもありますので、この点も一度調べてみてから導入することをおすすめします。

ランディングページが簡単に作れるプラグイン4選

  • デザインやコーディングを1から行う
  • テーマやテンプレートを利用する
  • ビルダープラグインを使う

WordPressでのランディングページの制作方法について、以上3つの方法を紹介しました。
以下ではこれらの中から、初心者でもテーマに縛られることなく簡単にランディングページを制作できる「ビルダープラグインを使う」方法について詳しく解説していきます。

まずはおすすめのプラグインを4つ紹介します。

Elementor Page Builder【日本の利用者も多く関連情報も豊富】

Elementor Page Builder【日本の利用者も多く関連情報も豊富】

出典

「Elementor Page Builder」は、様々なパーツをドラッグ&ドロップで配置することで直感的にページを作成できるプラグインです。
WordPressテーマのデザインに縛られることなく、ページ単位で自由にレイアウト可能です。

海外製ですが、日本語表示にも対応
日本の利用者も多く、数多くのサイトが使い方を解説しているため、困ったときにインターネット検索で解決できることが多い点もメリットのひとつです。

無料版は約30種類のパーツが用意されており、テキストや画像・動画の挿入など基本的な機能のほか、アコーディオン表示やスライドショー表示させる機能も利用できます。
有料版は約60種類のウィジェットを利用可能で、料金は1サイト5,000円程度です。

Landing Page Builder|シンプルな操作でランディングページが作成できる

Landing Page Builder|シンプルな操作でランディングページが作成できる

出典

「Landing Page Builder」は定期的に更新されるデザインテンプレートをカスタマイズしてランディングページを作成できる無料のプラグインです。

カスタマイズはクリックやドラッグ&ドロップなどの簡単な操作で行うことができます。
作成できるページはレスポンシブ対応で、SEOにも強い設計

50以上のWordPressテーマで動作テストを実施しており、ほとんどのテーマと互換性があります。
日本語には未対応ですが、インターネット上で非公式の日本語化ファイルが配布されています。

Divi|豊富なテーマや様々な関連プロダクトで拡張性が高い

divi

出典 

「Divi」は800以上の既成のWebサイトレイアウト、数千のデザインオプションを利用してページを制作できるWordPressプラグインです。

スライダーやブログ、フォーム、お客様の声など、40以上のWebサイト要素が用意されており、要素の追加・移動・削除はドラッグアンドドロップで、テキストも編集可能

ビジュアルエディターのため編集結果をリアルタイムで確認しながらページを作成できます。
カスタマイズしたデザインは保存・管理が可能のため、過去に作成したデザインを再利用して新しいページを作成することもできます。

「Divi」はデフォルトでレスポンシブ対応ですが、コンピューター、タブレット、スマートフォンのデザイン設定をそれぞれ自由に調整する機能も搭載。
無料でWordPressにショッピングカートを作成できるプラグイン「WooCoomerce」と互換性があるため、追加料金なしでEC機能を持たせることも可能です。

料金は1年更新のライセンスが89ドル、買い切りの場合は249ドル(2019年10月現在)。
30日間の返金保証が付帯しています。

Danganページビルダー|日本人が開発したプラグインで英語ができなくても安心

Danganページビルダー|日本人が開発したプラグインで英語ができなくても安心

出典

「Danganページビルダー」はパーツを自由に組み合わせてランディングページを作成できる日本人が開発したプラグインです。

ランディングページによく使われる見出し、文章、グリッド、動画、ボタン、商品販売、登録フォーム、お客様の声、プロフィール、スライドショーの12種類のデザイン済みパーツが用意されており、配色やレイアウトは合計63パターン以上

Googleが公開している日本語Webフォント「NotoSans」に対応しており、文字の太さが複数段階から選択できるため、画像を別途用意することなく太字のゴシック体で見出しを作成できます。

メールアドレス登録フォームの作成、ポップアップ表示、カウントダウンタイマーなどのマーケティングに役立てられる機能も搭載。
12,800 円(税込み)でダウンロード、利用が可能です。

代表的なプラグインを使ってみよう【Elementor Page Builderの使い方】

プラグインを利用したランディングページ制作について、より具体的にイメージできるように、作業内容を簡単に解説します。
解説するのは、代表的なプラグインのひとつ「Elementor Page Builder」です。

STEP1:Elementor Page Builderをインストールしよう

まずはインストールからです。
Elementor Page BuilderをインストールするWordPressにログインし、「プラグイン」の中の「新規追加」をクリック。

Elementor Page Builderをインストール

検索窓に「Elementor Page Builder」と入力すると表示される検索結果の中に、名前が「Elementor Page Builder」となっているプラグインがありますので、「今すぐインストール」をクリックしてインストールしてください。

Elementor Page Builderをインストール2

このとき、検索結果に似たような名前のプラグインが表示されますので、間違えないように注意しましょう。

インストールが完了すると、「今すぐインストール」ボタンが表示されていた箇所が「有効化」ボタンに変わります。「有効化」ボタンをクリックしてください。

Elementor Page Builderをインストール3

ここまででElementor Page Builderを使用する準備は整いました。

STEP2:「固定ページ」の「新規追加」から作成を始めよう

それでは制作を始めていきましょう。
「固定ページ」の中の「新規追加」をクリック。

Elementor Page Builderをインストール4

まずは以下の3点を決めます。

  • 記事タイトル
  • パーマリンク(URL)
  • テンプレート

記事タイトルとパーマリンクについては、通常の記事作成のときと同じように決めれば問題ありません。

Elementor Page Builderをインストール5

テンプレートは「ページ属性」の中に選択箇所があります。

Elementor Page Builderをインストール6

テンプレートの種類は3種類。

  • デフォルトテンプレート
    ⇒サイドバー有、タイトル表示有、ヘッダー有、フッター有

  • Elementor キャンバス
    ⇒サイドバー無、タイトル表示無、ヘッダー無、フッター無

  • Elementor 全幅
    ⇒サイドバー無、タイトル表示有、ヘッダー有、フッター有

ランディングページに向いているテンプレート「Elementor キャンバス」を選択しましょう。

Elementor Page Builderをインストール7

ここまでできたら「下書きとして保存」をクリックします。

Elementor Page Builderをインストール8

ここで一度「下書きとして保存」をしておかないと設定した内容が反映しまいため注意

保存したら「Elementorで編集」をクリック。

Elementor Page Builderをインストール9

ここからいよいよ編集作業に入っていきます。

STEP3:テンプレートを選ぼう

テンプレートを選択せず、ウィジェットをドラッグ&ドロップしていくことで制作することもできますが、テンプレートを使用した方が簡単です。

テンプレートは編集画面の中央付近のフォルダマークのボタンから追加できます。

Elementor Page Builderをインストール13

様々なテンプレートが用意されていますので、制作したいランディングページのイメージに合うものを選びましょう。
また、一度制作・使用したテンプレートを保存できる機能があり、新しくランディングページを制作するときに再利用することもできます。

Elementor Page Builderをインストール11

テンプレート一覧の中の気になるデザインのものにマウスオン。
虫眼鏡マークをクリックすると拡大されたテンプレートを確認できます。
すぐにテンプレートを挿入する場合は「挿入する」ボタンをクリックすれば挿入可能です。

Elementor Page Builderをインストール12

ちなみに、ここで設定するテンプレートはページごとに個別に設定されるものです。
ブログ全体のテーマが変わるわけではありませんので安心して利用してください。

STEP4:変更したい画像やテキスト部分を選択して編集しよう

Elementor Page Builderをインストール13

ここからはテンプレートを元に編集していく作業です。
基本的には、編集したい箇所をクリックすることで編集できるようになります。

テキストの場合、編集したい箇所に直接書き込むことも、左のボックスの中で編集することもできます。

画像を変更したい場合もテキストと同様に、まずは編集したい箇所をクリック。
左側のボックスに編集オプションが表示されます。

Elementor Page Builderをインストール14

ボックス内の画像をクリックすると「メディアの挿入」ウィンドウが立ち上がります。

Elementor Page Builderをインストール15

表示されている通り、使用したい画像をドラッグ&ドロップするか、「ファイルを選択」ボタンから画像を選択することで、画像を変更できます。
また、一度WordPressで使用している画像であれば、「メディアライブラリ」タブの中から選択することができます。

Elementor Page Builderをインストール16

以上、解説してきたように、Elementor Page Builderは初心者でも簡単にランディングページ制作を行うことができます。
是非一度実際に利用してみてください。

ランディングページを作成する際の注意点

ランディングページはただ見た目だけにこだわって制作しても成果が出るものにはなりません。
以下では、ランディングページを制作する際に注意すべきポイントについて解説します。

ランディングページを作成する目的を明確にしよう

一口にランディングページ制作といっても、その目的はそれぞれ違います。
自分がランディングページを制作する目的は何なのかを明確にし、目的に合わせたランディングページを制作することが重要です。

商品を販売することが目的であれば、店頭販売と違って手に取って確認できない分、文章や写真、動画などを使いながら、ユーザーが商品をイメージできるように丁寧に説明しなければなりません。必然的にページの分量は多くなります。

エステや結婚式などのサービスを売る場合はイメージや雰囲気が重要になるため、写真や動画などが多めになるでしょう。

会員登録を目的とするときは、無料登録か有料登録かで内容が変わります。
無料よりも有料の方が登録へのハードルが高く、サービスに納得してもらえないと登録されないため、より細やかな説明が必要です。

どんな人に向けたランディングページなのかを考えよう

どんな人に向けたランディングページなのかを考えるときに有効なのがペルソナ分析です。
ペルソナとは、商品やサービスのユーザーの中で最も典型的な人物モデルのこと。

年齢、性別、居住地、職業、年収、家族構成、趣味、悩み、価値観など、細かく具体的に人物像を設定していきます。
このとき、なぜその人物像なのかという理由を考えながら設定することが重要です。

ランディングページとは、言わば手紙です。
ペルソナが設定されていないランディングページは、宛先が決まっていない手紙と同じ。
曖昧で漠然としたイメージで書くことになるため、どうしてもブレてしまいます。

「この人」という具体的な人物像を決めることで、情報として何を盛り込んだらいいか、どのような表現で伝えたらいいか、構成やデザインはどうすべきかなどが明確になるのです。

ランディングページを見る人がどんな情報を求めているか考えよう

ランディングページはユーザーが検索結果や広告を見て訪れるページです。
そのため、ランディングページの内容はユーザーの検索意図や、広告に興味をもった理由にマッチしたものでなければなりません。

また、ランディングページには商品やサービスの特徴ではなく「ベネフィット」を書きましょう。ユーザーが欲しいのは商品やサービスではなく、ベネフィットです。

あなたが提供している商品やサービスを通してが、ユーザーがどんな恩恵をうけられるのかを丁寧に説明しましょう。

そして、必要に応じてメディアへの掲載実績や利用者の声、権威ある人の解説などを用いながらベネフィットを裏付ける客観的な情報を提示し、ユーザーに安心してアクションをしてもらえるようにしていきます。

【コラム】ランディングページ制作外注先選定
のポイント

自分でランディングページを制作しない場合は、制作を外注することになります。
数多い制作会社の中から、どのように外注先を決めたらよいでしょうか。

まず、ランディングページといっても、お問合わせ、資料請求、会員登録、商品購入など目指す結果は様々です。
ヒアリングを通して目的やゴールを明確化し、その目的に合わせて制作してもらえるかを確認しましょう。

目的を明確にしたはいいものの、いざ公開してみると全く成果が上がらなかった、というのでは意味がありません。
そのため、ユーザーの心理や行動を想定して制作しているか、Webマーケティングのノウハウや実績は充分か、なども確認すべきポイントになります。

また、高い成果が出せるランディングページにするためには公開後の改善・運用(LPO)が重要です。LPOの支援が可能な会社かもしっかりチェックしておきましょう。

まとめ

ランディングページを一から自分でコーディングして制作するのは、時間も技術も必要です。
WordPressテーマを利用した制作であれば比較的簡単ですが、カスタマイズするためにはやはり技術が必要です。
これらに対して、Elementor Page BuilderをはじめとしたWordPressのプラグインを利用すれば、初心者でも簡単にオリジナリティのあるランディングページを制作できます。

記事の中で解説したランディングページを作る際のポイントも踏まえて、ぜひ一度WordPressプラグインを使った制作にチャレンジしてみてください。

ランディングページ制作をプロに任せたい方へ

ランディングページをプロの制作会社に任せたいが、なかなか探す時間がない・制作会社の違いが分からないという方は、ぜひWeb幹事にご相談ください。

Web幹事は、あなたに最適な制作会社を「人力で」マッチングするサービス。
実際にWeb制作・運用を経験したプロのコンサルタントが対応するため、業者選びの手間なく、質の高いマッチングを受けることが可能です!

コンサルタントのご紹介 Web幹事 コンサルタント 岩田真 岩田 Web制作会社を設立し、
3年間で上場企業を含む50社以上制作に携わらせていただきました。

様々なお客様のWeb制作を実際に行ってきましたので、
初心者の方でも安心してご相談ください!

あなたの目的や予算に合わせて最適な会社をご紹介させていただきます。ご相談はもちろん無料。また紹介された会社に必ず発注する必要はありません。

プロにランディングページ制作(LP)を頼みたい方はこちらから