広告動画はワイヤーフレームで構成とタイミングを固めてから、DESIGN.mdで色を付ける
AIはスタイルを想像するより構造を写すほうが得意なので、色や写真の前に、箱・枠線だけの文字・ガイド線で全カットの骨組みとタイミングを決める。
どんな問題を解決するか / いつ使うか
Claude Code などでモーション広告やプロダクト紹介動画を作るとき。仕上がりが安っぽい、レイアウトが場面ごとにぶれるとき。
やり方
- 構成を9ビート(各1行)で書く:課題 → 捉え直し → 名前 → 使い方(実際のUIで1操作)→ 不安への答え → 対象の広さ → 数字で仕組み → オファー → CTA。2文必要なビートは2つに分ける。
- 各ビートをワイヤーフレームにする:UIは箱、文字は枠線だけ、ガイド線を引く。色・写真は使わない。ビートごとに静止画を1枚確認する。
- 動く前に、ワイヤーフレームの段階でカット・間・動きのタイミングを固定する(変更が安いうちに)。
- 見出しは各ビート3案ずつ作り、ブリーフに合うものを選ぶ。
- 最後に DESIGN.md から色・書体・実際のコンポーネントを当てる。レイアウトは動かさず、色だけ変える。
- 完成版とワイヤーフレームを左右に並べて書き出し、レビューに使う(右で崩れていれば左も崩れている)。
注意点・対応状況
- 投稿内の特定ツール(HyperFrames、Jev等)は再現性を確認していない。考え方(構造→着色)だけを取り入れる。
- 静止画のバナーやスライドでも「ワイヤー→着色」の順番は同じように使える。
出典
- 投稿者: @ArchiveExplorer (Archive)
- 投稿: @ArchiveExplorer · 2026-10-04
- 収集日: 2026-10-09(JST)