Growth
フォーム前の不安と入力摩擦を減らす
フォームはユーザーが個人情報やURLを渡す場面です。入力欄そのものだけでなく、直前の説明と送信後の期待値を整える必要があります。
ui.design: llm-growthui.design: growth-basic
まず確認する症状
- 入力例や所要時間がなく、始める前に不安が残る。
- 無料範囲や有料転換点がフォーム前に分からない。
- 担当者は理解できるが、初回訪問者が次に取る行動を1つに絞れない。
- 価値、証拠、料金、データ扱いのどれかがCTAやフォームから離れている。
なぜ問題か
- 入力直前の不安はCV率に直接影響します。
- 送信後に何が起きるか分からないフォームは、信頼材料があっても離脱されます。
- CV改善は見た目の変更だけではなく、訪問者の不安、期待値、計測を同じ導線で揃える必要があります。
- 人間のレビューとAIの修正指示が同じ優先順位を持たないと、ボタン追加や文言差し替えだけで終わりやすくなります。
診断で見る指標
入力例の有無
所要時間の明示
プライバシー説明
エラー時の復帰しやすさ
CTAクリックから完了までのファネル
不安解消要素とCTAの距離
無料/有料/相談の役割分担
入力前説明
入力例
送信後の待ち時間
エラーからの復帰導線
修正方法
最小修正
入力例を置く
URLやメールのplaceholderだけでなく、短い補足文で入力形式を説明します。
推奨修正
送信後の流れを明記する
診断時間、取得物、メール送信の有無、無料範囲をフォーム近くに置きます。
さらに改善
エラーから戻しやすくする
無効URL、到達不能、rate limitなどの失敗時に次アクションを表示します。
受け入れ条件
- 01PCとスマホの両方で目視確認し、主なCTAまたは操作対象が迷わず見つかる。
- 02キーボード操作、読み上げ補助、または自動検査で再発しやすい項目を確認する。
- 03修正後にui.designで再スキャンし、同じ所見が残る場合は原因を分解する。
- 04初回訪問者が、対象、得られるもの、次アクション、費用やデータ扱いの要点を1画面内またはCTA直前で確認できる。
- 05GA4、Search Console、Clarityなどで、閲覧、CTA、フォーム開始、完了、離脱のどこを見るかが決まっている。
- 06フォーム直前に、入力形式、所要時間、送信後の流れ、データ扱いが短く示されている。
- 07無効入力、到達不能、上限超過などのエラーごとに、ユーザーが次に試せる行動が表示される。
コーディングエージェント向け修正指示
目的: フォーム直前に入力例、所要時間、無料範囲、データ扱いの短い説明を追加してください。エラー表示は原因と次アクションを1文ずつ示してください。 追加確認: placeholderを説明の主手段にせず、label、補足文、エラー文、送信後状態をセットで修正してください。
参考資料
よくある失敗
- placeholderだけで説明したつもりになる。
- 見た目だけを整え、見出し、リンク、フォームラベルなどの意味構造を直さない。
- 1つの指摘だけを直し、同じ原因から出た別画面の再発を確認しない。
- CVRだけを追い、流入意図、フォーム前不安、結果閲覧後の行動を分けて見ない。
- AIに『CVを上げて』とだけ渡し、対象ユーザー、主CTA、非目標、確認条件を渡さない。