Category · お問い合わせフォーム
お問い合わせフォームのデザイン例とAIプロンプト
お問い合わせフォーム、申し込みフォーム、複数ステップの入力フォームなど、ユーザーが情報を送信するすべてのインターフェースのAIプロンプト集。
このカテゴリのデザイン
未保存の変更を見失わせないSaaS設定画面
左に節の目次、各節は左に説明・右に入力の2列で組むダークテーマのSaaS設定画面。変更した項目の数を数える未保存バー、役割を選べるメンバー一覧、名前を打ち込むまで押せない削除ボタンまでを備え、設定を触る人の不安を順に潰していく。
設計図面風の見積もり依頼フォーム
青焼き図面の方眼と表題欄をそのまま画面に持ち込んだ見積もりフォーム。入力欄の右に工程と前提条件を並べ、送信前に何が起きるかを見せて心理的な壁を下げます。
スイス様式のシンプルなお問い合わせフォーム
厳格なグリッドと無装飾サンセリフで構築する、スイス国際タイポグラフィ様式のお問い合わせフォーム。色を排し、罫線・余白・タイポの階層だけで「真剣さ」を伝える設計。
フォームについて
コンバージョンの直接の場。1ページ型・複数ステップ型・モーダル型に加え、フィールドの並べ方、ラベル位置、エラー表示のタイミング、送信ボタンのコピーで完了率が大きく変わります。リアクティブバリデーション、フィールド単位のヘルプ、進捗バー、自動保存が標準装備です。離脱は項目の多さより、送ったあとに何が起きるか分からないことで起きます。返事までの日数や最小規模を先に開示すること。項目数を明示するだけでも、どこまで続くのかという不安が消えます。
フォームのプロンプトを組み立てるよく使われる場面
- お問い合わせ・サポート受付
- イベント申込み・予約フォーム
- メンバー登録・プロフィール作成
- アンケート・調査票
- 複数ステップの法人申請
成功のポイント
- フィールド数は5-7個までを目安に
- 必須/任意は明示してユーザーの不安を消す
- エラーは送信時でなくフィールド離脱時に
- 複数ステップなら進捗バーで残量を可視化
- ボタンコピーは『送信』でなく『○○する』