スマホで離脱しないUI/UXの作り方

アクセスの多くがスマホになっているのに、フォームや申込導線はPC向けのまま。
この差が、送信完了率の低下や問い合わせ数の伸び悩みに直結することがあります。

スマホのUI/UXで大事なのは、凝った演出ではありません。
どこまで進んだか分かること、指で押しやすいこと、エラーから戻りやすいこと、送信中に不安にならないことです。
ここでは、スマホからの問い合わせ・申込で途中離脱を減らすための設計ポイントを、実務で使いやすい形に整理します。

この記事の視点
・「今どこにいるか」が分かるステップ設計
・タップしやすいボタン・入力欄
・エラー時のストレスを減らす表示方法
・読み込み時間・回線状況への配慮

mock:スマホフォームで離脱が起きやすいポイント

01 先が見えない

残り項目が分からず、途中でやめられやすい。

02 押しにくい

入力欄やボタンが小さく、誤タップが増える。

03 直しにくい

エラー箇所が分からず、戻る負担が大きい。

04 送信中が不安

反応がなく、二重送信や離脱につながる。

スマホ改善は、見た目よりも「途中で不安にならない導線」を作ることが先です。

1. ステップ数が分かるだけで、入力の不安は減る

ユーザーが不安になるのは、「あとどれくらい入力が続くのか分からない」ときです。
特にスマホでは、画面に見えている情報が少ないため、フォームの全体量を把握しづらくなります。

スマホmock:ステップ表示付きの申込フォーム

10:24 5G 82%
STEP 2 / 3

ご連絡先の入力

次の画面で入力内容を確認できます。

山田 太郎
sample@example.jp
090-0000-0000
確認画面へ進む 前の画面に戻る

この画面で効く改善点

現在位置が分かる 「あと何画面あるか」が分かるだけで、入力途中の不安が減ります。
項目がまとまっている 連絡先だけ、希望内容だけ、など画面ごとに意味を分けます。
次の動作が明確 ボタン文言は「送信」だけでなく、次に起きることを示します。

学校・医療・不動産など、入力項目が多くなりやすいフォームほど、ステップ表示の効果が出やすくなります。

学校・医療・不動産など、入力項目が多くなりやすい業種ほど、ステップ設計の効果が出やすくなります。
学校のオープンキャンパス申込などは、学校向けWebシステム活用アイデアのような構成と組み合わせると、フォーム単体ではなく申込後の案内まで含めて考えやすくなります。

2. タップしやすいUIにする基本チェック

スマホ画面でストレスなく操作できるかどうかは、細かな見た目よりも、指で操作したときの扱いやすさで決まります。

mock:押しやすさを左右するUIパーツ

大きめボタン
この内容で申し込む

ボタンの高さと余白を確保し、文字色も十分に見えるようにします。

ラベルごと押せる選択肢
○ 資料請求を希望する
○ 個別相談を希望する

小さな丸だけではなく、行全体をタップ対象にします。

余白のある入力欄
株式会社サンプル

入力欄同士が近すぎると、誤タップや見落としが増えます。

スマホでは、装飾よりも「押し間違えない」「押したい場所がすぐ分かる」ことが重要です。

見た目を整えることも大切ですが、それ以上に「ミスタップしにくい」「指で隠れても操作の見当がつく」状態を優先した方が、送信完了まで進みやすくなります。

3. エラー表示は「怖くなく」「具体的に」

エラー表示がきっかけで、入力をやめてしまうことがあります。
特にスマホでは、エラー箇所まで戻る操作が面倒になりやすいため、エラーの出し方を丁寧に設計する必要があります。

スマホmock:修正しやすいエラー表示

エラー表示で避けたいこと

どこが間違いか分からない 上部だけに「エラーがあります」と出すと、該当箇所を探す手間が増えます。
入力内容が消える 送信失敗後に内容が消えると、再入力の負担が大きくなります。
言い方が強い 赤字だけで責めるような文面にせず、直す内容を短く伝えます。
13:08 4G 61%

入力内容をご確認ください

未入力の項目が2件あります。
山田 太郎
未入力
お電話番号をご入力ください。
未選択
第1希望日を選択してください。
修正して送信する

エラー表示は、注意するためではなく「すぐ直せるようにする」ためのUIです。

インテンスがフォーム改善を行う際も、まずはエラー表示の位置と文言を調整するだけで、「最後まで入力したのに送信できなかった」というストレスを減らせるケースがあります。

4. 読み込み時間・回線状況への配慮

スマホは常に高速回線とは限りません。
特に地方の見学施設、ホテル、葬祭場などのページでは、電波状況が不安定な場所でフォームを開くことも想定しておく必要があります。

スマホmock:送信中・二重送信防止の表示

16:31 LTE 48%

送信しています

この画面のまま、しばらくお待ちください。

送信中です

完了するまでボタンを押し直さないでください。

送信中...
送信に数秒かかる場合があります。完了後に受付番号を表示します。

送信中に必要な配慮

反応を見せる 押した後に何も変わらないと、連打や離脱につながります。
ボタンを無効化する 二重送信を防ぐため、送信中は再クリックできない状態にします。
完了後の表示を用意する 受付番号や連絡目安が出ると、ユーザーが安心できます。

送信中の数秒を放置しないだけでも、二重送信や問い合わせの重複を減らしやすくなります。

ホテルや葬祭向けの予約フォームでは、ホテル向け葬祭向けシステム開発例で扱うように、事前案内ページと軽い申込フォームを分ける構成も現実的です。

まとめ

スマホで離脱しないUI/UXを作るポイントは、特別な演出ではなく、基本の積み重ねです。
ステップ数を見せる、タップしやすい余白を取る、エラーをすぐ直せる場所に出す、送信中の状態を明示する。
このあたりを業種ごとの事情に合わせて丁寧に調整することで、フォームからの完了率は改善しやすくなります。

本記事は、Webシステム開発・スマホ自動変換「movo」・業務システム構築・フォームUX改善・EC支援を提供する 株式会社インテンスが、実際の開発プロジェクトで蓄積した知見をもとにまとめています。 株式会社インテンス(公式サイト)