アーム代表の伊藤です。入力フォームのUIデザインは見た目を飾る作業ではなく、完了率という数字に直結する設計です。ECではカゴ落ちが平均70.22%にのぼり、離脱理由の17%は手続きが長い・複雑だからという調査があります（Baymard Institute）。この記事では、離脱が起きる4つの原因と改善の基本原則、スマートフォン前提の設計と計測の進め方までを整理します。
こんな方におすすめのコラムです
- 「広告費をかけて人は集まっているのに、問い合わせが増えない」という方
- 「入力フォームのUIデザインを、離脱を防ぐ観点で見直したい」という方
- 「スマートフォンからの入力が、途中で切れている気がする」という方
- 「EFOと言われても、どの項目から手をつければいいか分からない」という方
- 「管理画面や業務システムなど、社内で使うフォームの使いにくさも直したい」という方
入力フォームのUIデザインとは、離脱を減らして成果につなげる設計
入力フォームのUIデザインとは、見た目を飾る作業ではなく、ユーザーが迷わず最後まで入力を終えられる状態を設計することです。装飾ではなく、完了率という数字に直結する機能だと捉えてください。
まず、フォームの出来がどれだけ事業に効くかを数字で見ておきます。ECの領域では、独立系のUX調査機関Baymard Instituteが50件の調査を平均した結果として、平均70.22%のカゴ落ちが起きていると報告しています。同じ調査で示されている理由別の内訳は、単に見ていただけという回答を除いた離脱理由を母数にしたもので、そのうち17%が、購入手続きが長い、あるいは複雑であることを理由に挙げています（出典: Baymard Institute「Cart Abandonment Rate Statistics」（2026年閲覧））。買う気で商品まで選んだ人の一定数が、フォームのつくりだけで消えるということです。
もうひとつ、そのフォームがどんな画面で入力されるかも押さえます。総務省の調査では、個人がインターネットを利用する端末はスマートフォンが74.4%で、パソコンの46.8%を大きく上回っています（出典: 総務省「令和7年版 情報通信白書」（令和6年通信利用動向調査））。フォームは、まず小さな画面で片手で入力される前提で設計する必要があります。
フォームの数字は、そのまま損益計算書につながっています。完了率が1割上がれば、同じ広告費のまま問い合わせが1割増える。しかも増えるのは、内容を理解したうえでフォームまで進んだ人の問い合わせですから、商談にもつながりやすい。フォーム改善は、新しい集客を足さずに売上の取りこぼしを止める施策です。穴の空いたバケツに水を足す前に、穴をふさぐ話に近いと考えてください。
入力フォームで離脱が起きる主な原因
改善に入る前に、なぜ人がフォームで手を止めるのかを分けて捉えます。原因は大きく4つに整理できます。
入力項目が多く、負担が見えてしまう
フォームを開いた瞬間に入力欄がずらりと並んでいると、人は中身を読む前に「面倒だ」と判断します。実際の案件でも、任意項目まで含めて15項目あったBtoBの問い合わせフォームを、商談に本当に必要な項目へ絞り込んだところ、完了率が改善したケースがあります。項目をひとつ減らすことは、問い合わせをひとつ拾うことだと考えると、判断がしやすくなります。
今どこを入力しているか、何を間違えたかが分からない
入力中のフォーカスが目立たない、エラーがフォームの一番上にまとめて出る、送信して初めて間違いが分かる。こうしたフォームは、ユーザーに「探す」「戻る」「やり直す」という余計な労働を強います。人はストレスを感じた回数だけ離脱に近づきます。
スマートフォンで押しにくい、打ちにくい
パソコンで作ってパソコンで確認したフォームは、スマートフォンで別物になります。ボタンやチェックボックスが小さくて押し間違える、横に2列で並んでいて指がぶつかる、電話番号欄なのに文字キーボードが開く。前述のとおり利用の主役はスマートフォンですから、ここが弱いと大半のユーザーを取りこぼします。UI全体の使いにくさとして捉え直したい場合は、UI/UX改善で成果が出ない原因の切り分けと直し方もあわせてご覧ください。
送信の直前に、不安と操作ミスが待っている
冒頭のクリアボタンの話がここに戻ってきます。送信ボタンの隣に、同じ見た目のリセットボタンを置かない。これは基本ですが、既存のテンプレートやツールの初期設定のまま放置されている現場を何度も見てきました。加えて、入力した情報がどう扱われるかが書かれていないと、慎重な人ほど最後の一押しをためらいます。
入力フォームのUIデザイン改善の基本原則
原因の裏返しが、そのまま改善の原則になります。EFO（入力フォーム最適化）としてよく語られる要点を、要素ごとに整理しました。まず全体像を表で示します。
要素 | やりがちなNG | 改善の方向 |
|---|---|---|
項目数 | 後で使うかもしれない情報まで必須にする | その場で本当に必要な項目だけに絞る |
レイアウト | 横2カラムで詰め込む | 縦一列に並べ、視線を上から下へ一本に |
ラベル | プレースホルダーを項目名の代わりにする | ラベルは入力欄の外に固定し、関連項目をグループ化 |
必須・任意 | どちらか分からない、または全項目が必須 | 必須と任意をひと目で見分けられる表示に |
エラー | 送信後にまとめて表示、内容が曖昧 | 該当欄の近くに、直し方まで具体的に表示 |
入力補助 | すべて手入力させる | 郵便番号からの住所補完や入力形式に合うキーボードを用意 |
ボタン | 送信の隣に同色のリセット、文言が「送信」だけ | 主ボタンを目立たせ、文言で結果を伝える |
入力項目は、その場で必要なものだけに絞る
改善の効果がもっとも大きいのが項目数です。営業やマーケティングが「あると便利」と言う情報を全部入れると、フォームはすぐ膨らみます。判断基準はシンプルで、その項目が無いと次の一歩（折り返しの連絡や見積もり）が進まないか、です。進むなら任意にするか、いっそ外す。役職や従業員規模のような情報は、最初の一通のやり取りの中で自然に聞けます。
必須と任意、入力例で迷わせない
必須と任意が、ひと目で見分けられること。そして各欄に、どう書けばいいかの入力例を添えること。プレースホルダー（欄の中の薄い文字）は入力を始めると消えるため、項目名の代わりには使わず、あくまで例示にとどめます。この小さな配慮が、ユーザーの「これで合っているか」という不安を減らします。
エラーは、その場で、直し方まで伝える
エラーは、該当する欄のそばで、何をどう直せばいいかまで伝えるのが原則です。「入力内容に誤りがあります」だけでは、ユーザーは犯人探しを強いられます。「電話番号はハイフンなしで入力してください」まで書く。入力途中に赤字を出し続けると急かされて逆効果になるので、指摘は入力欄から離れたタイミングか送信時に寄せます。
スマートフォンで、片手で完結できるようにする
スマートフォンで、片手で、最後まで完結できることを基準にします。1カラムの縦並び、指で押しやすいボタンサイズ、入力形式に合ったキーボード（メール欄では@が近い配列、電話欄では数字キーパッド）、そして自動入力への対応。パソコンの画面だけで完成を判断しないことが、いちばんの近道です。
入力フォーム改善の進め方と計測
思いつきで直すと、良くなったのか悪くなったのか分からなくなります。まず測り、一つずつ直し、また測る。この順番を守るだけで、改善は説明のつくものになります。
指標 | 見るもの |
|---|---|
フォーム到達率 | ページ訪問者のうち、フォームまで来た人の割合 |
入力開始率 | フォームを見た人のうち、入力を始めた人の割合 |
完了率（離脱率） | 入力を始めた人のうち、送信まで終えた人の割合（その裏返しが離脱率） |
CVR | 訪問者のうち、問い合わせや申し込みに至った人の割合 |
手順はこうです。まず、どの欄で人が離脱しているかを計測ツールで特定する。次に、その欄について原因の仮説を1つ立てる（項目が多い、エラーが不親切、など）。そして仮説に沿って1点だけ直し、一定期間また計測する。一度に全部変えると、どの変更が効いたのか分からなくなります。フォームは、公開したら終わりではなく、公開してから育てる対象です。
入力フォーム改善でよくある失敗
最後に、現場で繰り返し見てきた失敗を挙げます。自分のフォームに当てはまらないか、点検してみてください。
- 見た目のおしゃれさを優先し、入力欄の境界やボタンが分かりにくくなる
- 確認画面を丁寧に作りすぎて、画面遷移が増え、かえって離脱を招く
- 「とりあえず項目を増やしておく」を続け、誰も使わない欄が残り続ける
- パソコンだけで確認し、スマートフォンでの押しにくさに気づかない
- 数字を測らずに改修し、良くなったかどうかを感覚で語ってしまう
社内で使う管理画面や業務システムのフォームも、原因の構造は同じです。毎日使う画面ほど、小さな入力の手間が積み上がってコストになります。この観点は管理画面のUI改善はどこから始めるかで詳しく扱っています。
アームの入力フォームUIデザインの考え方
アームは、フォームを「きれいに作る」対象ではなく、「事業の成果につなげる」対象として設計します。作れることではなく、選ばれること、そして数字が動くことを起点に考えます。
作り直す前に、どこで漏れているかを切り分ける
フォームが振るわないとき、いきなり全面リニューアルに走るのは危険です。到達率が低いのか、入力途中で落ちているのか、送信直前でためらっているのか。漏れている場所によって打ち手はまったく違います。医者が痛む場所を確かめてから処置するのと同じで、まず切り分けます。
デザインと情報設計を一体で見直す
フォームの使いにくさは、色や余白だけの問題ではありません。何を、どの順番で、どこまで聞くか、という情報設計の問題であることがほとんどです。アームはディレクターを挟まない一気通貫の体制で、課題を直接聞いたデザイナーがそのまま設計します。だから、聞くべき項目の取捨から画面の見え方まで、一貫した判断で整えられます。
フォーム単体でなく、集客からの一続きで考える
フォームは、集客の出口です。どんな人が、どの広告やページから来て、何を期待して入力しようとしているか。その流れの中でフォームを見ると、削るべき項目も、添えるべき一言も見えてきます。サイト全体でリード獲得を伸ばす視点はホームページで集客できないで、LPの入口から成果までの設計はLP集客がうまくいかない本当の理由で整理しています。
入力フォームの改善は、要件の整理からで構いません。今のフォームのどこで人がこぼれているか分からない段階でも大丈夫です。入力フォームの改善について相談する
よくある質問
入力フォームの項目は、少なければ少ないほどよいのですか。
基本は少ないほど完了率は上がりますが、目的は「必要な情報を、負担を最小限にして受け取ること」です。商談や折り返しに必須の項目は残し、あると便利な程度の項目を任意にするか外す、という取捨で考えてください。
プレースホルダーは使わないほうがよいのですか。
項目名の代わりに使うのは避けてください。入力を始めると消えてしまい、何を入れる欄だったか分からなくなるためです。ラベルは欄の外に固定し、プレースホルダーは入力例の提示にとどめるのが安全です。
フォームの改善は、どこから始めればよいですか。
まず計測です。どの欄で人が離脱しているかを特定してから、その1点に絞って直します。当てずっぽうで全部を変えると、効果の検証ができなくなります。
入力フォームのUIデザインとフォームデザインは同じ意味ですか。
ほぼ同じ意味で使われます。本記事では、見た目の装飾だけでなく、項目設計やエラー設計、スマートフォン対応まで含めた「使い勝手の設計」全体を指しています。
スマートフォン対応で、特に気をつけることは何ですか。
1カラムの縦並び、押しやすいボタンサイズ、入力形式に合ったキーボードの表示、自動入力への対応の4点です。パソコンだけで確認を終えず、実機で片手入力を試すことをおすすめします。
アームは、伝言ゲームなしで課題の整理からデザイン、実装までを一人が担う戦略デザインスタジオです。
- サイトはあるのに、売上につながっていない
- 問い合わせは来るが、質が合わず商談にならない
- 何に投資すれば伸びるのか、判断がつかない
動くものなら数日で作れる時代です。問われるのは、何を作るかより、なぜ作るか。事業の分解から画面と実装まで同じ人間が担当するので、決めた方針が形になるまで薄まりません。ぜひアームに一度ご相談ください。
まとめ
入力フォームのUIデザインは、飾りではなく完了率という数字の設計です。項目を絞り、縦一列で迷わせず、必須と任意を明確にし、エラーはその場で直し方まで伝え、スマートフォンで片手で終わる。そして、直したら必ず測る。この積み重ねが離脱を減らします。
フォームは、集めた見込み客が事業の成果に変わる最後の関所です。新しい集客を足す前に、まずは今のフォームのどこで人がこぼれているかを、1画面ずつ見直すところから始めてみてください。
アームは、入力フォームを含めたUIの設計と改善に取り組んでいます。どこから手をつけるか判断がつかないときは、よければご相談ください。今のフォームの画面を見せていただくところからで構いません。フォームのどこで離脱しているか相談する
