フォームの入力欄は分割せず、統合するべき5つの理由

入力欄を単一にするか、もしくは複数に分割するかどうかは、フォームを作るうえでの論点のひとつです。

よくあるのは、名前の「姓」と「名」、郵便番号の「上3桁」と「下4桁」。
その他メールアドレスの@前後、電話番号、住所の都道府県や地名番地、建物名などが代表例です。

結論から言えば、当社ではなるべく入力フォームは分割せず、ひとつの入力欄として統合するべきと考えています。
以下、その理由を紹介したいと思います。

入力項目を統合するべき5つの理由

理由1: 項目が少なく見える

ユーザーがフォームにたどり着いた時の印象に関わる部分です。

ぱっと見た際の印象で、ユーザーはそのフォームに入力を開始するか、それとも離脱してしまうかを判断します。
入力欄の数が多いフォームは煩雑そうに見えてしまいます。

トータルの入力量が同じであっても、入力欄が統合されているフォームのほうがシンプルに見えるでしょう。

入力欄を分割した場合(左)と、統合した場合(右)。入力する内容は同じだが、後者のほうがすっきりした印象がある

入力欄を分割した場合(左)と、統合した場合(右)。入力する内容は同じだが、後者のほうがすっきりした印象がある

理由2: 移動の手間が減る

入力欄が多い場合のもうひとつのデメリットは、移動の手間が発生することです。

複数の入力欄があるフォームでは、ひとつの項目に入力を終えたら、マウスやTABキーを使って次の項目へ移動する必要があります。
当然、その移動の手間は項目の数に比例して多くなります。

項目間の移動、些細な事に思えますが、塵も積もれば山となるように、ユーザーのストレスは蓄積していくのです。

項目間の移動回数を矢印で示した図。入力欄が分かれている例では移動は12回発生したのに対し、統合されているフォームでは4回にとどまった。

項目間の移動回数を矢印で示した図。入力欄が分かれている例では移動は12回発生したのに対し、統合されているフォームでは4回にとどまった。

理由3: 余計な手間を生む可能性がある

入力欄がわかれていることは、項目間の移動以外にも、ユーザーのミスによる余計な手間を生んでしまう可能性があります。

例えば、入力欄が分かれていることに気づかず、ユーザーがその先まで入力してしまう場合。

また、全体を俯瞰しにくいスマートフォンのフォームでは、ミスに気付かずそのままフォーム送信してしまう場合も考えられるでしょう。

例えば、名前の入力欄が分かれているのに、最初の入力欄にすべての名前を入力してしまうといったミスは起こりがち。 ただし入力欄のデザインや配置である程度予防することは可能。

例えば、名前の入力欄が分かれているのに、最初の入力欄にすべての名前を入力してしまうといったミスは起こりがち。
ただし入力欄のデザインや配置である程度予防することは可能。

スマートフォンの場合、ズームなどで前後を俯瞰できないことから、ミスを引き起こす場合も。

スマートフォンの場合、ズームなどで前後を俯瞰できないことから、ミスを引き起こす場合も。

送信前にミスに気づいたかどうかにかかわらず、一旦フルネームを入力したユーザーは、入力内容の一部し、次の欄に入力しなおさなければならなくなり、これはユーザーにとってスムーズなフォーム入力を妨げる手間となりうるでしょう。

理由4: どこで区切るべきか迷わない

ユーザーがどう入力して良いか迷ってしまうことは、離脱につながる原因のひとつです。

例えば下記は、Amazonの配送先住所の入力フォームです。
郵便番号と都道府県以降の住所が「住所1」「住所2」という形で分割されています。

Amazonの住所入力フォーム

Amazonの住所入力フォーム

このようなフォームでは、住所のうち、どこからどこまでを分けて入力すれば良いのかわからず、ユーザーは戸惑ってしまうのではないでしょうか。

また、イレギュラーな構成の住所の存在も考えなくてはなりません。
例えば、弊社の所在地には「丁目・字」が存在しません。日本各地には丁目や番地が存在しない住所はたくさん存在します。

このような住所を入力する場合、どんなにラベルや補足を具体的に表記されていても、ユーザーの迷いをなくすことは難しくなります。

日本郵政のフォーム

日本郵政のフォームでは、サービスの特性上、住所がかなり細かく分割されている。住所に該当する情報がない場合は「なし」を選択できるような配慮がある

ところが、そもそも住所の入力欄を1つしか用意されていなければ、丁目や番地、建物名があろうとなかろうと、その入力欄に記入すれば入力が完成しますし、ユーザーが悩むことはありません

理由5: どこまで必須なのかがわかりにくい

加えてユーザーが迷ったりミスしてしまうことのひとつに、複数に分かれた入力欄のうち、どこまでが入力必須かを判断することが挙げられます。

下記のフォームでは、「お名前」が必須であることから、分割された「姓」と「名」の両方が入力必須のフォームです。
ただし、そのようにすべてのユーザーが解釈するとは限りません。あるユーザーは、この必須マークが「姓」のみに係るように感じるかもしれないのです。

「お名前」が必須であることから、当然「姓」と「名」の両方が入力必須だが、必須が係る内容をすべてのユーザーが正しく把握するとは限らない。 「※必須」のマークが「姓」だけに係っていると解釈するユーザーもいるかもしれない。

「お名前」が必須であることから、当然「姓」と「名」の両方が入力必須だが、必須が係る内容をすべてのユーザーが正しく把握するとは限らない。
「※必須」のマークが「姓」だけに係っていると解釈するユーザーもいるかもしれない。

このように、必須かどうかの解釈に差異が生まれてしまう可能性を、分割されたフォームは持っています。

ただし当然、デメリットもある

以上、フォームの入力欄はできるだけ統合したほうが良い5つの理由についてお伝えしました。
良いことづくめのようですが、入力欄を統合することで生まれるデメリットも少なからず存在します。

おもに入力フォーマットに関する下記のデメリットについて把握し、然るべき対策をとることが必要です。

入力フォーマットによるエラーが増える可能性

入力欄を統合することで、入力に自由度が生まれます。つまり例えば郵便番号や電話番号にハイフンを含めるかどうかといった表記のゆれが生じることになります。

電話の表記パターン

電話の表記パターン

表記の違いによるエラーは返さず、ハイフンを含めても含めなくても、どちらの場合でも入力を受け付けるようなフォームにしておくことが肝心です。

フォーマットに迷いがうまれる場合がある

また、自由度が生じることで生まれる迷いもあります。

ハイフンは必要か否か、たとえどちらも受け付ける処理になっていたとしても、補足や入力例で何らかの記述があるとユーザーが迷うことがありません。

入力例や補足を表示しているフォームの例

入力例や補足を表示しているフォームの例

最後に:入力項目を分割しなくてはならない場合もある

いかがだったでしょうか。フォームの入力欄はできるだけ統合したほうが良い5つの理由、そして踏まえておくべきデメリットについてもお伝えしました。

入力欄を統合することはユーザビリティ上のメリットが大きいですが、上記のようなデメリット、さらにシステム上、分割して取得することが必要不可欠な場合もあるかと思います。

ご担当フォームの環境に応じて、入力欄を統合する施策を取り入れていただければ幸いです。

この記事が気に入ったら
いいね!しよう

UI改善ブログの最新情報をお届けします

エフトラEFO機能アイコン

UI改善ブログを運営する株式会社エフ・コードでは
UI改善の基本施策を簡単に実施できる「エフトラEFO」「エフトラCTA」を開発しています。

エフトラEFOサイトへ エフトラCTAサイトへ

UI改善ブログ by f-tra の購読

当ブログの更新情報は以下の各種アカウントから購読できます。

メールマガジンを購読する

ブログの更新情報やセミナーのお知らせなど、
UI改善に関する情報を1~2週間に1回お届けします。

メールアドレスを入力

 購読解除はいつでも可能です
  1. 貝柱つまるさん (@maepon)

    入力欄を単一にするか、もしくは複数に分割するかどうかは、フォームを作るうえでの論点のひとつです。 よくあるのは、名前の「姓」と「名」、郵便番号の「上3桁」と「下4桁」。 その他メールアドレスの@前後、電話番号、住所の都道府県や地… https://t.co/lkBAfpkxA6

  2. @WixJp

    登録フォームの入力欄は分割せず、統合するべき5つの理由 | EFO・フォーム改善ブログ→https://t.co/NCJzQJia0M

    #登録フォーム #ホームページ #サイト https://t.co/kvMKiBTDmA

  3. @b95oss

    フォームの入力欄は分割せず、統合するべき5つの理由 | UI改善ブログ by f-tra https://t.co/jeE8OoW5CJ

    見事に全部ダメパターンに該当してるフォーム構築中。。。
    やる気でない