form-design

フォーム設計

明確で、入力しやすく、効率よく完了できるフォームを設計するエキスパートです。

提供すること

フォーム設計の原則を適用して、入力途中での離脱を減らし、エラーを防ぎ、データ収集を負担なく行えるようにします。単一フィールドの入力から複雑な複数ステップのフローまで対応します。

レイアウト

• 1 列レイアウト：フォームではほとんどの場合、これが適切です。2 列レイアウトは読み進める流れを妨げ、フィールドの順序を曖昧にします。
• フィールドの幅は想定される入力の長さに合わせる：郵便番号のフィールドは狭く、自己紹介のフィールドは広くします。幅によって、どのような入力が適切かを示します。
• ラベルを上部に配置する：左揃えやプレースホルダーのみのパターンよりすばやく確認でき、長いラベルにも対応しやすくなります。
• 近接の法則を利用して関連するフィールドをまとめ、長いフォームではセクション見出しを使います。長いフォームを、区別のない 1 列の羅列にしないでください。

ラベルと説明

• すべてのフィールドに常時表示されるラベルを付けます。プレースホルダーテキストだけをラベルとして使わないでください（入力すると表示されなくなり、アクセシビリティにも対応できません）。
• ラベルは簡潔にし、文頭のみ大文字にします。すべて大文字にするのは避けてください。
• 補足テキストはラベルの下、フィールドの上に配置します：「形式：DD/MM/YYYY」
• 必須フィールドではなく、任意フィールドに印を付けます。ほとんどのフィールドが必須の場合、任意項目に印を付けることで視覚的なノイズを減らせます。
• 文字数を制限する場合は、残りの文字数を表示します。上限に近づいたときだけでなく、常に表示してください。

入力タイプ

収集するデータに入力タイプを合わせます。

データの種類	入力タイプ
短いテキスト	テキスト入力
長いテキスト	テキストエリア（サイズ変更可能であることを表示）
少数の選択肢から 1 つ（≤5）	ラジオボタン（すべて表示）
多数の選択肢から 1 つ（6+）	セレクト／コンボボックス
少数の選択肢から複数	チェックボックス
日付	日付ピッカーまたは分割入力（日／月／年）。構造化された日付に自由入力のテキストフィールドは使わないでください
電話番号／カード番号	書式設定とマスキングに対応したテキスト入力
パスワード	表示／非表示の切り替え機能付きパスワード入力

入力検証

• インライン入力検証：キー入力のたびではなく、フィールドからフォーカスが外れたときに検証します。入力中のリアルタイム検証は注意をそらします。
• エラーの配置：フォームの上部ではなく、該当するフィールドの直下に配置します。
• エラーメッセージ：何が問題で、どうすれば修正できるかを説明します。「メールアドレスには @ を含める必要があります」と表示し、「無効なメールアドレス」とだけ表示するのは避けてください。
• 成功の表示：正しさが自明でないフィールド（パスワードの強度、ユーザー名の利用可否など）に、控えめな表示（チェックマーク）を付けます。
• サーバー側のエラー：可能であれば該当するフィールドにインラインで表示します。複数のフィールドが影響を受ける場合は、上部に要約を表示します。

複数ステップのフォーム

• 進行状況を明確に表示します（単に「ステップ 2／5」と表示するのではなく、ステップインジケーターを使います）。
• 各ステップはひとまとまりとして完了できるようにし、関連する質問をまとめます。
• データを失わずに前のステップに戻れるようにします。
• 長いフォームでは進行状況を保存します（自動保存、または明示的な「保存して続行」）。
• 入力途中で破棄する前に確認を求めます。

アクセシビリティ

• すべてのフィールドにプログラムで認識できるラベルを付けます（<label for> または aria-label）。
• エラーメッセージを該当するフィールドに関連付けます（aria-describedby）。
• フォーカスの順序を視覚的な順序に合わせます。
• 上部にキーボードでフォーカス可能なエラーの要約を表示し、各フィールドへのリンクを付けます。
• 必須やエラーの状態を色だけで示さないでください。

ベストプラクティス

• 可能な限り任意フィールドをなくします。フィールドが少ないほど、入力完了率は高くなります。
• 最も一般的な回答がある場合は、それを初期値にします。2 択の選択肢を空欄にしないでください。
• 実際のユーザーに実際のデータを入力してもらい、フォームをテストします。合成テストデータでは、長さや形式に関する境界ケースを見落とします。
• フィールド単位の離脱率（ユーザーがどのフィールドで入力をやめるか）を測定します。最適化に取り組むべきなのはこの部分です。
• 重要度の高いフォーム（支払い、医療、法律）では、最終送信前に確認ステップを設けます。