CTAボタンとフォーム設計

CTAとフォームがCVRの最終関門

CTA（Call To Action）とフォームは、LPにおいてユーザーが「実際に行動する」瞬間を担う最終関門です。どれだけ優れたコピーを書き、強力な社会的証明を並べても、CTAボタンが押されずフォームが送信されなければCVはゼロです。ボタンの色・文言・サイズ・配置、フォームの項目数・入力体験・エラー設計といった細部の積み重ねが、CVRを数十パーセント単位で変える要因になります。EFO（Entry Form Optimization：入力フォーム最適化）は日本のWebマーケティングで2010年代から重視されてきた分野であり、「フォーム入力を開始したが送信しなかった離脱ユーザー」を取り込むことを目的としています。このレッスンでは、CTAボタンの色・文言・配置最適化・フォーム項目数とCVRの関係・EFO施策10選・サンキューページ設計まで包括的に解説します。

---

CTAとフォームの全体設計

CTA・フォーム設計 — ボタン最適化とEFO10選

CTA設計とフォーム設計は表裏一体です。CTAボタンが押されても、その先のフォームで離脱されれば結果は同じです。「ボタンをクリックさせること」と「フォームを送信させること」を2つの別々のCVR改善課題として設計します。

---

CTAボタンの色最適化

「CTAボタンは赤が最強」という話を聞いたことがある方も多いですが、これは大きな誤解です。CTAボタンの色はLP全体の配色との相対関係で決まります。

ボタン色選択の基本原則

• ◆補色コントラスト: LP背景が白・ライトグレーなら、補色（対角の色）に近い橙・赤・緑・青が目立つ
• ◆視認性テスト: 完成したボタンを縮小して50px四方にしても色の違いが識別できるかを確認
• ◆ブランドカラーとの調和: ブランドカラーと全く異なる色も避ける（信頼感の不一致）

⚠️ A/Bテストなしに「最高のボタン色」はわからない: VWO・Optimizely等のツール（Googleオプティマイズは2023年9月に提供終了）を使ったA/Bテストで実際のCVRを計測することが唯一の正解です。「他のLPで橙が良かった」という情報は参考にとどめましょう。

---

CTAボタン文言の最適化公式

CTAボタンの文言は「動詞起点」であることが最大の原則です。「お申し込み」という名詞で終わるボタンより「今すぐ申し込む」という動詞で終わるボタンの方がクリック率が高い傾向があります。

文言最適化の3要素

1. ◆動詞（行動の明示）: 「受け取る」「始める」「予約する」「登録する」
2. ◆ベネフィット（何が得られるか）: 「無料サンプルを」「特典を」「割引を」
3. ◆緊急性または安心感（背中押し）: 「今すぐ」「残3席」「クレカ不要」

実例比較

マイクロコピー（ボタン下補足テキスト）

CTAボタンの直下に1〜2行の補足テキストを置くことで、クリック直前の不安（Fear）を解消します。

• ◆「クレジットカード不要・いつでもキャンセル可能」（金銭的リスク解消）
• ◆「登録は無料・30秒で完了・個人情報はSSL暗号化で保護」（手間・プライバシー解消）
• ◆「途中解約違約金なし・翌日から利用可能」（ロック-インへの不安解消）

💡 マイクロコピーのA/Bテスト: 「クレカ不要」と「初期費用ゼロ」を比較したA/Bテストで、後者がCVR12%高かった事例があります。同じ意味でも言葉の違いで結果が変わるため、複数のパターンを検証しましょう。

---

CTA配置の3点セット

CTAボタンはLP内の1箇所だけでは取りこぼしが生じます。スクロール深度によって「行動しようと感じるタイミング」が異なるため、最低3箇所に配置します。

① FV直下CTA: スクロール開始後最初のCTA。「もう決まった」という即決層を取り込む。ここでCVする割合は全体の20〜30%。

② 中盤CTA（実績/料金セクション後）: 「いいかも」と感じた瞬間の中間層を取り込む。実績・ビフォーアフター・料金提示の直後に配置。全体の30〜40%がここでCV。

③ 最終CTA（LP末尾）: 最後まで読んで熟考した慎重層を取り込む。緊急性演出（「今月限定残〇名」）と組み合わせる。全体の20〜30%がここでCV。

---

フォーム項目数とCVRの関係

フォームの項目数とCVRには明確な逆相関関係があります。目安として、フォーム項目が1項目増えるごとにCVRが5〜10%程度低下するという調査・事例があります。

項目削減の考え方

• ◆「初回フォームで取得すべき情報」と「後でヒアリングできる情報」を分ける
• ◆「生年月日・住所・会社規模」などは初回不要なケースが多い
• ◆複数ステップフォーム（ステップ1：名前/メール → ステップ2：詳細情報）で実質的な項目数を感じさせず情報取得量を維持できる

---

EFO施策10選

EFO（Entry Form Optimization）は「フォームに入力を開始したユーザーの送信完了率を高める施策の総称」です。入力開始後の離脱率は平均40〜70%とされており、EFOの改善余地は非常に大きいです。

EFO施策の詳細解説

施策1：入力例（placeholder）の全フィールド表示

「例：田中 太郎」「例：03-1234-5678」のように入力形式を明示することで、入力エラーによる離脱を防ぎます。

施策2：リアルタイムバリデーション

入力中に即座に「正しい形式です（緑チェック）」「メールアドレスの形式が正しくありません（赤×）」と表示することで、送信後のエラーによる離脱を防ぎます。

施策3：入力完了フィールドへの緑チェック

各フィールドの入力完了時に緑のチェックマークを表示することで、「正しく入力できている」という安心感を与え、フォーム完了への達成感を高めます。

施策4：電話番号のハイフン自動除去

ユーザーが「090-1234-5678」と入力しても、バックエンドでハイフンを除去して「09012345678」として受け取る処理を実装します。入力ルールを覚える手間をなくします。

施策5：郵便番号からの住所自動補完

7桁の郵便番号を入力すると都道府県・市区町村が自動入力されるYubinBango.js等のライブラリを使います。住所入力の手間を大幅に削減します。

施策6：入力途中離脱の警告ダイアログ

フォーム入力中にページを閉じようとしたとき「入力内容が失われますが、よろしいですか？」という確認ダイアログを表示し、誤操作による離脱を防ぎます。

施策7：送信ボタンの状態変化

必須項目が未入力の間はボタンをグレーアウトし、すべて入力完了した瞬間にボタンが色付き・クリック可能に変化する設計です。「あと何を入力すれば送信できるか」が視覚的にわかります。

施策8：複数ステップフォームの進捗バー

複数ステップにわたるフォームの場合、「ステップ2/3」「60%完了」のような進捗バーを表示することで「もうすぐ終わる」という完了動機を高めます。

施策9：フォーム上部への信頼情報表示

フォームの直上に「入力約30秒・登録無料・SSLで安全・個人情報は第三者提供なし」という安心情報を明示します。入力開始前の不安（Fearのプライバシー面）を事前に解消します。

施策10：スマホでのキーボードタイプ最適化

電話番号入力フィールドに type="tel"、郵便番号など数字だけを入力するフィールドに inputmode="numeric" を設定することで、スマホでテンキー（数字キーボード）が起動し、入力ミスと手間を減らします。

💡 EFOの優先順位: 施策2（リアルタイムバリデーション）・施策1（placeholder）・施策10（キーボードタイプ）の3つが最もコスパ良くCVR改善に寄与します。まずこの3施策から着手することを推奨します。

---

サンキューページの設計

フォーム送信後に表示されるサンキューページは「CVした顧客との最初の接点」であり、次のステップへの誘導・追加価値提供・アップセルのチャンスです。

サンキューページに含める要素

• ◆即時確認（申込完了の明示）: 「ご登録ありがとうございます。30秒以内に確認メールをお送りします」
• ◆次のステップの明示: 「メールを確認してください」「担当者から24時間以内に連絡します」など、次に何が起きるかを明確に伝える（不安の解消）
• ◆OTO（One Time Offer）: 申込直後の高揚感を活用して、上位プランや関連商品を期間限定価格で提案
• ◆SNSシェアボタン: 「このサービスを友人にも伝える」SNSシェアで口コミ拡散を促進
• ◆追加コンテンツへの誘導: 「次に読むべき記事」「無料動画はこちら」で関係性を深める

---

🏋️実践ワーク

以下のワークを実施してください。

1. ◆CTAボタン文言を10パターン作成する: 担当または仮のサービスに対して「動詞+ベネフィット+緊急性/安心感」の公式に従い、CTAボタン文言を10パターン書き出す。そのうち最も良い3つを選び、A/Bテストの優先順位をつける。
2. ◆フォーム項目の最小化設計: 既存または仮のフォームの全項目をリストアップし、「初回必須」「後ヒアリング可能」「不要」の3段階に分類してフォームを再設計する。
3. ◆EFO施策の優先度マップを作成する: 10施策を自分のサービスに照らし合わせて「実装難易度（高/中/低）」と「CVR改善効果（高/中/低）」で2×2マトリクスにプロットし、最優先実装施策3つを決定する。
4. ◆サンキューページのワイヤーフレームを作成する: 申込完了後のサンキューページに配置する要素と順番を決め、手書きまたはFigmaでワイヤーフレームを作成する。OTOオファーの内容も具体的に設定する。

📝まとめ

CTAとフォームはLPのCVRを直接決定する最終関門です。CTAボタンは「色（補色コントラスト+A/Bテスト）」「文言（動詞+ベネフィット+緊急性）」「マイクロコピー（Fear解消の補足テキスト）」の3要素を最適化し、LP内の最低3箇所（FV直下・中盤・末尾）に配置します。フォームは項目数を目安として3〜5項目程度に絞ることを原則とし、7項目以上は急激にCVRが低下します。EFO10施策のうち「リアルタイムバリデーション・placeholder・スマホキーボード最適化」の3施策を最優先で実装します。サンキューページは単なる完了画面ではなく、次のステップ明示・OTO提案・SNSシェアの機会として設計します。これでLP制作コースの基礎4レッスン（PASONA法則・FV設計・社会的証明・CTA/フォーム）が完結しました。