ユーザーフレンドリーなWebフォームを作成するための10の規則

Sep 15, 2025

操作方法

Illustration of web forms on an iMac and tablet

ヒューマンコンピュータの相互作用の進化にもかかわらず、フォームは依然としてユーザーにとって最も重要なタイプの対話の一つのままです。あなたのアプリケーションやウェブサイトを使う人々は特定の目標を持っています、そしてしばしばユーザーの間に立っていることと彼らの目標はフォームです。毎日、私達は私達が購入した製品にフィードバックを提供するために、購入を完了するために、私達はそれらを私達の不可欠な活動のためにそれらを使います。 ユーザー体験 。

その結果、私たちが迅速かつ混乱なしでオンラインフォームを完了させることができることは非常に重要です。私たちが過ごしなければならない努力が少なく、幸せなことです。設計者や開発者として、私たちは私たちのユーザーにとってより速く、より簡単でより生産的なフォームの経験を生み出すよう努めています。

より良いフォームを構築する方法を模索する2つの記事の2つの記事の中で（ ここで最初のものを見つけてください ）、ここに、ユーザーフレンドリーなフォームを設計するための私の10のヒントがあります。あなたが探しているものではありませんか？あなたは私たちのガイドがトップに必要かもしれません ウェブサイトビルダー または クラウドストレージ サービス。

01.必要なものだけを尋ねるだけです

必要な情報の量を切断すると、フォームが記入しやすくなります。常に、必要な情報がどのように使用されているかを尋ねるべきです。フォームに追加するすべてのフィールドがその変換率に影響を与えるため、できるだけフィールド数を最小限に抑えるようにしてください。質問とフィールドの数を制限すると、特にユーザーから多くの情報を要求するときに、フォームがロードされなくなります。

02.フィールドを論理的に注文します

Screenshot compares two forms - one with fields in an odd order, one with headings explaining field groupings, ordered logically — 会話のようにあなたのフォームを考えてください。ユーザーに理にかなった順序でフィールドをグループ化して注文します。

会話に似ているような形を考えるのは役に立ちます。普通の会話と同様に、それは2人の締約国の間の論理的なコミュニケーションによって表されるべきです：人とあなたのアプリ。詳細は、アプリケーションまたはデータベースのそれではなく、ユーザーの観点から論理的な順序で尋ねられます。たとえば、名前の前に誰かのアドレスを求めるのは珍しいです。

また、ブロックで関連する質問をグループ化することも非常に重要です。そのため、ある質問から次の一連の質問への流れは会話に似ています。グループ化関連フィールドは、ユーザーが記入しなければならない情報を理解するのに役立ちます。

上記の写真は2つの登録フォームの例です。関連フィールドをグループ化しない場合、長いフォームは圧倒的に感じることができます - 左側のフォームを右側の改良版と比較してください。

グループ化はコードと同様に視覚的に実行される必要があります。たとえば、これを使用することができます ＆lt;フィールドセット＆gt。 そして ＆lt;凡例＆gt; 関連フォームコントロールを関連付ける要素：

フィールドセット＆gt。
  ＆lt; Legend＆GT;個人情報：＆legend＆gt;
  ＆lt; div＆gt;
    ＆lt; = "first_name"＆gt;名＆lt; / label＆gt;
    ＆lt; INPUT TYPE = "text" name = "first_name" id = "first_name"＆gt;
  ＆lt; / div＆gt;
  ＆lt; div＆gt;

03.ラベルを短くしてください

フィールドラベルは、対応する入力フィールドが意味するものをユーザーに指示します。ラベルのクリアテキストは、UIをよりアクセスできるようにするための主な方法の1つです。ラベルはユーザーにフィールドの目的を伝えますが、それらはテキストを助けるわけではありません。したがって、それらが簡単にスキャンできるようにすることは優先順位です - 簡潔で短くて記述的なラベルを設計する必要があります（それらを単語または2つのものに保ちます）。

04.フィールドを複製しないでください

Screenshot compares bad and good forms - the bad asks users to retype their email and retype their password — ユーザーに2回情報を入力しないでください - あなたは彼らの時間を無駄にすることによって彼らを失望させるだけです

この問題は登録フォームにとって特に一般的です。ほとんどの人は、電子メールアドレスまたはパスワードを2回入力する必要があるフォームに渡って来ました。歴史的に、これはミス型のエラーを防ぐように設計されていました。ただし、ほとんどのユーザーは、アプリが許可されているたびに必要なフィールドをコピーするだけです。元のフィールドのデータにエラーが含まれている場合は、重複していました。

05.オプションフィールドを強調表示します

理想的には、オプションのフィールドを持たないことが最善です。ルール番号1に沿って、情報が必要ない場合は、ユーザーの時間を無駄にする点はありません。しかし、あなたがそれらを使うならば、あなたは明確にどの入力フィールドを空白のままにすることができないかを明確に区別するべきです。通常、アスタリスク（*）または 'オプションの'ラベルのような小さなマークが十分です。

06.デフォルトに注意してください

ユーザーの大部分（例：90％）を信じることがない限り、静的なデフォルトを含めないでください（例：90％）、特に必要なフィールドである場合はその値を選択します。どうして？このアプローチでは、人がオンラインでフォームをスキャンするため、エラーを導入する可能性があります。彼らがすべての選択を解析する時間がかかると仮定しないでください。彼らはすでに価値を持っている何かで瞬間的にスキップするかもしれません。

この時点の唯一の例外はスマートなデフォルトです - それらの地理位置データに基づいてユーザーの国を事前に認めるものと同じように、それはより速くそしてより正確にフォームを完成させることができます。しかし、ユーザーが事前に選択されたフィールドをそのまま残す傾向があるため、まだ注意を払ってこれらを使用する必要があります。

07.タイピングの必要性を最小限に抑えます

タイピングは遅い、エラーが発生しやすいプロセスです。ユーザーが限られたスクリーンエステートの制約に直面しているモバイルでは特に痛いです。そして、小さなスクリーンを使用しているより多くの人々が、不要なタイピングを防ぐために行うことができるものは何でもユーザーエクスペリエンスを向上させます。必要に応じて、データのオートコンプリートやプレフィルなどの機能を使用できますので、ユーザーは裸の最小額の情報を入力するだけです。

あなたの住所情報を記入することは、複数のフィールド、長い名前などのおかげで、オンライン登録フォームの最も面倒な部分です。これらのフィールドのプレフィルを実装することで、アドレス全体を入力しなければならないことから、ユーザーを保存します。 Googleマップのようなライブラリ単純なJavaScript APIを提供しますこれを達成するために。あなたはできるここで働く解決策を見つけてください。

08.リアルタイム検証を使用してください

Illustration shows two fields filled with green ticks beside them, one field filled but with a red x beside it — ユーザーがエラーを発生させた場合はすぐにユーザーに警告します - フォーム全体が完了するまで待ってはいけません

理想的な世界では、ユーザーは必要な情報でフォームを記入し、仕事をうまく仕上げますが、現実の世界では、人々はしばしば間違いを犯します。それはあなたが誤りを犯した提出時点でのみを見つけるためだけにフォーム全体を記入するプロセスを行うことを苛立たします。

彼らが情報を提出した直後のデータの成功または失敗について誰かに知らせるための適切な時期。これはリアルタイム検証が再生されるところです。それはユーザーに間違いを犯すように警告し、彼らが「送信」ボタンを押すまで待つ必要なしに彼らがより速くそれらを修正することを可能にします。

そして覚えておいて、検証は彼らが間違ったものをユーザーに伝えるべきではありません。彼らは彼らが正しいことをしていることを彼らに言うべきです。これにより、ユーザーはフォームを通過するのを軽い自信をもたらします。

パセリ優れたJavaScriptフォーム検証ライブラリです。オープンソースとUXフォーカスであるため、正確なニーズに合わせてほとんどすべてのデフォルトの動作を上書きできます。次のコードでは、「メッセージ」フィールドの単純なParsley検証例です。フィールドは少なくとも20文字以上でなければなりませんが、100以下です。

 <= "メッセージ"＆gt;メッセージ（20文字分、100 max）：＆label＆gt;
    ここで完全なコードサンプルを見つけます

。

09.固定入力フォーマットを避けます

固定フォーマットを強制する最も一般的な理由は、検証スクリプトの制限です（バックエンドが必要なフォーマットを判断できません）、ほとんどの場合、実装の問題があります。ユーザー入力中に電話番号のようなもののフォーマットを強制するのではなく、ユーザーが表示または保存する形式に入力しても変換することを可能にする必要があります。

10.リセットボタンを使用しないでください

Illustration shows Reset button next to a Save button below a form, with a red cross through it — 送信オプションのすぐ隣にリセットボタンを含めることから、ほとんど良い

リセットボタンはほとんどユーザーに役立ちません。誰かがすべての仕事を元に戻すボタンを望んでいると想像するのは難しいです。実質的にすべてのリセットボタンが削除された場合、Webは幸せな場所になります。

あなたのユーザーがあなたのウェブサイトにどのように対応しているのか知りたいですか？穏やかな ウェブホスティング サービスはあなたが必要とする分析をあなたに与えるでしょう。

この記事は最初に登場しました ネット 、プロのウェブデザイナーと開発者向けの雑誌。 ここでネットを購読する 。

関連記事：

ワークフローをスピードアップするための29 Webデザインツール
41の最高の無料のウェブフォント
13ユーザーテストソフトウェアの最良の部分

ユーザーフレンドリーなWebフォームを作成するための10の規則

01.必要なものだけを尋ねるだけです

02.フィールドを論理的に注文します

03.ラベルを短くしてください

04.フィールドを複製しないでください

05.オプションフィールドを強調表示します

06.デフォルトに注意してください

07.タイピングの必要性を最小限に抑えます

08.リアルタイム検証を使用してください

09.固定入力フォーマットを避けます

10.リセットボタンを使用しないでください

操作方法 - 最も人気のある記事

FormikでReact Form Stateを管理する

Zbrushで人間の鼻を彫刻する方法：4簡単なステップ

2018年の2004年のフラッシュウェブサイトを再構築する

構成で動的な動きを作成する

写真を3DアニメーションにしてPhotoshop

Photoshopで強いポーズでキャラクターを作成する

フロントエンドテストの紹介

より高速なWebサイトの構築方法

カテゴリ