RYOTA UEMURACLOSE

2026.10〜 · 個人開発(企画・設計・実装・検証)

CUEFORM

AI エージェントでモーショングラフィックスを制作するデスクトップアプリ

  • Electron
  • React
  • Vite
  • Remotion
  • three.js
  • OpenCV.js
  • Node.js
  • Claude Code
  • Codex CLI
  • FFmpeg
  • yt-dlp

映像制作の工程(構成、素材と指示、デザインと動きの生成、書き出し)を 1 つのアプリで扱う。音楽に合わせて構成を組み、ノードで素材・参考映像・演出を指定すると、AI エージェント(Codex / Claude Code)がデザインと動きを作る。

行(src・electron)
約 2.4 万
コミット(全ブランチ)
349
自動テスト
566

Example

作例:AI のクリエイティブ(10 秒)

「AI のクリエイティブ」という抽象的なテーマで作った 10 秒の作例。約 0.9 秒ごとに見せ方を変え、文字「AI」「CREATIVE」を経て、最後に「CUEFORM」のロゴが組み上がるよう指示した。

構成
1 ブロック・10 秒・10 展開
ノード
20 個(展開 10・指定 10)
AI
Claude Code(Opus・推論 high)
修正
なし
生成の記録(アプリのジョブ記録より)
工程時間費用
デザインの生成23 分 25 秒$5.02
モーションの生成7 分 53 秒$2.80
合計約 31 分$7.83

Workflow

  1. 01 構成

    構成のブロックを作る

    タイムラインに構成のブロックを置き、内容を文章で書く。作例では、10 秒のブロックに「10 の展開を大きな面の入れ替わりでつなぎ、最後に CUEFORM のロゴが組み上がって止まる」と書いた。音楽を使うときは、波形と拍に合わせてブロックを置ける。

    構成の画面
  2. 02 スタイル・素材

    ノードで指示をつなぐ

    展開ごとの内容と、参考映像・物量・カメラ・配色などの指定をノードでつなぐ。作例では 20 個のノードを使い、参考映像からはテンポと構図だけを借りて、配色や形は変えるよう指定した。

    スタイル・素材の画面
  3. 03 指示書

    ノードを制作指示書に変換する

    つないだノードを、AI を通さずに決まった手順で制作指示書に変換する。どの文がどのノードから来たかを確かめられる。

    指示書の画面
  4. 04 デザインとモーション

    AI がデザインとモーションを生成する

    AI がまず展開ごとのデザインを作り、次に動きを付ける。生成中は AI とのやり取りと、使ったトークン数と費用を見られる。

    デザインとモーションの画面
  5. 05 修正

    文章で修正を指示する

    直したいことを文章で書くと、AI が対象・変更内容・範囲に分けた修正案にする。承認すると、変わる部分だけを作り直す。画面は前の版のもの。

    修正の画面
  6. 06 生成中

    生成中の下書きを確認する

    作り直しの途中でも、AI がコードを書き終えるたびに下書きを再生して確かめられる。画面は前の版のもの。

    生成中の画面
  7. 07 書き出し

    MP4 に書き出す

    書き出す前に構成や音声に問題がないかを確かめ、解像度や FPS を選んで MP4 に書き出す。

    書き出しの画面

Made with CUEFORM

実際の制作での使用例

Life is Tech! AI×Creative Hack! in AKITA 2026 のエンディング映像のうち、冒頭のオープニングを CUEFORM で作った。

  • AKITA 2026 ED の冒頭(メンバー紹介の手前まで)

インフォグラフィックス:論文の解説

ゼロ知識証明の論文「Spartan」を解説する約 2 分の映像。文字や数式の多い映像も作れるかを試した。

  • Spartan の解説(約 2 分)

Engineering

  1. 01ノードから指示書への変換

    使い方スタイル・素材の画面でノードをつなぐと、その場で自然言語の指示書が更新される。

    素材・参考・指示を型の決まったノードで扱い、AI を通さずに決まった手順で指示書に変換する。どの文がどのノードから来たかを記録し、ノード同士の矛盾も見つける。図形の量などは数値の範囲で指定する。

    ノード(展開 1〜10 と表現の指定)
    ノード(展開 1〜10 と表現の指定)
    変換された指示書(どのノードから来た文かが付く)
    変換された指示書(どのノードから来た文かが付く)
  2. 02モデルによる違い

    使い方モデルが新しく出るたびに、同じ指示で作らせて比べている。

    Opus 5.5・Fable 5.1・Fable 5.2 の 3 つに、同じ指示・人の修正なしで 8 秒の映像を作らせて比べた。構図とトランジションは Fable 5.2 がはっきり良かった。少ない動きで画面を大きく見せていて、実際の仕事で使える水準に近づいている。

    デザインのセンスは言葉で書き表せないため、プロンプトを調整しても上がらなかった。上がったのは、モデルが新しくなったときだった。次の Opus 5.6・Fable 5.3 でどこまで良くなるかが、このツールで作れる映像の質を決める鍵になると考えている。

    以前の比較では、推論を max にすると費用は high の 5〜7 倍、時間は約 5 倍になったが、映像は良くならなかった。

    左から Opus 5.5・Fable 5.1・Fable 5.2。同じ指示から、人の修正なしで作った 8 秒
  3. 03描画結果の機械検査(文字の重なり)

    使い方生成のたびに自動で動き、読ませる文字が隠れていれば AI に結果を渡して直させる。

    文字が図形や別の文字に隠れていないかを、画面写真ではなく、描画しているブラウザのレイアウト計算から測る。各要素の位置・大きさ・重なり順を取り出し、読ませる文字の上に別の要素が乗っていないか、画面からはみ出していないかを調べる。飾りの文字の重なりでは直させない。10 本の生成で誤検知は 0 件だった。

    Before:検査なし
    Before:検査なし
    After:検査あり
    After:検査あり
  4. 04修正の高速化

    使い方修正タブで文章を書くと、AI が対象・変更・範囲に分けた修正案にし、承認すると作り直す。

    前回の生成結果を引き継ぎ、変わった所だけを編集させるようにして、修正にかかる時間を 56% 短くした。修正時に AI に渡す文章も 86% 減らした。

  5. 05表現の知識と意味検索

    使い方生成のたびに、依頼の内容に合う表現の知識だけを選んで AI に渡す。

    モーショングラフィックスの表現を、レシピ約 100 件と知識約 450 件にまとめた。依頼の内容に近いものだけを、手元で動く埋め込みモデル(EmbeddingGemma)で探して AI に渡す。

  6. 06音楽の解析

    使い方音源を読み込むと、タイムラインに波形・音量・拍・テンポが表示され、構成をそれに合わせられる。

    帯域ごとの音の変化から拍とテンポを推定し、小節の頭とセクションの区切りも出す。解析はアプリの中だけで行う。テンポが分かっている合成音源 11 曲で試し、正しく当てられた曲を 4 曲から 11 曲に増やした。

    解析した音楽のタイムライン(波形・音量・拍・区間・同期候補)
    解析した音楽のタイムライン(波形・音量・拍・区間・同期候補)
    解析結果(テンポ・拍子・盛り上がりの区間)
    解析結果(テンポ・拍子・盛り上がりの区間)
  7. 07リファレンス映像の解析

    使い方リファレンスのノードで「配色」「動き」など参考にする観点を選ぶと、生成のときに自動で解析される。

    参考映像のカット・動きのない区間・色・配置・カメラの動きを ffmpeg と OpenCV で測り、観点ごとに必要なフレームだけを AI に渡す。一度解析した映像は結果を使い回す。

    リファレンスノードの設定(参考にする観点と、特に参考にする部分)
    リファレンスノードの設定(参考にする観点と、特に参考にする部分)

Development(2026)

  1. 10月上旬

    構成のタイムライン、音楽の解析、ノードから指示書への変換、AI によるデザインとモーションの生成、書き出しまでの一通りを作成

  2. 10月中旬

    表現の知識と意味検索を追加。生成の方式とモデルを比較し、設定を決めた

  3. 10月下旬

    文章での修正、リファレンス映像の解析、自動保存を追加

  4. 10月末

    文字の重なりなど描画結果の検査、複数の構成をまとめて生成する機能を追加

← Code に戻る