UXフォームの設計

1）原則

1.最初のタスク、次にフィールド。フォームはユーザースクリプトの継続であり、データベースのリストではありません。
2.1つの画面は1つの目標です。タスクを完了していないものを削除します。
3.データを失うことはありません。オートセーブ、ドラフトの復元、安全なリプレイ。
4.「how to」を表示します。"プリエラールールと例；慎重に検証してください。
5.デフォルトの可用性。ラベル、フォーカス、コントラスト、キーボードナビゲーション。
6.予測可能な速度。最初の応答≤ 100ミリ秒で、明示的なステータスと進行状況で送信されます。

2）フォーム情報アーキテクチャ

目的→ステップ→フィールド。結果から始めます（例：「disbursement」）。フィールドの最小セットを選択します。
意味によるグループ化：「個人データ」「、支払い」「、確認」。"各グループに≤ 6つのフィールドがあります。
プログレッシブディスクロージャー：条件別に追加フィールドを表示します（toggle/country selection）。
フィールドの順序は、ユーザーの頭の中のようなものです。よく知られているものから複合体までです。

3）レイアウトとグリッド

モバイルおよびほとんどのタスクの列は、ルックとタブの順序で高速です。
短い相互接続フィールド（日付/時刻、名前/姓）には2つの列が適切です。
ラインの高さは40-48 pxで、フィールド間の距離は8-12 px（関連）/16-24 px（グループ）です。
フィールドの上部にあるラベルアライメント。右側-狭いフォームには使用しないでください。

4）ラベル、プレースホルダ、ヘルパー

ラベルは必須です。プレースホルダは例であり、置換ではありません。
ヘルパーテキストをフィールドの下に配置します：ルール、フォーマット、例への参照。
オプションのフィールドには、必須フィールドに「」ではなく「（オプション）」が含まれます。

html
<label for = "iban"> IBAN <span class = "muted"> (optional) </span> </label>
<input id="iban" aria-describedby="iban-help">
<small id = "iban-help "> Format A-Z, 0-9; example: DE89 3704 0044 0532 0130 00 </small>

5）ステップと進捗状況

マルチステップフォーム（ASC/ペイアウト）： 3-5ステップ、明確な進捗状況「ステップ2の4」。
完了したステップを保存します。データ損失なしに返却することを許可します。
ナビゲーションボタン：「戻る」「次へ」、最後の「確認」-常に1つの場所に。

6）入力制御

キーボードと属性：データ型の'type'、 'inputmode'、 'autocomplete'。
入力マスクを柔らかく（電話、IBAN、 PAN、日付）、正規化された値を格納します。
オートコンプリートを破らないでください：正しい'autocomplete="given-name" | "cc-number" | "one-time-code""など。
Amountプリセット/ショートカット：amountフィールドの横にある「+50/+ 100/All」。

7）検証とエラー

Strategy：入力前（ヘルパー）、入力中（ソフトプロンプト）、後（ぼかし/送信時）。
非同期チェック（ログインの一意性、制限、リスク）-デビットが250〜400ミリ秒です。
エラーのテキスト：原因→修正方法→代替。
複数のエラーのフォームの上のサマリパネル+最初のエラーへのフォーカス。
重要なアクション（入札/支払い）と安全なリトレイのためのIdempotency-Key。

8）ボタンと提出

主CTAは、Enterで利用可能な色/サイズでハイライトされます。

'Busy'状態で、［再試行ブロック］をクリックします。遅延>3-5秒-「確認を待っています……。」

成功した後-明示的なステータス（トースト/準備画面）+次に何が起こるか。

9）空室状況（A11y）

正しいリンク'label→input'、 'aria-describedby'によるエラー、critical-'role="alert''。
Visible'：focus-visible'、 Tab orderはvisualに対応しています。
テキスト/アイコンコントラスト≥ AA；意味は色だけではありません。
'Prefers-reduced-motion'サポート：最小アニメーション。
ラジオボタングループ-'fieldset/legend'、プロンプト-'role=「status」'。

10）ローカライズと国際的なフォーマット

日付/通貨/数字-エントリ、ストレージでローカル-ISO/マイナーユニット。
名前/アドレスの異なるアルファベットを許可します。ハイフン/アポストロフィーを制限しないでください。
電話をE.164に保管してください。挿入時に明示的に選択された国、または'+CC'から選択された国。

11）性能および安定性

最初の視覚応答≤ 100ミリ秒；非同期検査-画面をロックしないでください。
「ぶら下がっている」スピナーの代わりにスケルトンは、高さを固定し、CLSを避けます。
長いリストを仮想化する（例：国/銀行）。
'transform/opacity'のみをアニメーション化します。一括ぼかし/影はありません。

12）セキュリティとプライバシー

PAN/CVC/Passportを記録しないでください。RUM/コンソールに送信しないでください。
機密フィールドをマスクし、オートセーブで保存しないでください。

アカウントが存在するかどうかを開示しないでください： 「電子メールが登録されている場合は、電子メールを送信します。」

ストレージ-必要最小限；KYCが必要な理由を示します。

13）典型的なシナリオパターン

13.1支払/沈殿物

プリセット付きのAmountフィールド、明示的に指定された通貨。
柔らかいマスク、Luhnの点検が付いているPAN；CVCは隠されています。日付'MM/YY'と自動'/'。
ツールチップではなく、近くの手数料/締め切りについてのテキスト。

13.2出金について

ステップ量→方法→確認

進捗状況と「通常はN分/時間まで」（難しい約束はありません）。
国別のメソッドバリアント；警告を制限します。

13.3 KYC

ステップバイステップファイルローダー：フォーマット/重量要件、プレビュー、プライバシー。
日付とステータスチャンネル（メール/通知）をチェックします。

13.4制限と責任あるプレー

クリアユニット（曜日/週/月）、事前設定、変更の確認、「有効になります」……。

14） Antipatterns

ラベルの代わりにプレースホルダ。
デバンキングなしのエラー「文字ごと」。
エラー時にフォームをリセットします。
重要な命令はツールチップにのみ隠されています。
有効な文字/挿入を禁止するハードマスク。
ページ全体をロックして、単一のフィールドを検証します。
明示的なビジー/進行状況なしで送信します。

15）実装スニペット

エラーの要約+最初の問題に焦点を当てる

js function focusFirstError() {
const el = document. querySelector('[aria-invalid="true"]');
if (el) el. focus({ preventScroll:false });
}

インスタントビジネスとidempotencyのボタン

js btn. addEventListener('click', async () => {
btn. classList. add('is-busy');
try {
const r = await fetch('/api/submit', {
method: 'POST',
headers: { 'Idempotency-Key': crypto. randomUUID() },
body: new FormData(document. querySelector('form'))
});
if (!r.ok) throw new Error();
// success UI
} catch {
// show retry
} finally {
btn. classList. remove('is-busy');
}
});

利用可能なラジオボタングループのHTMLフレームワーク

html
<fieldset>
<legend> How to get </legend>
<label><input type="radio" name="method" value="sepa"> SEPA</label>
<label><input type="radio" name="method" value="swift"> SWIFT</label>
</fieldset>

16）システムトークンの設計（例）

json
{
"form": {
"gap": 12,
"groupGap": 20,
"labelSize": 14,
"fieldHeight": 44,
"radius": 10
},
"motion": {
"pressMs": 90,
"hoverMs": 160,
"overlayInMs": 240
},
"validation": {
"debounceMs": 300,
"blurFeedbackMs": 100
},
"a11y": {
"focusRing": { "width": 2, "offset": 2 },
"contrastAA": true
}
}

CSSプリセット

css
.form { display:grid; gap:12px; }
.form__group { display:grid; gap:20px; }
label { font-size:14px; }
.input { height:44px; padding:0 12px; border-radius:10px; }
.input:focus-visible { outline:2px solid var(--focus-ring); outline-offset:2px; }
.field-error { color: var(--role-danger); font-size:.875rem; margin-top:6px; }

17）メトリクスと実験

完了率、完了までの時間、フィールド別のエラー率。
リトライ成功率、スローされたフォームの割合、ステップの深さ。
ヒント/例のCTR、オートコンプリートの割合。
A/B：フィールド順序、金額プリセット、エラーテキスト、ステップへの分割。

18） QAチェックリスト

意味と流れ

• フィールドはターゲットに対応します。余分なものはありません。
• グループは論理的です。グループごとの6つのフィールドの最大。

入力

• 'type/inputmode/autocomplete'を修正しました。
• マスクは柔らかく、インサートは壊れません、キャレットは予測可能です。

検証

• 入力前のヘルパー；ぼかし/送信時のエラー。debouns 250-400 ms。
• 複数のエラーのサマリパネル；最初に焦点を当てる。

空室状況

• ラベルはリンクされています。対照≥ AA；'：focus-visible'が表示されます。
• キーボードナビゲーション；'fieldset/legend'を持つラジオグループ。

パフォーマンス

• 最初の応答≤ 100ミリ秒；「ぶら下がっている」スピナーはありません。
• CLSはありません。長いリストは仮想化されています。

セキュリティ

• 機密性の高いフィールドログはありません。PAN/CVCはオートセーブにありません。
• Idempotencyと安全な撤退が含まれています。

19） iGamingの詳細

ベット：amount field+presets、 instant 'busy'、 undoの可能性を持つ楽観的な確認（規制が許可している場合）。

支払い/引き出し： ヒントだけでなく、フィールドの近くの明示的な手数料と期限。制限とKYCステータスの確認

トーナメント：「暗いパターン」のない最低限のデータ、ルール、合意されたチェックボックスを持つ登録フォーム。
責任あるゲーム：明確な間隔で制限を設定し、結果をプレビューする形式（「あなたの毎日の制限は明日から2,000 ₴になります」）。

概要

良いフォームは明確な目標、最小限のフィールド、エラー前の明確なルール、即座の応答、保存されたデータです。スクリプトから構造を設計し、アクセシビリティとロケールを尊重し、安全なリトレイとidempotenceを含む。これは、特に重要なiGamingシナリオでは、フォームが迅速かつ信頼できるように感じる方法です。