AIチュートリアル

Awesome AI Motionでモーション効果を選択・レンダリングする方法

Awesome AI Motionの閲覧方法、Claude CodeまたはCodexへのスキル接続方法、目的に応じた効果の選択方法、カスタマイズしたクリップをローカルでレンダリングする方法を解説します。効果カード、レシピ、比較ツール、出力管理、カタログのメンテナンスについても説明します。

2026年10月1日約14分で読了

Awesome AI Motionとは？

Awesome AI Motionは、人間とAIコーディングエージェントの両方に向けたモーションデザインのフィールドガイドです。見た目だけでアニメーションを選ぶのではなく、まずシーンで伝えるべき内容を考え、そのうえで適切なエフェクト、レシピ、デザインルートを選択できます。

このリポジトリには、637種類のテクニック、128本の参考クリップ、11種類のレシピ、7種類のデザインルートが収録されています。各エフェクトカードには、定義、調整済みパラメータ、例、参照元、Claude CodeとCodex向けのプロンプトを含めることができます。

プロダクト紹介、タイトルシーケンス、教育コンテンツのオープニング、ショート動画の冒頭、データストーリー、UIデモなど、モーションを軸としたさまざまなシーンを設計する際に役立ちます。

主な機能

AIが読み取れるエフェクトカード：エージェントはモーションを適用する前にカードの内容を確認できます。
レンダリング済みの参考素材：レンダリングされたエフェクトには、HTMLステージ、MP4クリップ、アニメーションGIFのプレビュー、ポスター画像を含められます。
目的別の検索：判断表を使って、シーンの目的や媒体に合うモーションを選べます。
組み合わせレシピ：複数のエフェクトをタイミングに沿ったシーンで組み合わせる方法を示します。
デザインルート：ルートドキュメントを使って、プロモーション、ショート動画、プレゼンテーション資料など、より大規模な成果物を計画できます。ルートドキュメントは韓国語で書かれています。
ブラウザー比較：プロジェクトのウェブサイトでは、フィルタリング、スロー再生、最大4本のクリップの比較に対応しています。
ローカルレンダリング：付属のレンダリングスクリプトを使って、参考エフェクトを変更せずにカスタマイズ版を作成できます。
構造化メタデータ：正規のindex.jsonファイルにより、カタログを直接クエリできます。

利用できるモーションの例

このコレクションには、カメラワークやタイポグラフィから、トランジション、リビール、パララックス、光のエフェクト、シェイプ変形まで幅広いモーションが収録されています。主な例として、Infinite Canvas Pan、Camera Fly-through、Infinite Zoom、Kinetic Type Sweep、Giant Mask Reveal、Morph Match Cut、Noise Dissolve、Ken Burns、Particle Scatter & Assembleなどがあります。

Particle Scatter and Assembleのモーションプレビュー

Particle Scatter & Assembleは、このリポジトリに収録されたレンダリング済み参考エフェクトの一つです。

適切な出発点を選ぶ

このリポジトリには複数の入口があります。達成したい作業に応じて選択してください。

ウェブサイト：クリップを視覚的に閲覧、再生、フィルタリング、スロー再生、比較できます。
ドキュメントの目次：すべてのエフェクトカードを開かずにガイドを確認できます。
全カタログ：モーションの系統ごとに分類されたテクニックを確認し、クリップの有無をチェックできます。
判断表：目的や媒体からエフェクトを選べます。
レシピ：エフェクトを組み合わせて、時間設計された一連のシーンを作成できます。
デザインルート：より大規模なモーション成果物を計画できます。
エージェントワークフロー：目的の決定、カードの確認、適用、レンダリング、検証のプロセスに沿って作業できます。

インストールとセットアップ

ステップ1：ガイドをクローンする

リポジトリをクローンして、そのディレクトリに移動します。

git clone https://github.com/gongnyang/awesome-ai-motion.git
cd awesome-ai-motion

ウェブサイトの閲覧、エフェクトカードの確認、エージェントスキルとしての接続だけなら、依存関係をインストールする必要はありません。

ステップ2：任意のレンダリング依存関係を準備する

ローカルレンダリングには、システムのPATH上にあるNode.js 20以降とffmpeg、およびChromium付きのPlaywrightが必要です。次のコマンドは、これらの依存関係が不足している場合にのみ実行してください。

npm install
npx playwright install chromium
ffmpeg -version

Playwrightがグローバルに利用可能な場合、パッケージのインストールは任意です。適切なChromiumがすでにインストールされている場合は、Chromiumのインストールコマンドを省略することもできます。

ステップ3：ガイドをClaude Codeに接続する

Claude Codeのスキルディレクトリを作成し、そこにリポジトリへのリンクを作成します。

mkdir -p ~/.claude/skills
ln -s "$PWD" ~/.claude/skills/awesome-ai-motion

このスキルは現在のチェックアウトを使用するため、シンボリックリンクが便利です。環境によってリンクが適さない場合は、代わりにディレクトリをコピーしてください。

mkdir -p ~/.claude/skills
cp -R "$PWD" ~/.claude/skills/awesome-ai-motion

方法は1つだけ選び、移行先のパスが未使用であることを確認してください。Codexの場合は、同じリンクまたはコピーを~/.codex/skills/に配置します。

コピーしたスキルには、後からリポジトリに加えられた変更は自動的に反映されません。ガイドが変更されたら、コピーを更新または置き換えてください。

基本的な使い方

エージェントにエフェクトを選ばせる

シーンで伝えたい目的を説明し、該当するエフェクトカードを参照して調整済みのデフォルト値を維持するようエージェントに指示します。例：

製品紹介のためのモーションを選んでください。エフェクトカードを読み、デフォルトのパラメーターを使用してください。

この依頼により、エージェントに明確な目的を示し、文書化された実装へ誘導し、任意のアニメーション値を推測させずに済みます。

事前にエフェクト名を指定せず、別の目的を中心に依頼することもできます。

教育向けの冒頭フックに適したモーションを選んでください。ガイドを確認し、適切なエフェクトまたはレシピを特定してから適用してください。

このガイドには、Educational Opening Hook、Shorts Hook、Title Opener、Product UI Demo、Data Story、Concept Explainer、Before and After、Scroll Deck Sceneなどのレシピ例が含まれています。

エフェクトカードを手動で読む

各カードは次の場所にあります。

effects/<slug>/README.md

たとえば、マスク表示カードはeffects/mask-reveal/README.mdにあります。エフェクトを変更する前に、カードの定義、パラメーター、例、プロンプト、参照元を読んでください。エフェクトにレンダリング済みのアセットがある場合、そのディレクトリには次のファイルも含まれることがあります。

モーションステージ用のindex.html
動画出力用のclip.mp4
アニメーションプレビュー用のpreview.gif
静止画用のposter.jpg

最初のカスタマイズ済みクリップをレンダリングする

付属のレンダラーをマスク表示エフェクトに対して実行します。このコマンドは表示テキストを変更し、埋め込み可能なステージを作成し、結果を別のステージングディレクトリに書き込みます。

node scripts/render.mjs effects/mask-reveal \
  --embed --text "Make it move" --out .staging/my-first-motion

レンダリング後、次の生成ファイルを確認してください。

.staging/my-first-motion/clip.mp4
.staging/my-first-motion/preview.gif
.staging/my-first-motion/poster.jpg

出力先は.staging/my-first-motionなので、元のエフェクトはそのまま残り、再利用できます。

実践的な選定ワークフロー

シーンの目的を定義する。 モーションで製品を表示するのか、階層を確立するのか、コンセプトを説明するのか、変化を示すのか、注意を誘導するのかを決めます。
カタログを閲覧または検索する。 ビジュアル探索にはウェブサイト、目的に基づく選定には判断表、構造化メタデータにはindex.jsonを使用します。
エフェクトカードを開く。 定義、調整済みパラメーター、例、プロンプト、参照元を確認します。
1つのエフェクトで不十分な場合はレシピを確認する。 レシピでは、エフェクトを時間制御されたシーンに配置する方法を示しています。
コピーを適用する。 参照実装は変更せず、生成ファイルを別の出力ディレクトリに送ります。
レンダリングして検証する。 ソースコードだけで出力が正しいと判断せず、MP4、GIF、ポスター、ステージを確認します。

高度なヒント

決定する前に候補を比較する

プロジェクトのウェブサイトで最大4つのクリップを比較できます。再生速度を落とすと、タイミング、イージング、マスク、トランジションを評価しやすくなります。同じ伝達目的を満たす複数の手法があり、エネルギー感や強調度が異なる場合に特に役立ちます。

デフォルトから始めて適用する

エフェクトカードには調整済みのパラメーターが記載されています。タイミングや表示方法を変更する前に、これらの値から始めるようエージェントに依頼してください。これにより意図された動作を保ち、後の変更を評価するための既知の基準を得られます。

生成物を参照ディレクトリの外に置く

カスタマイズしたレンダリング結果をeffects/やrecipes/に書き込まないでください。.staging/などの場所を使用すると、参照クリップをそのまま保持でき、リポジトリの変更も確認しやすくなります。

完全なシーンにはレシピを使用する

個別のエフェクトはモーション手法を示し、レシピは複数の手法をシーケンスに組み合わせます。納品物に冒頭、トランジション、コンテンツセクション、終了が必要で、単独のアニメーションでは足りない場合は、レシピから始めてください。

自動化には構造化データを使用する

ルートレベルのindex.jsonが正式なカタログです。ツールやエージェントはカードページをスクレイピングせず、直接これを確認できます。モーションファミリーごとに手法をまとめ、クリップの状態を示すため、人間が閲覧するには完全なカタログの方が適しています。

リンクしたスキルとコピーしたスキルを別々に管理する

シンボリックリンクはチェックアウト先を指し続けるため、リポジトリの更新を取得すると、エージェントが読む内容も更新されます。コピーしたスキルは独立しているため、元のガイドが変更されたら手動で更新する必要があります。

カタログへの貢献を検証する

エフェクトの追加、デフォルト値の改善、参照クリップの更新を行う場合は、リポジトリのコントリビューションガイドに従ってください。生成されたドキュメントを正しい情報源として扱うのではなく、関連するソースまたはジェネレーターを更新します。その後、再生成してプロジェクトを確認します。

node scripts/build.mjs
node scripts/check.mjs

コントリビューションでは、動きを明確に伝わるようにし、共有ステージを使用し、レンダリング結果を確認してください。

再配布前にライセンスを確認する

このプロジェクトのオリジナル作品はMITライセンスの下で提供されています。ソースの参照情報とコンポーネントのライセンスは、ATTRIBUTIONS.mdおよび各エフェクトカードに記録されています。GSAPと同梱フォントにはそれぞれ独自のライセンスが適用されるため、これらのアセットを再配布する前に帰属表示の情報を確認してください。

まとめ

Awesome AI Motionは、大規模なモーションリファレンスライブラリを、人間とコーディングエージェントのための実用的なワークフローに変えます。まずシーンの目的から始め、ドキュメント化されたエフェクトまたはレシピを選択し、調整済みのデフォルト値を維持して、別のディレクトリにレンダリングし、生成されたアセットを確認してください。このプロセスにより、ガイドのリファレンス実装を上書きすることなく、クリエイティブな意図から再利用可能なモーションクリップへと移行できます。