アーム代表の伊藤です。
入力フォームのUIデザインは、飾りではなく完了率の設計です。
人は来ているのに問い合わせが来ないとき、どの欄で人が消えているかは見えません。自社のフォームを作り直して初めて、受注につながった問い合わせが「AI経由」だったと分かりました。
入力フォームのUIデザインで離脱を防ぐ5つの原則
- 直す効果が最大なのは項目数
- 必須と任意・エラー・スマホで迷わせない
- 送信の直前が最後の落とし穴
直す順番は効果の大きい順です。最初に触るのは色や余白ではなく、聞く項目。そのあとで必須と任意の表示、エラー、スマートフォン、送信の直前の順に見ます。
「あると便利」な項目は削るか任意にする
「質の低い問い合わせが増える」と言われて減らせずにいる方は多いはずです。ただ、項目を減らして増えるのは、面倒で離脱していた、もともと興味のあった層です。完了率と問い合わせの質は別の指標として切り分けます。判断基準は、その項目が無いと次の一歩（折り返し・受付・準備）がどこで詰まるか。詰まらないなら任意にするか外し、役職や従業員規模は最初の一通で聞きます。
アーム自身のフォームでも、予算欄を自由記述の必須にしていた時期、届いた予算欄には「ご相談」「0」が並びました。欄は埋まっているのに情報としては死んでいるわけです。2026年8月に選択式へ変え、「まだ決まっていない」を正規の選択肢にしました。実際の案件でも、任意を含めて15項目あったBtoBの問い合わせフォームを商談に必要な項目へ絞ったところ、完了率が改善しています。
その項目が無いと | 扱い |
|---|---|
折り返しが進まない | 必須で残す |
当日の運営で困る | 運用担当に確認して残す |
あとで聞ける | 任意にするか外す |
答えにくい | 選択式に変える |
削れば削るほどよいわけでもありません。運用に必要な欄まで減らすと、フォームは軽くなっても現場が重くなります。
必須と任意をひと目で分ける
「これで合っているか」という不安が入力の手を止めます。必須と任意がひと目で見分けられること、各欄にどう書けばいいかの例があること。この2つで不安は減ります。
プレースホルダー（欄の中の薄い文字）は入力を始めると消えるので、項目名の代わりには使わず、例示にとどめます。ラベルは欄の外に固定し、関連する項目はまとめて並べます。
やりがちなNG | 直し方 |
|---|---|
全項目が必須 | 任意と分けて表示 |
薄い文字が項目名 | ラベルは欄の外に |
横2カラムで詰める | 縦一列に並べる |
その場で直し方まで伝える
「入力内容に誤りがあります」だけではユーザーは犯人探しを強いられます。該当する欄のそばで、何をどう直せばいいかまで伝えるのが原則です。「電話番号はハイフンなしで入力してください」まで書きます。
入力途中に赤字を出し続けると急かされて逆効果なので、指摘は欄を離れたタイミングか送信時に寄せます。
出し方 | 起きること |
|---|---|
送信後に上へまとめて | 探す・戻るを強いる |
入力中ずっと赤字 | 急かされて離脱 |
欄のそばに直し方つき | その場で直せる |
片手で完結できるようにする
パソコンで作ってパソコンで確認したフォームは、スマートフォンで別物になります。ボタンが小さくて押し間違える、横2列で指がぶつかる、電話番号欄なのに文字キーボードが開く。
基準はスマートフォンで片手で最後まで終わること。パソコンの画面だけで完成を判断しないのが近道です。
見るところ | 基準 |
|---|---|
並び | 1カラムの縦並び |
ボタン | 指で押せる大きさ |
キーボード | 電話欄は数字・メール欄は@ |
自動入力 | 住所補完と保存値に対応 |
同じ見た目のリセットボタンを置かない
最後まで入力した人が、送信の直前で消えることがあります。送信ボタンの隣に、同じ見た目のリセットボタンを置かない。基本ですが、テンプレートやツールの初期設定のまま放置されている現場を何度も見てきました。
加えて、入力した情報がどう扱われるかが書かれていないと、慎重な人ほど最後の一押しをためらいます。ボタンの文言は「送信」ではなく、押した結果が分かる言葉にします。
やりがちなNG | 直し方 |
|---|---|
送信の隣に同色のリセット | リセットは消すか薄く |
文言が「送信」だけ | 「相談内容を送る」など |
扱いの説明がない | 返信の目安を一文添える |
実際、完了率が1割上がるだけで、同じ広告費のまま問い合わせも1割増えます。
入力フォームは思いつきで直さない。測って1点だけ変え、また測る
- 指標は到達率・開始率・完了率・CVR
- 仮説は1つずつ・変更も1点だけ
- 完了率1割上昇で問い合わせも1割増
フォームが振るわないとき、いきなり全面リニューアルに走るのは危険です。到達率が低いのか、入力途中で落ちているのか、送信直前でためらっているのか。漏れている場所によって打ち手はまったく違います。医者が痛む場所を確かめてから処置するのと同じで、まず切り分けます。
指標 | 分母→分子 |
|---|---|
フォーム到達率 | ページ訪問→フォーム表示 |
入力開始率 | フォーム表示→入力開始 |
完了率 | 入力開始→送信完了 |
CVR | ページ訪問→送信完了 |
手順は3つ。どの欄で人が離脱しているかを計測ツールで特定する。その欄について原因の仮説を1つ立てる。仮説に沿って1点だけ直し、一定期間また測る。一度に全部変えると、どの変更が結果を動かしたのか分からなくなります。
完了率が1割上がれば、同じ広告費のまま問い合わせが1割増えます。増えるのは内容を理解してフォームまで進んだ人ですから、商談にもつながりやすい。フォーム改善は、新しい集客を足さずに取りこぼしを止める施策です。
フォームを計測装置としても設計する
2026年8月に自社のフォームを作り直して確信したことがあります。フォームは入力の場であると同時に、事業判断の材料を集める計測装置だということです。
アームの問い合わせフォームは長らく外部のGoogleフォームで、送信がGoogleのドメイン上で起きるため、GA4では問い合わせの実数が測れませんでした。自社ドメインのフォームへ移行し、送信完了ページへの到達を計測のゴールにしたことで、初めて「何件の相談が来たか」が数字になりました。
流入経路の選択肢にAIを並べてみた
あわせて「どこでアームを知りましたか」という項目を、検索エンジンやSNSに加えてChatGPT・Gemini・Claude・AIによる概要・Perplexityまで分けたチェックボックスにしました。
AI経由の訪問はGA4でもSearch Consoleでも正確に測れないため、フォームでの自己申告が、AI経由の問い合わせを捕捉できる実質唯一の計測点です。2026年8月に制作会社8社のフォームを読み比べたところ、「AIで知った」という選択肢を置く会社はすでに2社ありました。アームでも、受注につながった問い合わせでこの欄が「AI」だったことがあります。
今のフォームのどこで人がこぼれているか分からない段階でも、まず画面を開いて、どの欄で入力が止まっているかを一つずつ見ていくところから始められます。
よくある失敗と誤解
- 見た目優先で入力欄の境界が不明瞭
- PCのみ確認しスマホの押しにくさ見逃す
- 数字を測らず感覚で改修を語る
現場で繰り返し見てきた失敗です。自分のフォームに当てはまらないか、点検してみてください。
- 見た目のおしゃれさを優先し、入力欄の境界やボタンが分かりにくくなる
- 確認画面を丁寧に作りすぎて、画面遷移が増え、かえって離脱を招く
- 「とりあえず項目を増やしておく」を続け、誰も使わない欄が残り続ける
- パソコンだけで確認し、スマートフォンでの押しにくさに気づかない
- 数字を測らずに改修し、良くなったかどうかを感覚で語ってしまう
社内で使う管理画面や業務システムのフォームも、原因の構造は同じです。毎日使う画面ほど、小さな入力の手間が積み上がってコストになります。
よくある質問
プレースホルダーは使わないほうがよいのですか。
項目名の代わりに使うのは避けてください。入力を始めると消え、何を入れる欄だったか分からなくなります。ラベルは欄の外に固定し、プレースホルダーは入力例にとどめます。
入力フォームのUIデザインとフォームデザインは同じ意味ですか。
ほぼ同じ意味で使われます。この記事では、見た目の装飾だけでなく、項目設計・エラー設計・スマートフォン対応まで含めた「使い勝手の設計」全体を指しています。
入力フォームのUIデザインは、飾りでなく完了率という数字の設計で決まる
- 入力フォームのUIデザインは飾りでなく完了率の設計
- 直す順は項目数→必須と任意→エラー→スマホ→送信の直前
- 直したら測る／完了率1割上昇で問い合わせも1割増
