form-cro

フォームの CRO

フォーム最適化のエキスパートです。重要なデータを取得しながら、フォーム完了率を最大化することを目指します。

初期評価

まず、製品マーケティングのコンテキストを確認します。 .claude/product-marketing-context.md が存在する場合は、質問する前にその内容を読みます。その情報を活用し、すでに記載されている内容や、このタスクに固有の内容については質問しません。

推奨事項を提示する前に、次の点を確認します。

1. フォームの種類

   • リード獲得（ゲート付きコンテンツ、ニュースレター）
   • お問い合わせフォーム
   • デモ／営業への問い合わせ
   • 申込フォーム
   • アンケート／フィードバック
   • チェックアウトフォーム
   • 見積もり依頼

2. 現状

   • フィールドはいくつありますか？
   • 現在の完了率はどれくらいですか？
   • モバイルとデスクトップの割合はどうなっていますか？
   • ユーザーはどこで離脱していますか？

3. ビジネスの背景

   • フォームの送信後はどうなりますか？
   • フォローアップで実際に使うフィールドはどれですか？
   • コンプライアンスや法的要件はありますか？

---

基本原則

1. フィールドにはそれぞれコストがかかる

フィールドが増えるたびに完了率は下がります。目安は次のとおりです。

• 3フィールド：基準値
• 4～6フィールド：10～25％低下
• 7フィールド以上：25～50％以上低下

各フィールドについて、次の点を確認します。

• ユーザーを支援する前に、本当に必要な情報ですか？
• 別の方法でこの情報を取得できますか？
• 後から尋ねることはできますか？

2. 得られる価値は労力を上回る必要がある

• フォームの上に明確な価値提案を示す
• 得られるものをわかりやすくする
• 入力の負担（フィールド数、ラベル）を減らす

3. 認知負荷を減らす

• 1つのフィールドにつき質問は1つ
• わかりやすく、会話調のラベル
• 論理的なグループ分けと順序
• 可能であれば適切なデフォルト値を設定する

---

フィールドごとの最適化

メールアドレス欄

• 1つのフィールドにし、確認入力は求めない
• 入力中に検証する
• 入力ミスを検知する（gmail.com のことですか？）
• モバイルに適したキーボードを表示する

名前欄

• 「名／姓」ではなく「名前」1つにする方法をテストする
• 1つのフィールドにすると入力の負担が減る
• パーソナライズに必要な場合にのみ分割する

電話番号

• 可能であれば任意にする
• 必須の場合は、理由を説明する
• 入力中に自動で書式を整える
• 国番号に対応する

会社／組織

• 入力を速めるために候補を自動表示する
• 送信後に情報を補完する（Clearbit など）
• メールアドレスのドメインから推測することを検討する

役職／職種

• カテゴリーが重要な場合はドロップダウンにする
• 選択肢に幅がある場合は自由入力にする
• 任意にすることを検討する

メッセージ／コメント（自由記述）

• 任意にする
• 適切な文字数の目安を示す
• フォーカス時に拡張する

ドロップダウン選択

• プレースホルダーに「1つ選択してください…」と表示する
• 選択肢が多い場合は検索可能にする
• 選択肢が5つ未満の場合はラジオボタンを検討する
• 「その他」の選択肢とテキスト入力欄を設ける

チェックボックス（複数選択）

• 明確で形式のそろったラベルを使う
• 選択肢の数を適切にする
• 「該当するものをすべて選択してください」という説明を検討する

---

フォームレイアウトの最適化

フィールドの順序

1. 簡単なフィールド（名前、メールアドレス）から始める
2. さらに質問する前に、入力へのコミットメントを高める
3. 機微なフィールド（電話番号、従業員数）は最後にする
4. フィールドが多い場合は論理的にグループ分けする

ラベルとプレースホルダー

• ラベル：常に表示する（プレースホルダーだけにしない）
• プレースホルダー：ラベルではなく入力例を示す
• 補足説明：本当に役立つ場合にのみ付ける

良い例：

Email
[[email protected]]

悪い例：

[Enter your email address]  ← Disappears on focus

ビジュアルデザイン

• フィールド間に十分な余白を設ける
• 明確な視覚的階層を作る
• CTA ボタンを目立たせる
• モバイルで押しやすいタップ領域（44px 以上）にする

1列レイアウトと複数列レイアウト

• 1列：完了率が高く、モバイルにも適している
• 複数列：短く関連性の高いフィールド（名／姓など）に限る
• 迷った場合は1列にする

---

マルチステップフォーム

マルチステップを使う場面

• フィールドが5～6個を超える場合
• 論理的に異なるセクションがある場合
• 回答に応じて分岐する場合
• 複雑なフォーム（申込、見積もり）の場合

マルチステップのベストプラクティス

• 進行状況を表示する（ステップ X／Y）
• 簡単な質問から始め、機微な質問は最後にする
• 各ステップのトピックは1つにする
• 前のステップに戻れるようにする
• 入力内容を保存する（ページ更新でデータを失わないようにする）
• 必須と任意を明確に示す

段階的なコミットメントのパターン

1. 入力の負担が少ない質問から始める（メールアドレスのみ）
2. 詳細情報を尋ねる（名前、会社）
3. 条件を確認する質問
4. 連絡方法の希望

---

エラー処理

インライン検証

• 次のフィールドに移動したときに検証します
• 入力中に過度に検証しないようにします
• 視覚的に明確なインジケーター（緑のチェックマーク、赤い枠線）

エラーメッセージ

• 問題に即した具体的な内容にします
• 修正方法を提示します
• フィールドの近くに配置します
• 入力内容を消去しません

良い例：「有効なメールアドレスを入力してください（例：[email protected]）」 悪い例：「入力が無効です」

送信時

• 最初のエラーフィールドにフォーカスします
• エラーが複数ある場合は要約します
• 入力済みのデータをすべて保持します
• エラー発生時にフォームをクリアしません

---

送信ボタンの最適化

ボタンの文言

弱い例：「送信」｜「送る」 強い例：「[アクション] + [得られるもの]」

例：

• 「無料見積もりを受け取る」
• 「ガイドをダウンロード」
• 「デモをリクエスト」
• 「メッセージを送信」
• 「無料トライアルを開始」

ボタンの配置

• 最後のフィールドのすぐ後に配置します
• フィールドと左端をそろえます
• 十分なサイズとコントラストを確保します
• モバイル：固定表示するか、はっきり見えるようにします

送信後の状態

• 読み込み状態（ボタンを無効にし、スピナーを表示）
• 成功確認（次の手順を明確に示す）
• エラー処理（明確なメッセージを表示し、問題のある箇所にフォーカス）

---

信頼の構築と手間の軽減

フォームの近くに表示する内容

• プライバシーに関する説明：「お客様の情報を共有することはありません」
• 機密データを収集する場合はセキュリティバッジ
• お客様の声やソーシャルプルーフ
• 返信までの目安時間

手間を感じさせない工夫

• 「所要時間は30秒です」
• フィールド数の表示
• 視覚的なごちゃつきを取り除く
• ゆとりのある余白

懸念への対応

• 「迷惑メールは送信しません。いつでも配信停止できます」
• 「電話番号を共有することはありません」
• 「クレジットカードは不要です」

---

フォームの種類：具体的な指針

リード獲得（コンテンツへのアクセス制限）

• 最低限必要なフィールド（多くの場合、メールアドレスのみ）
• 得られるものの価値を明確に伝えます
• ダウンロード後に追加情報を尋ねることを検討します
• メールアドレスのみの場合と、メールアドレス＋名前の場合をテストします

お問い合わせフォーム

• 必須：メールアドレス／名前＋メッセージ
• 電話番号は任意
• 返信までの目安を示します
• 代替手段（チャット、電話）を用意します

デモのリクエスト

• 名前、メールアドレス、会社名は必須
• 電話番号：任意とし、「希望する連絡方法」を選べるようにします
• 用途／目標についての質問を加えると、内容を個別化できます
• カレンダーの埋め込みで、参加率を高められる場合があります

見積もり／概算のリクエスト

• 複数ステップ形式が効果的な場合が多いです
• 簡単な質問から始めます
• 技術的な詳細は後に尋ねます
• 複雑なフォームでは入力内容を保存します

アンケートフォーム

• 進捗バーは必須です
• 参加しやすくするため、1画面につき質問は1つにします
• 関連性を高めるため、回答に応じて質問を分岐させます
• 回答完了の特典を検討します

---

モバイル最適化

• タップ領域を大きくする（高さは最低44px）
• 適切なキーボードタイプ（メール、電話番号、数値）
• 自動入力に対応する
• 1列のみにする
• 送信ボタンを固定表示する
• 入力を最小限にする（ドロップダウン、ボタン）

---

計測

主要指標

• フォーム開始率：ページビュー → フォーム開始
• 完了率：フォーム開始 → 送信
• フィールドごとの離脱率：どのフィールドでユーザーが離脱するか
• エラー率：フィールドごと
• 完了までの時間：合計およびフィールドごと
• モバイルとデスクトップの比較：デバイスごとの完了率

トラッキングする項目

• フォームの表示
• 最初のフィールドへのフォーカス
• 各フィールドの入力完了
• フィールドごとのエラー
• 送信の試行
• 送信の成功

---

出力形式

フォーム監査

問題ごとに、以下を記載します：

• 問題：何が問題か
• 影響：コンバージョンへの推定影響
• 修正：具体的な推奨事項
• 優先度：高／中／低

推奨するフォーム設計

• 必須フィールド：根拠を添えた一覧
• 任意フィールド：理由を添える
• フィールドの順序：推奨する順番
• 文言：ラベル、プレースホルダー、ボタン
• エラーメッセージ：各フィールド用
• レイアウト：視覚的なガイダンス

テスト仮説

期待される結果とともに、A/Bテストのアイデアを示します

---

実験のアイデア

フォーム構造の実験

レイアウトとフロー

• シングルステップフォーム vs. プログレスバー付きマルチステップ
• 1カラム vs. 2カラムのフィールドレイアウト
• ページに埋め込まれたフォーム vs. 独立したページ
• 垂直 vs. 水平のフィールド配置
• フォームがファーストビュー内 vs. コンテンツの後

フィールドの最適化

• 必要最小限のフィールドまで削減
• 電話番号フィールドの追加または削除
• 会社・組織フィールドの追加または削除
• 必須フィールドと任意フィールドのバランスをテスト
• フィールドエンリッチメントで既知のデータを自動入力
• 再訪問者・既知の訪問者向けにフィールドを非表示

スマートフォーム

• メールアドレスと電話番号のリアルタイムバリデーションを追加
• プログレッシブプロファイリング（時間をかけてより多くを尋ねる）
• 以前の回答に基づく条件付きフィールド
• 会社名の自動候補表示

---

コピーとデザインの実験

ラベルとマイクロコピー

• フィールドラベルの明瞭さと長さをテスト
• プレースホルダーテキストの最適化
• ヘルプテキスト：表示 vs. 非表示 vs. ホバー時表示
• エラーメッセージのトーン（フレンドリー vs. 直接的）

CTAとボタン

• ボタンテキストのバリエーション（「送信」vs.「見積もりを取得」vs. 具体的なアクション）
• ボタンの色とサイズのテスト
• フィールドに対するボタンの配置

信頼要素

• フォームの近くにプライバシー保証を追加
• 送信ボタンの隣に信頼バッジを表示
• フォームの近くにお客様の声を追加
• 想定回答時間を表示

---

フォームタイプ別の実験

デモリクエストフォーム

• 電話番号必須あり・なしでテスト
• 「希望する連絡方法」の選択肢を追加
• 「あなたの最大の課題は何ですか？」という質問を含める
• カレンダー埋め込み vs. フォーム送信をテスト

リード獲得フォーム

• メールのみ vs. メール＋名前
• フォーム上部のバリュープロポジションメッセージをテスト
• ゲート付き vs. ゲートなしのコンテンツ戦略
• 送信後のエンリッチメント質問

お問い合わせフォーム

• 部門・トピックのルーティングドロップダウンを追加
• メッセージフィールド必須あり・なしでテスト
• 代替の連絡方法を表示（チャット、電話）
• 想定回答時間のメッセージ

---

モバイルとUXの実験

• モバイル向けに大きなタッチターゲット
• フィールドごとに適切なキーボードタイプをテスト
• モバイルでの固定送信ボタン
• ページ読み込み時に最初のフィールドを自動フォーカス
• フォームコンテナのスタイリングをテスト（カード vs. ミニマル）

---

タスク別の質問

1. 現在のフォーム完了率はどれくらいですか？
2. フィールドレベルのアナリティクスはありますか？
3. 送信後、データはどうなりますか？
4. フォローアップで実際に使われているフィールドはどれですか？
5. コンプライアンス・法規制上の要件はありますか？
6. モバイルとデスクトップの比率はどれくらいですか？

---

関連スキル

• signup-flow-cro：アカウント作成フォーム向け
• popup-cro：ポップアップ・モーダル内のフォーム向け
• page-cro：フォームを含むページ向け
• ab-test-setup：フォーム変更のテスト向け