広告も記事もうまくいっているのに、問い合わせが増えない。そのとき、最後の関門になっているのが入力フォームです。

フォームに辿り着いた人は、すでに「問い合わせよう」と決めています。その人たちを取りこぼしているのですから、改善の効きは大きい。

この記事では、UIデザイナーが実務で使っている判断基準10を起点に、スマートフォン固有の設計、2026年のトレンド、そしてフォームに辿り着くまでの導線設計までを解説します。PCとスマートフォンでは気をつけるべき点が違うため、それぞれ分けて扱います。

なぜ入力フォームの改善（EFO）が重要なのか

入力フォームに到達した人のうち、送信まで至らずに離脱する割合は**60〜70％**とも言われます。つまり、フォームを開いた10人のうち3人から4人しか送信していない。

この数字が重いのは、フォームに来た時点で読者の意思は固まっているからです。商品を知らない人を連れてくるのには広告費も記事も時間もかかりますが、フォームの改善はすでにそこにいる人を取りこぼさないための打手です。

投資対効果が読みやすい

月500人がフォームに到達し、送信完了が150人（30％）だったとします。これが40％になるだけで、月の問い合わせは50件増えます。同じことを広告でやろうとすれば、月の出稿額を増やし続けることになります。

フォームの改善は一度やれば効き続けます。この点で、コスト対効果はかなり良い。

「面倒くさい」が離脱の正体

フォームを途中で閉じる理由は、多くが次のどれかです。

• 聞かれる項目が多すぎる
• 何を書けばいいか分からない
• エラーが出たが、どこをどう直せばいいか分からない
• あとどれくらいで終わるのか見えない
• スマホで押しにくい、入力しにくい

いずれも「商品が気に入らなかった」ではありません。設計で消せる離脱です。

以降の10の判断基準は、この五つに一つずつ答えていくものです。

 

良い入力フォームの判断基準：10のポイント

自社のフォームを開いて、上から順に照らしてみてください。一つでも欠けていれば、そこが改善の余地です。UI設計全般の考え方はUIデザインの記事でも解説しています。

1）項目数が必要最低限である

最も効きます。項目が1つ増えるごとに、送信率は確実に落ちます。

判断の基準は「その情報がないと次のアクションが取れないか」です。氏名とメールアドレスがあれば返信できるなら、業種や役職は後で聞けます。問い合わせフォームなら5項目前後が目安です。

営業やマーケティングから追加要望が出たときは、「その項目を足す代わりに何件失ってもいいか」を聞くと、議論が具体的になります。

2）登録完了までのステップが明示されている

「入力→確認→完了」のように、全体の工程と現在地を画面上部に示します。

これがないと、読者は「あとどれくらい続くのか」が分からず、先が見えないまま入力することになります。特に項目を複数画面に分ける場合は必須です。

3）必須／任意の項目が明示されている

必須マークだけを付ける実装が一般的ですが、任意項目が多いフォームでは任意の側に「任意」と明記するほうが読みやすくなります。

色だけで区別しないこと。色覚特性によっては赤と黒の区別がつかず、必須が伝わりません。文字を添えます。

4）入力すべき内容が分かりやすい

ラベルだけで迷う項目には、入力例を添えます。「電話番号（例：03-1234-5678）」のように。

あわせて、入力形式の制約をなくす。ハイフンありでもなしでも受け付ける、スペースが入っていても通す。形式をユーザーに合わせさせるのではなく、システム側で吸収するのが原則です。

プレースホルダーでラベルを兼ねる実装は避けてください。入力を始めた瞬間に消えるため、「この欄は何だったか」を確かめる手段がなくなります。

5）エラーメッセージがリアルタイムで表示される

送信ボタンを押してからまとめてエラーを出すと、画面上部まで戻って直す作業が発生します。入力欄から離れた時点で判定し、その場に表示する。

ただし入力している最中に赤字を出さないこと。メールアドレスを打ち始めた瞬間に「形式が正しくありません」と出るのは、まだ打ち終えていない人を急かすだけです。

6）エラーメッセージが具体的で分かりやすい

「入力内容に誤りがあります」だけでは、どこをどう直せばいいか分かりません。

良いエラー文は、何が起きているかと、どうすれば良いかの両方を含みます。

悪い例	良い例
入力内容に誤りがあります	メールアドレスに「@」が含まれていません
入力してください	お名前を入力してください
形式が正しくありません	電話番号は半角数字でご入力ください

エラーの表示位置も大事です。画面上部にまとめて出すのではなく、該当する入力欄のすぐ下に出します。

7）全角／半角の自動変換機能がある

「半角で入力してください」と注意書きを置くのではなく、入力されたものをシステム側で変換します。

全角数字で打っても、ハイフンを入れても、スペースが入っていても通る。これだけでエラーが出る回数が減ります。

カタカナの半角・全角、英数字の大文字・小文字も同様です。

8）郵便番号で住所が自動入力される

住所を聞くフォームでは必須です。郵便番号を入れた時点で都道府県・市区町村まで入るなら、入力量は半分以下になります。

「検索」ボタンを押させるのではなく、郵便番号を打ち終わった時点で自動で埋まる設計にします。

9）ボタンの優先順位や状態が明確である

「送信する」と「クリアする」が同じ見た目で並んでいるフォームは、今でもよく見かけます。そもそもクリアボタンが必要かを検討し、置くならテキストリンク程度に落とします。

送信ボタンを「必須項目が埋まるまで非アクティブ」にする設計は、採用を慎重に判断してください。押せないボタンは「なぜ押せないのか」の説明を伴わないと、ユーザーが行き止まりに感じます。常に押せる状態にしておき、押した時点で不足箇所まで画面を送る方式が安全です。

二重送信を防ぐため、押した直後にボタンを無効化し、処理中であることを表示する実装も忘れずに。

10）他ページへの導線が少ない

フォームのページだけは、グローバルナビやサイドバーを消します。他へ移動できるリンクがあると、その分だけ離脱が起きます。

残すのは、ロゴ（トップへのリンクなし）と、個人情報の取扱いへのリンクくらい。後者は別タブで開くか、モーダルで表示します。

チェックリスト

自社のフォームで確かめるときは、この形でご確認ください。

• 項目数は必要最低限か
• 完了までのステップが見えるか
• 必須と任意が文字で区別されているか
• 迷う項目に入力例があるか
• エラーがその場で、打ち終わってから出るか
• エラー文が「どう直すか」まで書いているか
• 全角・半角をシステム側で吸収しているか
• 郵便番号から住所が自動で入るか
• 送信ボタンが一番目立つか
• フォームページに余分なリンクがないか

 

スマートフォンでは何が変わるか

ここまでの10ポイントは画面幅を問わず効きますが、スマートフォンには「指で触る」「画面が狭い」「ソフトキーボードが画面の半分を占める」という固有の制約があります。PCで成立していた設計が、そのままでは成立しなくなります。

ラベルは入力欄の「上」に置く

PCでよく見る「ラベルを左、入力欄を右」の横並びは、画面幅の狭いスマホでは入力欄を圧迫します。ラベルを上に置き、入力欄を画面幅いっぱいに広げるのが原則です。

タップ領域は指の幅で考える

マウスカーソルは数ピクセルの精度で狙えますが、指はそうはいきません。入力欄、チェックボックス、ラジオボタン、送信ボタンはいずれも高さ44〜48px程度を目安にとり、隣接する要素との間隔を十分にあけます。

見落とされがちなのがチェックボックスです。四角のボックスだけをタップ領域にすると指では押しにくい。ラベルの文字部分まで含めて反応させると、それだけで入力完了率が変わります。

項目に合ったキーボードを出す

メールアドレス欄をタップしたのに日本語入力のキーボードが出る。電話番号欄でフルキーボードが出る。これだけでユーザーは余計な切り替え操作を強いられます。

type 属性を項目に合わせて指定すれば、OS側が適切なキーボードを出します。

項目	指定
メールアドレス	type="email"
電話番号	type="tel"
郵便番号・数値	inputmode="numeric"
氏名・住所	type="text"（日本語入力）

あわせて autocomplete 属性を正しく指定しておくと、ブラウザの自動入力が効き、数タップでフォームが埋まります。

選択肢の数でUIを使い分ける

選択項目を何で作るかは、選択肢の数で決まります。

• 2〜4つ— ラジオボタンやセグメント。全部が見えているほうが早い
• 5つ以上— プルダウン。OS標準の選択UIが出て、縦の場所を取らない
• 都道府県や業種など多数— プルダウン、または入力補完付きのテキスト欄

独自実装のセレクトボックスは、スマホでは指でのスクロールが難しく、避けたほうが無難です。

スクロールを減らす

項目が多いフォームを一画面に詰めると、スマホでは延々とスクロールが続き、「あとどれくらいか」が見えなくなります。これが離脱の引き金になります。

項目を意味のまとまりごとに2〜3画面に分け、各画面をスクロールなしで収める。上部にステップ表示を置けば、分割しても全体量は伝わります。

送信ボタンを画面下部に固定する実装も有効ですが、ソフトキーボード表示中に入力欄を隠さないかを必ず実機で確かめてください。

 

2026年に押さえておきたい入力フォームの最新トレンド

上記の基本的な10のポイントに加えて、2026年現在は次のような取り組みが標準になりつつあります。

住所自動入力・オートコンプリートの徹底

郵便番号を入力すると町名まで自動入力される、ブラウザに保存された氏名・住所・メールアドレスなどが自動で入力候補として表示されるなど、ユーザーの入力の手間そのものを減らす工夫は、今や必須の機能になっています。フリガナ欄への自動入力（ユーザーが編集も可能な状態で）も、定番の入力支援機能の一つです。

パスキー・ソーシャルログインによるパスワードレス化

新規会員登録の際、従来のパスワード入力に代えて、Googleアカウントなどでのソーシャルログインや、生体認証を用いた「パスキー」でのログイン・登録に対応するサービスが増えています。パスワードを覚える・入力する手間そのものをなくすことで、登録完了までのハードルを大きく下げることができます。

入力途中の離脱を防ぐアラート機能

入力途中でブラウザを閉じようとしたり、前のページに戻ろうとしたりした際に、確認アラートを表示する機能も広がっています。誤操作によってせっかく入力した内容が消えてしまうストレスを未然に防ぎ、ユーザーを最後まで導く効果があります。

チャット型・スライド型フォーム

一度に全項目を表示する縦長のフォームではなく、チャットボットのように1問ずつ質問に答えていく形式や、画面をスライドさせながら1項目ずつ入力していく形式のフォームも増えています。1画面あたりの情報量が少なく、心理的な負担を感じにくいことが特徴です。特に、スマートフォンでの入力や、求人応募のようにやや心理的ハードルの高いフォームとの相性が良いとされています。

メールアドレス再入力欄でのリアルタイム一致確認

メールアドレスの確認欄を設ける場合、最初の入力内容との一致をリアルタイムでチェックし、相違があればその場でエラーメッセージを表示する実装が推奨されています。誤ったメールアドレスが登録され、後から連絡が取れなくなるトラブルを未然に防げます。

観点	2018年頃の主流	2026年の主流
パスワード	文字入力＋表示切替ボタン	パスキー・ソーシャルログインとの併用が拡大
入力支援	郵便番号からの住所検索	住所検索に加え、ブラウザ側のオートフィルとの連携が前提
フォーム形式	縦長の1ページ完結型が主流	チャット型・スライド型など、段階的に入力させる形式も一般的に
離脱対策	残りステップ数の表示が中心	残りステップ数表示に加え、離脱防止アラートを併用

入力フォームまでの導線設計の考え方

入力フォーム単体の使いやすさはもちろんですが、フォームにたどり着くまでの導線設計も同じくらい重要です。ユーザーの心理的ハードルを下げるため、入力フォームだと意識させない見せ方や、情報を段階的に取得する設計は基本的な手法ですが、きちんと押さえたいポイントなのでご紹介します。

最低限の情報から段階的に取得する

多くのWebサービスでは、初回の会員登録時に取得する情報を、性別・生年月日・メールアドレス・パスワードなど最低限にとどめ、実際に商品購入や申込みなど本格的な利用段階になってはじめて、氏名・住所・電話番号・支払い情報などを追加で登録してもらう、という2段階の設計が一般的です。

ユーザーの心理的負担を下げるために、その段階ごとに最低限の情報を取得する工夫は、フォーム設計において積極的に取り入れたい考え方です。

興味を引いてから登録させる導線

作成中のコンテンツやシミュレーション結果を試せるWebサービスなどでは、先に会員登録を求めるのではなく、まず機能や操作を自由に試してもらい、内容を保存しようとするタイミングで会員登録を促す導線もよく見られます。

ユーザーの興味を先にぐっと引きつけてからのほうが、スムーズに会員登録してもらいやすくなります。フォームを見せる「タイミング」自体も、重要な設計要素の一つです。

 

自社フォームではこう設計した

ここまでの内容は、パンタグラフが自社のヒューリスティック分析の申込フォームを設計する際にも適用しています。そのときに迷ったところを、そのまま書きます。

項目数をどこまで削るか

営業からは「業種と企業規模も欲しい」と要望がありました。しかし項目が1つ増えるごとに送信率は落ちます。結論として、初回の申込では会社名・氏名・メールアドレス・電話番号・相談内容の5項目に絞り、業種や規模はその後のヒアリングで聞くことにしました。

エラーをいつ出すか

入力欄から離れた時点で判定し、その場に短く表示。打っている最中には出しません。特にメールアドレス欄は、最初の数文字で必ずエラーになるためです。

送信ボタンの状態

必須項目が埋まるまでボタンを非アクティブにする設計も検討しましたが、採用しませんでした。常に押せる状態にしておき、押した時点で不足箇所まで画面を送る方式にしています。

 

よくある質問

入力フォームの項目数はいくつまでが適切ですか？

問い合わせフォームなら5項目前後が目安です。判断基準は数そのものよりも「この情報がないと次のアクションが取れないか」で、取れるならフォームから外します。

EFOツールは入れたほうがいいですか？

項目設計を見直してから検討してください。入力補助やリアルタイム検証はツールで後から足せますが、多すぎる項目や分かりにくい語句はツールでは解決しません。

スマホではフォームを分割したほうがいいですか？

項目が多くてスクロールが長くなるなら分割します。ただし分割する場合は必ずステップ表示を置き、残りの量が見えるようにします。

確認画面は必要ですか？

契約や購入など、送信内容を見返したい場面では必要です。問い合わせフォーム程度の項目数なら、確認画面を省いて入力画面で内容を見せたまま送信するほうが、完了率は上がります。

フォームの改善効果はどう測りますか？

フォーム到達数に対する送信完了数の比率（フォーム完了率）を主指標にします。さらに項目ごとの離脱を計測すれば、どの欄で止まっているかが特定できます。

ソーシャルログインだけにしてもいいですか？

推奨しません。「どのアカウントで登録したか分からなくなる」「仕事の登録で個人のSNSを使いたくない」といった抵抗が常に一定数あるため、メールアドレス登録と並べて置きます。

 

さいごに

入力フォームの改善は、すでに「問い合わせよう」と決めている人を取りこぼさないための打手です。新しい流入を作るよりも速く、一度直せば効き続けます。

まずは自社のフォームをスマートフォンの実機で開き、最後まで自分で入力してみてください。指で押しにくい箇所、何を書けばいいか迷った箇所、エラーで止まった箇所が、そのまま改善リストになります。

パンタグラフでは、ヒューリスティックの専門家がサイトを評価分析し、現状の問題点や課題を抽出しています。分析の観点と進め方をまとめた資料を無償で公開していますので、あわせてご活用ください。

パンタグラフへのご相談はこちら