UIUX

KNOWLEDGE

縦長・一枚物LPのデザイン設計のコツ|離脱を防ぐ構成の作り方

  • #UIUX
  • #WEB制作

SHARE

縦長のランディングページは、スクロールするほど離脱が積み上がる構造です。上から順に読ませる設計である以上、途中で1回でも「自分には関係ない」と判断されると、そこで終わります

そのため縦長LPでは、ブロックの内容そのものより並び順が成果を左右します。会社が伝えたい順序ではなく、訪問者が判断する順序に並べる。これだけで、同じ素材でも到達率が変わります。

この記事では、離脱が起きる構造を整理したうえで、ブロックの標準的な並び順、長さの決め方、スマートフォンでの設計、そして離脱箇所の特定方法までを解説します。

この記事でわかること

・縦長LPで離脱が積み上がる構造と、対処の考え方

・訪問者の判断順に並べたブロック構成

・LPの長さをどう決めるか

・スマートフォンでの1画面設計とCTAの置き方

・どのブロックで落ちているかを特定する方法

離脱は掛け算で積み上がる

各ブロックの通過率が90%でも、10ブロックあれば最後まで到達するのは35%程度です。1ブロックあたりの通過率を数ポイント上げることが、最終的に大きな差になります

ブロック数 各ブロックの通過率90% 通過率95%
5ブロック 約59% 約77%
8ブロック 約43% 約66%
12ブロック 約28% 約54%

この表から2つのことが分かります。ブロックを減らすことと、各ブロックの通過率を上げること、どちらも効きます。「情報を足す」判断をするときは、その分だけ到達率が下がることを前提にしてください。

縦長LPの成果は、ブロックの内容より並び順と数で決まります。

情報を足すたびに到達率が下がる。足す前に、そのブロックの目的を1行で書けるか確認してください。

訪問者の判断順に並べる

標準的な並び順です。業種が変わっても、この順序は大きく変わりません。

# ブロック 役割 ここで落ちる原因
1 ファーストビュー 誰向けの何かを3秒で伝える 広告文と内容が一致していない。表示が遅い
2 課題提起 自分ごと化させる 課題が抽象的で誰にでも当てはまる
3 解決策の提示 どう解決するかを具体化 機能の羅列で便益が伝わらない
4 証拠(実績・お客様の声) 言っていることが本当だと示す 抽象的な賞賛だけ
5 差別化 他社ではなく自社を選ぶ理由 「丁寧」「安心」など他社も言える表現
6 料金・プラン 検討の最大のハードルを解消 料金がなく問い合わせに誘導している
7 流れ・サポート 申込後の不安を消す 記載がない
8 よくある質問 残った不安を潰す 商品説明の繰り返し
9 CTA 行動を1つに絞る 複数の異なるCTAが並ぶ

順序を入れ替える場合は、理由を説明できることが条件です。特に6番の料金を後ろに下げすぎると、そこまで読まずに離脱されます

会社の情報は下に置く

沿革、理念、代表挨拶は、訪問者が判断に使う情報ではありません。上部に置くと、その分だけ本題への到達が遅れます。信頼要素として必要な場合は、実績数や資格といった判断に使える形に変えて4番に入れてください。

長さをどう決めるか

「長いほうがよい」「短いほうがよい」という一般則はありません。判断軸は検討期間と単価です。

商材の性質 LPの長さ 理由
単価が低く、即決される(予約、体験申込) 短い(5〜7ブロック) 判断材料が少なくて済む
単価が高く、検討期間が長い(リフォーム、BtoB) 長い(9〜12ブロック) 不安の解消に情報量が必要
既に認知がある(指名検索からの流入) 短い 説得より案内が中心
認知がない(SNS広告からの流入) 長い 課題提起から始める必要がある

流入経路によっても変わります。指名検索から来た人に長い説得は不要で、逆にSNS広告から来た人には課題提起が必要です。予算があるなら、経路別にLPを分けるほうが成果は上がります。

ブロックを足すかどうかの判断

追加を検討するときは、次を確認してください。

  • そのブロックの目的を1行で書けるか(書けないなら不要)
  • 問い合わせで実際に聞かれている内容か
  • 既にあるブロックと内容が重複していないか
  • 足すことで下部への到達率が下がるが、それを上回る効果があるか

スマートフォンでの設計

縦長LPの閲覧は、ほぼスマートフォンです。設計の起点をこちらに置いてください。

項目 考え方
1画面に入る情報量 見出し+短い本文+画像1点程度。詰め込まない
ファーストビューの高さ 画面いっぱいの画像で埋めない。CTAが画面外に出ないか実機で確認
画像の縦幅 大きすぎると、それだけで1画面を消費する
文字サイズ 本文16px前後。小さくして情報を詰めない
CTAの配置 ファーストビュー内に1つ、中間に1〜2つ、最下部に1つ
固定CTA 画面下部に固定表示する場合、高さを抑えて可読性を損なわない

2番目は特に多い失敗です。PCでは1画面に収まっていた「見出し+画像+CTA」が、スマートフォンでは画像だけで画面が埋まることがあります。ファーストビューの設計はファーストビュー設計の重要性|離脱を防ぐ最初の3秒の作り方で解説しています。

中間CTAを置く

最下部だけにCTAを置くと、途中で判断が固まった人を取りこぼします。証拠ブロックの直後と、料金ブロックの直後に置くのが基本です。ただし主CTAは1種類に統一し、複数の異なる行動を並べないでください。

どこで落ちているかを特定する

感覚で並べ替えず、数値で確認してください。

方法 分かること 導入コスト
GA4のスクロール率 どの深さまで読まれているか 無料。拡張計測機能で取得できる
ヒートマップツール どのブロックで止まり、どこで離脱するか 無料〜月数千円
GTMで各ブロックの表示を計測 ブロック単位の到達率 無料。要素の表示トリガーで実装
ユーザビリティテスト なぜそこで離脱したか ほぼ無料(5人)

3番目が最も精度が高い方法です。各ブロックに要素の表示トリガーを設定すると、「証拠ブロックまで60%、料金ブロックまで35%」といった通過率が取れます。落ちている箇所が特定できれば、直す場所が決まります。実装はGA4×GTM計測設定ガイドを参照してください。

よくある失敗

失敗1:会社の情報を上部に置く

沿革や理念は判断材料になりません。本題への到達が遅れるだけです。

失敗2:料金を最後まで出さない

そこまで読まれません。範囲でも構わないので、検討の中盤で提示してください。

失敗3:情報を足し続ける

ブロックが増えるほど、最下部への到達率は掛け算で下がります。足す前に目的を1行で書けるか確認してください。

失敗4:CTAが最下部にしかない

途中で判断が固まった人を取りこぼします。中間にも置いてください。

失敗5:PCで設計してスマホに落とす

順序と1画面の情報量が破綻します。起点をスマートフォンに置いてください。

よくある質問

Q. LPは何ブロックが適切ですか?

商材の単価と検討期間で変わります。即決される商材なら5〜7、高単価で検討期間が長いなら9〜12が目安です。数を決めてから内容を埋めるのではなく、必要な情報を並べた結果として決まります。

Q. 長いLPは読まれないのでは?

読む理由がある人は読みます。問題は長さではなく、途中で「自分には関係ない」と判断させることです。判断材料を順序どおりに置けば、必要な人は最後まで読みます。

Q. 動画を入れるべきですか?

商材の理解に動きが必要な場合(施術、施工の流れ)は有効です。ただし表示速度が落ちるため、ファーストビューでの自動再生は避け、中盤以降に置いてください。

Q. アコーディオン(開閉)は使ってよいですか?

よくある質問のように、必要な人だけが読む情報には有効です。一方、判断に必須の情報(料金、対応エリア)を隠すと、開かれずに離脱されます。

Q. 1ページに複数のサービスを載せてよいですか?

推奨しません。訪問者は自分に該当するものを探すことになり、判断が遅れます。広告のキーワード単位でLPを分けるほうが、CVRは上がります。

まとめ

縦長LPの離脱は、ブロックごとの通過率の掛け算で積み上がります。各ブロック90%の通過率でも、10ブロックあれば最後まで到達するのは35%程度です。情報を足すたびに到達率が下がることを前提にしてください。

並び順は、ファーストビュー、課題提起、解決策、証拠、差別化、料金、流れ、FAQ、CTAが標準です。会社の沿革や理念は判断材料にならないため、上部に置かないでください。特に料金を後ろに下げすぎると、そこまで読まれません。

設計の起点はスマートフォンです。PCで作ってから落とすと、1画面の情報量と順序が破綻します。そしてCTAは最下部だけでなく、証拠と料金の直後にも置いてください。

「LPを作ったがCVが伸びない」「どのブロックを直せばよいか分からない」といった状態にある場合は、並べ替えの前に、各ブロックの通過率を計測してください。

当社ではホームページ制作からLP制作、計測設計、公開後の改善までを一貫して支援しています。資料では構成設計と改善の進め方をまとめていますので、自社の課題を整理したい方はぜひダウンロードしてご活用ください。

SHARE