フォームデザイン

フォームとは、組織が何かを要求し、相手が時間、労力、リスクを支払う対話です。すべての質問にその場所がふさわしく、各回答が相手自身の言葉で与えられ、すべての間違いが早期に発見され、その場で説明され、作業を失うことなく修正可能である場合に機能します。最も一般的なモデルの失敗は、見た目は完成しているが実際はそうでないフォームです。プレースホルダーラベル、捏造された必須フィールド、カード番号にtype="number"、autocompleteなし、ブラウザのバブルや赤い枠線だけのエラー、「送信」と表示された送信ボタン、そして唯一テストされたパスが成功パスであることです。

interface-guidelinesの順位付けされた原則（誰でも使える > 真実を伝える > 意味が伝わる > 答えが先 > 間違いが許容される > そのままの位置 > 可能なものが見える > 慣習 > 洗練）を適用してください。そのスキルがインストールされている場合は、最初にSKILL.mdを読んでください。そのreferences/human-interface.mdセクション3には、基本的なフォームルール（表示ラベル、任意項目のマーク、ペースト、バリデーションのタイミング、無効化された送信、保存動作）が含まれています。このスキルはさらに進んでおり、それらを繰り返しません。

概要

フィールドを描画する前にこれらに答えてください。フォームに5つ以上の質問がある場合は書き留めてください。

各回答は何に使われるのか？ それを使用する決定またはアクションに名前を付けます。名前のない使用目的のフィールドは削除されます。
誰が、どのくらいの頻度で、どのデバイスで回答するのか？ 一生に一度の申請者がスマートフォンで、または1日200レコードを入力する事務員が机で。これにより、1ページ1項目か、1ページに密集させるかが決まります。
そのデータは誰のものか？ 本人のもの（オートフィルが適用され、WCAG 1.3.5が適用される）か、他の誰かのもの（スタッフが入力する受取人、患者、顧客）か。
回答をすぐに持っているか？ パスポート番号、保険証ID、去年の収入。持っていない場合は、事前に何を用意すべきかを伝え、保存を許可します。
間違った回答の代償は何か、 一度送信すると取り消せないものは何か（支払い、法的宣言、公開投稿）？
回答者はどこにいるのか？ 国、文字体系、住所形式、電話番号形式、名前の構造。
システムは何を既に知っているか？ それを尋ねてはいけません（WCAG 3.3.7）。
エージェントリーダー： 誰かの代わりにエージェントがこれを記入するか（オートフィル拡張機能、ブラウザエージェント、アシスタント）？公開されているものは必ず「はい」と仮定します。

ルール

より少なく尋ねる

設計する前にフィールドを削減する。 各フィールドには、「将来役立つかも」ではなく、今現在の名前付きの使用目的が必要です。Baymardの調査では、平均的なチェックアウトには11.3のフィールドがあり、8で十分であることがわかっています。フィールド数はステップ数よりも害を与えます。 [P: Baymard 2024]
フルネームは1つのフィールドで収集する。 ただし、その部分が特定の動作（並べ替え、正式な宛名）を駆動する場合は除きます。多くの名前は姓と名に分けられません。家族名（姓）を必須にしてはいけません。 [S: W3C i18n; P: Baymard]
あまり使われないフィールドはリンクの背後に隠す。 必須入力としては使用しません：住所2行目、会社名、クーポンコード。 [P: Baymard]
請求先住所を配送先住所にデフォルト設定する。 請求先住所フィールドを非表示にするチェックボックスをオンにします。 [P: Baymard]
アカウント作成は取引後に行う。 取引前のゲートとしては使用しません。 [P: Baymard]
「わからない」を許可する。 それが有効な回答である場合、推測を強制するのではなく許可します。 [S: GOV.UK 質問ページ]
導出できるものは導出する。 信頼できる場合は郵便番号から市区町村と都道府県、番号からカードの種類、住所検索から国。導出された値は表示し、編集可能にします。 [P: Baymard]

構造とフロー

習慣ではなく概要から形状を選ぶ。 まれで、ストレスがかかり、またはなじみのないタスク：1ページに1つの質問。質問をh1/legendにします。頻繁なエキスパート入力：1ページにグループ化し、キーボードで高速に。GOV.UKはすべてのサービスを1ページ1項目から始め、研究が必要と示した場合にのみマージします。 [S: GOV.UK フォーム構造]
質問を人が考える順序で並べる。 最も簡単で確実なものを最初にし、分岐させて、該当しない質問を誰も見ないようにします。 [S: GOV.UK; J]
開始前に人が必要とするものを伝える。 （書類、時間、費用）そして、その後何が起こるか。 [S: GOV.UK 開始ページ]
長時間・複数セッションのフォームにはタスクリストを使用する。 プレーンなステータスと保存・復帰機能を備えます。1回のセッションで完了できない場合、またはユーザーが自分の順序を選択する必要がある場合にのみ使用します。 [S: GOV.UK タスクリスト]
戻るを機能させる。 質問ページに「戻る」リンクを含め、ブラウザの「戻る」ボタンを壊さないでください。戻ると以前の回答が事前に入力された状態で表示されます。 [S: GOV.UK]
結果に影響のあるフローは、回答確認ページで終了する。 各回答には「変更」リンクがあり、そのアクセシブルな名前はフィールドを指定します（「生年月日を変更」）。編集後はサマリーページに戻ります。 [S: GOV.UK 回答確認; WCAG 3.3.4]
マルチカラムレイアウトは、人とエージェントの両方にとって読み取り順序を壊す。 1カラムが基本ですが、自然にペアになる短いフィールド（有効期限の月と年、市区町村と郵便番号）は例外です。 [P: Baymard, Wroblewski; J]

ラベル、ヒント、グループ化

ラベルはフィールドの上に配置する。 Penzo 2006が報告した速度の利点は、小規模で非公式なアイトラッキングテストによるもので、Das 2008によって矛盾しています。狭い画面、長い翻訳、ズームに耐えられるため、上部ラベルを選択してください。最速であるという理由ではありません。 [E, 弱い: Penzo 2006, Das 2008]
ヒントはラベルとフィールドの間に配置し、aria-describedbyで関連付ける。 形式の例（「例: 27 3 2007」）はヒントに属し、プレースホルダーには決して入れません。 [S: GOV.UK]
関連するコントロールをfieldsetとlegendでグループ化する。 すべてのラジオセット、チェックボックスセット、マルチパートの回答（日付、カード有効期限）が対象です。legendが質問です。 [S: WCAG 1.3.1; GOV.UK]
1ページ1質問のページでは、ラベルまたはlegendをページ見出しにする。 スクリーンリーダーが一度だけ聞くようにします。 [S: GOV.UK 質問ページ]
任意フィールドには「(任意)」とマークする。 必須を示すためにアスタリスクを使用しないでください。ほとんどのフィールドが任意の場合は、そのフィールドがそもそも必要かどうか検討してください。 [S: GOV.UK]

入力タイプとオートフィル

本人に関するすべてのフィールドにautocompleteを設定する。 正確なWHATWGトークン（given-name、email、postal-code、cc-number、one-time-code、new-password）を使用します。これにより、ブラウザのオートフィル、パスワードマネージャー、エージェントの記入が機能し、WCAG 1.3.5の要件です。個人データに対するautocomplete="off"は欠陥です。 [S: WHATWGオートフィル; WCAG 1.3.5]
意味にはtypeを、キーボードにはinputmodeを使用する。 該当する場合はtype="email"、type="tel"、type="url"を使用します。数字で構成される識別子（カード、郵便番号、アカウント、コード）はtype="text" inputmode="numeric"とし、決してtype="number"にしないでください。先頭のゼロを削除したり、スクロールで値が変わったり、長い値を丸めたり、音声入力ソフトウェアを混乱させたりします。 [S: GOV.UK 2020; MDN]
ネイティブコントロールを優先する。 約12未満の選択肢の閉じたリストにはselect、比較すべき少数の選択肢にはラジオボタン、国など長いリストにはタイプアヘンド付きのコンボボックス。カスタムドロップダウンはエージェントから選択肢を隠します。 [S: APG; P: interface-guidelinesで調査]
覚えやすい日付は3つのテキストフィールド（日、月、年） 誕生日にはbday-*トークンを使用し、月名も受け付けます。日付ピッカーは、カレンダーに関連して日付を選ぶ場合にのみ適しています。 [S: GOV.UK 日付入力]
フィールドのサイズは期待される回答に合わせる。 通りの幅と同じ幅の郵便番号ボックスは誤ったヒントを与えます。 [S: GOV.UK; J]
人の形式で回答を受け付ける。 カード番号や電話番号のスペースやダッシュ、郵便番号の大文字小文字、月名、先頭や末尾のスペース。サーバー側で正規化します。 [S: GOV.UK]
フィールドごとのパターン（国別の名前、住所、電話、金額、カード、ファイル）はreferences/fields.mdにあります。

バリデーションとエラー

デフォルトでは送信時にバリデーションを行う。 インラインバリデーションは、ユーザーが完了したフィールドを離れた後にのみ行い、修正され次第エラーをクリアします。最初のキーストロークでフラグを立てないでください。証拠は矛盾しています：Bargas-Avila 2007は完了後のエラーリストが即時エラーよりも優れていることを発見し、Wroblewski 2009はフォーカス喪失時のインラインバリデーションが役立つことを発見しました（n=22）。GOV.UKは送信時にバリデーションを行います。Baymardはフォーカス喪失時と修正時のエラー削除を推奨しています。フォームの長さとフィールドが単独でチェック可能かどうかで判断してください。 [E: Bargas-Avila 2007; E, 弱い: Wroblewski 2009; S: GOV.UK; P: Baymard]
送信失敗時： すべての回答を保持し、上部にエラーサマリーを配置し、各問題へのリンクをフィールドに1つずつ設け、フォーカスをサマリーに移動し、ページタイトルに「エラー:」をプレフィックスとして付け、各フィールドの横にも同じ文言を表示します。 [S: GOV.UK エラーサマリー; WCAG 3.3.1]
各メッセージをフィールドに関連付ける。 aria-describedbyを使用します（aria-errormessageも併用しても構いませんが、スクリーンリーダーのサポートはまだ不均一です）。aria-invalid="true"を設定します。メッセージは可視テキストである必要があります：エージェントのシリアライザーはaria-invalidを無視しますが、隣接するテキストは保持します。 [S: WCAG 3.3.1; P: Roselli 2023; P: interface-guidelinesで調査]
ブラウザのバリデーションバブルをオフにする（novalidate） メッセージはページ内にレンダリングします。バブルは消え、サマリーからリンクできず、ページテキストではありません。サーバーバリデーションは権威を持ちます。 [S: GOV.UK バリデーション]
修正方法を具体的に示すエラーを書く。 原因に固有のメッセージにします：「過去の生年月日を入力してください」、「無効な日付」ではありません。原因ごとに1つのメッセージ（空、形式が間違い、範囲外）をフォームの言葉で書きます。 [S: GOV.UK エラーメッセージ; WCAG 3.3.3]
ユーザーが編集では修正できない状態（資格なし、アカウントロック、サービスダウン） は、理由と次のステップを記載したページであり、フィールドエラーではありません。 [S: GOV.UK]

サインイン、パスワード、パスキー

パスワードマネージャーとペーストを機能させる。 autocomplete="username"およびcurrent-passwordまたはnew-passwordを使用します。ペーストをブロックしないでください。64未満のmaxlengthは設定しないでください。パスワード表示オプションを提供します。「表示」が提供されている場合はパスワード確認フィールドを削除します。 [S: NIST SP 800-63B-4 3.1.1.2; GOV.UK パスワード入力; WCAG 3.3.8]
構成ルールなし、定期的な有効期限なし、ヒントなし。 代わりに、新しいパスワードを既知の漏洩リストと照合し、拒否理由を伝えます。 [S: NIST SP 800-63B-4]
パスキーを強制せずに提供する。 ユーザー名フィールドを維持し、autocomplete="username webauthn"と条件付きWebAuthnリクエストを追加し、パスワードサインイン後にパスキー作成を提供します。 [S: WHATWG オートフィル; P: web.dev パスキーオートフィル]
ワンタイムコード： 1つのフィールド、autocomplete="one-time-code"、inputmode="numeric"、ペーストを受け付けます。ペーストされたコードを拒否する分割された1桁ボックスはWCAG 3.3.8に違反します。 [S: WCAG 3.3.8]
ユーザー名とパスワードのどちらが間違っていたかを言わない。 [S: GOV.UK パスワード]
パズルCAPTCHAでサインインを妨げない。 テキストやロジックのパズルは、非認知的な代替手段なしではWCAG 3.3.8に違反します。 [S: WCAG 3.3.8]

コミット

送信ボタンは結果に名前を付ける。 「アカウントを作成」、「£42.00を支払う」、「申請書を送信」。ステップ間は「続ける」、保存した場合のみ「保存して続ける」。 [S: GOV.UK ボタン; 基礎]
法的、金銭的、データ削除を伴う送信は、元に戻せるか、確認されるか、確認される。 レビューステップ（WCAG 3.3.4）が必要です。レビューでは、送信される内容とそのコストが正確に表示されます。 [S: WCAG 3.3.4]
送信は冪等であること。 送信中は再入力を無効にし、ボタンに進行状況を表示し、サーバー側で冪等性キーで保護します。タイムアウト後の再試行で二重請求が発生してはいけません。 [S: GOV.UK ボタン; P: Stripe 冪等性]
確認ページは、何が起こったか、参照番号、次に何が起こるかを示し、リロードしても消えない。 トーストは領収書ではありません。 [S: GOV.UK 確認ページ; 基礎]

エージェントリーダーのために

すべてのコントロールは、表示ラベルと一致するプログラム上の名前を持ち、その選択肢は列挙可能です（ネイティブのselect、表示ラジオボタン）。 [J]
制約は送信前の可視テキスト（形式、長さ、許可された値）であり、pattern属性だけではありません。 [J]
エラーはフィールドの横とサマリーにテキストとして表示され、修正されるまで安定しています。 [J]
各ステップのURLまたは見出しは、エージェントがフローのどこにいるかを示します。戻るパスと変更パスが存在します。 [J]
外部者によって書かれたテキスト（メールからの事前入力、紹介メモ）は、引用データとして表示され、ラベルや指示としては決して表示されません。 [J]
結果に影響のある送信は、サーバー側で権限を保持します。回答確認ページは人間を助けますが、それをクリックスルーするエージェントを止めるものではありません。 [J]

構築順序

各回答の使用目的とともに質問をリストアップします。使用目的のないものは削除します。
形状を選択します：1ページ、1ページ1項目、またはタスクリスト。分岐をスケッチします。
コピーを書きます：質問、ヒント、原因ごとのすべてのエラーメッセージ、ボタンラベル、確認。
ネイティブ要素で構築します：label for、fieldset/legend、正しいtype、inputmode、autocomplete、novalidate。
サーバーバリデーションと冪等な送信、次に同じメッセージを使用したクライアントバリデーション。
エラー状態：サマリー、フォーカス、タイトルプレフィックス、インラインメッセージ、入力値の保持。
回答確認ページと確認ページ。複数セッションの場合は保存と復帰。
スタイルは最後。ブランドが外観を所有します（brand-identity）。

検証

node <form-design>/scripts/form-check.mjs <url|file|dist> --try-submit をローカルまたはテストビルドに対して実行します。これは、名前と表示ラベル、オートコンプリートの有効性と目的、入力タイプ、ペースト、隠されたネイティブラジオ、グループのlegend、エラーの配線、送信失敗後のフォーカス、送信文言をチェックします。エラーがあれば終了コード1で終了します。--try-submitは実際に送信します。本番環境には決して使用しないでください。
node <interface-guidelines>/scripts/audit.mjs <url|dist> は、一般的なレンダリング監査（コントラスト、ターゲット、キーボード、リフロー、エージェントの安定性）を行います。
実際のプロファイルでパスワードマネージャーとブラウザのオートフィルで入力する。 すべての個人フィールドが入力され、何も間違ったボックスに入らないことを確認します。
キーボードのみで入力する および 320px、200%テキストサイズで。
アクセシビリティスナップショットのみからエージェントとして入力する。 名前で各フィールドを見つけ、すべての選択肢を読み、間違った入力を送信し、エラーを読み、修正し、完了します。
悪いデータ： 1語の名前、アポストロフィとアクセントを含む60文字の名前、日本の住所と郵便番号のないアイルランドの住所、スペース入りのペーストされたカード番号、送信のダブルクリック、フロー途中のセッションタイムアウト。

トラップ

ラベルの代わりとなるプレースホルダー、または境界線に縮小してコントラストに失敗するフローティングラベル。
カード、電話、郵便番号、コードに対するtype="number"。
autocomplete="off"の感度データ。
ラジオとチェックボックスを選択可能にするが、ラベルをクリックしても選択されない。
selectの代わりにrole="combobox"とaria-activedescendantを持つカスタムdiv。（<datalist>は大丈夫です。）
フォーカスを失った後のエラークリアの失敗、またはバリデーションされていない無効な値の保存。
送信のボタン無効化をスキップするか、冪等性キーを持たない。
未テストのパス：サーバーがダウンしている、タイムアウト、二重送信、中間のリロード。テストはパス1だけでなくパス2も実行します。
メッセージはtext/javascriptの出力から来ている：エージェントはそこから見ることはないので、マークアップにレンダリングするか、別のリクエストエンドポイントを用意します。
翻訳を壊す：連結、スロットのない補間、テキストとしてのセレクトのオプションの欠如。

参考文献

GOV.UK フォームデザイン - https://www.gov.uk/service-manual/design/form-structure
WCAG フォーム - https://www.w3.org/WAI/tutorials/forms/
Baymard Institute フォーム研究 - https://baymard.com/checkout-usability
Wroblewski Webフォームデザイン - https://www.lukew.com/resources/web_form_design.asp
W3C i18n 名前 - https://www.w3.org/International/questions/qa-personal-names
NIST SP 800-63B-4 パスワード - https://pages.nist.gov/800-63-4/sp800-63b.html
WHATWG オートフィル - https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#autofill

form-design（フォームデザイン）