ランディングページの作り方!デザインは?無料作成ツールは?

相談者 Aさん

ランディングページの作り方が分かりません。

どのような内容をどのような順序で掲載していけば良いのか「型」などがあれば教えてください。

また、ランディングページのデザインや制作ツールなどについても教えてください。

この記事を書く人と信憑性

浅賀理生

自社のサービスに関して、SEOとリスティング広告にて集客。

ランディングページのPDCAを回しつつ、累計3,000件以上の問い合わせ&見積り依頼を獲得した実績があります。

それでは解説していきます!

ランディングページとは

ランディングページ 作り方

ランディングページのlandingとは着陸と言う意味で、分かりやすく言うと見込客を着陸させるページです。

そして私の定義では、見込客を呼び込み、売上につなげるためのページとしています。

ランディングページの構成(型)

まずはランディングページの全体像、流れを理解していただくため構成(型)について解説していきます。

構成とは、各パーツを順番通りに組み立てていくようなものですので、初心者の方もこの型にハメて作って行けば、ページが作成できるかと思います。

▼ランディングページの基本的な構成

1.ファーストビュー
「はじめまして!私たちはこんなことやってます!」

2.問題定義・興味付け
「あなたの困っていることはなんですか?」

3.共感・感動・敵を作り味方に
「ふむふむ。私も同じような経験があるんですよ…」

4.商品の提示
「でしたらこんな商品がありますよ!」

5.解決法の提示
「これで解決できますよ!」「これを使えばこんな風になれますよ!」

6.お客様の声・実績
「実際に使った人の声がありますので、見てみてください!」

7.他との違い・差別化
「ちなみに他とはこんな風に違います!」

8.クロージング
「いまならキャンペーン中なのでお得ですよ!」

いかがですか?

見込客を商品販売ページに着陸させることができれば、Webの仕組みを使い、販売を自動化させることも可能になるのです。

ちなみにランディングページの構成は、テレビの通販番組の構成と同じようなものなので、勉強のために見るのも良いかと思います。

では、それぞれの構成について解説していきます。

1. ファーストビュー

ファーストビューとは見込客が、初めて目にする部分で、ランディングページの「顔」と言えます。

見込客に自分が必要とするページなのかを一瞬で判断させる部分なので、極めて重要です。

ファーストビューでは、見込客がパッと見てメリットに感じることをキャッチコピーとして明示しましょう。

▼例▼

実績数No.1 業界屈指の○○

たった30日であなたの会社が儲かる

1万人のママに選ばれた信頼と実績

下記は私たちが実際に運用しているランディンページのファーストビューです。(ちょっと独特ですが、「忘れられない」ようインパクトメインにしています。)

また、検索エンジン(SEOやリスティング広告)からランディングページに流入させる場合、検索結果に表示されるタイトル文や概要文と一貫性のあるファーストビューにすることも大切です。

↓下記はGoogle広告の設定画面をキャプチャしたものですが、リスティング広告を出した場合、下記のような感じで検索結果に表示されますので、このタイトル文や概要文との一貫性も保ちファーストビューを作ることが大切です。

2. 問題定義・興味付け

見込客の悩みや困りごとを問題提起することで、「あ、私のことだ!」と興味付けを行う部分で、

「こんなことでお悩みの方」
「こんなことでお困りの方」

などのケーススタディを掲載するイメージです。

下記は私たちのランディングページの部分をキャプチャしたものですが、外注パートナーをお探しの方へ「こんなお悩みございませんか?」と明記した後に、悩みや困りごとのケーススタディをイラスト付きで掲載しています。

3. 共感・感動

共感・感動といったものは人の感情を動かす要素を持っています。

例えば今、あなたが仕事の人間関係が問題で、メンタル的に参ってしまっている状態だとします。

そこでメンタルを健康に保つための方法を色々と情報収集する中で、一人のトレーナーにたどり着いたとします。

そのトレーナーは過去に仕事上の人間関係が原因でうつ病を患い、その解決策として独自のトレーニング方法を編み出し実践したところ、心身ともに健康な身体を手に入れた人だったらどうでしょうか?

きっと同じような境遇に感情が動き、その人への興味が一気に加速するのではないでしょうか?また、そのトレーナーの提供しているサービスに興味を持つのではないでしょうか?

問題提起から、こうした共感、感動、敵を作り見込客を味方にするようなメッセージをランディングページに差し込むことで、あなたが販売する商品(モノ・情報・サービス)に興味を示すのです。

4. 商品の提示

見込客が、あなたor商品に興味が付いてきたタイミングで商品を提示します。

見込客の立場になって、商品の特徴などを説明してください。

5. 解決法の提示

商品を提示したら、問題提起させた見込客の悩みや困りごとをその商品を使ってどう解決させられるかを提示しましょう。

本来、長ったらしい文章は読まれない傾向にありますが、ここまででしっかりと興味付けができていれば、この段階で徹底的にうんちくを語ってしまってもOKです。

さらに言えば、見込客を教育するようなコンテンツを作れば、より興味を深くさせる効果があるでしょう。

6. お客様の声・実績

解決法を語るだけでは、まだ見込客はあなたの商品のことを信用してくれていません。

そのタイミングで明示するのが、裏付けや証拠です。

  • お客様の声・利用者の声
  • 実績・事例
  • 相談事例

このような情報をできることならお客様の顔写真付きで掲載すると、より信憑性は高まります。

7. 他との違い・差別化

商品への興味が十分に深まってきたタイミングで、見込客は「他とどう違うの?」と言う疑問が頭に浮かぶはずです。

  • 質が違う
  • 価格が違う
  • サービスが違う

そういった疑問を解決させるために、他社との違いを解説するようにしましょう。

他社との違いを比較してもらうため下記のように表にすると分かりやすく伝わります。

A社B社当社
価格×
サービス×

ちなみに私たちでは他社との違いを動画にしランディングページに配置していますが、動画にする時点で他社と差別化できているかなと思っています。

8. クロージング

一通り商品について情報を掲載したら最後は見込客に行動させることです。

これは営業でいうクロージングになります。

  • いますぐ購入
  • いますぐ問い合わせ
  • いますぐ無料見積もり
  • いますぐ無料会員登録

などといった表現を使い、見込客がいますぐ行動できるよう、言語化することが重要です。

更にこの段階では、見込客を行動に起こさせるため多少の煽り(あおり)も必要になってきます。

  • ○月○日まで特別キャンペーン価格で販売!
  • 10名様限定!
  • 今だけ半額!

などと言った感じで、いますぐ行動しなければ損しますよと伝えるのです。

ランディングページのデザインはどうすれば良い?

ランディングページの内容(コンテンツ)に関しては、Word等のお好きなソフトウェアにて下書きすれば良いですが、次に疑問に挙がるのがデザインです。

Web制作会社やフリーのWebデザイナーに外注すれば、腕のよい人なら色々と提案してくれるので問題ありませんが、WordPressやWix等のツールを使い、ご自身で作る場合、悩む部分でしょう。

すでにホームページがある場合、そのデザインを踏襲すれば良いでしょう。また、デザインテンプレートの中から選ぶなどの方法もあります。

しかしそれでもデザインで迷うようであれば、「凝りすぎないようにした方が良い」です。

ランディングページというのは一度作れば効果が出るものではありません。

ある程度、安定するまでは日々の見直し改善を行う必要があるため、デザインを作り込んでしまうと余計なコストもかかってきてしまうのです。

無料で利用できる作成ツールは?

ランディングページで成果を上げるには日々の見直し改善が必要ですので、自分で(社内で)ページの修正等をすばやくカンタンに行えるようにするべきです。

そのためのツールとしておすすめなのがWordPress(ワードプレス)です。

WordPress(ワードプレス)とは

元々はオープンソースのブログシステムで、昨今ではホームページ制作ツールとして非常に人気が高く、多くの大手企業もWordPressを用いてホームページを制作しています。オープンソースのため無料です。

WordPressをおすすめする理由としては、様々なテーマ(ひな形)が用意されていることと、非常に更新がしやすい点です。

ランディングページ制作を外注化するにしても柔軟に更新できるように構築してくれる制作会社に依頼するべきでしょう。

この記事を書いた人

浅賀理生(あさかまさお)

株式会社インスパイアデザイン代表。デザインできる、セールスライティング書ける、Web集客が得意なWebマーケターです。家族LOVEな二児のパパで、釣りとコーヒーをこよなく愛する Web制作&Webコンサルのご相談はお気軽にDMください