本文へスキップ
ui.design

Growth

フォーム前の不安と入力摩擦を減らす

フォームはユーザーが個人情報やURLを渡す場面です。入力欄そのものだけでなく、直前の説明と送信後の期待値を整える必要があります。

ui.design: llm-growthui.design: growth-basic

まず確認する症状

  • 入力例や所要時間がなく、始める前に不安が残る。
  • 無料範囲や有料転換点がフォーム前に分からない。

なぜ問題か

  • 入力直前の不安はCV率に直接影響します。
  • 送信後に何が起きるか分からないフォームは、信頼材料があっても離脱されます。

診断で見る指標

入力例の有無
所要時間の明示
プライバシー説明
エラー時の復帰しやすさ

修正方法

最小修正

入力例を置く

URLやメールのplaceholderだけでなく、短い補足文で入力形式を説明します。

推奨修正

送信後の流れを明記する

診断時間、取得物、メール送信の有無、無料範囲をフォーム近くに置きます。

さらに改善

エラーから戻しやすくする

無効URL、到達不能、rate limitなどの失敗時に次アクションを表示します。

受け入れ条件

  1. 01PCとスマホの両方で目視確認し、主なCTAまたは操作対象が迷わず見つかる。
  2. 02キーボード操作、読み上げ補助、または自動検査で再発しやすい項目を確認する。
  3. 03修正後にui.designで再スキャンし、同じ所見が残る場合は原因を分解する。

コーディングエージェント向け修正指示

目的: フォーム直前に入力例、所要時間、無料範囲、データ扱いの短い説明を追加してください。エラー表示は原因と次アクションを1文ずつ示してください。

参考資料

よくある失敗

  • placeholderだけで説明したつもりになる。
  • 見た目だけを整え、見出し、リンク、フォームラベルなどの意味構造を直さない。
  • 1つの指摘だけを直し、同じ原因から出た別画面の再発を確認しない。

関連ページ