スマホ入力フォームを入力しやすくする方法 -- 項目タイプ・ページ分割・画像添付

最終更新日: 2026-10-15

スマホ向け実装では、項目の型・意味のまとまり・分岐・エラー表示を設定し、実機で挙動を確認します。短いフォームを無理に分割せず、必要な質問を減らしてから構造を決めてください。FORMLOVAでは下書きと項目調整をFreeで試せますが、ファイルアップロードはStandard以上です。

この記事で実装すること

スマホで入力しやすいフォームは、デザインの問題ではなく、設定の問題です。

正しい項目タイプを選び、縦長を割り、画像を吸収し、エラー後に戻す。この4つを実装すれば、PCで作ったフォームがスマホで答えやすくなります。本記事で扱う実装は次の通りです。

実装テーマ	何を設定するか	スマホで起きること
項目タイプ別の入力体験	メール・電話・数値・URL・日付・住所などを内容に合った項目タイプにする	端末が内容に合ったキーボードや入力補助を出す
縦長を割る	項目数を絞り、長いフォームはページに分割する	1画面の情報量が減り、先が見える
画像添付を通す	ファイル項目を置き、画像の自動圧縮に任せる	対応する画像の圧縮を試し、形式・サイズを確認する
エラー後の復帰	該当項目へ誘導し、直し方を項目の近くに出す	小さい画面でも直す場所がすぐ分かる

各テーマの最後に、FORMLOVAへのチャット依頼の実例を載せます。記事の最後に、公開前の実機テストのチェックリストをまとめます。

なお、項目数・必須/任意・ラベル設計といったEFOの全般論は入力フォーム最適化（EFO）ガイド、用途別の項目選びはフォーム項目例まとめで扱っているため、本記事ではスマホ実装に必要な範囲だけを参照します。

型とページ分割の変更を小さく試す

以下は試用の依頼例で、今回の改稿で実行・実測した結果ではありません。まず検証用の非公開下書きで確かめます。

非公開の見積相談フォームを作ってください。連絡先、依頼内容、希望時期を意味で分け、必要なら連絡先と詳細の2ページ案を比較してください。メール/電話/数値を適切な型にし、不要な項目は任意にします。分岐を通る/戻る/未入力でエラーの確認表を出し、公開・ファイル追加・送信はしません。

次に進む前に、ここを確認します。

実際に保存された項目の型と必須条件が合うか。
スマホで選択肢・キーボード・エラー・戻る操作を確かめ、PCでも読みやすいか。
プレビューの表示/入力検証と、公開後の実回答保存・メール到達の検証を分けているか。

スマホで答えられる受付を無料で下書きする

Freeで項目・型・分岐・プレビューを試せます。ファイルアップロードはStandard以上で、写真が必ず送れることやCVR改善を保証しません。

無料でスマホ用フォームを試す

登録・メール確認後、対応AIクライアントに接続し、上の依頼文を貼り付けます。保存された下書きを確認してから公開を判断してください。AIクライアント側の契約・利用条件は別です。

依頼文から非公開下書きとプレビューへ進む概念図

既存の概念図を下書き確認の説明として再利用しています。この記事の試用を実行した画面・測定結果ではありません。

項目タイプ別に入力体験を設計する

スマホ入力でいちばん効くのに見落とされがちなのが、項目タイプの選び方です。

同じ「メールアドレスを聞く」でも、ただのテキスト項目にするか、メール項目にするかで、スマホに出るキーボードが変わります。テキスト項目だと、回答者は記号キーへ切り替えて @ を探します。メール項目なら、端末が @ を含むキーボードを出しやすくなります。この差が、入力のしやすさを左右します。

MDNのHTML5 input types解説では、メール、電話番号、URL、数値、日付など、入力内容に合ったinputタイプが整理されています。適切なタイプを使うと、スマホ側が内容に合ったキーボードや入力補助を出します。

FORMLOVAには、内容ごとに使い分けられる項目タイプがそろっています。スマホの入力体験という観点で、どの項目タイプを選ぶと何が変わるかを整理します。

聞きたい内容	選ぶ項目タイプ	スマホで起きること
メールアドレス	メールアドレス（email）	`@` や `.` を含むキーボードが出やすい
電話番号	電話番号（phone）	数字中心のキーボードが出やすい
人数・金額・数量	数値（number）	数字キーボードが出やすい。最小・最大・小数桁も指定できる
参考URL	URL（url）	`/` や `.` を含むキーボードが出やすい
日付	日付（date）・日時（datetime）・時刻（time）	カレンダーや日付・時刻の選択UIが出る
都道府県・住所	住所（address）	郵便番号からの自動入力（既定で有効）で入力量が減る
カテゴリ・希望時間帯	単一選択・ドロップダウン	キーボードを出さず指で選ぶだけになる
はい/いいえ	Yes/No（yes_no）	二択を指でタップするだけで終わる
国名	国選択（country）	国名のドロップダウンから選ぶだけになる

実装の判断軸はシンプルです。

第一に、テキスト項目で受けているものを、内容に合った専用タイプに置き換えます。メールはメール、電話は電話、数量は数値、URLはURLに変えるだけで、回答者がキーボードを切り替える手間が消えます。

第二に、選択肢が決まっているものは「入力させず、選ばせる」に倒します。希望時間帯、カテゴリ、参加形式は単一選択やドロップダウン、都道府県や国は住所項目や国選択にします。文字入力そのものがスマホでは負担なので、選ぶだけで終わる形にすると離脱が減ります。表記ゆれも消え、後の集計も楽になります。

第三に、住所を聞くなら住所項目を使います。FORMLOVAの住所項目は、郵便番号からの自動入力が既定で有効です。回答者が郵便番号を入れると残りの住所候補が補われるため、スマホで番地まで全部打たせるより入力量が大きく減ります。郵便番号を必須にするかどうかも項目設定で選べます。

なお、実際にどのキーボードが出るかは、項目タイプに加えて端末・ブラウザの実装に依存します。だからこそ、設定後は必ず実機で確認します（手順は後述します）。どの項目を必須にしてどれを任意にするかという設計の網羅は、フォーム項目例まとめに用途別でまとまっています。

FORMLOVAでは、この項目タイプの設定をチャットで依頼できます。

このフォームのメール欄はメールアドレス項目、電話欄は電話番号項目、人数欄は数値項目に変えてください。スマホで合ったキーボードが出るようにしたいです。

住所の項目を、郵便番号から自動で住所が入るようにしてください。

希望時間帯は自由入力ではなく、選択肢から選ぶ形にしてください。

縦長を割る -- 何項目で割るかの具体ルール

スマホ離脱の大きな原因が、フォームが縦に長すぎることです。

PCで2カラムに収まるフォームも、スマホでは1カラムで縦に積み上がります。スクロールしても終わりが見えないと、回答者は「まだあるのか」と感じて離脱します。なぜ縦長が起きるかはスマホ向けフォーム最適化ガイドで扱っているので、ここでは「どう割るか」の手順に集中します。

縦長対策の打ち手は、優先順位をつけて進めます。

ステップ1 そもそも項目を減らす

割る前に、減らせる項目がないかを見ます。

初回送信に不要な項目は、任意にするか、送信後に聞くかに振り分けます。スマホでは、聞きすぎないことが最も効きます。項目を「必須 / 任意 / 後で聞く」に分ける考え方は入力フォーム最適化（EFO）ガイドで扱っています。減らしてから割るほうが、ページ数も少なく済みます。

ステップ2 1ページの項目数を絞ってページに割る

それでも項目が多いフォームは、ページ（ステップ）に分割します。

FORMLOVAはマルチページフォームに対応しており、項目をページ単位に割り当てられます。マルチページのフォームでは進捗バーが表示され、回答者は「今どこを答えているか」「あと何ページか」を把握できます。最後のページでボタンが「送信」に変わります。

割るときの判断ルールは次の通りです。

判断軸	目安	理由
1ページの項目数	数項目（おおむね3〜5項目）に抑える	1画面の情報量が減り、スマホでも先が見える
どこで割るか	意味のまとまりごと（連絡先 / 詳細 / 確認など）	回答者が「今は何の情報を答えているか」を理解できる
割る対象	項目が多いフォームだけ	短い問い合わせは割らないほうが速い
ページの最後	各ページの末尾に「次へ」を置く	親指の届く位置で次に進める

ステップ3 条件分岐で不要なページをスキップする

割ったページのうち、回答者によっては不要なページが出てきます。

FORMLOVAの条件分岐は、回答内容に応じてページをスキップできます。たとえば「個人のお客様」を選んだら会社情報のページを飛ばす、といった分岐です。条件を満たしたらフォームをそこで終了させる設定もできます。関係ないページを見せないことで、回答者ごとに最短のフォームになります。

条件分岐は、ページのスキップだけでなく、特定の項目を条件付きで表示する用途にも使えます。最初は隠しておき、ある回答を選んだときだけ追加項目を出す、といった出し分けです。これも縦長対策になります。

割りすぎに注意する

ただし、割りすぎは逆効果です。

短い問い合わせフォームを無理に何ページにも分けると、かえって「いつ終わるのか」が分かりません。項目数が少ないフォームは、1ページのまま縦1列で並べたほうがスマホでも速く終わります。割るのは、項目が多くて1画面に収まらないフォームだけ、というのが現実的な基準です。

縦長対策	何をするか	スマホでの効果
項目を減らす	不要な項目を任意・送信後に回す	スクロール量そのものが減る
ページに割る	1ページ数項目で意味のまとまりごとに分割	1画面の情報量が減り先が見える
条件分岐でスキップ	不要なページや項目を自動で出し分け	関係ない項目を見せず短くなる
1カラムを徹底	横並びをやめ縦1列にする	押し間違いと窮屈さが減る

FORMLOVAでは、この分割もチャットで依頼できます。

このフォームが縦に長いので、意味のまとまりごとにページを分けてください。1ページは3〜4項目までにしてください。

「個人のお客様」を選んだら、会社情報のページは飛ばすようにしてください。

画像添付をスマホで通す実装

スマホのフォームでつまずきやすいのが、写真の添付です。

スマホで撮った写真は高画質で、ファイルサイズが大きくなりがちです。フォームによっては「ファイルが大きすぎます」と弾かれ、回答者はサイズを小さくする方法が分からず諦めます。採用応募の証明写真、見積依頼の現場写真、不具合報告のスクリーンショットなど、画像添付が必要な場面でこれが起きると、そのまま離脱につながります。

FORMLOVAは対応する画像の圧縮を試みますが、形式・サイズ・端末の条件により別形式や小さいファイルが必要な場合があります。実装の要点を押さえておきます。

画像は送信前にブラウザ側で自動圧縮される

対応する画像でJPEG出力が許可されている場合、ファイルアップロード項目では送信前にブラウザ側で圧縮を試みます。

圧縮では長辺のリサイズとJPEG再エンコードを試し、その結果を項目の設定上限（最大4MB）で判定します。圧縮が失敗したり十分に小さくならなかったりする場合は、回答者が小さいファイルや別形式を選び直します。

実効上限は4MB

ファイルの実効上限は、1ファイル最大4MB（項目の設定が小さければその値）です。

これは送信経路の都合による現実的な上限です。公開フォームの送信はリクエストボディに約4.5MBの壁があり、これを超えるとアプリのコードに到達する前に弾かれます。複数添付はリクエスト全体の上限も確認します。フィールド側に大きな上限を設定しても、実効上限の4MBが天井になります（Storageの保管上限25MBとは別軸です）。

非画像とHEICは圧縮されない

押さえておきたい例外はこうです。

項目	内容
実効上限	1ファイル最大4MB（項目の設定が小さければその値）（送信経路の都合による現実的な上限）
画像の扱い	対応時に長辺リサイズ・JPEG再エンコードを試し、結果を設定上限で判定する
非画像の扱い	PDF / Word / Excel などは圧縮できないため、4MBを超えると弾かれる
HEIC/HEIF	ブラウザがデコードできない場合は圧縮をスキップし、原本を検証する
形式制限との衝突	JPEGを受け付けない形式限定の項目（PNG/WebP/GIFのみ等）では、圧縮で.jpg化すると形式チェックと衝突するため圧縮をスキップする
利用条件	ファイルアップロード項目はスタンダードプラン以上で使える

非画像ファイルやHEICで上限に当たった場合は、クライアント側で具体的なエラーメッセージと打ち手（別形式・別ファイルでの再試行）が表示されます。回答者が原因不明で立ち往生しない設計です。

実装の判断

スマホ実装の観点では、「スマホの写真は重くて当たり前」という前提を、フォーム側が引き受けます。

回答者に画質調整を強いるのではなく、フォーム側で圧縮を試すと手作業を減らせる場合があります。離脱への効果は別途測定します。添付項目を置くときは、対応形式とおおよその上限を入力欄の補足にも書いておくと、さらに親切です。許可形式を絞りすぎると圧縮がスキップされて4MBで弾かれやすくなるため、画像を受けたいなら一般的な画像形式を許可しておきます。

このフォームに写真の添付項目を追加し、許可形式と上限を設定してください。圧縮の条件、上限超過時に別形式や小さいファイルを選ぶ説明も確認したいです。

添付項目の補足に、対応形式とサイズの目安を書いてください。

エラー後に該当項目へ戻す実装

スマホでエラーが出たときの体験は、PCよりずっと厳しくなります。

画面が小さいため、エラーがどこで起きたのか、スクロールしないと分かりません。送信ボタンの近くに「エラーがあります」とだけ出ても、回答者は長いフォームのどこへ戻ればよいか分かりません。これがスマホの離脱で最も多いパターンのひとつです。

W3CのWCAG 2.2 エラー特定では、どの項目でエラーが起きたかをテキストで明示することが求められています。エラー提案では、どう直せばよいかの提案も重要だと整理されています。

スマホで効くエラー復帰の実装は次の通りです。

やること	なぜスマホで効くか
該当項目の近くに直し方を出す	スクロールせずに原因と対処が分かる
色だけでなく文字で伝える	赤枠だけでは小さい画面で見落とす
入力済みの内容を消さない	同じ画面の検証エラー後に再入力の負担を減らす
そもそもエラーを起きにくくする	項目タイプを合わせ、入力前から形式を誘導する

実装の順番としては、エラー文を直す前に、項目タイプを正しく設定して「そもそもエラーが起きにくい」状態を作るのが先です。メールをメール項目に、数値を数値項目にするだけで、形式の誤りは減ります。そのうえで、残るエラーに対して、項目の近くに直し方を出します。

エラー文そのものの書き方 -- 「入力エラーです」ではなく「メールアドレスに@を含めてください」のように直す場所と直し方を入れる -- は、フォームのエラーメッセージ例に項目別でまとめています。送信後の完了画面をスマホで読みやすくする設計はフォームのサンクスページの作り方で扱っています。

このフォームのラベル、補足説明、項目型と制約を見直してください。プレビューで必須・形式エラーを起こし、現在の固定エラー文が項目付近に表示され、同じ画面の入力値が保持されるか確認したいです。通常のエラー文を自由編集できるとは扱わないでください。

スマホ実機テストの手順

ここまでの実装は、最後に実機で1回送信して確かめます。

PCのブラウザを縮めて確認するだけでは、キーボードの出方、指のタップ、画像添付、親指の届きやすさは分かりません。公開前に実際のスマホで表示と入力検証を確認します。プレビュー送信は本番回答として保存されず、公開後は許可した検証内容で実回答の保存/必要な送信を別途確認します。

1. 1ページ目で、何を入力するフォームか分かるか
2. 1ページの項目数が多すぎないか（先が見えるか）
3. メール欄でメール用、電話欄で数字用のキーボードが出るか
4. 数値・URL・日付の項目で、合った入力UIが出るか
5. 住所項目で、郵便番号から住所が補完されるか
6. 選択肢が縦に並び、押し間違えないか
7. 対応画像を選び、圧縮の結果・上限超過・失敗時の再選択方法を確認する
8. ページの「次へ」「送信」ボタンに親指が届くか
9. わざと未入力で送信し、どの項目を直すか分かるか
10. エラー後に入力内容が残っているか
11. 送信完了画面で、次の行動と返信目安が分かるか

このチェックは、できれば作った本人ではなく、別の人のスマホで送ってもらってください。

作った人は項目の意味を知っているため、迷いに気づきにくいです。フォームを初めて見る人がスマホで詰まる場所こそ、本当の改善点です。

FORMLOVAには公開前レビューがあり、フォームとサンクスページのプレビューURLを返します。スマホでプレビューの表示/入力を確認すると不具合を見つけやすくなります。実際の離脱改善は公開後の計測で確かめます。

FORMLOVAなら実装をチャットで依頼できる

FORMLOVAでは項目・型・補足・ページ分割・条件等の変更をチャットで依頼できます。通常の検証エラー本文は固定辞書で、任意の文へ変更する設定ではありません。意味検証ルール専用のmessageとは別の機能です。

項目タイプ、ラベル・補足、ページ分割、条件分岐、必要なプランの添付項目を変更し、保存結果を確認します。エラーについては、型と制約を整えたあと実際の固定文・表示位置・入力保持をプレビューで確かめます。

実装の流れをまとめると、こうなります。

テキストで受けている項目を、内容に合った項目タイプ（メール・電話・数値・URL・日付・住所・選択式）に変える。
項目を減らし、それでも多ければ1ページ数項目でページに割る。回答者によって不要なページは条件分岐でスキップする。
画像添付は許可形式・圧縮の条件・項目とリクエスト全体の上限を確認し、失敗時の再選択方法を補足する。
ラベル・補足・型・制約を整え、固定エラー文と同じ画面の入力保持をプレビューで確かめる。
公開前レビューのプレビューを実機で開き、送信まで確かめる。

この実装プレイブックを回すほど、フォームは「PCで作った入力欄」から「スマホで最後まで送信される受付窓口」になります。

スマホ最適化の原則と全体像はスマホ向けフォーム最適化ガイド、EFOの全般は入力フォーム最適化（EFO）ガイド、項目設計の網羅はフォーム項目例まとめへ続けてください。

FAQ

画像圧縮は成功や上限内を保証しません。JPEGを許可しない項目、デコード不可、圧縮後超過等では元ファイルの検証/エラーになります。複数添付を含む送信全体のサイズも実機で確認してください。入力エラー時の値保持は、再読み込みや別端末からの永続再開を保証するものではありません。

スマホでメールや電話のキーボードを最適なものにするには、どう設定すればよいですか

項目をテキストではなく、内容に合った専用タイプにします。メールはメールアドレス項目、電話は電話番号項目、数量は数値項目、URLはURL項目です。FORMLOVAでは項目タイプを項目ごとに指定でき、チャットで「メール欄はメール用キーボードにして」と依頼できます。実際に出るキーボードは端末・ブラウザの実装にも依存するため、設定後は実機で確認してください。

縦に長いフォームは、1ページ何項目で割ればよいですか

明確な決まりはありませんが、1ページを数項目（おおむね3〜5項目）に抑えると、スマホでも1画面の情報量が収まり先が見えます。割る位置は、連絡先・詳細・確認のように意味のまとまりごとにします。FORMLOVAはマルチページフォームに対応し、進捗バーで現在地が分かります。ただし項目が少ない短いフォームは、割らずに縦1列のままのほうが速く終わります。

スマホで撮った写真が大きくて添付できません。どう実装すれば通りますか

FORMLOVAでは、対応する画像でJPEG出力が許可されている場合に長辺リサイズとJPEG再エンコードを試み、結果を設定上限（最大4MB）で判定します。圧縮の失敗や上限超過で送信できない場合があります。PDFなどの非画像は圧縮できないため4MBを超えると弾かれ、ブラウザがデコードできないHEICは原本サイズで判定されます。許可形式を絞りすぎると圧縮がスキップされやすいため、画像を受けるなら一般的な画像形式を許可しておきます。ファイルアップロードはスタンダードプラン以上の機能です。

住所の入力をスマホで楽にする方法はありますか

住所項目を使います。FORMLOVAの住所項目は郵便番号からの自動入力が既定で有効で、回答者が郵便番号を入れると残りの住所候補が補われます。スマホで番地まで全部打たせるより入力量が減ります。郵便番号を必須にするかどうかも項目設定で選べます。

エラーで離脱されないようにするには、何を実装すればよいですか

まず項目タイプを内容に合わせ、形式の誤りが起きにくい状態を作ります。そのうえで、エラーは項目の近くに直し方をテキストで出し、色だけに頼らず、入力済みの内容を消さないようにします。具体的な文言例はフォームのエラーメッセージ例にまとめています。FORMLOVAではラベル・補足・型・制約を調整し、通常のエラー本文は固定辞書の実表示をプレビューで確認します。任意文へ書き換えられるとは扱いません。

スマホ最適化ガイドと、この記事はどう使い分ければよいですか

スマホ向けフォーム最適化ガイドは、スマホで離脱が起きる理由と、何を直すべきかという原則を広く扱う概要記事です。本記事はその続きの実装編で、項目タイプの選び方、何項目で割るか、画像の通し方、エラー後の復帰、チャット依頼の実例という「どう直すか」を手順で扱います。先にスマホ最適化ガイドで全体像をつかみ、実際に手を動かすときに本記事を使うのがおすすめです。

今回の試し方

実機で見つけた一つの問題を直し、同じ入力条件で再確認します。上のFreeの下書きから始め、公開後の保存テストとCVR計測は別に行ってください。

執筆・確認情報

この記事は、スマホでのフォーム入力体験を実装レベルで改善したい担当者向けの実務ガイドです。筆者はFORMLOVAの開発者です。項目タイプ別の入力体験、マルチページフォームと条件分岐（ページスキップ・フォーム終了・項目の出し分け）、住所項目の郵便番号自動入力、画像の自動圧縮（実効上限4MB、長辺リサイズ + JPEG再エンコード、非画像とHEICの扱い、許可形式との衝突回避）、公開前レビューといったFORMLOVAの仕様を2026年6月15日に確認し、それに基づいて整理しています。2026年6月26日は、Search Consoleの実測クエリに合わせてタイトル、メタディスクリプション、冒頭回答を更新しました。実機で出るキーボードや入力UI、アクセシビリティ適合の最終判断は、端末・ブラウザ・利用環境によって変わります。