ブログ

  1. トップ
  2. ブログ
  3. ランディングページの構成の作り方とコツ、失敗回避に役立つWordPressプラグイン2つ

WordPress

ランディングページの構成の作り方とコツ、失敗回避に役立つWordPressプラグイン2つ

「ランディングページの原稿を早く作れるようになりたい」
「ランディングページからの離脱を減らす構成にしたい」

集客に特化したWEBページのことを”ランディングページ(LP)”と呼びます。メールマガジンやSNSの広告リンクから訪問者様がいらっしゃったりする、WEBサイト・ネットショップの入り口のようなページのことです。

○ランディングページとは
・見込み客(商品に興味がある皆さん)がやってくる
・1ページで商品説明から販売まで完結している
・リンクはほぼなく、コンテンツのみ

皆さまも意識せず、ランディングページを日々読まれていると思います。
一般的にランディングページを目にするのはInstagramの広告のリンク先や、Google検索の上位に表示される広告リンクの先のページです。

また、画像をブックマークできるSNS「Pinterest(ピンタレスト)」でもたくさんのランディングページが見つけられます。


Pinterest-ランディングページ

ランディングページは入り口であるため、たくさんの見込み客が訪れるページです。売上げアップや資料請求数の増加に関わってきます。しっかり作り込んで、見込み客のアクションにつなげていくことで、その商品・サービスのオンラインでの売れ行きを左右します。

今回の記事では、この非常に重要なランディングページのページ構成の作り方と、そのコツをご紹介していきます。

1.ランディングページの重要性とその役割

繰り返しになりますが、ランディングページは非常に重要な位置づけのページです。オンラインに置いたお店であり、「オンラインにある集客の窓口」です。

デザインはもちろん、しっかりと文章も読みやすく情報量を多く、売上につながるように作り込めればベストです。

ランディングページのイメージは広告リンクの先の1ページがとても長くスクロールが大変なページと思われるかもしれませんが、ページが短くサービス内容を端的に表しているページも、入り口となっていればランディングページです。

以下のようなWEBサービスのトップページをいくつかご覧になっていただくとわかりやすいかと思います。


キャリトレ

いかにもな広告ページではありません。それでも申込みの窓口となっていて、メインとしての位置づけがされたページであれば全てランディングページと呼びます。

○ランディングページの重要性
・新規顧客の獲得数に関わる
・入り口ページのため離脱が他のページのPVにも関わる
・見込み客の利便性向上につながる(そのページだけ読めばいい)

売上等に直接関わるのはもちろん、他のページのPVや滞在時間にも関わるので、SEOの面からも鍵を握ります。また、そのページの見やすさ、読みやすさ、内容の濃さなどはお客様の満足度(返品の少なさ、購入までのスピード)に関係することもあります。

新規顧客獲得、SEO、満足度などいろいろな役割を持っているページなのです。

2.Googleがすすめるランディングページの書き方

ランディングページの利便性についてはGoogleも重要だと述べているページがあり、構成の作り方やコーディングのポイントもサポートページに上がっています。

実際にページを作ることが決まったら、まずはこのGoogleが出しているランディングページについての説明ページが教科書として使えます。


Google広告ヘルプ-ランディングページの利便性を把握する

1ページにぎっしりとGoogleからのアドバイスが書かれています。
特に見逃したくないポイントをピックアップすると以下の5つとなります。

○Googleがすすめるランディングページの作り方
・宣伝する商品やサービスについての有益な情報を掲載する
・他のサイトにはない便利な機能やコンテンツを追加する
・ユーザーが情報を見つけやすいように、ページの構成とデザインを考える
・紹介した商品を、ユーザーが簡単に注文できるようにする
・サイトを高速にする

ページの構成、コンテンツの必要性、デザインなどやるべきことは多岐にわたって書かれています。
参考にしながら、よりよいページを作っていきたいですね。

3.ランディングページの一般的なページ構成

さて、では本題のページ構成について話を進めていきます。
ページ構成とは作文であれば起承転結に当たるようなもの。全体の中にある各パーツとその順番を指しています。

ランディングページのページ構成は、【訪問者の皆さまが読みたい情報が読みやすい順番に並んでいること】と、その情報が【間違っていないこと(商品の正当性)を裏付けるような(フォローするような)内容が入っていること】がゴールです。

そして、それらが短時間で読みやすいようデザインも含めてまとめられていれば、最善だと考えられます。


(参考)https://okuru-photo.jp/

訪問者さまが迷わず読めるということから、一般的なページ構成がいちばんいいチョイスなのではないかと考えられます。

「一般的だからNG。どこかで見たことがあるからNG。変えなければ」と無理にとらえる必要はなく、ページの構成に迷うことがあれば一般的な形でつくってみるのも良い選択だと思います。

○ランディングページの一般的なページ構成
・キャッチコピー
・商品名
・その商品を買うことによるメリット
・商品の使い方、主な機能説明
・使用例、お客様の声
・商品の拡張性(オプションなど)
・専門家や開発者の声(権威)
・Q&A
・製品の特徴まとめ
・仕様
・申し込みフォーム/ショッピングカート

こちら↑それぞれがパーツであるとお考えください。
キャッチコピーから始まり、ショッピングカートやフォームでページが終わる形で作っていくのが一般的です。

4.ランディングページのページ構成のコツ

さて、ではどうしてランディングページのページ構成に一般的な流れ(多くのページが採用している構成)があるのかというと、訪問者の皆さまに向けて「メリットの提案」と、「そのメリットの裏付け・根拠の提示」を繰り返していくのが効果が出るとされているからです。

==
商品/サービスのよいところ、購入後のメリットをしっかり伝える。
↓↑
プロ視点で、そのメリット・機能の解説をする。
==

このように【商品/サービスのよいところを伝えたら、次の段落ではその裏付けをする】ということが繰り返されています。

例えば、化粧品を例に取ってみましょう。

化粧品のランディングページの代表的なページ構成を書き出してみると、以下のようになります。

==
商品の特徴(保湿、天然成分等)

含有成分の紹介(だから保湿が可能なのだ、と裏付ける)

お客様の声

開発者や権威のある機関のコメント(お客様の声が正しいことを裏付ける)
==

訪問者の皆さまが商品の特徴やお客様の声で商品に対して興味が湧いたところで、その裏付けを提示すると安心し、商品について信頼を寄せてくれます。そして購入へ気持ちも傾き、最後までしっかりと読み通してくれます。

安心、納得した上で買ってくださるので、リピート顧客となる可能性も大きいですね。

化粧品以外でも、「どうやったら購入メリットや特徴の裏付けを表現できるか」考えて、組み入れる情報の精査をしていってください!

<ランディングページ構成のコツ>
期待感を高める紹介+納得させる説明を繰り返す。
期待→納得→期待→納得の繰り返しはページ離脱も減らし、自分に役立ちそうだから買ってみよう、と購入へつながっていきます。

5.ランディングページのページ構成で失敗しないために

ランディングページにはGoogleからのアドバイスも出ていて、一般的に効果が出るとされる構成も浸透しています。しかし、それでも全部のランディングページから商品が飛ぶように売れているかというとそんなことはありません。

なかなか成果に結びつかないランディングページには何がより必要なのでしょうか。

1つ目はランディングページに関わらずネットショップの商品ページ等でも制作時に大切なことですが、【ターゲットの明確化】です。

誰に情報を届けると商品が売れるのかはっきりしていないことで、情報の出し方を間違ってしまい、ランディングページへの訪問から商品購入へ進まないパターンが考えられます。

ターゲットを明確化するためには、SNSを活用すると費用をかけずに今すぐに答えが出てきます。例えば販売する商品が「トリートメントの不要なシャンプー」だった場合、「トリートメントが面倒くさい」「シャンプーは1回で済ませたい」などの課題感が感じられる言葉でSNSを検索します。

該当する内容を見つけたら、それをどのような属性の方々がどういった状況でつぶやいているのか、シートに書き出していきます。総合していくと、購入してくれそうなユーザー層が見えてきますので、そちらを参考にして発信内容を絞っていくことができます。

さて、ランディングページで失敗しないよう気をつけるポイントの2つ目は、【購入、申込の簡単さ】です。ランディングページにはSNSや検索エンジンのリンクから飛んでくることが多いため、スマートフォンで移動中や片手間に読んでいる人もいらっしゃるはずです。申し込みフォームが使いづらい、購入条件の説明文の文字が小さいなどハードルがあると、せっかく購入・申し込みへ向けて気持ちが盛り上がっていたのに諦めの気分が勝ってしまい、離脱につながります。

最低限の必要な情報だけを送信してもらうようなフォームにする、使い勝手のよい(操作性の高い)フォームにするなどが解決策として考えられます。

最初から完璧なランディングページを作るのは難しいかも知れませんが、効果がでなければそれがなぜなのか考え、またランディングページを修正していくなど対策を施すことで最善のページに近づきます。

では、最後により効果の高いランディングページを作るために使える便利なプラグインを2つご紹介します。

6.役立つプラグイン①ヒートマップが見られるプラグイン「Aurora Heatmap」

ヒートマップとはWEBページのどこがクリックされたか、どこが注目されているか、離脱したのはどこかなどがわかるツールのことです。WordPressのプラグイン「Aurora Heatmap」を使うと、無料でヒートマップを確認できるようになります。


https://ja.wordpress.org/plugins/aurora-heatmap/

インストールするだけで測定が開始され、「左メニュー>設定>Aurora Heatmap」から結果を見ることができます。WordPressで構築されたWEBサイトなら、オープン時にまず入れておきたいプラグインですね。

測定結果は自動的にPC版のページ、スマートフォン用のページに分けられて結果が出ます。何の設定も要らず、無料で使えるプラグインではありますが、非常に便利に作られていると感じます。

クリック数が多いと赤みが増すので、視覚的にもわかりやすいです。
全ページの解析ができるので、いくつか商品がある場合も比較しやすく、ぜひ入れておきたいプラグインといえます。

ランディングページではアクセス数と比較してショッピングカート部分がクリックされているか、途中に動画や資料ダウンロードボタンなどがある場合、それらが押されているかなど、チェックしやすくなります。

7.役立つプラグイン②リンクボタンのデザインを簡単に変更できるプラグイン「MaxButtons」

ランディングページの最終地点は申込みや商品の購入です。
いろいろなページを見ていると、その購入ページへリンクさせるボタンの種類の多さに驚きます。それだけ、このボタンのデザインが購入・申し込み率に変動を与えるのであろうと感じます。

WordPressで構築したサイトであれば、プラグインでリンクボタンのデザインを簡単に変更できます。このプラグインの利用を進めておくと、WEBデザイン終了後に、ABテストやヒートマップチェックで検証した結果、リンクボタンデザインを少し触りたくなった…というときに活躍します。

最初のWEBサイト構築時、このプラグインを使ってリンクボタンデザインをしてもらっておけば、変更が簡単になりますので、ページスタート当初からの利用をオススメします。


https://ja.wordpress.org/plugins/maxbuttons/

「左メニュー>MaxButtons」から新しいボタンを作ることができます。
あとは目で確認しながらデザインできるので、デザイナーでなくてもとても簡単に操作できます。

どんなデザインがいいかアイデアをもらいたいときは、Google画像検索で「リンクボタン おしゃれ」などと検索するとたくさんサンプルが見つかります。


リンクボタンも工夫を凝らし、少しでも多くの成果につなげられるランディングページにしてきたいですね。

まとめ

ランディングページは一度作ったら終わりというページではなく、サイトオープン後にお客様が流入してからも検証、検討が続きます。一度にすべての予算をつかって制作するのではなく、検証後のリニューアルも念頭に置きながら予算の分配をしてもよいかもしれません。

リンクボタンや文章を変えた場合は、ABテストを導入したり、ヒートマップでクリック数を確認したりと後追いを忘れずに行うことも大切です。部分部分でデザイナーさんやコーダーさんの手を借りながら、よりよいページになるよう、ぜひ長い目で制作を行ってみてください。