- フォーム一体型LPと別ページ型・2段階型の違いと、CVRが上がる4つの理由
- 向いている商材・向いていない商材と、やってはいけないフォームの置き方
- 作り方5ステップと、ツール3タイプの選び方(当社の実運用の型つき)
- LPにフォームを設置・埋め込む3つの方法と、公開後に到達率・完了率で改善する手順
「LPのボタンを押すと申込フォームのページに飛ぶ。そこで大きく離脱している」——LPの改善相談でよく見つかる離脱ポイントの典型例です。フォームを別ページにせず、LPの最下部に直接埋め込むフォーム一体型LPは、この「ページを移る瞬間の離脱」をなくすための形式です。
ただし、一体型にすれば何でも申込率が上がるわけではありません。商材によっては別ページ型や2段階型の方が成果が出ますし、一体化してもフォーム自体が重ければ同じ場所で離脱します。
この記事では、中小企業のLP制作・改善を支援するマーケティングの専門家として、フォーム一体型LPの仕組みと別ページ型との違い、CVR(コンバージョン率)が上がる理由、向く商材と向かない商材、LPにフォームを設置する方法、作り方5ステップ、ツールの選び方、公開後の改善までを整理します。LPの構成そのものの組み方はLPの構成とは?売れるランディングページの型と作り方で解説しているので、本記事は「フォームをどう置くか」に絞ります。
▶ 関連記事:CVR改善の方法|LPの成果を伸ばす施策と優先順位/CTAボタンとは?クリック率を高める文言・色・配置の作り方
フォーム一体型LPとは?別ページ型との違い
まず言葉の定義と、LPにフォームを置く方式の全体像を押さえます。方式は大きく3つあります。
- フォーム一体型LPの定義
- 別ページ型・一体型・2段階型の3方式の比較
順に確認していきましょう。
フォーム一体型LPの定義
フォーム一体型LPとは、申込・問い合わせ・資料請求などの入力フォームを別ページに用意せず、LPと同じページ内(多くは最下部)に直接埋め込んだ形式のLPです。「LP一体型フォーム」「埋め込み型フォーム」と呼ばれることもありますが、指しているものは同じです。
読者はLPを読み終えたその場で入力し、送信ボタンを押すまでページを移動しません。ページ途中のCTAボタン(申込ボタン)は、別ページへ飛ばすのではなく、同じページ内のフォーム位置までスクロールさせる「アンカーリンク」にするのが基本です。
別ページ型・一体型・2段階型の3方式の比較
LPにフォームを置く方式は、一体型を含めて3つに分けられます。それぞれの特徴を表にまとめます。
| 方式 | 仕組み | 向いている場面 | 弱点 |
|---|---|---|---|
| 別ページ型 | CTAボタンを押すと独立したフォームページへ移動する | フォームを複数のLPや通常ページで共用したい/入力項目が多く、フォームだけで1ページ必要 | ページ遷移の瞬間に離脱が起きる。読み込みが遅いほどフォームへの到達者は減る |
| フォーム一体型 | LPの最下部にフォームを埋め込み、同じページで送信まで完結する | 無料相談・資料請求・体験申込など、入力項目が3〜5個の軽い行動がゴール | 項目が多いと長いページの末尾に重い作業が来る。ファーストビューに置くと警戒される |
| 2段階型(ステップフォーム) | LP内で最初の1〜2項目だけ入力させ、次の画面で残りを入力する | 入力項目が6個以上/最初の一歩を軽くして途中データを取りたい | 実装の手間が増える。2段階目で離脱した人へのフォローが必要 |
中小企業の無料相談・資料請求LPでは、入力項目を絞れることが多いため、フォーム一体型が最初の選択肢になります。項目が多いBtoBの見積依頼や採用応募は、2段階型か別ページ型の方が完了率は安定します。
フォーム一体型LPでCVRが上がる4つの理由
フォーム一体型LPが別ページ型よりCVRが高くなりやすい理由は、主に4つあります。
- ページ遷移がなく、離脱のタイミングが1つ減る
- 読み終えた「その場の熱量」のまま申し込める
- スマホの操作と相性がいい
- 広告からの流入と計測がシンプルになる
それぞれ確認していきましょう。
1. ページ遷移がなく、離脱のタイミングが1つ減る
別ページ型では、CTAボタンを押してからフォームページが表示されるまでに、読み込み待ち・デザインの変化・「思ったより項目が多い」という3つの離脱要因が一度に来ます。当社がLPの離脱を分析すると、「CTAをクリックした人数」と「フォームページに到達した人数」の差がそのまま失われた申込になっているケースが目立ちます。
一体型ではこの遷移そのものがないため、離脱のタイミングが1つ減ります。減った分がそのままCVRに乗るわけではありませんが、フォーム到達率が低いLPほど改善幅は大きくなります。
2. 読み終えた「その場の熱量」のまま申し込める
LPは、共感→解決策→証拠→オファーの順で読者の気持ちを高めていく構成が基本です。読み終えた直後が最も申込意欲が高い瞬間で、ここで別ページに移ると、デザインの違うフォーム画面で気持ちが一度冷めます。一体型なら、オファーの直下にフォームが続くため、熱量が下がる前に入力を始められます。
3. スマホの操作と相性がいい
スマホでは、ページ遷移のたびに「戻る」操作や別タブへの切り替えが起きやすく、フォームページで一度離れると戻ってきません。一体型は縦にスクロールするだけで送信まで進めるため、スマホ流入が中心の広告LPと特に相性がよい形式です。スマホでの読みやすさ全般はスマホLPの最適化で扱っています。
4. 広告からの流入と計測がシンプルになる
リスティング広告やMeta広告からの流入は、1ページで完結する方が計測もシンプルです。別ページ型では「LP→フォームページ→完了ページ」の3ページにタグを入れ、遷移ごとの離脱を追う必要がありますが、一体型なら「LP→完了ページ(またはサンクス表示)」の2点で済みます。広告とLPの連携はLPと広告の連携で詳しく解説しています。
フォーム一体型LPのデメリットと向かない商材
一体型は万能ではありません。注意点は3つ、そして向いていない商材もあります。
- ファーストビューにフォームを置くと警戒される
- 情報量が多い商材は1ページで伝えきれない
- 項目が多いフォームは、一体化しても同じ場所で離脱する
一体型を検討する前に、この3点に当てはまらないか確認してください。
1. ファーストビューにフォームを置くと警戒される
「一体型=フォームを目立つ場所に」と考えて、ファーストビューの右側にフォームを置くレイアウトがあります。BtoBの資料請求など、訪問者がすでに申し込む前提で来ている場合には機能しますが、初めて商品を知る人が多いLPでは「まだ何も分からないのに個人情報を求められた」と感じて離脱が増えます。フォームは説明と証拠を読み終えた後の最下部が基本位置です。ファーストビューに入れるべき要素はLPのファーストビューに入れるべき5つの必須要素にまとめています。
2. 情報量が多い商材は1ページで伝えきれない
高額な設備、複数プランのあるサービス、比較検討が長い商材は、1ページに全部詰めるとLPが長くなりすぎ、フォームに到達する前に読み疲れます。この場合は、LPは「相談に進む理由」に絞って軽い一体型フォーム(無料相談)に流し、詳しい説明は相談の場で行う、という設計の方が成果が出ます。
3. 項目が多いフォームは、一体化しても同じ場所で離脱する
一体型にしても、フォームの入力項目が10個あれば、長いページの末尾に重い作業が待っているだけです。一体型の効果は「フォームが軽い」ことが前提です。項目を絞る・エラーを分かりやすくする・スマホで入力しやすくするといったフォーム自体の改善(EFO)はEFOとは?入力フォーム最適化でフォーム離脱を防ぐ方法で解説しています。
向いている商材・向いていない商材
| 商材・ゴールの例 | 理由 | |
|---|---|---|
| 向いている | 無料相談・無料診断・資料請求・体験申込・セミナー予約・単品の定期購入 | 入力項目を3〜5個に絞れる。読んだ直後の気持ちで申し込む商材 |
| 条件つき | 複数プランから選ぶサービス・見積依頼 | プラン選択や要件入力で項目が増える。2段階型か、LPは相談申込に絞る |
| 向いていない | 採用応募・ローン等の審査申込・多品目のEC購入 | 項目が多く、書類や選択が必要。専用のフォームページやカートの方が完了率が高い |
LPにフォームを設置する3つの方法(埋め込みの仕組み)
フォーム一体型LPは、「フォームをどこで作り、どうLPに載せるか」で設置方法が3つに分かれます。後半で紹介するツールの3タイプと対応していますが、ここでは設置の仕組みと、埋め込む時につまずきやすい点に絞ります。
3つの設置方法の比較
| 方法 | 向いているケース | 計測のしやすさ | デザインの自由度 | 注意点 |
|---|---|---|---|---|
| LP作成ツールのフォーム機能で一体化 | これからLPを作る/LPとフォームを1つの管理画面で扱いたい | フォームがLPと同じページの一部なので、GTMを入れられるツールなら組みやすい | LPと同じ配色・フォントに揃えやすい | 自動返信・通知などはツールのフォーム機能の範囲に限られる |
| フォーム作成ツールのフォームを埋め込む | 既存のLPを活かしたい/回答の管理や通知はフォーム側で行いたい | 方式によっては、フォーム内の操作や送信をLP側から取りにくい | フォーム側の設定の範囲。LPとの見た目のずれが出やすい | スマホでの高さ・スクロール、送信後の画面の動き |
| ECカートのフォーム一体型機能を使う | 単品通販・定期購入のLPを運用している | 購入完了の計測方法がカート側に用意されていることが多い(設定はカートごとに確認) | カートが用意するデザイン設定の範囲 | 配送先・支払い方法で項目が増えやすい。最終確認の表示も必要 |
これからLPを作るなら、まずLP作成ツールのフォーム機能で足りるかを確認するのが近道です。既存のLPを活かす場合は、フォーム作成サービスで発行される埋め込みコードをLPのHTMLに貼ります(WordPressならカスタムHTMLのブロックに貼る形が一般的です)。埋め込みコードには大きく2つの方式があり、どちらが使えるかはサービスによって異なります。
- iframe方式:フォームのページを、LPの中に「窓」のように表示する。設置は簡単だが、フォームは別ページのままなので、高さの調整や計測で制約が出やすい
- JavaScriptタグ方式:読み込んだスクリプトがLPのページ内にフォームを描画する。見た目や高さはなじみやすいが、スクリプトの分だけ読み込みの負荷が増える
埋め込む時に確認したい3つの注意点
埋め込みで起きやすいのは次の3つです。公開前に、スマホの実機で最後まで入力して送信するところまで確認してください。
- スマホでの高さとスクロール:iframeの高さを固定すると、送信ボタンが切れたり、LPとフォームのスクロールが二重になったりします。エラー表示で項目が縦に伸びた時に送信ボタンが隠れないかも見ます
- 送信完了の計測:送信後にサンクスページ(完了ページ)へ移動させれば、そのページの表示で完了を数えられます。ページ内に完了メッセージを出すだけなら、送信完了をイベントとして計測する設定が必要です。iframe内の送信はLP側から検知しにくいことがあるため、別URLのサンクスページに移動させる方が確実な場合が多いです
- フォームとLPのデザインのずれ:フォントやボタンの色、余白がLPと違うと「別のサービスに移った」と感じさせます。LP途中のCTAボタンとフォームの送信ボタンの色・文言は揃えておきます
▶ 関連記事:LPの自作方法|使えるツールと成果を出すコツ/スマホLPの最適化|モバイルで成果を出すチェックポイント
フォーム一体型LPの作り方5ステップ
作り方は、フォームを「最後に足す」のではなく「最初に決める」のがコツです。当社がLPを設計する時の順番で5ステップにまとめます。
LPのゴール(無料相談・資料請求など)を1つに絞り、そのゴールに本当に必要な入力項目だけを書き出します。目安は3〜5項目です。「あとで営業に使うから」という理由の項目は、申込後のヒアリングに回します。
ここで項目が6個を超えるなら、一体型ではなく2段階型を検討します。
フォームは最下部、その直前にオファー(申し込む理由・特典・期限)を置きます。オファーとフォームの間に余計な要素を挟まないことが、一体型の熱量を活かすポイントです。構成の組み方はLPの構成の記事で詳しく解説しています。
ファーストビュー直下・証拠の後・オファーの後など、2〜4か所にCTAボタンを置き、すべて同じページ内のフォーム位置へのアンカーリンクにします。ボタン文言は「こちら」「お問い合わせ」ではなく「無料で相談する」「資料を受け取る」など、得られるものを書きます。文言・色・配置の作り方はCTAボタンとは?クリック率を高める文言・色・配置の作り方を参照してください。
必須項目には印を付け、入力例をプレースホルダーで示し、エラーは該当欄のすぐ横に赤字で出します。スマホでは電話番号欄で数字キーボードが開くように入力タイプを指定し、送信ボタンは親指で押せる高さにします。フォームの見た目はLPと同じ配色・フォントに揃え、「別のサービスに飛ばされた」印象を避けます。
公開前に、GTM(Googleタグマネージャー)で「フォームが画面に表示された」「送信が完了した」の2つのイベントを仕込みます。一体型ではフォームページが無いため、この2点を取らないと「読まれたが申し込まれなかった」のか「フォームまで届いていない」のかが分かりません。公開後はフォーム到達率と完了率を見ながら、ヒートマップやA/Bテストで改善を続けます。
公開後の改善サイクルはLP改善の進め方、ヒートマップの見方はヒートマップ分析の使い方で解説しています。
フォーム一体型LPが作れるツールの選び方
フォーム一体型LPは、特別なツールがなくても作れます。ただし「LPを作るツール」と「フォームを作るツール」が別だと、見た目の統一と計測で手間が増えます。ツールは3タイプに分けて考えます。
- ツールは3タイプ(LP作成ツール型・フォーム作成ツール型・ECカート型)
- ECカート型でフォーム一体型にする時のポイント
- 当社の場合:UTAGEでフォームと申込後の配信を一体で組む
- 選ぶ時の4つの確認点
ツールは3タイプ(LP作成ツール型・フォーム作成ツール型・ECカート型)
| タイプ | 例 | 特徴 | 向いている人 |
|---|---|---|---|
| LP作成ツール型 | ペライチ・STUDIO・Wix・WordPress(+フォームプラグイン)・UTAGE | LPを作る画面の中にフォーム部品を置ける。見た目の統一が楽 | 自分でLPを作って公開まで持っていきたい |
| フォーム作成ツール型 | formrun・Googleフォーム などのフォーム作成サービス | フォーム側で作った入力欄を、既存のLPに埋め込みコード(iframeやスクリプト)で設置する。回答の管理・通知が強い | LPはすでにあり、フォームだけ差し替えたい |
| ECカート型 | ecforce・スマレジEC・リピート などのD2C向けカート | 商品購入・定期購入のフォームをLPに一体化する機能を標準で持つ | 単品通販・定期購入のLPを回している |
LPを自分で作る方法とツールの比較はLPの自作方法|使えるツールと成果を出すコツで詳しく扱っています。
ECカート型でフォーム一体型にする時のポイント
単品通販のLPでは、一体型の目的が「カゴ落ちを減らす」ことになります。一般的なECの購入は「カート→会員登録→配送先→支払い方法→確認→完了」と画面が進み、画面が変わるたびに離脱の機会が生まれます。カートの一体型機能は、この流れをLP内の1つのフォームにまとめるものです。設計時は次の4点を確認します。
- 会員登録を購入の条件にしない:初回購入の前にパスワード設定を求めると手が止まりやすくなります。購入時の入力から会員情報を作る、ゲスト購入を選べるなど、入力を1回で済ませます
- 定期購入・アップセルとの組み合わせ:カートによっては、注文確定の前後に上位商品や定期コースへの切り替えを提案する機能があります。提案を増やすほど画面は長くなるため、最初は1つに絞って完了率への影響を見ます
- 決済手段:普段使っている支払い方法が無いと、その場で離脱します。クレジットカードに加えて、後払いやID決済など、ターゲット層が使う手段を用意できるかを確認します
- 確認画面の扱い:1ページで完結させたいからといって、最終確認を省くのは避けます。通信販売では、申込みの最終段階で分量・価格・支払いと引渡しの時期・定期購入の条件や解約方法などを分かりやすく表示することが特定商取引法で求められています。確認画面を設けるか、送信ボタンの直前にまとめて表示するかは、カートの仕様を確認して決めます
配送・決済・法令表示まで含むため、ECの一体型フォームはLP作成ツールで自作するより、カートの機能を使う方が現実的です。
当社の場合:UTAGEでフォームと申込後の配信を一体で組む
当社では、自社サイトの無料チェック申込やクライアントの相談申込に、オールインワンツールのUTAGEのフォームを使っています。理由は、フォーム一体型LPで最も手間がかかる「申込後」がそのまま自動化できるからです。フォームで受けた登録者に、お礼メール→日程案内→リマインドをステップ配信で送る流れを、LPと同じ管理画面で組めます。
一方で、UTAGEはLPのデザイン自由度ではSTUDIOなどの専用ツールに劣り、月額も決して安くありません。「LPを1本作って問い合わせが来ればよい」という段階なら、LP作成ツール型かフォーム作成ツール型で十分です。UTAGEのLP作成機能の評価はUTAGEファネルとは?LP作成機能を本音評価に正直に書いています。
選ぶ時の4つの確認点
- フォームを同じページに置けるか:外部フォームへのリンクしか貼れないツールでは一体型にならない
- GTMのタグを入れられるか:フォーム到達・送信完了の計測ができないと改善が止まる
- 独自ドメインで公開できるか:広告の審査や信頼感に関わる
- 送信後の自動化があるか:自動返信メールと担当者への通知があれば小規模には十分。件数が増えたらステップ配信まであると運用が回る
公開後にフォーム一体型LPを改善する方法
フォーム一体型LPは、公開した時点が完成ではありません。フォームがLPの一部なので、「どこで止まっているか」を数字で切り分けやすいのが一体型の利点です。
フォーム到達率・入力開始率・送信完了率の3段で見る
| 段階 | 計算 | 低い時に疑う場所 |
|---|---|---|
| フォーム到達率 | フォームが表示された人÷LP訪問者 | LPの本文・構成・CTAボタン |
| 入力開始率 | 入力を始めた人÷フォームが表示された人 | フォームの第一印象(項目の多さ・見た目)と直前のオファー |
| 送信完了率 | 送信が完了した人÷入力を始めた人 | 入力項目・エラー表示・スマホでの入力のしやすさ |
作り方のSTEP5で仕込んだ「フォーム表示」「送信完了」に、「入力欄に初めて触れた」イベントを加えると3段が取れます。iframeで埋め込んだフォームは中の操作を取れないことがあるため、その場合は到達率と完了率の2段で判断します。
ヒートマップでフォーム手前の離脱位置を見る
到達率が低い時は、スクロールマップでフォーム手前のどのブロックで読者が減っているかを見ます。急に減る位置があれば、その直前の内容が原因の候補です。録画で入力欄の前で手が止まっていないかもあわせて確認します。無料で始めるならMicrosoft Clarityが使えます。
▶ 関連記事:ヒートマップ分析の使い方|LP改善に活かす見方
EFOでフォーム自体の離脱を減らす
入力開始率や送信完了率が低い時は、フォームそのものを直します(EFO:入力フォーム最適化)。基本は、必須項目を減らす、必須と任意を分ける、エラーは該当欄の横にその場で出す、全角・半角などの入力形式を厳しく縛らない、の4つです。
▶ 関連記事:EFOとは?入力フォーム最適化でフォーム離脱を防ぐ方法
ABテストは1回1要素で比べる
改善案はABテストで確かめます。一体型で試しやすいのは、フォーム直前のオファーの文言、送信ボタンの文言、入力項目の数です。1回のテストで変えるのは1つだけにし、両パターンに十分な申込件数が溜まってから判断します。
▶ 関連記事:LPのABテストのやり方|進め方と失敗しない注意点/LP改善の進め方|公開後に見る指標・改善サイクル5ステップ・続ける体制
フォーム一体型LPについてのよくある質問
- 既存の別ページ型LPをフォーム一体型に変えるには、作り直しが必要ですか?
-
LPに埋め込みコードを設置できるツールで作られていれば、作り直しは不要です。フォーム作成ツールの埋め込みコードをLPの最下部に設置し、途中のCTAボタンのリンク先をフォーム位置へのアンカーに変えるだけで一体型になります。外部フォームへのリンクしか貼れないツールの場合だけ、LP側の移設が必要です。効果は、一定の申込件数が溜まる期間(流入量によって数週間〜)で前後のフォーム到達率と完了率を比べて判断します。広告の出稿量が変わっていない期間どうしで比べるのが前提です。
- フォームは上部と下部の両方に置くべきですか?
-
フォーム本体は最下部に1つで十分です。上部には「フォームへ飛ぶCTAボタン」を置きます。フォームを2つ置くと、同じ入力欄が重複して計測が分かれ、スマホでは上部のフォームがファーストビューを圧迫します。フォーム本体は1つでも、フォームへ飛ぶCTAボタンは途中に複数置いて構いません。
- BtoBの資料請求や問い合わせでもフォーム一体型は効きますか?
-
効きます。BtoBは会社名・部署・役職など項目が増えがちなので、必須を「会社名・氏名・メールアドレス」程度に絞り、残りは任意にするか商談時に聞く設計が前提です。項目を絞れないなら、最初の3項目だけLP内で入力させる2段階型が現実的です。
- フォーム一体型LPの効果は、どの数字で判断すればいいですか?
-
LP全体のCVRに加えて、「フォーム到達率(フォームが表示された人÷LP訪問者)」と「フォーム完了率(送信した人÷フォームが表示された人)」の2つを見ます。到達率が低ければLPの本文、完了率が低ければフォーム自体に問題があると切り分けられます。判断は、変更の前後それぞれで少なくとも数十件の申込が溜まってから行い、1週間分の数字で結論を出さないようにしてください。CVRの計算と改善の考え方はCVR改善の方法で解説しています。
- 決済(購入)までLP内で完結させることはできますか?
-
できます。単品通販や定期購入では、ECカート型のツールが「LP一体型フォーム」として購入・決済フォームをLPに埋め込む機能を提供しています。サービス業の有料相談やセミナーなら、決済フォームをページ内に置けるLP作成ツール(当社が使うUTAGEもその1つ)で同じページで処理できます。ただし決済を伴うフォームは項目が増えるため、無料オファーの一体型LPより設計の難易度は上がります。
- フォーム一体型にすると、計測の仕方はどう変わりますか?
-
別ページ型では、フォームページの表示回数でフォーム到達を数えられました。一体型ではフォームページが無いため、「フォームが画面に表示された」ことをイベントとして計測する必要があります。送信完了は、サンクスページに移動させるならそのページの表示で、ページ内に完了メッセージを出すだけなら送信完了のイベントで数えます。計測するページが減る分、広告の成果計測はシンプルになりますが、フォーム表示のイベントが無いと、本文とフォームのどちらに問題があるのかを切り分けられません。
まとめ
- フォーム一体型LPは、申込フォームを別ページにせずLPの最下部に埋め込む形式。ページ遷移の離脱をなくし、読んだ直後の熱量で申し込める
- 効くのは「入力項目が3〜5個の軽いゴール」。項目が多い商材は2段階型か別ページ型の方が完了率は安定する
- ファーストビューにフォームを置かない。フォームは説明と証拠の後、オファーの直下が基本位置
- 作り方は「項目を先に決める→構成→CTAをアンカーで束ねる→フォームを軽くする→到達率と完了率を計測」の5ステップ
- 設置方法はLP作成ツールのフォーム機能・フォーム作成ツールの埋め込み・ECカートの一体型機能の3つ。埋め込みはスマホでの高さ・完了計測・デザインのずれを確認する
- ツールはLP作成型・フォーム作成型・ECカート型の3タイプ。同一ページ設置・GTM・独自ドメイン・送信後の自動化の4点で選ぶ
- ECカートの一体型は、会員登録を条件にせず、決済手段を揃え、最終確認の表示を省かない
- 公開後は到達率・入力開始率・送信完了率の3段で詰まりを見つけ、ヒートマップ・EFO・ABテストで1つずつ直す
「一体型にしたのに申込が増えない」「フォームまで届いているかどうか分からない」という場合は、フォームの置き方より前に、LPの構成か計測のどちらかに詰まりがあることがほとんどです。自社で切り分けが難しいと感じた方は、現状のLPと数字を見せていただければ、どこから直すべきかをお伝えします。
