AIモーショングラフィックスの作り方｜Claude Codeで5ステップ

講座の告知、お店のキャンペーン、SNS広告。文字が動く短い動画が1本ほしい場面は、事業をしていると定期的にやってきます。ただ、After Effectsのような編集ソフトを覚える時間はありません。外注すると、1本ごとに費用と打ち合わせが必要です。その結果、静止画の投稿で済ませている方は多いと思います。

僕は先日、動画編集ソフトを一度も開かずに、30秒のポップなショート動画を作りました。Claude Codeに日本語で頼んだだけです。アニメーションもBGMも効果音も、すべてコードで作ってくれました。

やり方は単純です。AIで作った動画とその作り方がまとまったサイトから、作りたい雰囲気の動画を選びます。それをClaude Codeに貼って「これを再現しながら、今回はこの内容で作って」と頼むだけで、書き出しまでClaude Codeが進めてくれます。

この記事で説明するのは、AIでモーショングラフィックスを作る5つのステップです。後半では、作った動画をPremiereやAfter Effectsの素材として使う方法と、自分の事業での使いどころも取り上げました。

Instagramでこの動画を見る

AIモーショングラフィックスの作り方は5ステップ

先に全体の流れを示します。やることは次の5つです。

1. 見本サイト「Skillry」で、作りたい雰囲気の動画を選ぶ
2. 選んだ動画の作り方（スキル）をClaude Codeに貼って入れる
3. 「今回はこの内容で」と、自分の内容を書いて頼む
4. 書き出した動画を見て、気になるところを日本語で直す
5. 必要なら、背景・文字・ステッカーをレイヤー別に書き出す

5番目は、いつも使っている編集ソフトに素材として持ち込みたいときだけ行います。1本目を書き出すだけなら、4番目までで完了です。

Claude Codeがプログラムを書いて動かす

こういう動くデザインは、普通はAfter Effectsを覚えないと作れません。この方法では、Claude Codeが動画用のプログラムを自分で書き、そのプログラムが文字や図形を動かします。動画生成AIに映像を出してもらう方法とは、仕組みが違うわけです。

BGMと効果音も、音の素材を探す必要がありません。Claude Codeが作曲して、映像の動きにタイミングを合わせてくれます。見本の動画では、BGMもPythonで作りました。

プログラムで作っているので、文言や色を設定ファイルにまとめておけます。2本目からは文言を書きかえるだけで、同じ雰囲気の別の動画になります。

用意するものと費用

始める前に用意するものは4つです。

1. Claude Code。Claudeの有料プラン（Pro以上）で使えます（Claudeヘルプセンター）。デスクトップアプリの「Code」タブでも、ターミナルでも使えます
2. Skillryのアカウント。無料のスキルを入れるときもログインが必要です。先に skillry.dev 右上の「Sign In」から作っておきます
3. MacかWindowsのパソコンと、Node.js 22以上。入っていないと言われたら、Claude Codeに「Node.js 22以上を入れたい。手順を教えて」と聞けば案内してくれます
4. 動画の中身。画面に出す言葉、ブランドカラー、ロゴ画像（PNG）です。作業用のフォルダを1つ作り、ロゴを入れておきます

費用は、Claudeの有料プランのほかにはかかりません。Skillryの無料スキルは、アカウント登録だけで0円です。全スキルを使えるSkillry Premiumは、2026年10月11日時点のサイト表示で月9.99ドル、年79ドル、買い切り169ドル（初期価格）でした。料金は変わることがあるので、申し込む前にサイトで確認してください。最初の1本は、無料のスキルで十分です。

Claude Codeをまだ入れていない方は、Claude Code 初期設定の4ステップを先に読むと、作業フォルダの作り方まで分かります。

STEP1 Skillryで見本の動画を選ぶ

Skillryは、AIで作った動画・スライド・Webページと、その「作り方（スキル）」がセットで並んでいるサイトです。見本を見て選んだら、作り方をそのままClaude Codeに入れられます。動画の一覧は skillry.dev/skills/output/video から開けます。

手順は3つです。上のメニュー「Skills」から出力の種類で「Video」を選びます。気になる動画を開いて見本を再生し、テンポ、色、動きが作りたいものに近いものを選んでください。最後に、スキルのページで次の4か所を見て、自分の使い方に合うかを確かめます。

「FREE」の印があれば無料で使えます。「WHAT YOU GET」は、できあがるものの長さと縦横のサイズです。「GOOD FIT」と「NOT FOR」は、向いている使い方と向いていない使い方です。「YOU SAY」は頼み方の例で、スキルの名前もここで分かります。

最初の1本は「FREE」の動画スキルがおすすめです。2026年10月時点では、CreatorMotion · Title Scene Takeover や Velocity-Matched UI Sting などが無料でした。ページは英語ですが、ブラウザの翻訳機能で日本語にして読めます。

STEP2 「Copy install prompt」をClaude Codeに貼る

選んだスキルのページで「Copy install prompt」を押し、出てきた画面の「Copy」を押します。これで、スキルを入れるための一文がコピーされた状態です。

コピーした一文を、Claude Codeに貼り付けてそのまま送ってください。英語のままで問題ありません。中身は、Skillryにある install.md を読んで指示に従うよう頼む、英語の一文です。

途中でブラウザが承認を求めてきたら、承認します。これはSkillryへのログインの確認です。自分でインストールを始めたときだけ承認してください。Claude Codeが「入れた場所」を教えてくれたら完了です。Claude Codeの入力欄で「/」を打つと出る一覧に、スキルの名前が出ていれば使えます。

スキルが一覧に出てこないとき

Claude Codeを一度閉じて、開き直してください。それでも出ないときは「Skillryのスキルを、--agent claude-code を付けて入れ直して」と頼みます。Claude Codeが読まない場所に入ってしまうのが、よくある原因です。

スキルを入れずに試す方法

スキルのページのURLを貼って「この見本動画をコマ送りで見て、雰囲気を再現しながら、今回は〇〇の内容で作って」と頼む方法もあります。ただし、Claude Codeが動画を見られる環境（デスクトップアプリのブラウザ機能など）が必要です。うまくいかないときは、スキルを入れる方法に戻してください。

STEP3 「今回はこの内容で」と頼む

スキルが入ったら、あとは中身を渡すだけです。頼むときは、見本の映像や文言はそのまま使わず、テンポ、デザイン、動きだけを参考にするよう伝えます。依頼文の骨組みは次のような形です。

/〇〇〇（スキルの名前）
このスキルの見本の雰囲気を再現しながら、今回は下の内容で動画を作ってください。
見本の映像や文言はそのまま使わず、テンポ・デザイン・動きを参考にしてください。

【内容】
・何の動画か：〇〇講座の告知
・誰に見せるか：〇〇で悩んでいる個人事業主
・画面に出す言葉（この順番で）：1.「〇〇」 2.「〇〇」 3.「〇〇」

【仕様】
・縦型 1080×1920、15秒（リール・ショート用）
・色は #〇〇〇〇〇〇 を中心に。ロゴは作業フォルダの logo.png を使う
・BGMと効果音もつける。音の素材は使わず、作曲してOK
・MP4で書き出して、保存場所を教えて

書くときのコツは3つあります。画面に出す言葉は自分で決めて渡してください。AIに任せると長くなりがちなので、1画面に出すのは短い一言までにします。サイズと長さは必ず書きます。リールやショートなら縦1080×1920で、長さは15秒前後が目安です。ロゴや写真は作業フォルダに入れて、「logo.pngを使って」のようにファイル名で指定します。

スキルの名前は、スキルのページの「YOU SAY」の欄か、Claude Codeで「/」を打つと出る一覧で確認できます。

頼むときに守ること

見本の映像、文言、音楽はそのまま使いません。再現するのはテンポ、デザイン、動きといった雰囲気だけにして、中身は自分のサービスや講座のものにしてください。

スキルを使わずに Remotion（Reactで動画を作るツール）で一から作る場合は、ライセンスに注意が必要です。2026年10月時点では、個人と3人以下の会社は無料で、4人以上の会社は有料ライセンスが必要でした。Skillryの動画スキルには、無料で使えるオープンソースの動画ツールHyperFramesを使うものが多くあります。

STEP4 書き出して、日本語で1行ずつ直す

書き出しまでClaude Codeがやってくれます。1回目で完ぺきを狙わなくて大丈夫です。動画を見て、気になったところを1つずつ伝えてください。

文字が小さいなら「2秒目のタイトルを1.5倍の大きさにして」、長すぎるなら「テンポはそのままで、全体を12秒にして」と頼みます。地味に見えるなら「もっと派手に。ステッカーと効果音を増やして」です。色が合わないときは「背景をブランドカラーの #〇〇〇〇〇〇 にそろえて」、BGMが気になるときは「BGMをもう少し明るく。音量は少し下げて」で直ります。

見本と雰囲気が違うと感じたら、「見本と比べて、テンポ・色・動きのどこが違うか教えて。そのうえで見本に近づけて」と頼んでください。書き出したファイルが見つからないときは「書き出した動画の保存場所を教えて」で済みます。

書き出す前に静止画で確認する

書き出しの前に「主な場面を静止画で並べて見せて」と頼むと、文字のはみ出しや重なりを先に見つけられます。動画の書き出しには時間がかかるので、静止画で直してから書き出したほうが早いです。

2本目からは差し替えるだけにする

1本目の依頼に、次の一文を足しておいてください。

文言・色・場面の長さ・効果音のタイミングは、設定ファイル1つにまとめて、あとから直せるようにしてください。

こうしておくと、2本目からは文言を書きかえるだけで別の動画が作れます。僕の見本動画も、この形で作りました。

STEP5 レイヤー別に書き出して、編集ソフトの素材にする

完成版のMP4とは別に、背景、ステッカー、文字を透明背景つきの別々の動画として書き出せます。PremiereやAfter Effectsに読み込めば、いつもの編集素材になります。実写の動画の上に文字だけ乗せる、背景だけ別の色や写真に差し替える、ステッカーの動きだけほかの動画で使い回す、といった使い方が可能です。

頼み方は「完成版のMP4とは別に、背景・ステッカー・文字を透明背景つきの別々の動画で書き出して。形式はProRes 4444（.mov）で、3つを重ねたときに完成版と同じ見た目になるように」です。ファイル名は「01_背景.mov」「02_ステッカー.mov」「03_文字.mov」のように、重ねる順番が分かるようにしておきます。

Premiere Proでは3つのファイルを読み込み、下のトラックから「背景→ステッカー→文字」の順に並べます。After Effectsでも同じで、コンポジションに入れて下のレイヤーから同じ順に重ねてください。上にあるものほど手前に表示されます。

ProRes 4444はファイルが大きくなるので、保存先の空き容量に注意が必要です。読み込めないときは「透明背景つきのPNG連番でも書き出して」と頼みます。文字だけほしいときは「文字のレイヤーだけ書き出して」で済みます。

事業での活用例

今まで外注していた短い動画を、自分で回せるようになるはずです。STEP3の依頼文の【内容】に、場面ごとの言葉を入れて使ってください。

講座や教室の告知

コーチ、講師、教室の運営者なら、説明会やセミナーの募集に15秒の動画が使えます。構成は「結論のタイトル」「よくある悩み」「講座で身につくこと」「日時と申込方法」の4場面です。たとえば「AI、何から始めればいい？」から入り、「よく使う作業を3つだけ」と中身を示します。そのあと日時とオンライン開催であることを伝え、「申込はプロフィールのリンクから」で締めます。開催のたびに日時だけ差し替えれば、毎回同じ雰囲気の告知になるでしょう。

サロンや飲食店のキャンペーン

店舗の告知なら10秒で足ります。「キャンペーン名」「特典の中身」「期間」「予約・来店の方法」の4場面です。「秋の新メニュー登場」「ご来店でドリンク1杯サービス」「10/15〜10/31」「ご予約はプロフィールのリンクから」と、言葉を4つ決めるだけで1本になります。季節ごとのキャンペーンを、同じ設定ファイルの文言を書きかえて回せます。

SNS広告の出だしを試す

InstagramやTikTokの縦型広告は、最初の2秒で止まってもらえるかが勝負です。「最初の2秒で悩みか結論」「理由・中身」「オファー」「行動の呼びかけ」の4場面で作ってください。「最初の場面だけ変えた3パターンを書き出して」と頼めば、どの出だしが止まってもらえるかを試せます。広告に出すときは、各媒体の広告ポリシーも確認が必要です。

デザイナーや動画編集を請け負っている方なら、STEP5のレイヤー別の書き出しが役に立ちます。クライアントの実写動画に文字の動きだけ重ねる、といった納品の幅が広がります。アニメ調の動画を声つきで作りたい場合は、AIアニメの作り方で紹介した方法も合わせて読んでみてください。

まとめ

モーショングラフィックスは、After Effectsを覚えなくても、Claude Codeに日本語で頼めば作れます。Skillryで見本を選び、スキルを貼り、「今回はこの内容で」と頼むのが基本の流れです。書き出した動画は日本語の一言で直せて、設定ファイルにまとめておけば2本目からは文言の差し替えだけで済みます。レイヤー別に書き出せば、いつもの編集ソフトの素材にもなります。料金や画面は2026年10月11日時点のものなので、変わっていたら各サイトの表示に従ってください。

今日の最初の一歩は、Skillryの動画一覧を開いて「FREE」の見本を1本選ぶことです。選んだら、次に告知したい講座かキャンペーンの言葉を4つ書き出してみてください。それだけで、1本目の依頼文がほぼできあがります。