スマホフォームを改善するとき、最初に見るべきなのは見た目より入力の摩擦です。
特に効くのは次の4つです。
1. 入力内容に合った input type にする
2. 文字入力より選択式に倒す
3. 長いフォームを自然な単位でページ分割する
4. エラー後に該当項目へ戻す
この記事では、スマホフォームの改善を実装・設定チェックリストとして整理します。
HTML の input type については、MDN の <input> リファレンスと HTML5 input types の解説が一次情報として使いやすいです。
FORMLOVA での実装手順まで含めた正本リンクは末尾に置きます。ここでは、実装・設定のチェックに集中します。
チェック1: テキスト項目で受けすぎていないか
スマホフォームでよくあるのが、全部をテキスト項目で受けてしまうパターンです。
メールアドレス: text
電話番号: text
人数: text
希望日: text
URL: text
PCではそれでも入力できます。
でもスマホでは、キーボード切り替えが発生します。メールなのに @ を探す。電話番号なのに数字キーボードにならない。日付なのにカレンダーが出ない。
まずは、内容に合った型へ寄せます。
| 聞きたい内容 | HTMLの例 | FORMLOVAでの項目タイプ | スマホで期待すること |
|---|---|---|---|
| メールアドレス | type="email" |
メールアドレス |
@ や . を含むキーボードが出やすい |
| 電話番号 | type="tel" |
電話番号 | 数字中心のキーボードが出やすい |
| 人数・数量 | type="number" |
数値 | 数字入力に寄せられる |
| URL | type="url" |
URL |
/ や . を含むキーボードが出やすい |
| 日付 | type="date" |
日付 | 日付選択UIが使える |
| 時刻 | type="time" |
時刻 | 時刻選択UIが使える |
| 自由記述 | textarea |
長文 | 文章入力として扱う |
実装チェックはこうです。
[ ] メール欄が email になっている
[ ] 電話欄が tel になっている
[ ] 数量・人数・金額が number になっている
[ ] URL欄が url になっている
[ ] 日付・時刻をテキストで打たせていない
[ ] 自由記述以外をテキストに寄せすぎていない
チェック2: 選べるものを自由入力にしていないか
スマホでは、文字入力そのものが負担です。
入力させなくてよいものは、選ばせます。
| 内容 | 避けたい形 | よい形 |
|---|---|---|
| 参加形式 | テキスト入力 | 単一選択 |
| 希望時間帯 | 自由入力 | 選択式 |
| 部署 | 自由入力 | ドロップダウン |
| 都道府県 | 自由入力 | 住所/都道府県項目 |
| はい/いいえ | テキスト入力 | Yes/No |
| カテゴリ | 自由入力 | ラジオまたはドロップダウン |
自由入力は、表記ゆれも生みます。
オンライン
online
リモート
Zoom
zoom参加
回答者にとっても運営者にとっても、決まった選択肢があるなら選択式のほうが楽です。
チェック3: タップ領域が小さすぎないか
スマホでは、ボタンや選択肢を指で押します。
W3C の WCAG 2.2 では、pointer input の target size minimum として 24x24 CSS pixel 以上という基準が説明されています。実務では、最低基準を満たすだけでなく、隣接要素との間隔やラベル全体を押せるかも見ます。
参考:
チェックリストです。
[ ] 送信ボタンが指で押しやすい高さになっている
[ ] ラジオボタン/チェックボックスのラベル全体をタップできる
[ ] 選択肢が横に詰まりすぎていない
[ ] リンクとボタンが近すぎない
[ ] 主要操作が画面下部でも押しやすい
特にフォームでは、チェックボックス本体だけでなくラベル全体を押せるようにすると体感がかなり変わります。
チェック4: 1ページに詰め込みすぎていないか
スマホで長いフォームは、終わりが見えません。
ただし、何でも細かくページ分割すればよいわけではありません。毎ページ「次へ」を押すのも負担です。
分割の判断軸は、項目数だけではなく「頭の切り替わり」です。
| 分割単位 | 例 |
|---|---|
| 基本情報 | 名前、メール、電話 |
| 参加情報 | 参加形式、人数、希望日 |
| 支払い/請求 | 宛名、請求先、支払い方法 |
| 添付 | 履歴書、画像、資料 |
| 確認 | 入力内容確認、同意 |
1ステップに置く項目は、スマホでは5〜7項目くらいを目安にすると見通しがよくなります。もちろん内容によって変わります。住所のように複数欄がまとまるもの、選択式だけの短いステップ、長文入力が中心のステップでは体感が違います。
具体例として、イベント申込フォームなら次のように分けます。
Step 1: 連絡先
氏名
メールアドレス
所属
Step 2: 参加情報
参加形式
参加人数
講師への質問
Step 3: 確認
入力内容
注意事項への同意
問い合わせフォームなら、次のように分けます。
Step 1: 連絡先
氏名
会社メール
会社名
Step 2: 相談内容
問い合わせ種別
導入希望時期
問い合わせ内容
Step 3: 確認
入力内容
個人情報同意
分割の目的は、ページ数を増やすことではありません。回答者が「今は連絡先を入れるところ」「次は相談内容を書くところ」と理解できるようにすることです。
チェックリストです。
[ ] 最初の画面で重い質問を出していない
[ ] 個人情報、希望内容、添付、確認が自然に分かれている
[ ] 1ステップの項目数が多すぎない
[ ] 分割しすぎてクリック回数だけ増えていない
[ ] 戻る操作で入力内容が消えない
[ ] 現在位置や進行状況が分かる
チェック5: 画像添付をスマホ前提で見ているか
スマホの画像は重いです。
フォームで写真、本人確認書類、領収書、スクリーンショット、作品画像を受ける場合、PCのファイルアップロードだけ見ても不十分です。
見るべきことは次です。
[ ] スマホのカメラロールから選べる
[ ] 画像サイズが大きすぎるときの扱いが分かる
[ ] アップロード中の表示がある
[ ] 失敗したときに入力内容が消えない
[ ] HEICなど端末由来の形式をどう扱うか決めている
[ ] 非画像ファイルを許すか決めている
FORMLOVA では画像添付の自動圧縮や実効上限を前提に、スマホで通しやすい設計に寄せています。自前実装の場合も、「ファイルサイズ上限を書いて終わり」ではなく、回答者がスマホでそのまま送れるかを見ます。
実装側では、アップロード失敗時の扱いを先に決めます。
画像だけ失敗したとき、他の入力は残るか
再選択ボタンは分かりやすいか
圧縮中なのか、通信中なのかが見えるか
送信ボタンを二重に押せないか
非対応形式を選んだとき、理由が表示されるか
「ファイルが大きすぎます」だけでは、スマホの回答者は次に何をすればよいか分かりません。
たとえば、次のように書きます。
画像が大きいため送信できませんでした。別の画像を選ぶか、スクリーンショットではなく元画像を選び直してください。
または、サービス側で圧縮できるなら、回答者に圧縮操作をさせずに吸収します。
チェック6: エラー後に戻れるか
スマホフォームでエラーが出たとき、最悪なのは「どこを直すか分からない」状態です。
上部にまとめてエラーを出すだけでは足りません。
チェックリストです。
[ ] エラー後に該当項目へスクロールする
[ ] 項目の近くに直し方を出す
[ ] エラー文が短く具体的
[ ] 入力済みの内容が消えない
[ ] 送信ボタンが二重送信にならない
[ ] 通信失敗と入力エラーを分けて表示する
エラー文は「無効です」ではなく、回答者が次に何をすればいいかを書きます。
メールアドレスに @ を含めてください
電話番号は数字で入力してください
画像は4MB以下にしてください
チェック7: 完了画面と確認メールを忘れない
スマホフォームでは、送信後の不安も離脱に近い問題です。
送信ボタンを押した後に何も分からないと、回答者は「本当に届いたのか」と不安になります。二重送信したり、別の問い合わせ手段に流れたりします。
完了画面では、最低限これを出します。
[ ] 送信が完了したこと
[ ] 次に何が起きるか
[ ] 返信までの目安
[ ] 確認メールを送ったかどうか
[ ] 問い合わせ先または補足導線
確認メールも同じです。
お申し込みありがとうございます。
受付内容を確認しました。
参加URLは開催前日にこのメールアドレスへお送りします。
フォームの入力体験は、送信ボタンで終わりません。回答者が「終わった」と安心できるところまでが入力体験です。
実機テストの最小セット
最後はスマホ実機で送信します。
最低限、次を1回通します。
[ ] iPhone または Android の実機で開く
[ ] メール欄のキーボードを見る
[ ] 電話/数値欄のキーボードを見る
[ ] 選択肢を指で押す
[ ] ページ分割で戻る/進むを試す
[ ] 画像を添付する
[ ] わざとエラーを出す
[ ] 通信が遅い状態を想定して送信表示を見る
[ ] 完了画面と確認メールを見る
PCのプレビューだけでは、スマホのキーボード、親指操作、カメラロール、通信不安は分かりません。
この記事では扱わないこと
この記事では、EFO全般、フォーム項目設計の網羅、アクセシビリティ仕様の全文解説、FORMLOVAの全機能紹介は扱いません。
スマホで入力しやすくするための実装チェックに絞りました。
FORMLOVAでの具体的な依頼文、項目タイプ設定、ページ分割、画像添付、実機テストまで含めた正本はこちらです。