LP(ランディングページ)は、広告やメール、SNSから来た人が最初に着地する1枚のページのことです。資料を請求してもらう、無料登録してもらう、そのまま買ってもらう。
目的はさまざまですが、共通しているのは1ページで結論まで連れて行く点にあります。
そして、その成否の大半は最初の画面で決まります。
心当たりはありませんか。広告の予算を増やしたのに問い合わせ数は横ばいで、文章を何度も書き直しても数字が動かない。
原因は文章の巧拙ではなく、そもそも最後まで読まれていないことにある場合がとても多いのです。
この記事では、ファーストビューを軸にLPを点検する手順を、判断の基準と数値例つきで整理します。チェックリストを埋めることが目的ではありません。
直す順番を決められるようになることが目的です。
なぜ最初の画面だけで結果が変わるのか
ファーストビューとは、ページを開いた瞬間にスクロールせずに見える範囲を指します。パソコンなら上から600〜900ピクセルほど、スマートフォンではもっと狭く、見出しとボタンでほぼ埋まってしまいます。
訪問者はこの範囲を、読むというより眺めています。文章として処理されるのは、たいてい見出しの一行だけです。
つまりファーストビューは、ページの入口というより通すか通さないかを決める関所に近い存在です。
人は読む前に捨てている
広告をクリックした人は、あなたの商品を買いに来たわけではありません。自分の困りごとが解決しそうかどうかを、ほんの数秒で判定しに来ています。
判定に使う材料は3つだけです。これは何のページか、自分に関係があるか、次に何をすればいいか。
この3つが一目で分からないページは、中身がどれだけ良くても戻るボタンを押されます。下まで読まれないページは、下をいくら直しても数字が動きません。
だから最初に手を入れる場所は、いつも上なのです。
もうひとつ見落とされがちなのが、クリックする直前に見た言葉との一致です。広告やメールに書いてあった言葉がLPの見出しに見当たらないと、訪問者は場所を間違えたと感じて戻ります。
流入元ごとに文言が違う場合は、それぞれの入口とLPの上部を並べて見比べてみてください。
改善の効果は掛け算で効く
ファーストビューの改善は、それ以降のすべての工程に効きます。母数が増えるからです。
たとえば月間1万セッションのLPで、ファーストビューの離脱率だけを55%から45%へ下げたとします。それ以降の通過率は一切いじりません。
| 段階 | 改善前 | 改善後 |
|---|---|---|
| 月間セッション | 10,000 | 10,000 |
| ファーストビューで離脱 | 5,500(55%) | 4,500(45%) |
| 本文まで読んだ | 4,500 | 5,500 |
| フォームに到達 | 900 | 1,100 |
| 送信完了 | 120(CVR 1.20%) | 147(CVR 1.47%) |
本文以降の通過率をまったく変えていなくても、成果は120件から147件へ、約22%増えます。文章の細部を磨くより、まず上を直したほうが速いのはこのためです。
しかも、この改善はフォームや料金表の改善とそのまま積み上がります。上流の改善は、下流のすべての改善に掛かる係数だと考えてください。
逆に言えば、下流だけを何度も直しているのに成果が伸びないチームは、たいてい上流を放置しています。
ファーストビューで確認する5つのこと
ここからは具体的な点検項目です。それぞれの要素が訪問者のどんな疑問に答えているのかを意識すると、直すべき方向が見えてきます。
| 要素 | 答えるべき疑問 | ありがちな失敗 |
|---|---|---|
| 見出し | これは何のページか | 自社のスローガンだけが載っている |
| サブ見出し | 自分に関係があるか | 機能名の羅列で価値が伝わらない |
| CTAボタン | 次に何をすればいいか | 押した先が想像できない曖昧な文言 |
| ビジュアル | 信用してよさそうか | 内容と無関係なフリー素材 |
| 表示速度 | (待つ前に去る) | 巨大な画像で表示に3秒以上かかる |
見出しは、誰の何がどう変わるかを書く
いちばん多い失敗は、見出しに自社の思想を書いてしまうことです。読み手はまだあなたの会社に興味がありません。
見出しに入れるべきなのは、対象者と、その人に起きる変化です。抽象的な言葉を1つ減らし、具体的な名詞と数字を1つ足す。
それだけで伝わり方が変わります。
実際の書き換え例を見てみましょう。
<!-- ビフォー:何のページなのか分からない -->
<h1>Webの力で、ビジネスをもっと自由に。</h1>
<p>私たちは顧客体験の最大化を支援します。</p>
<a href="/contact">詳しくはこちら</a>
<!-- アフター:誰の何が、どう変わるかを書く -->
<h1>受注管理のExcel転記を、月20時間ぶん減らす</h1>
<p>中小の卸売業向け。いま使っているExcelをそのまま取り込めるので、乗り換えの作業はほとんど発生しません。</p>
<a href="/trial">30日間の無料トライアルを始める</a>
アフターの見出しは、対象(中小の卸売業)と、変化(月20時間の削減)が明示されています。自分に関係ないと判断した人は早めに去りますが、それは悪いことではありません。
関係ある人だけが残るほうが、結果的にCVRは上がります。万人向けの見出しは、誰の心にも刺さらないというのは、ほぼ例外のない経験則です。
サブ見出しの役割は、その主張を信じてよい理由を一行で足すことです。導入の手軽さ、対応範囲、実績のある領域。
ここで機能名を並べたくなりますが、まだ早いのです。
なお、見出しの案は1つに絞らず、3案ほど書き出してから選ぶことをおすすめします。最初に思いついた案がそのまま最良だったという例は、そう多くありません。
CTAは、押した後に何が起きるかを書く
CTAとは行動を促すボタンやリンクのことです。ここも文言ひとつで到達率が変わります。
詳しくはこちら、という文言の弱点は、押した先が想像できない点にあります。人は行き先の分からない扉を開けたがりません。
無料トライアルを始める、資料をダウンロードする、料金を見る。このように動詞と目的語をセットにすると、押した後の展開が読めるので迷いが減ります。
ボタンの近くに、クレジットカード不要、1分で完了、といった短い補足を添えるのも効果的です。
そしてCTAはファーストビューの中に必ず1つ見えている状態にしてください。スクロールしないと申し込めないページは、それだけで機会を失っています。
画像は、内容を説明するものを選ぶ
ビジュアルの役割は、装飾ではなく説明です。実際の画面や、使っている場面が分かる写真のほうが、雰囲気の良いイメージ写真より信頼されます。
同時に、画像は表示速度の最大の敵でもあります。ファーストビューに置く画像は、幅を実際の表示サイズに合わせ、WebPなどの軽い形式に変換しておきましょう。
読み込みが遅いページは、見出しを読んでもらう前に離脱されます。表示速度は、デザインの話ではなくコンバージョンの話です。
特に広告からの流入はスマートフォンの回線が中心です。オフィスの高速な回線で確認して満足せず、モバイル回線に近い条件でも一度測っておきましょう。
スクロールした先で、不安を消していく
ファーストビューを通過した人は、興味を持った状態です。ここからの本文の役割は、説得ではなく不安の解消にあります。
多くのLPは、機能の説明から始めてしまいます。しかし読み手が知りたいのは、それが自分にどう役立つかです。
本文の順番は、おおむね次の流れに落ち着きます。
- これを使うと何がどう変わるのか(ベネフィット)
- なぜそれが可能なのか(機能・仕組み)
- 本当なのか(事例・データ・第三者の声)
- 自分にもできるのか(導入手順・サポート)
- 損しないか(料金・解約条件・よくある質問)
この順番を守ると、読み進めるにつれて疑問がひとつずつ潰れていきます。逆に、価格を隠したまま申し込みボタンだけ並べると、警戒されて離脱が増えます。
特に効きやすいのが3番目です。同じ内容でも、自社が語るのと利用者が語るのとでは、受け取られ方がまるで違います。
1つのセクションで伝えるメッセージは1つに絞ってください。詰め込むほど、どれも印象に残らなくなります。
最後の関門はフォーム
LPの終着点がフォームなら、そこは離脱が集中する場所です。ファーストビューを直してせっかく到達者を増やしても、フォームで落ちれば成果は増えません。
入力項目を1つ減らすだけで送信率が変わることは珍しくありません。任意項目は思い切って削り、どうしても必要な項目には、なぜ聞くのかを一行添える。
細かい工夫はフォーム最適化(EFO)|入力離脱を減らす7つの工夫にまとめています。
もうひとつ見落としがちなのが、フォームまでの距離です。ページの最下部にしか入力欄がないと、決心した人がもう一度スクロールし直すことになります。
決めた瞬間に押せる場所にCTAがあるかどうかを確認してください。
どこを直すかは、数字で決める
チェックリストを上から順に潰すのは非効率です。壊れていない場所を直しても、数字は動きません。
判断材料になるのは、ページのどこで人が去っているかという事実です。
見るべき指標は3つで足りる
まず、そのLPに何人来て、何人が次のステップへ進んだか。ファネル分析、つまり訪問から申し込みまでの各段階の到達数を並べて見ると、いちばん大きく人が減る場所が一目で分かります。
次に、ファーストビューで去ったのか、読んだうえで去ったのか。この2つは見た目が同じ離脱でも、打つ手がまったく違います。
ここを分けるには、ページを開いてすぐ閉じた人と、しばらく滞在した人を区別できる計測が必要です。
Strideは15秒ごとにエンゲージメントの信号を送る仕組みを持っているので、1ページしか見ずに帰った訪問者でも滞在時間が実数で残ります。3秒で去られているのか、90秒読んで諦められたのかが分かる。
これは改善の方向を決めるうえで大きな差になります。
最後に、流入元ごとの差です。同じLPでも、検索から来た人と広告から来た人では、前提知識も温度感も違います。
広告経由だけCVRが極端に低いなら、直すべきはLPではなく広告文かもしれません。
ここで注意したいのは、広告とメールと検索がひとまとめに集計されていないかという点です。分類が雑な数字は、間違った結論に直結します。
Strideは検索・広告・メール・SNS・外部サイト・直接を自動で分けて記録します。Gmailなどのウェブメールから来た訪問者を検索流入として数えてしまう、よくある取りこぼしも起きません。
LP以外も含めて改善の視点を広く押さえたい方は、コンバージョン率(CVR)を上げる7つの視点もあわせてどうぞ。
優先順位のつけ方
数字で当たりをつけたら、効果と手間で並べ替えます。目安は次のとおりです。
| 施策 | 想定インパクト | 手間 | 着手順 |
|---|---|---|---|
| 見出し・サブ見出しの書き換え | 大 | 小 | 1 |
| CTAの文言と配置の見直し | 大 | 小 | 2 |
| ファーストビュー画像の軽量化 | 中 | 小 | 3 |
| フォーム項目の削減 | 大 | 中 | 4 |
| デザイン全面刷新 | 不明 | 大 | 最後 |
デザインの全面刷新は、一見いちばん効きそうに見えます。しかし何が効いたのか分からなくなるうえ、時間もかかります。
まずは小さく速いものから。これが鉄則です。
モバイルは、別のページとして点検する
パソコンで作ったLPをスマートフォンで開くと、まったく違うページに見えます。見出しが3行に折り返し、画像が画面を占領し、CTAはずっと下へ押しやられている。
つまり、パソコンで完璧なファーストビューでも、スマートフォンでは成立していないことがあるのです。
点検は実機で行ってください。ブラウザの検証ツールの縮小表示は便利ですが、指の太さも回線の遅さも再現してくれません。
指で押しやすいボタンの大きさは、おおむね44ピクセル四方以上が目安とされています。隣り合うリンクとの間隔も忘れずに確認しましょう。
誤タップは、ユーザーの失敗ではなく設計の失敗です。
そのうえで、モバイルとパソコンのCVRは必ず分けて見ます。合算した平均値は、両方の実態を隠してしまうからです。
端末別の違いと対処はモバイルのCVRが低い原因と改善|スマホで取りこぼさないで詳しく扱っています。
実際にどこでつまずいているか分からないときは、セッションリプレイという手もあります。訪問者の操作を動画のように再現する機能です。
Strideのリプレイは記録の時点で全テキストを伏せ字にし、入力値や画像は一切保存しないので、個人情報を集めずに動きの詰まりだけを確認できます。
チェックリストは、答えではなく仮説
ここまでの項目は、すべて仮説です。うまくいく確率が比較的高い、というだけで、あなたのLPで効く保証はありません。
だからこそ、変えたら確かめる。
確かめる方法がA/Bテストです。元のページと変更したページを訪問者にランダムに出し分け、どちらの成果が高いか比べます。
コツは一度に変える箇所を1つに絞ること。見出しとCTAと画像を同時に変えると、何が効いたのか永遠に分かりません。
もうひとつ大事なのが、判定を焦らないことです。100セッションずつ見て差がついたように見えても、それはたいてい偶然の揺れです。
目安として、各パターンで最低でも数十件のコンバージョンが貯まるまでは結論を出さないでください。
Strideのビジュアルエディタは、自分のサイトを開いたまま見出しやボタンをその場で書き換えてテストを作れます。コードを触らずに済むので、エンジニアの手が空くのを待たずに検証を回せます。
手順と注意点はA/Bテストの始め方|ノーコードで検証する手順と注意点にまとめました。
30日で1周させる進め方
最後に、実務での回し方を書いておきます。だいたい1か月で1周する想定です。
最初の1週間は計測の整備にあてます。LPへの流入、スクロール後の到達、フォーム表示、送信完了。
この4段階が数字で追える状態を作ってください。
ここを飛ばすと、あとの判断がすべて感覚になります。感覚で決めた施策は、成功しても失敗しても学びが残りません。
2週目に、数字を見て仮説を1つだけ立てます。離脱がいちばん大きい場所に対して、なぜそこで去るのかを言葉にする。
その説明が正しければ、こう直せば改善するはずだ、という形まで持っていきます。ここまで書けて初めて、テストの結果から学べるようになります。
3週目から4週目でA/Bテストを走らせ、結果を確認します。負けても構いません。
負けた仮説は、その説明が間違っていたという情報です。次の仮説の精度が上がります。
そしてまた最初に戻ります。LP改善に終わりはありませんが、この一周を数回まわすと、自社の顧客が何に反応するのかが見えてきます。
それはどんなチェックリストよりも価値のある資産です。
まずは、あなたのLPをスマートフォンで開いてみてください。3秒だけ見て、何のページか言えるでしょうか。
参考記事
表示速度の測定は、Googleが公開している次の無料ツールで確認できます。