入力フォームUIまとめ ✅ 18項目

株式会社  クロコ　デザイナーのカメザワです🐢
入力フォームを組む際の備忘録として。
今まで、デザイン制作時、他サイトを参考にしつつも何となくで作ってしまっていたと反省しつつ、自分用にまとめてみました。
(基本的な場合であり、例外もあります。)

どんなに他のコンテンツを作り込んで、
会員登録や購入を検討しているユーザーをフォームまで誘導できても、
フォームの不備で離脱させるのはもったいない。
ユーザーのコンタクトポイントである入力フォームは重要！

入力フォームが必要とされる部分 _______________
▶︎会員登録またはログイン
▶︎お問い合わせ
▶︎クレジット情報追加
___________________________________________________

注意すべき ✅  18項目

✅ 入力ステップを入れる
現在地を示し、入力がどの程度のボリュームかを把握できるようにして、離脱を防ぐ💨

✅ (登録時の)パスワードなど入力メッセージを明確に
○「半角英数字6文字以上で入力してください。」etc
×「パスワードが不正です。」どのような不正なのか分かりにくい😢

※ログイン時ではセキュリティの観点でどういう不正か
　あえてエラーに詳細出さないこともあります。

✅ プレースホルダーをラベルとして活用しない

✅ 必須・任意項目はわかりやすく
「必須」「任意」の表示は両方表示されていることが望ましい。
※＊はユーザーにとってわかりづらいので「必須」と表示するのが適切。
「任意」は目立たないデザインに。

✅ 関連項目ごとに見出しをつける
✅ 関連のあるラベルと入力欄はグループ化する
例）お客様情報の項目の中にお名前、メールアドレス、電話番号
例）法人情報の項目の中に法人番号、法人名

✅ 文脈に沿った一般的な順序で並べる

✅ エラー表示はわかりやすく
フォームの上部にエラーメッセージを表示する他に、
どこにエラーがあり、どのように修正すべきかを具体的に明示する。
エラーが出ている入力フィールドを強調させる。

✅ アクションボタンのテキストは何が起こるか明確にする
× 進む
○ 登録する や 確認する

✅ 入力フォームにフォーカスさせる

✅ エラー表示がリアルタイムで表示される

✅ 郵便番号検索
（ユーザーの入力をサポートできるような機能を設ける）

✅ 余計なリンクは設けない
（リンクがあると離脱率が上がってしまう)

✅ スマホとPCにおけるフォームは別物として考える
（ユーザーの利用シーン・手段が異なるため）

✅ アクションボタンは必須項目の入力が完了するまでアクティブにしない（アクティブ/非アクティブ状態を明確に）

✅ 入力項目は最小限に留める

✅ 処理に時間がかかる場合はローディングを使用する

✅ 電話番号などは全角・半角の自動変換する
(=オートコンプリート)

▼UIを意識した制作依頼をご検討の方はこちらから

完全オリジナルのWebデザイン・ホームページ制作 ｜ 株式会社クロコ