作成 / 編集
新規作成・既存編集のフォーム画面パターン。データの入力・変更を安全かつ効率的に行うための設計。
2つのサブパターン
作成・編集フローは、入力の複雑さに応じて2つのパターンに分かれる。
標準フォーム
1画面で完結する入力フォーム。教室作成、生徒編集など、フィールド数が限られ、データ間の依存関係がない場合に使う。標準レイアウト内に配置。
ウィザード（ステッパー）
複数ステップに分かれた作成フロー。CSV取込やオリジナル教材作成など、入力が複雑でステップ間に依存関係がある場合に使う。フルスクリーンモーダルで表示。
使い分けの判断基準
| 標準フォーム | ウィザード | |
|---|---|---|
| フィールド数 | 少〜中（1画面に収まる） | 多い、またはステップごとに入力内容が異なる |
| データ依存 | フィールド間に依存なし | 前ステップの入力が次ステップに影響する |
| ファイル取込 | なし | CSV取込 + プレビュー + 確認が必要 |
| 例 | 教室作成、生徒編集 | オリジナル教材作成、CSV一括登録 |
標準フォームの設計原則
- 狭い幅: フォームは一覧・詳細より狭い幅で配置する。入力フィールドが横に広がりすぎると目線の移動が大きくなり、入力ミスが増える。
- ラベルはフィールドの上: ラベルは常にフィールドの上に配置する（stacked）。インラインラベルは使わない。
- セクション分割: 関連するフィールドをグループ化し、セクション見出し + 区切り線で分ける。1セクションのフィールド数は3〜5個を目安にする。
- アクションの配置: フォーム末尾に配置。右寄せでキャンセル（セカンダリ）+ 保存（プライマリ）。
ウィザードの設計原則
- ステップ名: 各ステップには「何をするか」を簡潔に示す名前を付ける（例: 「データの入力」「データの確認」「完了」）。
- 進捗表示: 画面上部にステップインジケータを表示し、現在位置と全体の進捗を視覚化する。
- 戻る/進む: 各ステップで「戻る」「次へ」ボタンを提供する。「戻る」は入力データを保持する。
- 最終確認: 送信前に入力内容をまとめたプレビューステップを設ける。先生が「これで合っている」と確認できる安心感を提供する。
作成 vs 編集の差分
| 作成（Create） | 編集（Edit） | |
|---|---|---|
| タイトル | 「〜を作成」 | 「〜を編集」 |
| 初期値 | 空（placeholder表示） | 既存値をプリフィル |
| 読み取り専用 | なし | ID等を disabled 表示 |
| 削除ボタン | なし | フォーム末尾の左寄せ、赤テキスト |
| 保存ラベル | 「作成する」 | 「保存」 |
| キャンセル先 | 一覧に戻る | 詳細に戻る |
バリデーション
エラーはフィールド直下にインラインで表示。タイミングはフォーカスアウト時（on blur）で即時フィードバック。送信時にもまとめてチェックし、未入力の必須フィールドにスクロール。
破壊的操作
削除ボタンはフォーム末尾の左寄せに配置。赤テキストで目立たせるが、プライマリボタンから離して誤操作を防ぐ。クリック後は必ず確認ダイアログを表示。
Do / Don't
Do
- フィールド数が多いフォームはセクションで分割する
- 編集画面ではIDなど変更不可の項目を disabled で明示する
- ウィザードの最終ステップで入力内容のプレビューを表示する
- キャンセル時に未保存データがあれば確認ダイアログを出す
Don't
- 単純なフォームにウィザードを使わない（過剰な設計）
- 削除ボタンを保存ボタンの隣に置かない
- すべてのバリデーションを送信時まで遅らせない
- 作成と編集でレイアウトを大幅に変えない（同じ構造を共有する）
プロトタイプ
← オブジェクト一覧に戻る
オブジェクトを作成
新しいオブジェクトの情報を入力してください。
基本情報
設定
バリデーションエラー例
有効なメールアドレスを入力してください。