AIでモーショングラフィックスを作る道具まとめ

道具は4段に分かれる

先に結論です。AIでモーションを作るときの道具は、次の4段に分かれます。

• 見つける：動きの見本と素材を探す
• 名前を知る：AIに打ち込む動きの名前を覚える
• AIに作り方を渡す：スキルを入れて、AIに手順を読ませる
• 書き出す：エンジンでMP4にする

紹介する投稿はどれも、投稿者の方が時間をかけて作ったり、調べたりしたものです。この記事は整理しただけなので、気になったものは元の投稿を開いて、いいねやブックマークで作者に届けてください。

たかゆさん：動きの辞典「モーションリファレンス」

UI演出デザイナーのたかゆさんが運営する、動きとイージングの辞典サイトです（motion-reference.takayustudio.jp）。サイトの表示では782件が登録されていて、例えば「フェード＋スライド」なら「600ms・easeOutCubic」のように、時間とイージングの数値がセットで載っています。速さを0.25倍にしたり、コマ送りしたりして見比べられます。

動きの名前と数値を決めたいときに開くサイトです。「もっとふわっと」のような言い方しか浮かばないときに、見本を再生して、気に入ったものの名前・ms・イージング名をメモします。

しょうへいさん：動きの名前の解説動画を自分の分野で作る「motion-explainer」

しょうへいさんの「AIに指示するための専門用語」シリーズの作り方が、GitHubで公開されています。READMEによると、Claude Code・Codex・Cursorなどにこのリポジトリを渡して自分の分野を伝えると、8枚のカードが動くループ動画3本（合計24の名前）とチートシート1枚を作れます。ライセンスはMITです。

呼び出し方はREADMEに記載されています。npm install と npx playwright install chromium を済ませた上で、AIに「Read PROMPT.md and follow it. Field：コーヒーの淹れ方 Who it is for：商品写真をAIに頼みたいカフェの店長」のように貼ります。日本語で書けば日本語で作られます。

AIは「24の名前の一覧」と「カードの見た目」の2回で止まって確認を求めてきます。1回目で、自分の分野で本当に使う名前かどうかを直すのがコツです。

JINさん：GitHubリポジトリ20本のREADMEを読んで3層に整理

英語圏で話題になった20本のリストを、JINさんが全部READMEまで読んで「AIに作り方を教えるスキル」「実際にMP4を描くエンジン」「動きの作法そのもの」の3層に分けてくれた投稿です。この記事の③④の段と比較表は、JINさんの整理がもとになっています。

JINさんの気づきで特に役立つのは次の2つです。どのスキルも「AIは動画を見られない」前提で、書き出したコマを並べてAI自身に点検させる手順を入れている。効果音をコードで合成するものが増えている。

Neroさん：デザイナー向けブックマーク集

動画作りの前後で使うサイトが9つ並んだリストです。モーション作りでは、特に次の3つが①の段で使えます。

• reelfolio.io：スクリーンショットやモックアップを作品紹介動画（ショーリール）にする
• backgrounds.supply：1,000以上のグラデーション・背景素材
• mobbin.com／refero.design：実際のアプリやプロダクトのUI画面集。動きを付ける前の画面の参考に

説明は投稿の記載より引用しています。素材集めや作品の見せ方を考えるときに使えるサイトです。

lucianさん：動くUI部品の集まり「Lucian UX/UI Prompt」とスキル

韓国の開発者 lucianさんが自作して無料公開した、動くUI部品のギャラリーです（lucianlabs.dev/uxui-prompt）。投稿では「押すと紙飛行機が飛ぶボタン」「昼と夜が切り替わるスイッチ」などが紹介されています。部品を選んで「プロンプトをコピー」し、Claude CodeやCodexに貼るだけで使えます。

AIに任せるためのスキルもあります（GitHub：Seokwoooo/lucian-uxui、MIT）。READMEによると、AIはまずプロジェクトの構成とテーマを読み、ページをUI部品に分けてギャラリーから探し、React/Next・Vue・Svelte・Astro・素のHTMLに移植します。部品はライト／ダーク両対応で、動きを減らす設定（reduced motion）にも対応しています。READMEでは部品数は400（UI部品200＋サイトのセクションとアニメーション200）とされています。

こんなときに開く：サイトやアプリの中の「動くボタン・スイッチ・カード」を、ゼロから書かずに入れたいとき。動画ではなくWebの中の動きです。

比較表：どれが何をするか

「段」は冒頭の図の番号です。③④の説明はJINさんの整理と各READMEの記載に基づきます。

• ①モーションリファレンス：782件の動きを時間・イージング付きで比較。動きの名前と数値を決めたいときに。
• ①reelfolio / backgrounds.supply ほか：作品紹介動画、背景素材、UI画面の参考。素材集め・作品の見せ方に。
• ②motion-explainer：自分の分野の「24の名前」解説動画3本＋チートシート。教える・発信する側に。
• ①③Lucian UX/UI Prompt / lucian-uxui：動くUI部品400をAIが探して自分のサイトに移植。サイトの中のボタン・トグル・カードに。
• ③claude-motion：イージング数値のルール、コマ点検、標準ライブラリだけの効果音。自分の作業にコマ点検を足したいときに。
• ③product-launch-motion：台本・ナレーション・カメラ・グレーディング・音量基準。製品ローンチ映像を一式作りたいときに。
• ④HyperFrames（HeyGen）：HTMLからMP4、Apache-2.0。HTMLで書きたいときに。
• ④Remotion：Reactで動画を書く定番。Reactに慣れている人に。会社規模によっては有償ライセンス。

このほかにも、claude-motion-design（HTML＋Playwright＋ffmpegのみ、モーションブラー）、claude-remotion-skill（スプリング、粒子、単語同期の字幕、音）、hyperframes-motion-reel-skill（一行のお題から120BPM・60fpsのビート同期リール）、hyperframes-student-kit（無音・言い直しカット、406枚のモーショングラフィックス札）など多くのスキルがあります。

ケース別：どれをどう呼び出すか

何を作りたいかで道具を選びます。

• 自社サイトのボタンやカードに動きを付けたい：モーションリファレンスで動きを選び、名前・時間・イージングをメモして、motion（旧Framer Motion）で書く。既製の部品で済ませたいなら lucian-uxui を使う。
• 自分の業界の「専門用語」解説動画を作りたい：motion-explainer をクローンし、Field / Who it is for を自分の分野で書いてAIに貼る。完成したら
• 新サービスのローンチ動画を作りたい：Reactを書く人はRemotion、HTMLで書きたい人はHyperFrames。台本やナレーションまで任せたいときは product-launch-motion を足す。
• 話している動画にBロールや字幕を足したい：内容に合わせて図形が変形し続ける演出は Barty-Bart/motion-graphics、無音カットとテロップ札は hyperframes-student-kit、単語ごとに同期する字幕は claude-remotion-skill。

どの道でも共通：AIは動画を「見られない」ので、書き出したコマを並べて人とAIで点検する。各リポジトリの使い方は導入前にREADMEを確認してください。

AIに「この場面ならこの動き」を選ばせるプロンプト

動きの名前や秒数を全部覚えるのは大変です。下のプロンプトをClaudeやChatGPTなどに最初に貼っておくと、作りたい場面を一言伝えるだけで、AIが動きの案を2〜3個出し、そのまま使えるコードまで書いてくれます。

あなたはUIと動画のモーションデザイナーです。私が「動きを付けたい場面」を伝えたら、次の順番で手伝ってください。

【1. まず短く質問する（3つまで）】
次の3点のうち、私の説明で分からないものだけ聞いてください。分かっていれば聞かずに進めてください。
- 場面：要素が出てくる／消える、状態が変わる（ON/OFF・開閉）、操作への反応（押した・保存した・エラー）、画面の切り替え、注目させたい、説明動画の中の動き、のどれか
- 目的：分かりやすくしたい、気持ちよくしたい、目立たせたい、のどれか
- 使う場所：Webサイト（CSS）、React（Framer Motion／motion）、動画（Remotion）、その他

【2. 動きの案を2〜3個出す】
案ごとに、次を表で出してください。
- 動きの名前（例：フェード＋スライド、スケールイン、シェイク）
- 時間（ms）
- イージング名と cubic-bezier の値
- この場面にこの案を選んだ理由（1〜2文。見る人がどう感じるかで書く）
時間とイージングは一般的な目安として出し、「目安」と書いてください。目安の例：
- 小さな反応（ボタンを押した等）：100〜200ms
- 要素の出現：200〜400ms、イーズアウト（最初速く、最後ゆっくり）
- 要素の退場：出現より短め、イーズイン
- 画面の切り替え：300〜500ms、イーズインアウト
- 動画の中の動き：長めでもよい。フレーム数（30fpsなら何フレーム）も併記
最後に「迷ったらこれ」を1つ選んでください。

【3. 私が選んだ案のコードを書く】
指定の場所に合わせて、そのまま貼れるコードを書いてください（CSS、Framer Motion／motion、Remotion など）。数値は変数か定数にまとめ、後から私が調整しやすくしてください。

【4. 動きを減らす設定に対応する】
OSで「視差効果を減らす／アニメーションを減らす」をオンにしている人向けに、prefers-reduced-motion（Remotionでは静止版や短い版）の対応を必ず入れてください。基本は「移動や拡大をやめ、透明度の変化だけにする」か「動きなしで表示する」です。

【守ること】
- 1回の返答で全部を出さず、質問がある場合は質問だけで止める
- 点滅は1秒に3回を超えない
- 動きの名前は一般的な呼び方を使う

使い方の例：「保存したときに右下に出るトースト通知の出方を決めたい。Reactで、Framer Motionを使っています。」と送ると、AIは足りない点だけ聞き返し、「下からスライドイン 250ms」「スケールイン 200ms」などの案を表で出してから、選んだ案のコードを書きます。

案に出てきた動きの名前が実際どう動くのか見たいときは、たかゆさんのモーションリファレンスでその名前を検索して再生すると、見比べられます。Claude Codeで毎回使いたい場合は、このプロンプトをスキルとして ~/.claude/skills/motion-picker/SKILL.md に保存すると、「トーストの動きを決めて」と頼むだけで呼び出されます。

始める前に確認すること

道具を入れる前に、ライセンスと利用枠を確認してください。

• ライセンス：Remotionは会社の規模によって有償ライセンスが必要です（JINさんの整理より。詳細は公式サイトで確認してください）。HyperFramesはApache-2.0、motion-explainerはMITです。
• 利用枠：klik-anim-skill-creationのREADMEには、30秒を超える動画は利用枠を何度か使い切ると書かれているそうです（JINさんの整理より）。長い動画は分けて作ります。
• インストール前に中身を見る：元の英語投稿も「入れる前に各リポジトリを確認して」と締めています。READMEとライセンスを開いてから入れてください。

元の英語投稿も「入れる前に各リポジトリを確認して」と締めています。READMEとライセンスを開いてから入れてください。