複数写真から動画を作るUIの要件定義：並び順とpreviewをテスト可能にする
複数画像を動画へまとめる機能では、uploadよりも「順番を変えた後に何が無効になるか」を定義するほうが重要になる。写真ごとのmotion、duration、crop、preview、exportが同じ状態に置かれると、古いpreviewを誤って出力しやすい。
本稿は公開UIから整理した設計・QA案であり、内部実装や動画モデルの性能を分析したものではない。
要件の分割
| 領域 | 入力 | 成功条件 | 再確認が必要になる変更 |
|---|---|---|---|
| sequence | 画像、順序 | opening/中間/closingを確認できる | reorder、削除、追加 |
| frame | duration、motion、crop | 個別frameが意図に合う | duration/motion/crop変更 |
| preview | sequence revision、比率 | 対象revisionを再生できる | 上記のいずれか |
| export | approved preview | 確認済みrevisionのみ出力 | preview未承認 |
Make a Video with Pictures のように、画像を順番に置き、写真ごとにmotionとdurationを調整し、preview後にratioを選ぶフローでは、sequence revisionを明示的に持つ。
type Frame = { id: string; order: number; durationMs: number; motion: "still" | "pan" | "push" };
type Sequence = { id: string; revision: number; frames: Frame[]; status: "draft" | "needs-review" | "approved" };
単一写真のmotionは別jobにする
一枚の強い写真へ動きを加える用途は、複数写真のsequenceとは別のレビュー軸を持つ。Photo to Video AI のように、source、motion brief、保持条件、previewを別jobとして扱う。
type SingleMotion = {
sourceId: string;
sourceRevision: number;
brief: string;
keep: string[];
status: "draft" | "processing" | "needs-review" | "approved" | "failed";
};
顔、文字、ロゴ、反射、建物の直線など、保持したい条件を明示してからreviewする。生成できたことをaccept条件にしない。
previewはexportの前提
Photo Video Maker のように、複数画像のpacingをbrowserで確認する用途では、previewを独立entityとして保存する。
type Preview = {
sequenceId: string;
sequenceRevision: number;
ratio: "16:9" | "9:16" | "1:1";
status: "rendering" | "needs-review" | "approved" | "failed";
};
sequenceを並び替えたら、過去previewのapproved表示を外す。縦横比を変えた場合も同じである。cropで主役が切れる可能性は、frame単位の警告として表示する。
Playwrightで確認する遷移
test("reorder invalidates a preview", async ({ page }) => {
await page.getByTestId("frame-5").dragTo(page.getByTestId("frame-1"));
await expect(page.getByText(/preview again/i)).toBeVisible();
await expect(page.getByRole("button", { name: /export/i })).toBeDisabled();
});
実UIのselector・文言へ置換する前提で、以下も確認する。
- upload途中のframeを含むpreview request
- 二重submit
- preview中のcrop/duration変更
- refresh後の順序とrevision復元
- preview failure後のretry
- キーボード操作での並び替えと現在位置の通知
運用の境界
previewが再生できても、人物の同意、音楽の権利、商品表現、公開先の規約は別に確認する。source、sequence revision、比率、採用理由を残すと、フォトムービーは単なる生成結果ではなく、追跡できる編集判断になる。