初投稿・Q&Aサムネイルの要件を小さく定義してテストする

前提

本稿は公開UIから読み取れる入力と、フロントエンドで再利用できる要件・テスト観点を整理する設計メモである。内部ソースコード、API、生成モデル、CTR、処理時間は確認していない。

初投稿は「何を見せるか」が決まらないまま、画像・文字・装飾を同時に増やしやすい。Q&Aは質問を複数載せて、話し手と背景の階層が崩れやすい。まず編集上の契約を小さくする。

入力契約

種類	必須	確認内容
動画の中心	Yes	一文で説明できる場面・対象
主役	Yes	小画面でも判別できる1要素
Q&Aの質問	Q&Aのみ	実際の動画に存在する1つの問い
参考画像	Optional	形式・容量・利用権を別々に確認
テキスト	Optional	タイトルの単純な繰り返しではない短文

My First Video Thumbnail の流れは、初投稿向けの型、短い説明または参考画像、生成というオンボーディングとして分解できる。白紙から始めないことが目的であり、デザイン品質や公開成果を保証するものではない。

Q&Aの表示ルール

Q&A Thumbnail では、フォーマット・質問フック・話し手の配置を分けてレビューする。答えを表示するかどうかも明示的な判断項目にする。通常は質問を見せ、回答は動画に残す。

テストケース

ID	条件	期待結果
F01	初投稿の説明が空	生成せず、入力を促す
F02	主役が複数で優先順位なし	1要素を選ぶよう促す
Q01	Q&Aの質問が動画にない	要確認としてレビューを止める
Q02	質問を5つ入力	1つの主質問を選べる
E01	参考画像が4MB超	理由を表示し、説明文は保持
E02	対応外形式	置換を促し、他の入力を消さない
R01	最初の30秒と約束が不一致	revise として再編集へ戻す

自動化の契約例

セレクターは実DOMを検証したものではなく、Playwrightのテスト構造を示すだけである。

test("Q&A cover keeps the question visible", async ({ page }) => {
  await page.getByLabel("Question").fill("Should I change careers?");
  await page.getByRole("button", { name: "Generate" }).click();
  await expect(page.getByTestId("question-hook")).toContainText("change careers");
});

公開前チェック

ブラウザ上の Thumbs AI を参考にする場合も、対応形式と利用権を同じ項目として扱わない。顔、ゲスト、ロゴ、ゲーム画面は別の確認が必要である。UIから内部実装やベンチマークを推測せず、「観測した入力」「提案した状態」「実際にテストした結果」を分けて記録する。