スマートフォンでWebサイトを見る人が多数派になった今、フォームのデザインは成果を大きく左右します。
商品に興味を持ってくれたユーザーでも、入力しにくいフォームでは途中で離脱してしまいます。
つまり、BtoC企業にとって、スマホのフォームデザインの最適化は売上に直結する施策です。

ただし、成果が出るフォームは「入力欄が使いやすい」だけでは足りません。
フォームを開いた瞬間の印象、入力中のエラー対応、送信後のサンクスページまで、フォーム体験全体を設計することが大切です。

本記事では、スマホユーザーがストレスなく入力を完了できるフォームの作り方を解説します。

スマホのフォームデザインが重要な理由

ここではモバイルファーストの背景やフォーム離脱の影響、レスポンシブ対応の必要性について解説します。

モバイルファーストの時代背景

Googleは2018年からモバイルファーストインデックスを導入しています。検索順位はスマホ版ページの内容をもとに評価されるため、モバイルフレンドリーでないサイトはSEOで不利になります。

BtoC企業のターゲット層は、日常的にスマホで情報収集を行います。
また、商品の比較検討から購入申し込みまでスマホで完結させる人が増えているため、フォームがスマホに最適化されていないと、購買意欲の高いユーザーを逃します。

さらに、総務省の調査によると、スマホのネット利用率は年々上昇傾向にあります。
特に20代から40代では9割以上がスマホを主要端末として使用していることから、スマホのフォームデザインの重要性は今後さらに高まるでしょう。

参照：総務省｜令和7年版情報通信白書

フォーム離脱がCVRに与える影響

フォームの入力項目が1つ増えるごとに、コンバージョン率は1〜2%低下すると言われています。

なぜなら、ユーザーは入力の手間を嫌うからです。
特にスマホでは画面が小さく、タイピングも面倒なため、PC以上に離脱リスクが高まります。

加えて、途中で離脱したユーザーが再訪問する確率は低いです。一度離脱されると、その顧客を取り戻すには追加コストが発生します。
したがって、最初の接点でスムーズに入力完了させることが重要です。

▼ 関連記事：フォーム離脱率を下げる方法10選｜原因・計算式・EFO対策を解説

レスポンシブデザインの必要性

レスポンシブデザインとは、画面サイズに応じてレイアウトが自動調整される設計手法です。
この方式なら、PC用とスマホ用で別々のページを作る必要がありません。そのため、管理コストを削減できます。

また、Googleもレスポンシブデザインを推奨しており、SEO評価にプラスの影響を与えます。
同一URLでコンテンツを提供できるため、被リンクの分散も防げます。さらに、ユーザー体験の一貫性が保たれます。

ただし、レスポンシブ対応しているだけでは不十分です。
フォーム部分が適切に最適化されていないと、入力時のストレスは解消されません。
つまり、フォーム要素一つひとつの設計が重要になります。

スマホのフォームデザインの基本設計

ここではタップしやすいサイズ、フォントサイズ、ラベル配置のルールについて解説します。

タップしやすいサイズの目安

入力欄やボタンの高さは、48ピクセル以上を確保しましょう。

この数値は、指でタップする際の操作性を考慮した基準です。
小さすぎるボタンは誤タップを招き、ユーザーにストレスを与えてしまいます。
送信ボタンは目立つサイズで配置し、迷わず押せるようにしましょう。

また、ラジオボタンやチェックボックスも同様です。
タップ領域を広げる工夫が必要になります。具体的には、HTMLのlabel要素を活用しましょう。
そうすることで、テキスト部分をタップしても選択できます。こうした細かな配慮が、入力完了率の向上につながります。

フォントサイズと視認性の確保

入力欄の文字サイズは、16pt以上を目安に設定しましょう。

なぜなら、16pt未満だとiPhoneのSafariが自動でズームインするからです。意図しないズームはユーザーの操作を妨げるため、離脱の原因となります。したがって、視認性と操作性の両面から適切なサイズ設定が求められます。

さらに、高齢者をターゲットにする場合は、より大きなサイズを検討しましょう。
文字が読みやすいだけで、入力ミスや離脱を減らせます。つまり、ターゲット層に合わせた柔軟な設計が、CVR向上の近道です。

出典：https://form.run/media/contents/form-creation-tools/smartphone-inputform/

ラベルと入力欄の配置ルール

スマホでは、ラベル（項目名）と入力欄を上下に配置しましょう。
なぜなら、PC向けの横並びレイアウトはスマホの狭い画面では崩れやすいからです。

ラベルが入力欄と離れて表示されると、どの項目に入力すべきか分かりにくくなります。
そのため、上下配置にすることで視線の移動を最小限に抑えられます。

加えて、入力欄の幅は画面いっぱいに広げると操作しやすくなります。
余白を適度に設けつつ、タップしやすい領域を確保しましょう。

▼ 関連記事：UXフォーム最適化～7つの実践テクニック～

フォーム開始からCTAまでを1〜2スクロール以内に収める

スマホのフォームは、入力欄の始まりから確認（送信）ボタンまでを1〜2スクロール以内に収めるのが理想です。

縦に長いフォームは、開いた瞬間に「大変そう」と感じさせ、入力前の離脱を招きます。
反対に、ゴールが見える長さであれば、ユーザーは「すぐ終わりそう」と感じて入力を始めやすくなります。
1〜2スクロールに収めるための具体策は、次のとおりです。

入力負担を軽減するUI設計

ここでは入力項目の絞り込み、キーパッド最適化、住所自動入力について解説します。

入力項目の絞り込み方

フォームの質問項目は、必要最低限に絞ることが鉄則です。
実際、不要な項目を削除するだけでコンバージョン率が改善した事例は多数あります。

まず、各項目が本当に必要かどうかを見直しましょう。
「あれば便利」程度の項目は、思い切って削除することをおすすめします。

また、必須項目と任意項目を明確に区別しましょう。任意項目は後回しにできる設計も有効です。

さらに、項目数が多い場合はステップ形式のフォームを検討してください。一画面に表示する項目を減らし、段階的に入力させます。そうすれば、心理的負担を軽減できます。加えて、進捗バーを表示すれば完了までの見通しを持てます。

キーパッド最適化の実装方法

入力内容に応じて、最適なキーパッドを自動表示させることが重要です。
具体的には、HTMLのinput type属性を適切に設定するだけで実現できます。

この設定により、ユーザーはキーボードを切り替える手間が省けるため、小さな工夫ですが入力完了率に大きく影響します。
特に電話番号やメールアドレスの入力では効果を実感しやすいでしょう。

住所自動入力とハイフン省略

住所入力は離脱ポイントになりやすいため、郵便番号から住所を自動入力できる機能は、ユーザーの負担を大幅に軽減します。
具体的には、7桁の数字を入力するだけで都道府県から町名まで自動で補完されます。

この機能はJavaScriptライブラリやEFOツールで簡単に実装できます。
そのため、手入力の手間が減るだけでなく入力ミスも防止できます。したがって、優先的に対応すべき項目といえます。

また、郵便番号や電話番号のハイフン入力は省略させましょう。
なぜなら、ハイフンの位置を間違えるとエラーになってしまい、ユーザーのストレスが増してしまいます。
したがって、数字のみの入力を受け付ける設計が理想的です。

▼関連記事：入力フォームの住所欄で離脱を防ぐ設計法

SNSアカウントを利用した登録・ログイン・自動入力

会員登録や申し込みのフォームでは、SNSアカウント（LINE、Google、Apple、Yahoo! JAPAN IDなど）を使った登録・ログインの導入も有効です。

SNSアカウント連携には、次のメリットがあります。

• 入力の手間を大幅に減らせる：名前やメールアドレスなどを、SNSに登録済みの情報から自動入力できる
• パスワード作成が不要になる：新しいパスワードを考える・覚える負担がなくなる
• 入力ミスが減る：登録済みの正しい情報が使われるため、メールアドレスの打ち間違いなどを防げる
• 再訪時のログインが簡単になる：ワンタップでログインでき、リピート購入や再申し込みがスムーズになる

導入時は、次の点に注意しましょう。

• ターゲット層がよく使うSNSを選ぶ（若年層ならLINE、幅広い層ならGoogleやAppleなど）
• SNS連携ボタンと通常のメール登録を並べ、どちらも選べるようにする
• 取得する情報と利用目的を明記し、ユーザーの不安を取り除く
• 勝手に投稿されないことを明記する（「SNSに投稿されることはありません」など）

SNSアカウント連携は商品の購入や会員サービスとの相性がよく、スマホでの登録完了率の改善が期待できます。

エラー表示と入力補助の工夫

ここではリアルタイムバリデーション、placeholder、選択式UIの活用について解説します。

リアルタイムバリデーションの効果

送信後にまとめてエラーを表示する方式はストレスを与える可能性があるため、入力エラーは、その場で即座に表示することが望ましいです。

リアルタイムバリデーションを導入すれば、入力直後にエラーを通知できます。
そのため、ユーザーはすぐに修正できるので、フォーム全体を見直す手間が省けます。
その結果、途中離脱を大幅に減らすことができます。

また、エラーメッセージは具体的で分かりやすい表現を心がけましょう。
例えば、「入力エラー」ではなく「半角数字で入力してください」と明示します。こうしたメッセージが、完了率向上に貢献します。

▼関連記事：リアルタイムバリデーションとは？基礎から実装方法を解説

エラーはページ上部と該当入力欄の両方に表示する

送信ボタンを押したあとにエラーがある場合は、ページ上部と該当する入力欄の両方にエラーを表示しましょう。

スマホでは一度に見える範囲が狭いため、送信ボタン付近にいるユーザーは、上の方の入力欄のエラーに気づけません。
「送信できないのに理由が分からない」状態は、離脱の大きな原因になります。

さらに、長いページでは、エラー発生時にページ上部（または最初のエラー項目）まで自動でスクロールして戻す設計にしましょう。

ユーザーが自分で上までスクロールしてエラーを探す手間がなくなります。
ページ上部のエラー一覧から、各項目へジャンプできるリンクを付けるとより親切です。

また、エラー表示は赤色だけに頼らず、アイコンや文字でも伝えましょう。
色の見分けがつきにくい人にも分かりやすくなり、アクセシビリティの向上にもつながります。

placeholderの活用ポイント

入力例はplaceholder属性で表示すると、フォームがすっきりします。なぜなら、ラベルの横に入力例を併記する方式はスマホでは縦長になりがちだからです。

具体的には、placeholderに「例：090-1234-5678」のような形式を示しましょう。
そうすれば、ユーザーは入力形式を一目で理解できるため、迷いが減ります。

ただし、placeholderはフォーカス時に消えます。重要な説明はラベルに記載すると良いでしょう。

また、placeholderの文字色は薄いグレーが一般的なので、入力済みのテキストと区別しやすいです。つまり、デザインと機能性のバランスを考慮した設定が求められます。

プルダウンと選択式UIの使い分け

選択肢が多い項目は、プルダウンメニューを活用しましょう。データの品質も向上します。

例えば、都道府県や生年月日など選択肢が決まっている項目はプルダウンが最適です。
一方、性別や支払い方法など選択肢が少ない場合はラジオボタンが操作しやすいです。
このように、項目の特性に応じて適切なUIを選択しましょう。

入力前後の体験を最適化するポイント

フォームの成果は、入力欄の使いやすさだけでは決まりません。
ここでは、フォームを開く前の読み込み速度から、送信後のサンクスページまで、入力前後の体験を最適化するポイントを解説します。

表示速度を改善する

フォームページの表示が遅いと、入力を始める前にユーザーが離脱してしまいます。
スマホは通信環境が安定しないことも多いため、表示速度は特に重要です。

表示速度は、Googleが無料で提供しているPageSpeed Insightsで計測できます。
URLを入力するだけで、モバイルでの表示速度のスコアと改善点が分かります。

主な改善策は次のとおりです。

• 画像を圧縮する・次世代フォーマット（WebPなど）を使う
• 不要なCSSやJavaScriptを削除する
• JavaScriptを遅延読み込みする
• フォームに関係のない外部タグを減らす

入力前に所要時間と項目数を伝える

フォームの冒頭に「入力は約1分で完了します」「入力項目は5つです」のように所要時間や項目数を示すと、入力を始めるハードルが下がります。

あわせて、「無料」「しつこい営業はしません」など、ユーザーが不安に思いやすい点への回答を短く添えると効果的です。
ただし、説明が長くなるとフォームが下に押しやられるため、1〜2行に収めましょう。

ブランドイメージとの一貫性を保つ

フォームのデザインは、サイト全体のブランドイメージと統一しましょう。

LPや商品ページから遷移した先のフォームだけ色やフォントが違うと、ユーザーは「別のサイトに移ったのでは」と不安を感じます。
ブランドカラーをボタンに使う、ロゴを表示するなど、デザインの一貫性を保つことで安心して入力を進めてもらえます。

一方で、装飾を増やしすぎると入力欄が見えにくくなります。
ブランドらしさを出しつつ、入力のしやすさを優先するバランスが大切です。

ダークモードに対応する

スマホでは、画面を黒基調にするダークモードを使うユーザーが増えています。
フォームがダークモードに対応していないと、入力欄の枠線や文字が見えにくくなることがあります。

CSSの「prefers-color-scheme」を使えば、端末の設定に合わせて配色を切り替えられます。
ダークモードでも、入力欄・ラベル・エラー表示・ボタンがはっきり見えるか、実機で確認しておきましょう。

確認画面は必要に応じて使い分ける

確認画面は入力ミスを防げる一方で、ステップが1つ増えるため離脱の原因にもなります。

項目数が少ないフォームでは、確認画面をなくし、送信ボタンの近くで入力内容を見直せるようにする方法もあります。
反対に、金額や契約内容を含む申し込みでは、確認画面で内容をしっかり確認してもらうほうが安心です。
フォームの目的に合わせて判断しましょう。

サンクスページで次の行動につなげる

CTA押下後に表示されるサンクスページ（完了ページ）も、フォーム体験の一部です。
「送信できたのか分からない」状態は、二重送信や問い合わせの原因になります。

サンクスページには、次の内容を載せましょう。

• 送信が完了したことを明確に伝えるメッセージ
• 今後の流れ（「〇営業日以内にご連絡します」など）
• 確認メールが届かない場合の案内
• 関連コンテンツや会員登録、SNSフォローなど次の行動への導線

サンクスページは、ユーザーの満足度が高いタイミングです。
次の行動につなげることで、LTV（顧客生涯価値）の向上も期待できます。

スマホのフォーム改善で成功した事例

ここでは実際に成果を上げた企業の事例を紹介します。

製薬業界の事例：天藤製薬

「ボラギノール」で知られる天藤製薬は、2022年にEC事業を立ち上げ、健康食品や化粧品を販売しています。
主力商品の新規獲得では、広告の配信面やクリエイティブを改善し、獲得単価を下げてきました。
しかし、ある水準からは獲得単価が下がらなくなっていました。

そこで注目したのが、注文のしやすさや購入直前の後押しといった「購入体験」。
広告の改善だけでなく、ユーザーがストレスなく注文を完了できるかを見直すため、チャット型EFOツール「GENIEE CHAT」を導入。

導入後は、ジーニーの担当者が改善策を提案して実装し、翌週にはA/Bテストの結果を報告する流れで、細かな改善を積み重ねました。
その結果、CVRは約1.4倍に改善し、獲得単価も下がりました。
フォームを含む購入体験の見直しが、新規獲得の成果につながりました。

▼ 導入事例：CVR約1.4倍を実現！天藤製薬がパートナーと実践する『購入体験の見直し』とは？

金融業界の事例：東急カード

東急カードはカード申込の促進に取り組んでいました。しかし、スマホからの完了率に課題がありました。そこで、フォーム改善ツールを導入しました。

入力フォームのUIを最適化しました。スマホで操作しやすいデザインへ刷新したのです。入力補助機能も強化しました。

その結果、申込完了率が6.9ポイント改善しました。フォームの使いやすさがCVR向上に直結したのです。

出典：スマホのフォームを改善したら、申し込み率が6.9pt改善しました

不動産業界の事例：タカラレーベン

タカラレーベンは資料請求フォームを運用していましたが、スマホの離脱率が高い課題がありました。
そのため、UI改善に着手。スマホ画面に最適化したレイアウトを採用し、入力ステップも簡略化しました。

ユーザーの負担を軽減した結果、スマホのCVRが167%改善し、スマホの入力フォーム最適化の効果が実証されました。

出典：最大167%のCVR改善を実現。古いシステムで諦めていたフォームの改善はなぜ実現できたのか

よくある質問（FAQ）

Q1. スマホ フォームデザインで最も重要なポイントは何ですか？

入力項目を必要最低限に絞ることが最も重要です。
なぜなら、項目が増えるほど離脱率は上昇するからです。そのため、本当に必要な情報だけを収集する設計を心がけてください。
さらに、タップしやすいサイズ（48px以上）とフォントサイズ（16pt以上）の確保も欠かせません。

Q2. レスポンシブデザインに対応していれば十分ですか？

レスポンシブ対応は必要条件ですが、十分条件ではありません。
なぜなら、全体のレイアウトがスマホに適応していてもフォーム要素が最適化されていなければ離脱は防げないからです。
したがって、入力フィールドのサイズやキーパッドの設定など細部まで配慮することが重要です。

Q3. フォームの入力項目は何個以内が理想ですか？

明確な基準はありませんが、5〜7項目程度が目安とされています。
項目数が多い場合はステップ形式に分割して心理的負担を軽減しましょう。
また、任意項目は極力減らし必須項目のみに絞ることをおすすめします。

Q4. EFOツールを導入するメリットは何ですか？

EFO（エントリーフォーム最適化）ツールを導入すると、住所自動入力やリアルタイムバリデーションなどの機能を簡単に実装できます。
そのため、開発コストを抑えながらフォームの使いやすさを大幅に向上させられます。
さらに、離脱率や完了率のデータ分析機能を備えたツールも多いです。

▼ 関連記事：EFOとは？施策11選・成功事例・ツール費用を解説

Q5. フォーム改善の効果はどのくらいで現れますか？

改善内容にもよりますが、早ければ1〜2週間で効果が見え始めます。
具体的には、A/Bテストを実施しながら段階的に改善を進めると確実にCVRを向上させられます。
つまり、一度の大幅な変更よりも小さな改善を積み重ねるアプローチが効果的です。

▼ 関連記事：入力フォーム改善でCVR向上｜今すぐ使える20のチェックリスト

まとめ

スマホ フォームデザインの最適化は、成果に直結する重要な施策です。
モバイルファーストの時代において、スマホユーザーがストレスなく入力できるフォームは必須の要件となっています。

一つずつ改善することで、フォームの離脱率は確実に下がります。
まずは自社フォームの現状を分析し、優先度の高い項目から着手してみてください。

スマホでの入力フォームを最適化して成果をあげるなら「GENIEE CHAT」

株式会社ジーニーでは、入力フォームを改善し、コンバージョン率を向上させるための「GENIEE CHAT」を提供しています。
Webサイト上に設置している入力フォームをチャット型に置き換えることで、スムーズなフォーム入力が可能になり、その結果、フォーム離脱率を低減し、入力完了率の向上が期待できます。

詳しくはこちらから資料ダウンロード

GENIEE CX NAV1 編集部

株式会社ジーニーのCVG事業部が運営しています。
最新のWebマーケティングのノウハウや、EFO・CVR改善に関する情報を発信しています。

【株式会社ジーニー】
チャット型EFOツール 「GENIEE CHAT」 を提供し、入力完了率の向上や離脱防止、CVR改善に貢献しています。