業務システムの利用時間の大半は、フォームへの入力です。1項目あたり0.5秒の改善でも、1日300件の入力があれば影響は無視できません。ここでは、フォーム設計で先に決めておくべき12のルールを整理します。
ルール1：ラベルは入力欄の上に置く
ラベル位置には「上」「左」「プレースホルダー代用」の3択がありますが、業務システムでは基本的に 上配置 が有利です。
| 配置 | 長所 | 短所 |
|---|---|---|
| 上 | 視線移動が縦方向のみで速い。長いラベルも折り返せる | 縦に長くなる |
| 左 | 縦が詰まる。項目数が多い画面で有利 | ラベル幅の統一が必要。長い項目名で崩れる |
| プレースホルダー代用 | 省スペース | 入力すると消える。入力後に何の欄か分からなくなる |
プレースホルダーをラベル代わりに使う設計は避けてください。入力後に項目名が消えるため、見直し・修正時に何の欄か分からなくなります。プレースホルダーは入力例（`例：2026/07/20`）にだけ使います。
左配置を採用する場合は、ラベル幅を固定（例：160px）し、右揃えにして入力欄との距離を一定に保ちます。
ルール2：必須と任意の表示を1つに統一する
- 必須項目が多数派なら「任意」だけを表示する
- 任意項目が多数派なら「必須」だけを表示する
- 米印（※）は視認性が低いため、バッジ表記を推奨
- 色だけで区別しない（色覚特性のある利用者に伝わらない）
ルール3：入力欄の幅で桁数を示唆する
郵便番号の欄が氏名と同じ幅だと、利用者は「何桁入れるのか」を毎回考えます。入力欄の幅そのものが入力の手がかりになります。
| 項目 | 推奨幅の目安 |
|---|---|
| 郵便番号・電話番号 | 8〜12文字分 |
| 氏名・取引先名 | 20〜24文字分 |
| 金額・数量 | 10〜12文字分（右揃え） |
| 住所・備考 | 全幅 |
ルール4：グループ化で認知の負荷を下げる
10項目を超えるフォームは、意味のまとまりごとに区切ります。区切りは罫線より 見出し＋余白 のほうが軽く見えます。1グループの項目数は5〜7が目安です。
ルール5：Tab順は業務の入力順と一致させる
画面上の見た目の配置ではなく、実際の伝票の記入順にTab移動を合わせます。2カラムレイアウトのフォームで、Tabが左列→右列と横に飛ぶのか、左列を上から下に進むのかは必ず決めておいてください。
tabindex に正の値を振って順序を制御するのは避けてください。保守時に破綻します。DOMの並び順を業務の順序に合わせるのが正解です。
ルール6：Enterキーの挙動を全画面で統一する
業務システムで最も事故が多いのがここです。
- 1行テキスト入力中のEnterは送信しない（次項目へ移動、または何もしない）
- 検索条件の入力欄でのEnterは検索を実行する
- 登録・更新など取り消せない操作は、Enterでは実行せずボタン押下を必須にする
- いずれの挙動も、画面種別ごとに標準として明記する
ルール7：入力補助を惜しまない
- 全角数字を半角に自動変換する（利用者に直させない）
- 金額は入力後に3桁区切りを自動付与する
- 郵便番号から住所を自動補完する
- 日付は「20260720」の連続入力でも受け付け、`2026/07/20` に整形する
- コード入力欄は前方一致のサジェストを出す
- 数量・単価はテンキーだけで入力を完了できるようにする
「正しく入力させる」より「多少雑に入力しても正しく解釈する」ほうが、結果として入力精度が上がります。バリデーションを厳しくする前に、変換で吸収できないかを検討してください。
ルール8：セレクトボックスの使い分け
| 選択肢数 | 推奨UI |
|---|---|
| 2 | ラジオボタン（またはトグル） |
| 3〜6 | ラジオボタン（一覧性が高く、クリック1回で選べる） |
| 7〜30 | セレクトボックス |
| 30以上 | 検索付きのコンボボックス（インクリメンタルサーチ） |
選択肢が多いセレクトボックスは、キーボードで頭文字を打って絞り込めるようにしてください。マウスでのスクロール選択は遅く、誤選択も起きやすい操作です。
ルール9：初期値とフォーカスを設定する
- 画面表示時、最初の入力項目に自動でフォーカスを当てる
- 日付は「本日」、担当者は「ログインユーザー」など、最も選ばれる値を初期値にする
- ただし金額・数量など誤りが致命的な項目には初期値を入れない
- 前回入力値の引き継ぎは、明示的な「前回条件で入力」ボタンで行う
ルール10：エラーは項目の直下に出す
エラー表示は専用の記事で詳しく扱いますが、位置の原則だけ先に決めておきます。
画面上部にまとめて「3件のエラーがあります」とだけ表示。どの項目か探す必要がある。
各項目の直下に具体的な内容を表示し、画面上部のサマリからリンクで飛べる。
ルール11：保存の安全装置を入れる
- 送信ボタンは押下直後に無効化し、二重送信を防ぐ
- 処理中は「登録中…」とラベルを変え、状態を可視化する
- 入力途中の離脱時に警告を出す
- 長時間入力するフォームは自動下書き保存を検討する
- セッション切れで入力内容が消える設計を許容しない
30分かけて入力した内容が、セッションタイムアウトで全消失するケース。タイムアウト前に警告を出すか、入力内容をローカルに退避するかのどちらかは必ず実装してください。
ルール12：確認画面は「取り消せないとき」だけ
入力 → 確認 → 完了の3画面構成は、業務システムでは必ずしも最適ではありません。修正のたびに戻る操作が発生し、入力時間が伸びます。
確認画面を置く
取り消せない処理（締め処理、送信、支払確定）、金額が大きい処理、外部への通知を伴う処理。
確認画面を置かない
後から編集できる登録・更新。代わりに、登録後の完了メッセージに「編集する」リンクを添えるほうが速くなります。
まとめチェックリスト
- ラベル位置が全画面で統一されている
- 必須／任意の表示ルールが1つに統一されている
- 入力欄の幅が桁数を示唆している
- Tab順が業務の入力順と一致している
- Enterの挙動が画面種別ごとに明文化されている
- 全角半角変換・桁区切りなどの入力補助がある
- 選択肢数に応じてUIを使い分けている
- 二重送信防止と離脱警告が入っている