フォーム
データ入力に使うフィールドの種類、配置ルール、バリデーションの設計指針。すべての作成・編集画面に適用する。
フィールドタイプと使い分け
| タイプ | 使いどころ | 例 |
|---|---|---|
| テキスト入力 | 自由記述のテキスト（短文） | 名前、メールアドレス |
| テキストエリア | 複数行の自由記述 | 説明、メモ |
| セレクト | 選択肢が4つ以上ある場合 | カテゴリ、教室 |
| ラジオボタン | 選択肢が2〜3つで排他的 | ステータス、公開設定 |
| チェックボックス | 複数選択可、または単一のON/OFF | 通知設定、権限 |
| 日付ピッカー | 日付の入力 | 開始日、期限 |
| ファイル | ファイルのアップロード | CSV、画像 |
ラベルの配置
ラベルは常にフィールドの上に配置する（stacked layout）。インラインラベル（左横配置）は使わない。上配置の理由:
- フィールド幅を最大限使える
- 上から下への視線移動だけで入力できる
- レスポンシブ対応が容易
必須/任意の表記
必須フィールドはラベル横に赤い「*」を付ける。任意フィールドはラベル横にグレーで「任意」と表記する。どちらの表記もない場合は必須扱い。フォーム内の大半が必須の場合は、任意フィールドだけにラベルを付ける（逆も同様）。
グルーピング
関連するフィールドはセクションとしてグループ化する。セクション見出し（小さめ・サブテキスト色）と区切り線で視覚的に分ける。1セクションのフィールド数は3〜5個を目安にする。セクションが多すぎる場合はタブやウィザードに分割する。
バリデーション
インラインエラー
エラーメッセージはフィールド直下に赤テキストで表示する。同時にフィールドのボーダーを赤に変える。エラーメッセージは「何が間違っているか」ではなく「どうすれば正しくなるか」を伝える（例: 「不正な形式です」ではなく「有効なメールアドレスを入力してください」）。
バリデーションのタイミング
フォーカスアウト時（on blur）にフィールド単位でバリデーションする。送信ボタン押下時にもフォーム全体をチェックし、エラーがあれば最初のエラーフィールドにスクロールする。入力中（on input）のリアルタイムバリデーションは煩わしいため使わない。
無効フィールド
編集不可のフィールドは背景色をグレーにし、テキストを薄くする。カーソルを not-allowed にしてクリックできないことを示す。なぜ編集できないかの補足テキストをフィールド下に表示する（例: 「IDは変更できません」）。
アクションボタン
配置: フォーム末尾に右寄せ。キャンセル（セカンダリ、ボーダーのみ）+ 保存（プライマリ、塗りつぶし）。
ラベル: 保存ボタンは具体的な動詞を使う（「作成する」「保存」「送信」）。「OK」「確定」は避ける。
破壊的操作: 削除ボタンは左寄せ・赤テキストで配置し、保存ボタンから距離を取る。
Do / Don't
- ラベルは常にフィールドの上に配置する
- エラーメッセージで「どうすれば正しくなるか」を伝える
- 必須/任意を明確に示す
- 保存ボタンには具体的な動詞を使う
- ラベルをフィールドの左横に置かない（インラインラベル禁止）
- プレースホルダーをラベル代わりに使わない
- 入力中にリアルタイムバリデーションしない
- 1セクションに6つ以上のフィールドを詰め込まない
プロトタイプ
基本情報
詳細設定
IDは自動採番されるため変更できません。