複製→新規登録パターン
例:見積・テンプレート管理システム
過去のデータをコピーして、新しいデータを作成する。
適用する原則: 登録はその場で行う、確認画面は最低限にする
- 似たような見積を繰り返し作成する
- 過去の見積をベースに、一部を変更して再利用したい
- 複製元の見積は変更しない
典型パターン:詳細→複製確認→新規登録→確認→完了
別タブで開く ↗
GET /quotes 見積一覧GET /quotes/:id 見積詳細POST /quotes/:id/duplicate 複製実行 → セッションに保存GET /quotes/new 新規登録画面(プリフィル)POST /quotes/new/confirm 確認画面へGET /quotes/new/confirm 確認画面POST /quotes 登録実行GET /quotes/new/complete 完了画面- 複製後に「新規登録フロー」に入ってしまう
- 一覧 → 詳細 → 登録画面 → 確認 → 完了 と5画面遷移
- 複製元との差分が分からない
- 「何がコピーされたか」が不明確
再設計パターン:一覧から複製→一覧に戻る
別タブで開く ↗
GET /quotes 見積一覧POST /quotes/:id/duplicate 複製実行 → 即座にDB保存 → 一覧にリダイレクトGET /quotes/:id 見積詳細(編集時)PUT /quotes/:id 更新設計のポイント
Section titled “設計のポイント”- 一覧から複製: 詳細画面を経由せず、一覧から直接複製
- 複製 = 即座に保存: 複製ボタンで新しいレコードをDBに作成
- 下書き状態で作成: 複製直後は「下書き」ステータス
- 一覧に戻る: 複製後は一覧画面に戻り、増えたことを確認できる
- 新しい行をハイライト: 複製された行が視覚的に分かる
| 観点 | 典型 | 再設計 |
|---|---|---|
| 画面数 | 5画面 | 2画面 |
| ルート数 | 8 | 4 |
| 複製の確認 | ダイアログあり | なし(削除可能だから) |
| 複製後の画面 | 新規登録画面 | 一覧(増えたことを確認) |
| 複製後の状態 | セッションに一時保存 | DBに下書き保存 |
| 編集方法 | 新規登録画面 | 詳細画面 |
一覧から複製 → 一覧に戻る
- 「詳細を見てから複製」は不要。複製後に詳細を開けばいい
- 一覧に戻ることで、増えたことが視覚的に分かる
- 複製元と新しい見積が並んで表示される
確認ダイアログも不要
- 複製は「取り消し可能」な操作
- 元データは変更されない、複製後は「下書き」状態
- 間違えたら削除すればいい
事前の確認より、事後の削除を容易にする。