背景
サムネイル生成UIで「目立つものを作る」だけを要件にすると、レビュー動画と料理動画の違いをテストできない。前者はデザイン上のミスを見せて笑いの根拠を作り、後者は料理の質感や完成の瞬間を見せる必要があるからだ。
ここでは Thumbs AI のような公開ツールを題材にするが、内部実装や性能を推測せず、受け入れ条件の組み立て方だけを扱う。
Worst YouTube Thumbnailsでは、評価対象と批評の根拠が同じ画面で読めることが重要になる。
一方、Cooking Thumbnailでは、料理を主役にし、テキストは実際の動画にある特徴だけを補足する。どちらも「主役」「証拠」「約束」を持つが、証拠の種類が異なる。
要件を表にする
| 観点 | レビュー | 料理 |
|---|---|---|
| 主役 | 評価対象の一枚 | 完成料理・手元 |
| 証拠 | 文字の過密、構図の破綻 | 焼き色、湯気、断面 |
| 約束 | どこが面白いか | どんな食感か |
| 禁止 | 人への攻撃、対象不明 | 動画にない完成度 |
公開ページに見える入力案内では、PNG/JPG/JPEG/WebPや4MBまでという条件を確認できる。これはファイル検証のテストには使えるが、クリック率や生成品質のベンチマークではない。
E2Eの例
以下はセレクタや文言を実DOMから検証したものではなく、契約を説明するためのPlaywright例である。
test("recipe brief keeps the primary subject", async ({ page }) => {
await page.getByLabel("Format").selectOption("recipe");
await page.getByLabel("Subject").fill("焼き上がったケーキの断面");
await page.getByLabel("Evidence").fill("しっとりした層");
await page.getByRole("button", { name: "Generate" }).click();
await expect(page.getByTestId("primary-subject")).toContainText("ケーキ");
await expect(page.getByTestId("promise-warning")).toBeHidden();
});
レビュー分岐では Evidence が空なら生成を許可しない、料理分岐では「カリカリ」などの表現と証拠画像が紐づいているかを確認する。
QAチェックリスト
- スマホ幅で主役が一秒以内に判別できる
- 文字を隠してもジャンルの約束が残る
- 出力文言が動画内の内容を越えない
- 変更した比較軸が一つだけである
- 入力形式とサイズのエラーが説明可能である
UIに候補比較を追加するなら、候補ごとに「変更した軸」と「却下理由」を保存したい。ランダムな派手さではなく、判断の再現性が得られるからだ。