テック技報最新号へ →
デザイン

広告動画はワイヤーフレームで構成とタイミングを固めてから、DESIGN.mdで色を付ける

AIはスタイルを想像するより構造を写すほうが得意なので、色や写真の前に、箱・枠線だけの文字・ガイド線で全カットの骨組みとタイミングを決める。

@ArchiveExplorer · 2026-10-09
#AIデザイン#モーション#広告#ワイヤーフレーム#DESIGN.md#Claude

どんな問題を解決するか / いつ使うか

Claude Code などでモーション広告やプロダクト紹介動画を作るとき。仕上がりが安っぽい、レイアウトが場面ごとにぶれるとき。

やり方

  1. 構成を9ビート(各1行)で書く:課題 → 捉え直し → 名前 → 使い方(実際のUIで1操作)→ 不安への答え → 対象の広さ → 数字で仕組み → オファー → CTA。2文必要なビートは2つに分ける。
  2. 各ビートをワイヤーフレームにする:UIは箱、文字は枠線だけ、ガイド線を引く。色・写真は使わない。ビートごとに静止画を1枚確認する。
  3. 動く前に、ワイヤーフレームの段階でカット・間・動きのタイミングを固定する(変更が安いうちに)。
  4. 見出しは各ビート3案ずつ作り、ブリーフに合うものを選ぶ。
  5. 最後に DESIGN.md から色・書体・実際のコンポーネントを当てる。レイアウトは動かさず、色だけ変える。
  6. 完成版とワイヤーフレームを左右に並べて書き出し、レビューに使う(右で崩れていれば左も崩れている)。

注意点・対応状況

  • 投稿内の特定ツール(HyperFrames、Jev等)は再現性を確認していない。考え方(構造→着色)だけを取り入れる。
  • 静止画のバナーやスライドでも「ワイヤー→着色」の順番は同じように使える。

出典

X の元の投稿を開く