メインコンテンツへスキップ
すべての記事

チュートリアル

コンバージョンするランディングページの作り方:ステップバイステップガイド

ランディングページの仕事はひとつ、訪問者を次のステップへ進めることです。当て推量に頼らず、どう構成し、どう書き、本当に機能しているかをどうテストするかを解説します。

Daniel Mercer
Daniel Mercer
デベロッパーアドボケイト
·10分で読めます
コンバージョンするランディングページの作り方:ステップバイステップガイド
目次

ランディングページの仕事はたったひとつ、訪問者を次のステップ、つまり登録、トライアル、購入へと進めることです。難しいのは、それがその仕事を果たしているかどうかを、見ただけでは判断できない点です。美しく、完璧に揃っていても、ほとんど誰もコンバージョンしないページはあり得ます。

これは理論の講義ではなく、今日すぐ作るためのガイドです。コンバージョンするランディングページの構造を順に見ていきます。スクロール前に見える約束、5秒のスキャンに耐えるコピー、邪魔をしないCTA、本物に感じられる証明、そして改善し続けるページと放置されたままのページを分ける唯一の習慣です。

要点:コンバージョンするページの構造

ほかに何も覚えられなくても、これだけは覚えてください。ランディングページは、ひとつの行動のための、絞り込まれたひとつの主張です。どのセクションも、訪問者をその行動に近づけるか、さもなければ邪魔をしているかのどちらかです。失敗するページの多くは醜いのではなく、焦点が定まっていないのです。

  • スクロール前にひとつの約束: 誰のためのもので、何が得られ、次に何をすればよいかが、誰かがスクロールする前にすべて見えている。
  • スキャンのためのコピー: 文章の壁ではなく、ベネフィット主導の見出しと短いブロック。
  • ひとつの主要な行動: 単一で明白なCTAを、できるだけ摩擦なく繰り返す。
  • 判断のそばに証明: 疑いが忍び寄るまさにその場所に、本物の社会的証明と信頼のシグナルを。
  • 実際に何が起きるかを見る手段: 見ていないページは改善できないから。

スクロール前から始める:約束、証明、行動

最初の画面が、誰かが2画面目を読むかどうかを決めます。訪問者はたどり着き、ちらりと見て、数秒のうちに3つの問いを心の中で投げかけます。自分は正しい場所にいるのか、自分にとって何の得があるのか、次に何をすればよいのか。ページの上部がこの3つすべてに答えなければ、残りの部分が読まれる機会はめったに訪れません。

ですから、仕組みではなく結果を名指しする見出しで始めましょう。「今週末にサイトを公開する」は「強力なウェブサイトビルダー」に勝ります。誰のためのものかを伝え、最も明白な反論に一行で答えるサブ見出しを添えます。明確なCTAをひとつすぐ目に入る位置に置き、ひとかけらの証明で裏づけます。見覚えのあるロゴ、胸を張れる数字、あるいは本物の顧客からの力強い一文です。

ここですべてを説明したくなる衝動は抑えましょう。最初の画面の仕事は成約させることではありません。スクロールを勝ち取ることです。

  • 見出し: 平易な言葉で語る結果、つまり相手が持ち帰るもの。
  • サブ見出し: 誰のためのもので、主な反論に一行で答える。
  • 主要なCTA: スクロールせずに見える、ベネフィットとして言い表されたひとつの行動。
  • ひとかけらの証明: ロゴひとつ、本物の数字ひとつ、短い引用ひとつ。壁ではなく。
ランディングページのクリックとスクロールのヒートマップ。注目が上部の見出しと主要なCTAの近くに集中し、ページ下部へ向かうほど薄れていく様子
ランディングページの実際のヒートマップ。注目は見出しと主要なボタンの周りに集まり、その後すぐに落ち込みます。最初の画面が仕事のほとんどを担っており、だからこそスクロールを勝ち取らなければならないのです。

5秒のスキャンに耐えるコピーを書く

ランディングページを一語一句読む人はほとんどいません。人々はスキャンします。見出し、サブ見出し、太字の部分、ボタン、キャプション。スキャンだけで意味が通らなければ、本文の段落がどれほど優れていても、大半の訪問者にとってそのページは失敗です。

ですから、まずスキャンのために書きましょう。すべての見出しを完結した一つの考えにし、見出しだけを読んだ訪問者でも主張の全体がつかめるようにします。ベネフィット(相手にとって何が変わるか)を先に出し、それを機能(どうやって実現するか)で裏づけます。あいまいにする言葉を削り、前置きの一文を削り、その場所に値しないものはすべて削ります。

手早いテストがあります。自分の見出しとボタンだけを、順番に声に出して読んでみてください。それらは、望む行動で終わる筋の通った物語を語っていますか。そうでなければ、段落をひとつでも磨く前に、その骨格を直しましょう。

  • 見出しが主張を運ぶ: それぞれが完結した、ベネフィット主導の考え。
  • 機能より先にベネフィット: まず何が得られるか、次にどう機能するか。
  • 短いブロック: それぞれ数行で、目を休められる余白とともに。
  • 巧みさより具体性: 具体は説得し、巧みな一文は読み飛ばされる。

行動を明白にし、そして簡単にする

誰かがあなたの提供するものを欲しいと思ったら、あなたの唯一の仕事は邪魔をしないことです。ここで驚くほど多くのコンバージョンが静かに失われます。求めすぎるフォームと、隠れたりあいまいだったりするボタンの中で。

ページごとに主要な行動をひとつ選び、それをページの下へと繰り返しましょう。それぞれ別の方向に引っ張る5つの競合するボタンをばらまいてはいけません。ボタンは、相手がしなければならない作業(「送信」)ではなく、訪問者が得る価値(「無料で始める」「レポートを受け取る」)として言い表します。そして、今この瞬間に本当に必要な最小限のフィールドまでフォームを削ぎ落とします。余分なフィールドはどれも立ち去る理由がもうひとつ増えるということで、関係ができてから後でいくらでも尋ねられます。

クリックの周りの摩擦も減らしましょう。次に何が起きるかを伝え、怖い部分を安心させ(クレジットカード不要、いつでもキャンセル可能、2分で完了)、ボタンを探させることは決してしないでください。

  • ひとつの主要な行動を、 5つの競合するものではなく、ページの下へと繰り返す。
  • ベネフィット主導のボタンコピー: 「送信」より「無料で始める」。
  • フォームのフィールドを減らす: このステップで本当に必要なものだけを尋ねる。
  • 小さな不安を取り除く: クリックの後に何が起きるかを平易な言葉で伝える。

疑いが現れる場所に証明を添える

人は確信が持てないとき、他の人を頼ります。社会的証明が効くのは、まだ個人的には得ていない信頼を、ためらう訪問者に貸し与えてくれるからです。ただし、それが本物に感じられるときに限ります。

判断のそばに、CTAのすぐ隣、まともな人が立ち止まるまさにその場所に証明を置きましょう。具体は毎回、一般論に勝ります。具体的な成果、名前のある顧客、本物のスクリーンショット、自分が擁護できる数字です。あいまいなバッジや、でっち上げの星5レビューの壁は、望むことの逆を引き起こします。注意深い読み手は一目でそれらを割り引き、他に何が誇張されているのかと疑い始めるからです。

あなたがまだ初期段階で、ロゴをまだ持っていなくても大丈夫です。本当のことを使いましょう。明確な保証、透明な仕組みの説明、創業者からのメモ、本物のデモ。誠実さそのものが信頼のシグナルであり、初日から差し出せるものです。

  • 一般論より具体: 本物の成果や引用ひとつが、星の列に勝る。
  • 行動の近くに証明: 疑いが実際に現れる場所に置く。
  • 本当のことだけ: 数字や推薦をでっち上げてはいけない、逆効果になる。
  • 初期段階の証明も効く: 保証、デモ、率直な透明性も信頼を築く。

本当にコンバージョンするかを知る方法(当て推量ではなくテストする)

ここからは耳の痛い話です。これまでのすべては良いデフォルトであって、保証ではありません。あなたの見出しについて、まともな二人は意見が分かれ、どちらももっともらしく聞こえます。どちらのバージョンのページがよりコンバージョンするかを実際に知る唯一の方法は、本物の訪問者がそれを使うところを見ることです。

デザインの意見は安く、行動こそが真実です。ページ上のどこで注目が途切れるか、人々が決してたどり着かないセクションはどれか、リンクではないものをどこでクリックするか、そして登録のどのステップで正確に離脱するかを、あなたは見たいはずです。見えない離脱は直せませんし、ページビューの山に埋もれていては決して気づけません。

ですから、ページを公開したら見守りましょう。ヒートマップは人々が実際にどこを見てクリックするかを示し、最初の画面が役割を果たしているのか、主要なボタンが静かに無視されているのかを判断できます。一度も読んだことがなければ、ヒートマップの読み方から始めてください。そして、ランディングから登録までの経路をコンバージョンファネルとして描くと、大半の人が離脱する唯一のステップが見え、たいていそこに最も速い改善が隠れています。

ファネルが見えれば、優先順位はおのずと決まります。最大の落ち込みは、自分が思っていた場所であることはめったにありません。まずそのひとつのステップを直し、変更をリリースし、落ち込みが縮むかを見守りましょう。見て、変えて、また見るというそのループこそが、まずまずのページを、よくなり続けるページへと変えるのです。

ランディングから購入までの各段階で訪問者が離脱する4ステップのコンバージョンファネル。最大の落ち込みはファネルの早い段階にある
コンバージョンファネルは漏れを明白にします。ここでは最大の落ち込みは最初のステップの直後にあるので、まず直すのはそこであって、たまたま作り直したい気分になったページではありません。

避けるべきよくあるランディングページの間違い

ほとんどのランディングページは、同じ数種類のやり方で失敗します。他に何も監査しないとしても、これらだけは監査してください。直せばインターネット上の大半のページより先んじられるからです。

  • 目標が多すぎる: 登録、デモ、ニュースレター、フォローを求めるページは、どれにとってもうまくコンバージョンしません。ひとつのページに、ひとつの仕事。
  • 機能の羅列: 訪問者にとって何が変わるかではなく、作ったものすべてを並べる。
  • 埋もれた、あるいはあいまいなCTA: 人々がボタンを探さなければならないなら、すでに何人かを失っています。
  • 一般的な証明: 注意深い読み手が即座に割り引く、星の壁とあいまいなバッジ。
  • 遅い最初の画面: ページの読み込みに時間がかかりすぎると、最初の一語が届く前に訪問者は立ち去ります。速度もコンバージョンの一部です。
  • 公開して忘れる: 訪問者が実際に何をするかを見る手段がないまま公開し、ページが決してよくならない。

公開し、そしてよくし続ける

これらのどれも、ゼロからの作り直しを必要としません。より大きなチームも新しいフレームワークも要りません。必要なのは、焦点の定まったひとつのページ、訪問者がその上で何をするかへの率直なまなざし、そして一度にひとつだけ変えて結果を確かめる意志です。

ですから、このガイドから最も効果の大きい修正をひとつ選び、弱い見出し、埋もれたボタン、5項目のフォームのいずれかを、今週リリースして、それが動いたかを見てください。ランディングページが本当に完成することはありません。ただ、見守り続けたおかげで、先月よりよくなっているだけなのです。

よくある質問

良いランディングページのコンバージョン率とは?

業界、トラフィックの流入元、オファーによってあまりに大きく左右されるため、単一のベンチマークはほぼ役に立ちません。冷たい広告のオーディエンスと温かい口コミのトラフィックが、同じ率でコンバージョンすることは決してありません。誰か他人の数字を追うより、自分のコンバージョン率を計測し、先月を上回ることに集中しましょう。重要な唯一のトレンドは、自分の数字が上がっていくことです。

ランディングページをどうテストすればよいですか?

当て推量ではなく、本物の行動を見ることから始めましょう。ヒートマップで注目とクリックがどこへ向かうかを見て、ファネルで人々が離脱するステップを見つけます。それが何を変えるべきかを教えてくれます。それからひとつだけ変え、なぜ効くのかについて明確な仮説を立て、比較します。本格的なA/Bテストは、結果を信頼できるだけのトラフィックが集まれば素晴らしいものです。それまでは、ヒートマップやセッションレコーディングといった定性的なシグナルのほうが、より速く、より多くを教えてくれます。

ヒートマップとは何で、ランディングページにどう役立ちますか?

ヒートマップは、訪問者がページ上のどこを見て、スクロールし、クリックするかを視覚的にまとめたもので、最も活発な領域は熱く、無視された領域は冷たく示されます。ランディングページでは、人々がCTAにたどり着くか、どのセクションを飛ばすか、実際にはリンクではないものをどこでクリックするかを即座に明らかにします。詳しくはヒートマップの読み方をご覧ください。

ランディングページにはCTAをいくつ置くべきですか?

主要な行動はひとつ、それを自然に収まる限り繰り返します。訪問者がスクロールするにつれて同じCTAを何度か見せるのは良いことです。害になるのは、いくつもの異なる行動が同じクリックを奪い合うことです。訪問者に最もしてほしいことをひとつ選び、どこでも明白な選択肢にし、二次的なリンクははっきりと二次的なままにしておきましょう。

シェア

分析を変える準備はできていますか?

無料で始める

無料プラン含む · クレジットカード不要

関連記事