コンテンツにスキップ

複製→新規登録パターン

例:見積・テンプレート管理システム

過去のデータをコピーして、新しいデータを作成する。

適用する原則: 登録はその場で行う確認画面は最低限にする

  • 似たような見積を繰り返し作成する
  • 過去の見積をベースに、一部を変更して再利用したい
  • 複製元の見積は変更しない

典型パターン:詳細→複製確認→新規登録→確認→完了 別タブで開く ↗

典型の画面遷移

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 更新
  • 一覧から複製: 詳細画面を経由せず、一覧から直接複製
  • 複製 = 即座に保存: 複製ボタンで新しいレコードをDBに作成
  • 下書き状態で作成: 複製直後は「下書き」ステータス
  • 一覧に戻る: 複製後は一覧画面に戻り、増えたことを確認できる
  • 新しい行をハイライト: 複製された行が視覚的に分かる

画面遷移の比較

観点典型再設計
画面数5画面2画面
ルート数84
複製の確認ダイアログありなし(削除可能だから)
複製後の画面新規登録画面一覧(増えたことを確認)
複製後の状態セッションに一時保存DBに下書き保存
編集方法新規登録画面詳細画面

一覧から複製 → 一覧に戻る

  • 「詳細を見てから複製」は不要。複製後に詳細を開けばいい
  • 一覧に戻ることで、増えたことが視覚的に分かる
  • 複製元と新しい見積が並んで表示される

確認ダイアログも不要

  • 複製は「取り消し可能」な操作
  • 元データは変更されない、複製後は「下書き」状態
  • 間違えたら削除すればいい

事前の確認より、事後の削除を容易にする。