コンバージョン率の高いランディングページを作成するための方法

ランディングページは、提供する商品やサービスについて、訪問者にわかりやすく紹介することに特化したページです。商品やサービスの顔とも言えます。

世界中のデジタルマーケティング担当者の間では広く普及していますが、コンバージョン率の高いランディングページの作成方法を理解しているのは、トップコンテンダーの中でもごくわずかです。

コンバージョン率の高いランディングページはどのような構成になっているのでしょうか？
　└　鮮明なファーストビュー（FV）の内容
　└　インパクトのあるヘッドライン
　└　魅力的なサブヘッドライン
　└　順序のヒエラルキー：セールスコピーの構成方法
　└　色彩理論：ページでの色の使い方
　└　関連性のある画像：適切なものを選ぶ
　└　明確なCTAボタン
　└　信頼バッジとロゴ
　└　ソーシャルプルーフ
　└　ランディングページのフォームデザイン
　└　ライブチャットでの実験

結論

ご質問やお問い合わせに関して

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

ランディングページとは、確度の高いリードを生み出すために設計された独立したページです。
有効リードを獲得するために、ランディングページでは、フォームへの入力、無料トライアルへの登録、製品やサービスへの関心の登録など、細かいコンバージョンを用意しています。

Image Source: [1]

Webマーケティングでは一般的に、広告などのオファーに興味を示したユーザーをランディングページに送ります。
例えば、PPC（ペイ・パー・クリック）広告やソーシャルメディア、Eメールリストからの訪問者などがあります。

ランディングページのコンバージョン率は、業界やその目的によって異なります。
したがって、すべての業界に適合する理想的なコンバージョン率を設定することは難しいです。

Image Source: [2]

上図のグラフは、パフォーマンスの高いランディングページとそれ以外のページの違いを示しています。
目標を設定するには、業界のコンバージョン率のベンチマークを参考にするとよいでしょう。

コンバージョン率の高いランディングページを作るための最初のステップとは？

当然ですが、コンバージョン率の高いランディングページを保証するようなマニュアルは存在しません。
上のセクションで述べたように、コンバージョン率の基準は業界ごとに異なるため、ランディングページのデザインプロセスの初期段階で目標値を設定する目安として考えていただければと思います。
出発点としては、基本的なウェブサイトのデザインとユーザーエクスペリエンス（UX）に関する知識の他に、自社のブランドとその価値提案をしっかりと理解することが必要です。

テストを何度も繰り返すことは決して悪いことではありませんが、当てずっぽうのテストはビジネスに大きなダメージを与えます。

ランディングページは、より良いコンバージョンを得るために、継続的なテストと最適化が必要です。
このことを理解することが、ランディングページ最適化のための最初の重要なステップです。
訪問者がランディングページに何を求めているかを推測するのはやめて、ヒートマップやアイトラッキングソフトウェアなどのツールを活用して、ページ上での訪問者の行動を測定するとよいでしょう。
これらのツールから貴重なインサイトを得ることで、デザインやCTAなどを改善することができ、それによってコンバージョンにつなげることができます。

コンバージョン率の高いランディングページはどのような構成になっているのでしょうか？

鮮明なファーストビュー（FV）の内容

ランディングページのデザインは、コンバージョン率に影響を与えます。
コンバージョン率の最適化には、ファーストビュー（FV）が重要な役割を果たします。
最初にページを読み込んだときに画面上に表示されるものがあなたのウェブページのFV上のコンテンツです。

Nielsen Norman Groupは、人々のオンラインブラウジングの習慣に関する調査を行いました[1]。
この研究には120人の参加者がいて、さまざまな分野の数千ものサイトを閲覧しました。アイトラッキングソフトウェアを使用して、人々が異なるウェブサイトにどのように接しているかを調べました。

Image Source: [3]

Nielsen Norman Groupの調査結果によると「ユーザーはスクロールしますが、それはFV上の内容が十分に有望である場合のみです」

当然のことながら、コンバージョン率の高いランディングページの大半は、FV上で最大限のインパクトを与えるようにデザインされています。
成功しているランディングページの多くは、訪問者が必要とするであろう重要な情報をすべてFV上に配置しており、FV領域だけでコンパクトな販売ページのように見えます。例えば、VWOの例を見てみましょう。

ご覧の通り、FVのコンテンツには、訪問者に行動を起こさせるために必要なランディングページの要素が含まれています。それは以下の通りです。

ヘッドライン
分かりやすいサブヘッドライン
CTAボタン
社会的証明

ランディングページのデザインは、最初からユーザーの注意を引くことが重要です
。訪問者がもっと情報を知りたいと思ったら、ページを下にスクロールして、サービス紹介の重要な内容を読み込みます。

インパクトのあるヘッドライン

世界的なマーケティング会社「オグルヴィ」の創業者であるデイヴィッド・オグルヴィは、ヘッドラインについて有名な言葉を残しています。
“ボディコピーを読む人の5倍の人がヘッドラインを読む”
彼の言葉はインターネットが普及する前の時代のものですが、その気持ちは今でも変わりません。

Imsider.ruがデザインしたランディングページを例にとってみましょう。
彼らはランディングページのコンバージョン率を上げるためにA/Bテストを行いました。左が元のパターンで、右がテストパターンです。

スクリーンショットの下にヘッドラインの翻訳を掲載しています。

このA/Bテストでは、テストパターンが元パターンよりも9.52%多くのリードを生み出しました。コンバージョン率の大幅な向上です。

基本的に、ヘッドラインは訪問者にメリットを伝えなければなりません。
そのためには、上の例のように、時間制約のメリットを提供し、簡単な解決策を約束することが必要です。
どのようなアプローチであっても、コンバージョン率最適化テストでヘッドラインの最適化を図る必要があります。

魅力的なサブヘッドライン

サブヘッドラインは、ヘッドラインをより詳しく説明し、補完的な情報を提供することでコンテキストを追加し、訪問者に望ましい行動を取らせるようにする必要があります。
以下は、ランディングページの小見出しを作成する際に試してほしい4つのことです。

1.長くする
ランディングページのデザインにもよりますが、サブヘッドラインはヘッドラインの2～3倍の長さにすることができます。
2.独自のセールスポイント（USP）を入れる
適切であれば、小見出しにUSPを含めましょう。
3.行動を促す
サブヘッドラインを魅力的なコールトゥアクション（CTA）に変えることができます。
4.過剰な情報提供は避ける
サブヘッドラインは、簡潔、明瞭、かつ焦点を絞ったものでなければなりません。

第三者紹介ビジネスを展開するVenueSphereは、サブヘッドラインの重要性についてのケーススタディを提供しています。

彼らは、コンバージョン率を向上させるために、サブヘッドラインのA/Bテストを実施しました。
2枚目のスクリーンショットのテストパターンでは、元パターンに比べてリードが69％増加しました。

順序のヒエラルキー：セールスコピーの構成方法

Webマーケターの仕事は、訪問者の興味を引き、かつ期待した行動に応えることができると思わせるランディングページを作成することです。

そのためには、訪問者が抱く課題点を克服する必要があります。例えば、次のようなものです。

ランディングページは、訪問者が求めているものを提供しているか？
このページには、訪問者の質問に答えるのに十分な情報があるだろうか？
行動を起こすのに時間がかかりそうですか？

ランディングページで使用する要素は、ユーザーがCVする際に抱く課題点を克服するためのものです。
これらの要素をページ上でどのように配置するかによって、コンバージョン率が決まります。

ランディングページのコンバージョン率を上げたいのであれば、知っておくべき標準的なコピーライティングの公式やランディングページのデザインがいくつかあります。それは次のようなものです。

AIDA＝注意（Attention）、関心（Interest）、欲求（Desire）、行動（Action）
ビフォーアフターブリッジ
問題（Problem）、刺激（Agitate）、解決（Solve）
PPPP＝絵（Picture）、約束（Promise）、証明（Prove）、押し（Push）

上記は、あなたのサイトに適用できるコピーライティングの原則のいくつかの例です[2]。
これらの原則は、長いランディングページを作成する場合に特に有効です。

色彩理論：ページでの色の使い方

ランディングページの色やデザイン要素は、ウェブサイトの第一印象を左右する重要な役割を担っています。
ユーザーが色にどのように反応するかを理解し、ページで色をどのように使用するかは、色彩理論として知られる一連のデザイン原則に関連しています。

色彩理論には、ランディングページのデザインに関連する要素があります。

色彩の心理学
ページ上の要素を強調するための対照的な色の役割

ランディングページの配色は、自社のブランドを反映したものでなければなりません。
ランディングページをデザインする際には、色の関連性について基本的な理解をしておくことが重要です。
補完的な色を理解するには、カラーホイールを参考にするとよいでしょう。

Image Source: [4]

色の関連性について理解することで、背景と要素のコントラストに注意を向けることができます。
ランディングページのボタンの色を変えるだけでコンバージョン率が増減したという成功例が数多く存在するのはこのためです。

明確なCTAボタン

CTAボタン改善は、エントリーレベルのコンバージョン率最適化テストです。
エントリーレベルのテストは、決して見落としてはいけないポイントです。

White Card Coursesの例を見てみましょう。
彼らはホームページのコンバージョン率を上げたいと考えていました。彼らは検討の結果、次のようなA/Bテストを実行しました。

このページにはいくつかの変更を加えています。

テストパターンではCTAボタンが追加され、ボタンのテキストは “Start Now “となっています。
また、人物画像とのコントラストを高めるために、見出しの後ろの背景色に変更が加えられました。

このテストパターンでは、元パターンに比べてコンバージョンが28.76%増加しました。
これは、コンバージョン率最適化の複合的な性質を示す良い例です。

信頼バッジとロゴ

リードに対応する際に克服しなければならない重要なポイントは、信頼の要素です。
多くの場合、ランディングページは、訪問者がそのサービスや商品に出会う最初の場となります。
このような状況では、お客様の声や信頼バッジなどの社会的証明は、信頼を生み出すのに役立ちます。

POSistのケーススタディを見てみましょう。
POSistは、ホームページの最初のバリエーションにこだわることなく、何度もテストを実施しています。
今回取り上げるテストは、ホームページにサービス利用中のクライアントのロゴを追加するというテストです。
このテストによって、さらに高いコンバージョン率が得られました。

このPOSistのケーススタディでは、継続的なテストと信頼要素の重要性が強調されています。

ソーシャルプルーフ

証言、レビュー、ソーシャルエンゲージメントなどの社会的証明は、コンバージョン率の向上に役立ちます。
社会的証明がコンバージョン率にどれほどの影響を与えるかを示す良い例が、ウィキジョブの成功事例です。

フォームの上にシンプルな「お客様の声」を挿入したA/Bテストを実施しました。

この小さな変化で、売上が34％もアップしたのです。その証言が3行の無名のテキストであったことを考えると、これは大きな結果です。

ランディングページで社会的証明を利用する方法は多岐にわたります。
ランディングページのコンバージョン率に影響があるかどうかを確認するために、社会的証明やユーザーレビューをページ上に配置することを試すことは有効な手段であると考えられます。
また、Facebookの「いいね！」や「シェア」の数を追加するなど、小さなことでも結果的にコンバージョン率の向上につながります。

ランディングページのフォームデザイン

ランディングページで使用しているフォームは、コンバージョンが発生する場所です。
フォームのデザインやユーザーがフォームを操作する方法に問題があれば、ランディングページのコンバージョン率は低くなります。
当然のことながら、ランディングページのフォームデザインを改善すれば、ユーザーがフォームに記入する機会が増えます。

フォームのデザインを見直し、最適化する必要があります。
例えば、一般的な経験則として、フォームフィールドの数が少なければ少ないほど、全体のコンバージョン率は高くなると言われています。
さらに、フォーム分析を徹底的に見直すことで、ユーザーが混乱している入力項目を浮き彫りにすることができます。

ベストプラクティスとして参考になる事例やフォームの例はたくさんあります。
これらの事例を確認し、フォームに記入するユーザーの数を増やすためのテストを行うようにしましょう。

ライブチャットでの実験

あなたが追跡しているコンバージョンのタイプにもよりますが、最終的にフォームに到達した人がオファーについて未解決の質問を持っている可能性があります。
ページの FAQ セクションは、この問題に対する部分的な解決策を提供することができます。

しかし、多くの人はFAQセクションを読まないかもしれませんし、FAQ で解決されていない質問があるかもしれません。

ライブチャットソフトウェアは、ユーザーに質問に答えてもらう機会を提供することで、この問題を解決するのに役立ちます。
興味深いことに、ライブチャットオプションの存在は、追加の安心感を生み出します。
製品開発者は何十年も前にこのことに気づいていました。

世の中には、安心させるために存在するものの、実際にはその機能を持たないプラシーボボタンが溢れています[4]。
だからといって、質問を無視していいわけではありません。
しかし、ライブチャットがコンバージョン率にどのような影響を与えるか、また、ページ上のライブチャット機能がどの程度のサポートを必要とするかをテストする必要があります。

結論

どの業界でも、パフォーマンスの高いランディングページは、業界平均の2倍、3倍の割合でコンバージョンを獲得していることが多いです。
同じくらいのリードを獲得するために PPC 広告を使用し、肝心のランディングページのコンバージョン率が平均的な場合、競合他社と比べてリードあたり約 3 倍の金額を支払っている可能性があります。これでは、戦略的に圧倒的に不利になってしまいます。

ニッチな分野でコンバージョン率の高いランディングページを運営している企業は、偶然そのようなランディングページを作ったわけではありません。
彼らは、ランディングページのコンバージョン率を段階的に向上させるために、テストを繰り返し、最適化を行っています。
パフォーマンスの高いランディングページを作成するために、テストで最適化を図ることをオススメします。

sources

Image sources

ご質問やお問合せに関して

お客様のCROのどんなお悩みでも我々アッション（現・SHIFT）はいつでもお力添えさせていただきますので、

小さなお悩みだったとしても、お気軽にご相談ください。

コラム