フォーム・入力UIのデザインガイド：離脱を防ぐ設計の10原則

フォームはアプリにおけるユーザーの「摩擦ポイント」の代表格です。登録・購入・設定など、ほとんどの重要なユーザーフローにフォームが含まれています。フォームのUIが悪ければ、ユーザーは途中で離脱し、コンバージョンが失われます。本記事では、モバイルアプリのフォームUIを改善するための10の設計原則を解説します。

原則1：入力フィールドは最小限にする

最も効果的な改善は「フィールドを削除すること」です。本当に必要な情報だけを最初に収集し、それ以外は後から追加取得する設計にしましょう。

研究によれば、フォームのフィールド数が減るごとにコンバージョン率が向上します。5フィールド→3フィールドへの削減で、登録完了率が20〜30%向上したケースも報告されています。

原則2：フローティングラベルを採用する

テキストフィールドのラベルを入力中に上部に小さく移動させる「フローティングラベル」（Material Designパターン）は、スペースの節約とユーザビリティの向上を両立します。

入力前はラベルがプレースホルダーとして表示され、入力開始後にフィールド上部に縮小して移動することで、入力中も何を入力すべきかが常に確認できます。

原則3：適切なキーボードタイプを指定する

モバイルでは、入力内容に応じた適切なキーボードを表示することが不可欠です。

• 電話番号 → numpad（数字キーボード）
• メールアドレス → emailAddress（@キー付き）
• URL → url（.comキー付き）
• 数値（小数あり） → decimalPad
• 検索 → search（returnキーが「検索」に変わる）

適切なキーボードタイプが設定されていないと、ユーザーはキーボードを手動で切り替える余分な操作が必要になります。

原則4：リアルタイムバリデーション

入力内容のエラーをフォーム送信後ではなく、入力中（または入力完了後）に即座に表示することで、ユーザーのストレスを大幅に軽減できます。

良いバリデーションUI：

• 入力フィールドのフォーカスが外れた時点でバリデーション
• エラー時：赤枠＋アイコン＋具体的なエラーメッセージ
• 成功時：緑チェックアイコン（特に重要なフィールドのみ）
• パスワード強度：入力中にリアルタイムでバー表示

避けるべきエラーメッセージ：

• ×「入力内容が正しくありません」（何が間違っているかわからない）
• ○「メールアドレスの形式が正しくありません（例：example@mail.com）」

原則5：パスワードの表示/非表示切り替え

パスワードフィールドには「目のアイコン」による表示/非表示切り替えを必ず実装しましょう。スマートフォンでの入力ミスは多く、確認手段がないとユーザーは何度も入力し直すことになります。

原則6：自動補完と入力サポート

• 住所入力：郵便番号から住所を自動入力
• 名前：過去の入力や連絡先からのサジェスト
• クレジットカード：カメラスキャン対応
• 生年月日：テキスト入力よりもピッカーUIが直感的

原則7：明確なフォームのタイトルと説明

フォームの目的を冒頭で明確に伝えることで、ユーザーの入力への心理的ハードルを下げます。「なぜこの情報が必要か」を簡潔に説明するサブテキストも効果的です。

原則8：進捗の可視化

複数ステップのフォームには、プログレスバーまたはステップインジケーター（1/3・2/3・3/3）を表示し、「終わりが見える」設計にします。ステップ数は最大5ステップ以内が理想です。

原則9：フォームの入力状態を保存する

ユーザーが誤って画面を閉じたり、別のアプリに切り替えたりしても、入力内容が消えない設計にすることで、ユーザーの貴重な時間を守れます。

原則10：送信ボタンのデザイン

送信ボタンは、すべての必須フィールドが入力されるまで非活性（disabled）にし、条件が満たされた時点で活性化する設計が推奨です。また、送信中はローディングアニメーションを表示し、ユーザーに「処理中」であることを伝えましょう。

まとめ

フォームUIの改善は、アプリのビジネス指標に直結する最も費用対効果の高いUX改善の一つです。UI ZUKANでは、フォームの事例を豊富に収録していますので、ぜひ参考にして自社アプリのフォームを改善してください。