Loading...

AIに動きを頼むための名前辞典 · motion-prompt

動く見本168個から1つ選ぶだけ。AIがその動きどおりに映像を作ってくれます

ギャラリーで動く見本を眺めて気に入ったものを選び、Claude CodeやCodexに渡すと、AIが見本のタイミングと速度の変化を生かしたまま、自分の文字や画面に合わせて組み込んでくれます。カメラワーク、モーショングラフィックス(2セット)、UIパーツ、Web演出(2セット)、写真のルックまで7セット168個で、無料です。これを使って実際に映像を作った事例を集めました。

2026年10月26日·事例 3件

制作者オオタキ・ショウヘイさんのリリース動画です。「motion-prompt のライブラリ出して」と頼んでギャラリーを開き、見本を選んでAIに渡したあと、「この動画の冒頭をこんな感じに」と伝えています。出典:オオタキ・ショウヘイさんのX

制作者のオオタキ・ショウヘイさんが10月11日、Xに「AIへの指示用に、"動画のカメラワークと切り替えの名前" をまとめました!」と投稿すると、ブックマークは1万2,900件、表示回数は43万回を超えました。 その4日後、こうした名前を動く見本とともに集めたmotion-promptを公開。リリース投稿も表示30万回、ブックマーク4,884件を集めました。GitHubのスターは707です(10月26日時点)。

この辞典が生まれたきっかけは、制作者がREADMEに書き留めた、名前の明かされていないある人の言葉です。"what had been holding them back was not a lack of imagination. It was not knowing what this kind of movement is called."(足かせになっていたのは想像力の不足ではなく、こういう動きを何と呼ぶのか知らなかったことだった)

同じ依頼を、動きの名前なしと名前ありでClaude Sonnetに2回ずつ試したブロガーのナギさんは、結果を見てこう書いています。「一語を知っているかどうかで、ガチャが注文に変わる。」

現在は7セット168個です。モーショングラフィックスの動き48個(2セット)、カメラワーク・トランジション24個、UIパーツの名前24個、LP・Web演出48個(2セット)、写真のルック・ライティング・画風24個が入っています。10月15日の公開時は120個で、その後もセットが追加され、10月24日に制作者が168個になったと告知しました。 無料で、商用利用もできるMITライセンスです。

名前ごとに、動く見本、一行の意味、AIに渡す例文、タイミングの値が付いています。スキルとして入れると、AIは見本の動きとタイミングの値を、自分のプロジェクトでの映像の作り方(Remotion、CSS、After Effects、動画生成モデルのプロンプトなど)に合ったコードやプロンプトに置き換えて使います。

Reference 01AIニュースレターを運営するテツメモ(@tetumemo)· X

AIニュースレターの書き手が解説記事を1本渡すと、33秒のモーショングラフィックス紹介動画ができあがりました

テツメモさんはMotion Promptをスキルにまとめて Claude Sonnet 5.5 に入れ、自分で書いたGrok Botの解説記事を渡して30秒の動画を頼みました。できあがった動画は33秒、1920×1080です。解説記事に載せたプロンプト集を案内する、自分の記事の紹介動画です。辞典のどの動きを使ったかは明かしていません。

黒い画面に初月の価格「2,640円」が表示され、青い円がすべり込んできます。続いて役割を絞った専門botのカードが3枚現れ、あるbotから次のbotへ仕事を渡す矢印と、中央に指揮者のように置いた「自分」と3つのbotをつなぐ線が順に描かれます。「たった1回 約3分」という文言とともに、17:56の依頼から18:00の記事下書き完成までのタイムラインが流れ、「貼るだけで使えるプロンプト 97個」で締めくくられます。場面が切り替わるたびに、下の字幕も変わります。

テツメモさんはこう書いています。「Claudeのモーショングラフィックス性能は非常に高いので、オススメです!」

Reference 02経営者向けにAI活用の記事を書く、株式会社コミクス代表のスズキ・アキヒロ · note

#005と#012の2つの動きで作った12秒動画。文字がせり上がる速さも、図形が変わるときの弾みも、見本の値どおりに

スズキさんは10月17日にmotion-promptを導入し、Claude CodeとCodexが同じ辞典を読めるようにつなぎました。10月21日には、Codexでnoteの記事に載せる12秒の動画(1920×1080、30fps、音声なし)を新たに作っています。

最初の3.4秒では、「かっこよく、を具体的に。」の2行が、隠れた状態から下へ向かって現れ、1行あたり0.6秒でせり上がります(#005 マスクリビール)。中盤には紺とオレンジの図形が現れ、4.55秒から0.58秒かけて角丸の四角形が円に変わります(#012 シェイプモーフ)。最後の4秒あまりは「名前が、依頼を変える。」を表示したまま終わります。完成した動画から1.40・4.80・5.60・9.50秒の場面を切り出して、記事に載せています。

スズキさんが決めたのは、形を変える図形、紺とオレンジの配色、長さ、配置、2つの文言でした。図形の輪郭をつくる約240個の点、7%だけ脈打つように大きくなったり小さくなったりする動き、少し行き過ぎてから戻る速度の変化(backOut 1.6)は、#012に書かれた値をそのまま使ったと明かしています。 記事の最後には、自社のAI活用相談へのリンクが付いています。

スズキさんが記事に載せた、12秒動画の設計依頼

役割:あなたは12秒のモーショングラフィックスを設計するディレクターです。/入力:#005と#012、文言「かっこよく、を具体的に。」「名前が、依頼を変える。」、1920×1080、30fps、音声なし。/出力:0.1秒単位のタイムライン、各区間の目的、文字の保持時間、色、終了状態を表にする。実装コードは出さない。/場面:今回の新作と同じ条件を、制作前に設計書へ落とすとき。

番号と文言の部分を自分のものに置き換えて使います。スズキさんは、番号だけを渡さずに、名前・動かす対象・強さ・時間・守る部分を分けて書くよう勧めています。

Reference 03チュートリアル · 同じ依頼を2回ずつ回して比べたブロガーのナギ(@tamelog)· note

「かっこよく」だけでは毎回バラバラだった見出しアニメーション。動きの名前を1行入れたら、2回とも同じ動きに

ナギさんはClaude Sonnetに、ツールを使わずHTML1枚で見出しアニメーションを作らせました。見出し「今日の特集」と、その下の行「名前を知れば頼める」が現れる場面です。依頼を3通りに変え、それぞれ2回ずつ試しました。

「見出しがかっこよく出てくるようにしてください。」とだけ書くと、1回目は光る線とともに文字が砕けて着地し、2回目はパーティクルが集まって文字になりました。下の依頼のように動きの名前(マスクリビール)と0.6秒を書くと、2回とも文字が600msかけて下から現れ、下の行は150〜160ms遅れてついてきました。見本#005のコピー用プロンプトをそのまま貼った場合は、見本のタイミングに加えてコーラルと黄色の配色まで再現されました。

Claude Sonnet 1つで、依頼ごとに2回ずつ回しただけの小さな試験だと、本人が断っています。

見本#005と3つの依頼(「かっこよく」だけ、名前と0.6秒、コピー用プロンプト)の1回目の結果を、0.3秒・0.6秒・1.0秒で撮って並べたキャプチャ
見本#005と3つの依頼の1回目を、0.3・0.6・1.0秒で撮った場面です。出典:ナギさんのnote
ナギさんが送った依頼

タイトルをマスクリビールで下からせり上げて。0.6秒、行ごとに少しずらして。

同じ依頼の英語版(motion-promptの説明書にある例文)

Bring the title in with a mask reveal from below, 0.6 s, each line slightly after the one before.

スキルを入れなくても、どのAIにでもこの1行を貼れば使えます。

みんなの反応

よかったという声

  • “名を入れるだけで、文字や図形の動きが狙いに寄る。動く見本つきで名前が引けるのはありがたい。24個分また保存した。”

    タクゾー(@tkz_aiart)· Xx.com
  • “毎日SVGアニメーション生産してるので、即プロジェクトにスキル導入しました🙏 「冒頭1分、いい感じにモーショングラフィックス頑張って」という最悪な指示出ししてたので、これで改善目指します!w”

    しょーご(@samuraibrass)· Xx.com
  • “しかも、似た動きの違いまで言葉で分けてある。”

    ドリーイン(#027)、ズームイン(#028)、ドリーズーム(#032)を例に挙げています。

    ナギ(@tamelog)· notenote.com
  • “名前は設計の入口であり、数字は調整のつまみです。”

    スズキ・アキヒロ · notenote.com
  • “見れば分かるのに、いざAIへ頼むと名前が出てこない/その悩みを、動く見本とコピペできる指示文で助けてくれる/非エンジニアでも、作りたいものを具体的に伝えやすくなるのがいい”

    テツメモ(@tetumemo)· Xx.com
  • “Use this: https://showheyohtaki.github.io/motion-prompt/ scroll down to the component names section to see what common things are called.”

    これを使うといい。https://showheyohtaki.github.io/motion-prompt/ 下にスクロールしてコンポーネント名のセクションを見れば、よくあるものが何と呼ばれているか分かる。

    Claudeを使ったUIの整え方を尋ねる投稿への返信です。

    alitanveer · Reddit r/ClaudeCodereddit.com
  • “これはいいな…! モーショングラフィックスにも、アプリのUI作りにも、動画生成プロンプトのボキャブラリーにもなる。”

    マジン(@Majin_AppSheet)· Xx.com
  • “アニメーションの共通言語としてAI指示以外でも普通に重宝しそう”

    nguyen-oi · はてなブックマークb.hatena.ne.jp

物足りなかったという声

  • “辞書の呼び方と、現場で使ってきた呼び方が違うことはあります。”

    スズキ・アキヒロ · notenote.com
  • “コピー文には切り抜く範囲は書いてあるが、文字をどの高さに置くかは書いていない。”

    見本のコピー用プロンプトをそのまま貼ったところ、2回に1回は下の小さな文字が線にくっついて出たとして書いた言葉です。

    ナギ(@tamelog)· notenote.com

始め方

Claude CodeやCodexのようなコーディングエージェントに、下の依頼を貼り付けるだけです。スキルとして入れるには、パソコンにNode.js 18以上が必要です。インストールせずに、ギャラリー(https://showheyohtaki.github.io/motion-prompt/)から名前をコピーして、好きなAIに貼っても使えます。

  1. はじめの依頼

    https://www.working-ref.com/ja/reference/motion-prompt-2026-10 を読んで、https://github.com/showheyohtaki/motion-prompt のmotion-promptスキルをこの環境にインストールしてください。そのうえで今のプロジェクトと私の関心を見て、この辞典の動きで試せそうなことを3つ、使う番号と一緒に日本語で提案してください。それぞれの名前の意味も一言添えてください。私が1つ選んだらすぐに作り始めて、選ぶものがなければ、私が書いた記事1本を短いモーショングラフィックス動画にする最初の事例から始めてください。

このリファレンスを共有

毎週1回・無料

このリファレンスは役に立ちましたか?

毎週あふれるAIニュースから
BEST 3つだけ、受信箱へ

Work Smarter with AI

420人が毎週受け取っています

購読完了 次号から受信箱でお会いしましょう。