WordPressでランディングページ(LP) を作る方法【ちょっと上級者向け】

WordPressに少し慣れて
もっと表現の幅を広げてみたい方へ

「ランディングページ」の作り方を
ちょこっとご紹介しますね。

 


あび

ランディングページって何?

 

 


ほら、よく通販とかで見かける、
派手なキャッチコピーと「いますぐ購入」
とかかいてある、セールスページのことだよ!

 

 

ランディングページとは…

「LP」「ランペ」という名前を聞いたことはありませんか?

 

愛猫:しま
しま

ランディング・・走るの?

 


村重

それは
「ランニング」だね(笑)

 

 

ランディングページ(Landing Page・LP)とは・・・

(※以下 ”LP” と書きますね)

商品、サービス説明からお申し込みまで
そのページ1枚だけで完結している、
セールスページのことです。

私もメールマガジンや
WordPressレクチャーのお申し込みページに
「LP」を作成しています。

こんなページのことです
 ↓ ↓ ↓

https://wp-firststep.com/mail-magazine/

昔は作り方がわからなくて
一枚の画像にして貼り付けたりしていました・・・。

 

わざわざWordPressで作らなくても
かっこいいLPが簡単に作れるサービスも
いろいろありますよ。

ペライチ、wix(ウィックス)というようなサービスなら
会員登録をすれば、簡単にページが作れます。

ペライチ
https://peraichi.com/

Wix
https://ja.wix.com/

簡単にさくっとキレイ作りたいんだ、と言う方はこちらの方がいいかも。

でも、私はWordPressだけで作っています。

それは、とっても美味しいメリットがあるからです^^
どちらを使おうか?は
メリットを読んで考えてみてくださいね。

 

WordPressでLPを作るメリット

・ブログが強化できる!

たとえば、

・ブログのアドレス
 https://wp-firststep.com

・LPのアドレス
 https://wp-firststep.com/mail-magazine/

 

WordPressでLPを作れば、そのLPはブログの一部になります。

LPは普通の記事と違い、アクセスがたくさん集まるので
「ブログの特定のページにアクセスが集中している」ということになり
ブログ自体の評価もあげることができるんですよ。

せっかくアクセスを集めるなら、ブログの強化に使いたいですよね。

他のサービスを使う場合は、

たとえば「お申し込みはこちら」と、ブログから
他のサービスにリンクしたとします。

すると「別サイトのに移動している」ので
自分のブログの評価にはなりません。

※「サブドメイン」が設定できれば、
自分のブログの評価にできますが、
それについてはここでは割愛しますね。

 

・何枚でも無料で作れる

ランディングページは
WordPressの固定ページで作ります。

なので、固定ページならいくらでも増やせますね。

また、以前作ったページをコピーすることもできるので
前のをコピーして、ちょっと手を加える、などの流用も簡単にできます。

他のサービスだと、新しいページを増やそうと思ったら
その都度料金かかるなど、簡単に追加できない場合があります。

 

 

・自分のものである!

他サービスを利用すると、万が一ですが
そのサービスが終了したとき、データはなくなってしまいます。

なんとかデータのコピーが取れたとしても
そのコピーをどこに再現しますか?

形式が違いますから、結局作り直すしか
なくなることと思います。

結局は、自分のサイトに置いておくのが
一番安心かな、と思います。

私にとっては、この理由が一番大きいです。

 

 


WordPressで
LP作るのは難しい?

 


村重

うん、簡単ではないね。
なれるまでが大変かな。

 

 

 

どんな風に制作していくのか、
ちょっと見てみましょう。

 

ランディングページ制作に用意するもの

 

プラグイン 「サイトオリジン」

ランディングページ制作に使う、
2つのプラグインをご紹介します。

ページビルダー by サイトオリジン

Page Builder by SiteOrigin

サイトオリジン ウィジェットバンドル

SiteOrigin Widgets Bundle

です。

2つセットでインストールしてくださいね。

「SiteOrigin」で検索すると1番めと2番目に出てきますよ。

 

この2つをインストールしたら、
早速、固定ページの投稿画面を確認してみてください。

 

すると、普段の投稿画面には
「テキスト」と「ビジュアル」があるのですが、
もう一つ「ページビルダー」というのが増えています。

 

「ページビルダー」をクリックすると
英語のメニューが出てきます。

 

SiteOrigineの基本の使い方

まず、Rowというところをクリックしてみましょう。

 

すると・・・

なにか青い画面を分割して、
その比率を選べる画面が出てきました。

 

分割数は 1(分割なし)〜12分割まで選べます。

12

こうして分割した行を
積み上げて、ページ構成を作っていくんですね。

 

このままだと、まだ空っぽなので
ちょっとわかりづらいですかね。

右クリックすると、
そのマスに何を入れるか選べるようになります。

英語と日本語が混ざっているところが
なんだか可愛いです(笑)

 


文字を入れたい場合

右クリックしたメニューから
「Site Origine Editor」を選ぶと、
テキストを入れる「箱」が入ります。

その箱をダブルクリックすると
ふつうにブログを投稿するような画面に変わり、
中身が編集できるようになります。

 

画像を配置したい場合

同じく右クリックして
「Site Origine Image」を選ぶと
画像を入れる「箱」が入ります。

こちらも、ダブルクリックすると編集できます。

 

「Choose Media 」 をクリックすると
画像を選択する画面になりますよ。

 

 

ボタンを作る場合

このプラグインは、ランディングページに便利な
ボタンが作れる機能もついているんです。

「SiteOrigine Button」を選んで
ダブルクリックしてください。

「Button text」に、ボタンに入れたい文字を入力します。
ここでは「お申し込みはこちら」にしてみますね。

 

ボタンの色と、文字の色を選ぶと///

 

こんなボタンも簡単に作れちゃうんですよ^^

がんばって自分でランディングページを作りたい!
という方には必須のプラグインです。
ぜひ挑戦してみてください!

 

Follow me!

村重敦子

「猫でもわかる!」くらい簡単にわかりやすく、WordPressの使い方をサポートする、WordPressソムリエです。デザインを学んだ後、なぜかレストランでワインサービスに従事。絵も描けるワインソムリエでした。その後大手通信会社に勤めIT・Webの各種サポートを経験。ソムリエもWebも常に「専門知識をお客様に合わせてわかりやすくご提案し、期待以上のサービスをする」ことをモットーとしています。テクニカルサポートの経験は、通算1,100人以上。現在はWebデザイン・ディレクターをしながら、ブログ集客をしたい方へWordPressの制作、使い方のレクチャーなどを行っています。