この記事 1 本で網羅できる、売れるランディングページの作り方と便利ツール

売れるランディングページを作って、商品やサービスの売り上げアップをお考えですか？または、現在運用しているランディングページがどうもイマイチだとお感じで改善をお考えでしょうか？

ランディングページはネット上のプロモーション手法の中でも最も直接的な手段として定着しており、秀逸なランディングページからヒット商品が生まれることもあります。

この記事ではランディングページの概要や基本的な構成から始まって、HTML の知識がない方でも簡単に作ることができる便利なサービスのご紹介、そして現在運用されているランディングページの改善ヒントなどを、これまで多くのランディングページ制作に関わってきた筆者がまとめました。

売れるランディングページ作りに欠かせない情報ばかりなので、ぜひ最後までご一読ください。

1. ランディングページの目的と基本的な構成

1-1. ランディングページとは

ランディングページとは着地ページと訳される Web コンテンツのことで、文字通り他のサイトからのネット広告やリンクにアクセスした際のジャンプ先として表示されるページのことです。Landing Page という英語表記を略して LP と呼ばれることもあります。

いわゆる Web ページとは目的や形状がかなり異なるため、他のコンテンツと区別するためにランディンページという特別な呼ばれ方をしています。

ネットを利用した各種のプロモーション活動に与えられた最大の目的は商品やサービスの売り込みですが、その中でもランディングページは購買につなげるための直接的な広告手法として広く用いられています。

1-2. ランディングページの特徴、一般的なWebコンテンツとの違い

ランディングページという別の呼ばれ方をされているのは、そこにかなりの特徴があるからです。一般的な Web コンテンツとの違いを挙げてみると以下のようになります。

縦長のページが多い
単一のページで完結している
チラシに近い見た目になっており直接的な広告ページになっている
ランディングページには発リンクがない
画像が多用されており、直感的なメッセージが多い

全体的に縦長のページが多いのは、その商品やサービスについて訴求したい情報が多いものの、複数のページに分けると最後まで見てもらえない可能性があるからです。そこでページを敢えて分割せずに縦長に構成し、スクロールしていくことが読み進める形がとられています。

こうすることによってページのまだ見えていない部分に、順に見せたいコンテンツを展開させることができるため、ページ全体にテレビショッピングのようなストーリー性を持たせることができます。

広告に特化したページなのでデザインは派手で画像が多用されているものが多く、そこから他のページに行かれてしまっては困るので、敢えてリンクを設置しないというのも大きな特徴です。

1-3. ランディングページが必要である理由

Web というのは同じサイト内で回遊してもらい、たくさんのページを見てもらうこともひとつの目的となっています。この Dropbox Navi においても記事を読んでいる方にとって有益な情報が他の記事にある場合はリンクを設置しています。

それに対してランディングページにはそういった考え方はなく、むしろ他のページにユーザーが行ってしまわないようにリンクを設けず、そのページだけを最後まで見てほしいという意図を反映した構成になっています。

このように他のコンテンツと遮断された空間を作った上で、その中には訴求したい商品またはサービスについての説明や魅力、それを裏付ける証拠となるようなコンテンツが順序よく並べられています。

ランディングページと似た広告手法として、折り込みチラシやテレビショッピングなどがあります。これらは広告に特化したメディアで、これでもかと魅力を訴求する内容となっています。ランディングページはそれをネットで展開するための手法ともいえるでしょう。

1-4. ランディングページの基本的な構成

ランディングページには、基本的な構成の形があります。おおむね以下のような形になるのがセオリーなので、どのランディングページも構成はほぼ同じです。

例えば、「リンゲージ」という英会話スクールのランディングページを見てみましょう。

【参考】
⇒ 英会話スクール「リンゲージ」

上記の基本構成を踏まえた上でこのランディングページを見ると、おおむね同じ構成になっていることが分かると思います。この先もこのランディングページを例に解説をしていきますので、このページは開いておいてください。

1-4-1. キャッチコピー

ランディングページは縦長なので、ページを開いた時にはページの一部しか表示されません。このキャッチコピーは最も上にある部分なので、どんなに小さいディスプレイであっても必ず表示される部分です。

ランディングページを開いた人が関心を持つような文言や画像を使って、そのランディングページの続きを見たくなるようなキャッチコピーを配置します。

1-4-2. 呼びかけ、共感の喚起

キャッチコピーの下に配置されるのが、ページを見ている人に対する呼びかけです。閲覧者がそのランディングページにやって来たことには、必ず何か理由があります。先ほどの例で言えば英会話を上達させたいものの、費用やレッスンに通う時間的な制約などを気にしている人物が想定されており(これをペルソナといいます)、そんな悩みに対する呼びかけが並んでいます。

このように呼びかけをすることによって、同じ悩みを持っている人からの共感が得られます。

1-4-3. 商品の紹介

ここでようやく、ランディングページで売りたい商品やサービスの紹介です。すでに共感を得ている人に対して、満を持しての登場です。商品の紹介は何度も出てきますが、ここでは初めての登場なので商品の概要を一目で見て分かるように構成されます。

商品の魅力や訴求は、この後の流れに続いていきます。

1-4-4. ベネフィット、メリット

商品を紹介した次には、その商品・サービスを購入することによって得られるメリットの解説です。これはベネフィットとも呼ばれ、広告戦略を打ち出す際に設定をして、そのベネフィットに魅力を感じるのはどんな人なのかという人物を想定(ペルソナ設定)することでロジックが組み立てられていきます。

ランディングページを見ている人に、そのベネフィットが自分にも得られるものであることをイメージしてもらうことが大切なので、ユーザー目線で語りかけることが重要です。

1-4-5. 優位性の訴求、証拠の提示

商品・サービスの紹介をした後で、それを購入することで得られるベネフィットが語られました。その次に何が必要なのかというと、そのベネフィットの裏付けです。

客観的なデータがある場合はデータを紹介して優位性を証明する手法や、購入者・利用者の声を紹介することで満足度が高いことをアピールするなどの手法が用いられます。先ほどの英会話スクールでは生徒さんの声という形で証拠の提示が行われています。

英会話スクールの評価というのは主観的になりがちなので、このような形で生徒さんの声を紹介しているものと思われます。

1-4-6. クロージング、購入ボタン

ランディングページの最後は、最大の目的である購入への誘導です。テレビショッピングのような流れでここまで情報を提供した上で、最後は価格の発表と購入方法の説明です。

営業活動では最終的な購入促進のことをクロージングといいますが、ここで最後の一押しをした上で購入ボタンを設置し、購入を勧めます。

この英会話スクールの場合は、「最後の一押し」として無料カウンセリングから授業見学、体験レッスンまでの流れを解説しています。そして最後に上記のイメージ写真と購入ボタンで締めくくられています。

1-5. ランディングページを見ている人の心理状態

ランディングページを作るにあたって、そのページを見ている人がどんな心理状態なのかを知っておくことは意義があります。ご自身でランディングページを見ている時を思い起こしながら以下の心理状態と比較していただくと、心当たりのあることが多いのではないでしょうか。

【ランディングページを見ている人はこんなことを考えている】

最初はページの内容に対して半信半疑
半信半疑であるものの何らかの期待を抱いている
いつでもページを閉じる、離脱することができる気持ちで見ている
最初は購入の意思がほとんどない

おおむねこのような状態の人が多いのではないでしょうか。これだけを見ると顧客としてほとんど有望ではないことになりますが、この状態の人に訴えかけて購入の意思を持ってもらうのがランディングページの役割だということを意識すると、どうすれば最後まで見てもらえるのか、どうすれば購入してくれるのかというイメージをしやすくなると思います。

2. 売れるランディングページを作る手順

ここでは、ランディングページを作るまでの手順を解説します。訴求する商品やサービスを特定せず汎用的な方法で、なおかつ売れるランディングページにするという部分にフォーカスして解説します。

2-1. ペルソナ、ベネフィットの設定

ランディングページ制作時にまず行うのが、ペルソナとベネフィットの設定です。ペルソナやベネフィットを決めることは、コピーライティングやデザイン決定の上で非常に重要です。その商品・サービスを必要とする人、魅力を感じる人はどんな人なのかという想定人物を設定するのがペルソナで、そのペルソナにどんなメリットを提供できるのかがベネフィットです。

キャッチコピーやデザイン、ランディングページ内の文章、画像などはすべてここで設定したペルソナに対しての呼びかけである必要があります。これがブレてしまわないようにするためにも、ここでペルソナとベネフィットをしっかりと設定しておきましょう。

2-2. コピーライティング

設定をしたペルソナに対して、商品・サービスの魅力を言葉にして伝えます。冒頭のキャッチコピーは最も重要ですが、以下に続く小見出しや説明のための文章（ボディコピーといいます）など、それぞれのコピーが役割を担っているので統一感のあるイメージを組み立てます。

2-3. デザインを決める

ランディングページにおいては、コピーライティングと同等かそれ以上に見た目が重要です。見やすいことや何を伝えたいのかが分かりやすいこと、そして思わず見てしまうようなデザインであることが求められます。そのためランディングページには装飾された文字や画像が多用されますが、そこに何を入れるのかが異なるだけで基本的な形は同じです。

HTML の知識があればゼロベースで作成していくこともできますが、その知識がなくても便利なテンプレートサービスがあるので、こうしたサービスを利用すると簡単にランディングページを構築できます。

【ランディングページの主なテンプレートサイト】

Instapage
英語サイトですがとても有名なランディングページ作成サービスです。
WiX
ランディングページに限らず簡単な操作で Web を制作できるサービスです。
Colorful
セールス用ランディングページに特化したサービス。紹介サイトそのものが秀逸なランディングページになっています。
InSales
画像のスライド機能があることや豊富な色目から選べるなどプロ仕様にも耐えうる本格的なテンプレートです。

また、デザインを決める際には他のランディングページを見るととても参考になります。ランディングページを集めたサイトも多数あるので、そうしたサイトでたくさんのランディングページを見てみてください。

【参考になるランディングページ集】

2-4. 画像の用意

ランディングページには、画像が多用されます。画像を使うことで見やすくなるだけでなく、商品やサービスの魅力を伝える際の証拠にもなります。例えば先ほどの英会話スクールであれば外国人講師やレッスン風景の写真が掲載されているだけでなく、その講師たちと生徒さんがパーティをしている画像なども掲載されています。こうした画像を使うことで、「このスクールは楽しいよ」というメッセージが伝わる効果を狙っているわけです。

この点を踏まえると、できるだけフリー素材の写真よりも実際の商品や購入者、体験者など「本物」を使うことが効果的であることがお分かりいただけると思います。

2-5. HTML ページを作成、公開

ランディングページを作るために必要なものが揃ったら、ページ制作を行います。HTML コーディングの知識がある方であれば自前で制作して公開するという手順になりますが、そうではないという方もテンプレートサービスなどを利用すると簡単に制作・公開ができるのでぜひ利用してみてください。

3. 結果が出ていないランディングページを改善するノウハウ 6 選

3-1. 5 秒テストをしてみる

人間が何か新しいものを見た時に、5 秒でその印象が決まるといわれています。その習性を利用したのが 5 秒テストです。そのランディングページに対しての事前情報を全く持っていない人にページを見てもらい、その感想を話してもらうという方法です。

ここでの回答が意図していないものだったとしたら、そのランディングページは肝心なことを伝えられていないことになります。冒頭部分やキャッチコピーなどを改善してみる余地があるでしょう。

3-2. CTA の配置やコピーを見直す

CTA とは Call to Action の略で、ランディングページにある購入ボタンなど、閲覧者に行動を起こしてもらうための仕組みのことです。

ランディングページは敢えて他のページへのリンクを設けないので「出口のないページ」でもあります。CTA ボタンは唯一の出口なので、そこに誘導できているのに購入につながっていないのは、とてももったいないことです。アクセス数は多いのに購入につながっていない場合は、この部分の配置やそこにあるコピーを見直してみるのも一考です。

例えば「購入はこちら」というコピーだけではダイエット商品が売れないのであれば、「今より 5 kg 痩せたい方はこちら」というコピーを CTA ボタンに配置するだけでクロージング効果が高くなるといった具合です。

3-3. 冒頭のキャッチコピーを見直す

ランディングページの成否に最も深く関わっている冒頭部分は、そのページの先を読み進んでもらうためにも非常に重要です。売れないランディングページの大半はこの部分でうまく読者を惹きつけられていないことが多いので、結果が出ていないと感じる場合はこの部分を微調整する必要があります。
A/B テストによって効果を比較するのも有効なので、A/B テストを繰り返しながらベターなものを残し、冒頭部分を磨き上げていきましょう。

【A/B テストとは】
2 種類のコンテンツを用意してそれぞれを切り替えてみることでユーザーの反応を計測する手法です。A/B テストを繰り返していくと結果が出ている方を残していくことができるので、トーナメント戦のように最後はベストな選択肢が残ります。