入力フォームのデザイン・UX改善ポイント20選！図解・作例付きで解説
入力フォームのデザインは、ユーザー体験（UX）を左右する重要なポイントです。
どれだけ良いページを作っても、フォームが「使いづらい」「分かりにくい」状態だと、ユーザーはすぐに離脱してしまいます。
そこで、今回は入力フォームのデザインとUXを改善する具体的なポイントを20個ご紹介します。すべて図解や作例付きで紹介しますので、ぜひ入力フォーム改善の参考にしてください。
入力フォームのデザインが大切な理由
フォームのデザインが良くないと、ユーザーにストレスを与え、離脱につながってしまうからです。
ここでいう良いデザインは「オシャレ」という意味合いではなかく、ユーザーによって操作しやすい、分かりやすいと感じるデザインのことを指します。
実際に、BtoBサービスへの問い合わせや資料請求を経験した人（130名）を対象に行ったアンケート結果では、よかったと感じるフォームの特徴は以下になります。
この結果から、「入力が簡単」「見やすい」「操作しやすい」など、入力フォームを操作する時の快適さを重視していることが分かります。
このように入力フォームのデザインはユーザーの負担に直結します。これからデザインを改善するポイントを順番に解説しますので、自社のフォームと照らし合わせながら確認しましょう。
【入力フォーム全体】デザインを改善するポイント8つ
まずは、入力フォーム全体の改善ポイントを8つご紹介します。
これは特定の入力項目に依存しない基本となるポイントになりますので、最初にご確認ください。
- 入力フォームは縦に並べる
- 入力項目は上から自然な順序に並べる
- ラベルは項目の上に配置
- ラベルと入力項目をグループ化
- プレースホルダーは入力例だけ
- 必須・任意は一目で分かるように
- 入力中のフォーカスを目立たせる
- リンクは別タブで開く
1. 入力フォームは縦に並べる
入力項目を横並び（2カラム以上）に配置すると、ユーザーの視線が左右に揺れて、どこから入力すべきか分からないという問題が起こります。
入力項目を縦一列に並べることで、視線の流れが「上→下」になるので、ユーザーは入力で迷いにくくなり、入力漏れを減らす効果があります。（性・名などは例外的に2列でも可）
2. 入力項目は上から自然な順序に並べる
入力項目の順番が不自然だと、「次に何を答えればいいの？」「なんでこのタイミングでこれ？」と迷いや違和感を覚え、ストレスを与える原因になります。
そのため、入力項目は ユーザーの頭の中の流れ（自然に思い浮かべる順番） に合わせて配置します。基本的には「自己紹介の順番」に合わせると良いでしょう。
3. ラベルは項目の上に配置
ラベル（項目名）を入力欄の左側に置くと、入力欄とラベルの関係が分かりにくい、エラー発生時に何の項目が原因かが分かりにくくなります。
ラベルは必ず入力欄の上に配置し、項目とラベルを「1つのまとまり」として扱うようにしましょう。これで視線の流れが自然になり、ユーザーはスムーズに入力できるようになります。
4. ラベルと入力項目をグループ化
入力フォームの各項目が余白なく詰め込まれていると、ユーザーはどこからどこまでが同じ項目なのか判断しにくくなります。
入力項目とラベル、補足情報などを1つのグループとして捉え、グループ毎に十分な余白を設けることを意識しましょう。それだけでユーザーの負担を減らすことができます。
5. プレースホルダーは入力例だけ
プレースホルダーは入力を始めると消えるので、ラベルや説明文代わりに使うと、入力後に「何の入力欄だっけ」と分からなくなってしまいます。
プレースホルダーには「直感的にどのような形式で入力すれば良いか」が分かる入力例だけを表示するようにしましょう。
6. 必須・任意は一目で分かるように
必須が分かりにくいと、ユーザーの入力漏れを引き起こしやすくなります。すると、エラーが多発して、入力にストレスを感じ、離脱に繋がりやすくなってしまいます。
入力項目が必須なのか、任意なのかは、誰もが一目で分かるデザインにしましょう。任意項目をすべて削除して、「全項目必須です」と冒頭で宣言するのも良いです。
7. 入力中のフォーカスを目立たせる
入力欄のフォーカス（選択中）の見た目が弱いと、ユーザーが 「今どこを入力しているのか」 を見失いやすくなります。
入力中のフィールドが一目で分かるように、フォーカス時のデザインをしっかり強調します。枠線を太くする、ブランドカラーで強調するなどで構いません。（エラーとは異なる配色を使ってください）
8. リンクは別タブで開く
フォーム内のリンク（プライバシーポリシー・利用規約など）を同じタブで開く仕様だと、戻るボタンで入力内容が消える可能性があります。
リンクは必ず別タブ（別ウィンドウ）で開く設定にしてください。また、別タブで開くことが見た目に分かるようにしておくとさらに良いです。
【入力フォーム項目別】デザインを改善するポイント7つ
次は、入力フォームの中の各項目別に確認しておきたいポイントを7つご紹介します。
- 自由記入欄よりも選択式
- 選択肢には逃げ道を用意する
- 選択肢が少ないならラジオボタン
- 選択肢が多いならドロップダウン
- チェックボックスは縦に並べる
- ファイルアップローダーには対応形式・容量を明記
- 送信ボタンのラベルは具体的に
1. 自由記入欄よりも選択式
自由記入欄（テキストエリア）ばかり使うと、ユーザーは 「自分で考えて打つのが面倒、、」 という入力コストが発生します。
できるだけラジオボタンやチェックボックス、ドロップダウンなど、選択式のUIを採用しましょう。それだけで、ユーザーは「選ぶだけでいい」と軽い気持ちでフォーム入力を進められます。（お問い合わせ内容や備考などは除く）
2. 選択肢には逃げ道を用意する
選択式の項目で 逃げ道（当てはまらない時の選択肢） がないと、「自分に当てはまる選択肢がない、どうしよう」と不安になってしまいます。
そこで、選択肢には、「その他」や「未定」、「相談したい」などの当てはまらない場合に選べる逃げ道の選択肢を用意します。これでユーザーはとりあえず前に進めるようになります。
3. 選択肢が少ないならラジオボタン
プルダウン（ドロップダウン） を使うと、「タップして開くひと手間が発生する」「開けてみないと選択肢が見えない」デメリットが存在します。
選択肢が3〜5と少ない場合は、ラジオボタンを使うようにしましょう。ただし、フォームの見た目をコンパクトにまとめたいなどの理由があるならドロップダウンでも構いません。
4. 選択肢が多いならドロップダウン
選択肢が多い時にラジオボタンを使うと、すべての選択肢がフォーム上に表示されるため、ユーザーは「選べない」「探せない」のストレスを感じてしまいます。
この場合は、ドロップダウン（プルダウン）を使って選択肢を折りたたむのが最適です。これによってフォーム全体をコンパクトに保つことができます。（特に多い場合は、キーワードなどで選択肢を絞り込めるUIを採用しましょう。）
5. チェックボックスは縦に並べる
チェックボックスを横並び（2列以上） に配置すると、スマホで誤タップしやすい、チェック漏れしやすいなどの問題が発生します。
行につき1項目の縦並びにすることで、視線の流れが一定になり、見やすく操作しやすくなります。ただし、選択肢が非常に少ない場合は横並びでも問題ありません。
6. ファイルアップローダーには対応形式・容量を明記
ファイルアップロード欄に「どんなファイルを」「どれくらいの容量まで」アップできるのかが記載されていないと、エラーで戻される可能性が高まります。
ファイル添付は、入力項目の中でも離脱が発生しやすいので、対応形式（拡張子）と最大容量を明確に記載しましょう。（状況によって、ファイル数や縦横サイズなども記載）
7. 送信ボタンのラベルは具体的に
送信ボタンに「送信」のような抽象的なラベルを使ってしまうと、ユーザーは「押すと何が起きるの？」と不安を感じてしまいます。
送信ボタンのラベルには「次に起こるアクションが明確に伝わる文言」を記載しましょう。これで心理的ハードルが一気に下がり、ボタンを押しやすくなります。
【入力エラー】デザインを改善するポイント5つ
最後に入力エラーのデザインについて確認すべきポイントを5つご紹介します。
- 一目でエラーと分かるデザインに
- 入力エラーは項目の近くに表示
- エラーメッセージは具体的に
- 入力途中でエラーを表示しない
- 入力のヒントを事前に表示
1. 一目でエラーと分かるデザインに
エラー表示のデザインが分かりにくいと、 「どの項目が間違っているのか」 をすぐに理解できません。
赤色を使って、エラー発生時に 「誰が見てもエラーと分かる状態」 にするデザインにしましょう。ただ単に赤色にするだけでなく、より視覚的に目立つようにするとさらに良いですと。
2. 入力エラーは項目の近くに表示
フォーム送信後に入力エラーをフォーム上部にまとめて表示している場合がありますが、これはユーザーがエラーを修正しようとする意欲を下げる原因となります。
よって、入力エラーは必ず、該当項目のすぐ近くに表示してください。どこを直せばいいかが一瞬で理解でき、修正がスムーズ になります。
3. エラーメッセージは具体的に
「正しく入力してください」のような曖昧なエラーメッセージだと、ユーザーは「何をどう直せばいいのか」が分からず、入力が止まってしまう可能性があります。
エラーメッセージは「何が原因で、どう直せばいいか」 を明確に伝えることが大切です。ユーザーの入力負担を大幅に下げることが可能です。
4. 入力途中でエラーを表示しない
リアルタイムでエラーを表示することは大切ですが、入力途中（1文字目・2文字目など）でエラーを表示してしまうと、ユーザーは強いストレスを感じます。
そこで、エラーを出すタイミングは「入力が終わってから」または「フォーカスを外してから」にしましょう。まだ入力してるだけなのにエラーが出るストレスを軽減できます。
5. 入力のヒントを事前に表示
入力欄に何を書けば良いかのヒントが事前に表示されていないと、ユーザーに考えさせてしまうフォーム になり、離脱を誘発する原因になります。
そこで、入力のヒント（マイクロコピー、入力例、説明文など）を入力欄の近くに表示しましょう。説明が長すぎると逆効果なので、短く簡潔に記載するのがおすすめです。
入力フォームの離脱率をさらに下げるためには？
ここまで、入力フォームのデザインを改善するポイントについてご紹介しました。
入力フォームの離脱を減らして、CVにつなげるためには、デザイン以外の改善も必要です。
以下は、BtoBサービスへの問い合わせや資料請求を経験した人（130名）を対象に行ったアンケート結果による主なフォーム離脱理由です。
この結果から、入力フォームの離脱率を下げるために最も大切なことは、「入力項目を減らすこと」だと分かります。
ただし、お問い合わせ内容の質を考慮すると、安易に削れない項目も存在すると思います。その場合は、フォームの項目を見直し→計測データから改善のサイクルを地道に続けていくしかありません。
formmateなら項目を減らして「まずCV→あとで深掘る」フォーム体験を実現
- 項目は削れないが、離脱率は下げたい
- 営業部門も納得する、質の高いリードを効率的に獲得したい
こうした課題を抱える企業には、株式会社Coneが提供するセールスフォームツール 「formmate」 がおすすめです。
「formmate」は、本調査で明らかになった「入力者の心理的・物理的負担」を解消し、インバウンドマーケティングでの商談創出を最大化するフォームツールです。
formmateには以下3つの特徴があります。
① ユーザーの負担を最小限に抑え、まずCVを最大化
調査結果では、フォーム入力者が最も重視するのは「入力が簡単だった」（64.6%）というUX要素でした。
formmateは、最初のフォーム項目を「会社名・メールアドレス・氏名」といった最低限の必須項目に絞り込むことも可能です。
Googleフォームのような感覚でだれでも簡単にフォームを作成することができるので、初めてでも安心してお使いいただけます。
ユーザーの心理的・物理的負担を軽減し、調査で浮き彫りになった高い離脱率（76.9%）を根本から改善することができます。
② 資料提供後に「必要な情報」を自動で深掘り
多くの運用者が求める「年間予算」や「部署名」などの深掘り情報は、検討初期段階（資料請求層）のユーザーにとって最も抵抗を感じる項目でした。
formmateは、リードが資料請求を完了した後、サンクスページやフォローメール内で日程調整ツールを自動表示します。
商談予約や、追加資料のダウンロードといった次のステップに進む時にのみ、部署名や導入予算といった「営業に必要な追加情報」を別のフォームやヒアリングとして聞く設計が可能です。
また、Web会議の予約が入らなかった見込み顧客にはアンケートフォームを表示し、回答を回収することも可能です。
このように、項目を分けて聞くことでCVRを下げずに、営業担当が求める質の高い情報を段階的に補完できます。
③ 熱量が高いリードを逃さない「商談化まで自動連動」
運用者側がフォーム改善で最も重視する指標は「商談化率」（45.6%）です。
formmateは、資料請求後すぐに担当者の空き日程を提示し、ユーザーはその場で商談予約まで完了できます。また、送付した資料の閲覧状況をトラッキングし、「資料を再度開いた」など関心が高まったタイミングを営業（Slackなど）に通知します。
リードの熱量が高いうちに商談へ繋げる自動化フローにより、リードの質と営業効率を同時に高めることができます。
formmateは、単にフォーム項目を削るのではなく、「項目設計とUXデザインの両立」を通じて、BtoBマーケティングにおける「量を取るか、質を取るか」というジレンマを解消します。
「項目は削れないが、離脱率は下げたい」「営業部門も納得する、質の高いリードを効率的に獲得したい」とお考えであれば、ぜひ一度formmateのサービスサイトをご覧ください。
formmateサービス紹介資料ダウンロードフォーム
formmateのサービス紹介資料は以下フォームよりダウンロードいただけます。
※ 本フォームもformmateで作成されていますので、ご体感ください。
まとめ
今回は、入力フォームのデザインを改善するためのポイントを20個ご紹介しました。どれも図解や事例とセットで紹介してますので、イメージしやすかったのではないでしょうか。
フォームの最適化は、見た目を整えることが目的ではありません。入力時のストレスを減らし、「迷わず・止まらず・不安なく」送信まで進める体験を設計することが重要です。実際に自分でフォーム入力を一通り体験し、「どこで迷うか」「どこで手が止まるか」を確認してみるだけでも、多くの改善点が見えてきます。
なお、以下ではBtoBサイトのフォーム送信率を高めるための10の具体的な改善方法を解説していますので、あわせてご覧ください。
