テンプレート選択型画像生成UIの要件定義とテスト設計
この記事は、公開されているミーム画像生成ページを例に、テンプレート検索、素材入力、生成、レビュー、書き出しを要件へ分解します。対象サービスのソースコードや内部APIを解析した記事ではありません。セレクタと契約は説明用です。
1. テンプレートを構造化する
公開されている YouTube meme thumbnail ページには、reaction、比較、gaming、Shorts、faceless、deep-fried/cursed などの形式があります。
| 項目 | 目的 | テスト例 |
|---|---|---|
| name / description | 検索とアクセシビリティ | 画像なしでも区別できる |
| slots | 必要入力の定義 | 必須不足で生成不可 |
| ratios | クロップ契約 | 未対応比率を選択不可 |
| contextNote | 意味の補足 | 詳細画面で参照可能 |
| sourceReviewRequired | 権利確認の導線 | 書き出し前に表示 |
2. 状態を分ける
loading: boolean だけでアップロード、生成、書き出しを表すと、再試行先と入力保持が曖昧になります。browsing / editingBrief / uploading / generating / reviewing / recoverableError / exporting を分けます。
Thumbs.ai の公開サイトには、作成、再構成、表情、スタイル、テンプレートなど複数の入口があります。入口ごとに入力の種類と失敗契約を明示します。
3. テンプレート変更をテストする
互換スロットは保持し、非互換スロットは削除前に通知します。以下は説明用の Playwright 例です。実際のDOMセレクタではありません。
import { test, expect } from "@playwright/test";
test("keeps a compatible headline when the template changes", async ({ page }) => {
await page.goto("/illustrative-meme-editor");
await page.getByRole("button", { name: "Reaction template" }).click();
await page.getByLabel("Headline").fill("THE SAFE OPTION");
await page.getByRole("button", { name: "Comparison template" }).click();
await expect(page.getByLabel("Headline"))
.toHaveValue("THE SAFE OPTION");
});
4. 最小受け入れテスト
- テンプレート名と選択状態が支援技術へ伝わる。
- 顔、スクリーンショット、文字の検証を分離する。
- 失敗後もテンプレートと入力が保持される。
- 0件、1件、複数件、部分成功で候補一覧が破綻しない。
- キーボードで候補を選択できる。
- 比率とクロップを出力前に確認できる。
- 再生成後に前候補へ戻れるか明示する。
- 二重送信と古いレスポンスの上書きを防ぐ。
5. 自動化と人手レビューを分ける
自動化できるのは状態遷移、必須入力、アクセシビリティ名、ファイル形式、寸法などです。ミームの文脈、人物の扱い、画像の出典、動画内容との一致は人手レビューに残します。
生成や加工は、所有権、許諾、著作権上の例外を自動的に確立しません。成果指標もトピック、タイトル、チャンネル、公開時期に左右されるため、UIテストで保証してはいけません。
まとめ
テンプレート選択型UIでは、見た目だけでなく意味、入力スロット、比率、確認事項を構造化します。変更後も戻れること、失われるものが分かること、機械では判断できない境界を示すことが信頼できる編集体験につながります。