コードを書けなくても3Dアニメーションが作れる？Remotion Skill + Three.js 完全ガイド
3Dアニメーションを作るには、これまで何が必要だったでしょうか？
まずBlenderやMayaを学ぶ必要がありました——モデリング、テクスチャ、ライティング、リギング、アニメーションカーブの調整、レンダリング設定——数か月はかかります。コードで作る道はさらに刺激的です。WebGLパイプライン、GLSLシェーダー、行列変換、Three.jsの数十個のAPI——回転する立方体を1つ作るだけで200行も書かなければなりません。
では、今はどうでしょう？
ツールをインストールして、プロンプトを1文書くだけ。AIが立体的なシーンを生成してくれます。Studioでリアルタイムにプレビューし、満足いくまで調整したら、スクリーンショットを撮ったり、書き出したり、SNSに投稿したりできます。
この記事では、その全手順を説明します——コードを1行も書く必要はありません。
1. 3つの要素がこの「魔法」を生み出す
Remotion Skill：口で伝えるだけでコードを書いてくれる
Remotionは、Reactで動画を作るオープンソースフレームワークです（GitHubで45K以上のStar）。しかし、あなたにとって本当に重要なのは、その Agent Skill——2026年1月に登場したAIプラグインで、初週だけで25K回以上インストールされました。
インストールすると、Claude Codeで作りたいアニメーションを自然言語で説明するだけで、AIが自動的にコードを書いてくれます。左側にはリアルタイムプレビューウィンドウが表示され、効果をいつでも確認でき、気に入らなければすぐに修正できます。
Three.js / WebGL：ブラウザ上の3Dエンジン
Three.jsはWebGLの複雑さを包み込んでくれます。頂点バッファやシェーダーコンパイルが何かを知る必要はありません——「スポットライトの下で金属の球体を回転させたい」と伝えるだけで、Three.jsが画面に描画してくれます。
@remotion/three：3Dを動画に組み込む
Remotionチームは専用のブリッジパッケージを開発しました。Three.jsの3DシーンをRemotionの動画タイムラインと同期させられるため、各フレームでレンダリングされた内容が、そのままMP4として書き出されます。
この3つを組み合わせると、AIに一言伝えるだけで、3Dアニメーション動画を生成してくれます。
2. 何を準備する？5分で完了
必要なものはとてもシンプルです。
1. Node.jsをインストールする
nodejs.orgからダウンロードし、「次へ」を順番にクリックするだけです。Remotionを動かすための基本環境になります。
2. Remotionプロジェクトを作成する
ターミナル（Windowsでは「コマンドプロンプト」またはPowerShell）を開き、次を入力します。
npx create-video@latestプロジェクト名を聞かれるので、デフォルトのテンプレートを選びます。1分で完了します。
3. Remotion Skillと3Dサポートをインストールする
npx skills add remotion-dev/skills npm i three @react-three/fiber @remotion/three @types/three2行のコマンドをコピーして貼り付け、Enterを押します。これで、Claude CodeでRemotionに関することを話すと、AIが自動的に「3Dアニメーションアシスタント」モードを起動します。
4. プレビューを起動する
npx remotion studioブラウザウィンドウが自動的に開きます。これ以降に生成する3Dシーンはすべて、このウィンドウにリアルタイムで表示されます。
3. 本当の問題：頭の中の映像をどう「伝える」か？
環境の構築はたった5分で終わります。本当の難題はここです。AIに「とてもかっこいい3Dアニメーションを作りたい」と伝えても、AIの理解とあなたの頭の中の映像との間には、大きな隔たりがあります。
文章は本来、3Dを伝える媒体ではありません。 これはあなたのせいではありません。
次の4つの方法で、この隔たりを埋められます。技術的な知識は一切必要ありません——必要なのはコミュニケーションのコツです。
方法1：参考画像を渡す（最も効果的）
作りたい効果に近い画像を1枚探します——コンセプトデザイン、映画のスクリーンショット、他人の作品のスクリーンショットなど、何でも構いません。画像をClaude Codeのダイアログに直接ドラッグします。
「Remotion + Three.jsで、こんな雰囲気にしてください。金色を青色に変えて、球体の表面をもう少し滑らかにしてください。」
1枚の画像で瞬時に伝えられる情報には、金属の反射感、粒子の密度、光の硬さ、色の傾向、構図の重心などがあります。これらは数百字で説明しても、必ずしも明確には伝わりません。
方法2：段階的に調整し、一度にすべて伝えない
初心者が最も犯しやすいミスは、すべての要望を1つのプロンプトに詰め込むことです。結果はたいてい、全体が崩壊します。
正しい方法は、1回につき1つの要素だけを調整することです。
1文目：「球体を作って、Y軸を中心にゆっくり回転させてください。」 （Studioで球体が回転した → 次へ。） 2文目：「球体を透明なガラス質感に変えてください。左上から光源を当ててください。」 （ガラス球ができた → 次へ。） 3文目：「周囲に小さな粒子を一周追加して、星のリングのように球体の周りを回してください。発光させてください。」 4文目：「最初の2秒で粒子がゆっくり現れ、中央の1秒で突然加速し、最後に拡散するようにしてください。」
4回のやり取りで合計10分。各ステップですぐ結果を確認でき、間違いがあればどの段階で問題が起きたかすぐ分かります。完璧な説明文をひねり出して、あとからバグ修正に半日費やすよりもずっと速い方法です。
方法3：効果キーワード早見表
3Dソフトやシェーダー言語を学ぶ必要はありません。ただし、いくつかの「効果キーワード」を覚えると、コミュニケーションの効率が3倍になります。
欲しい雰囲気｜こう言えばOK
金属的、反射する、鋭いハイライト｜「金属質感にして、表面をとても滑らかに」
ガラス、透明、屈折｜「ガラス球のような感じにして、光が通ると屈折するように」
ネオンのように発光｜「ネオンのような発光効果を追加して」
星くず、粒子が舞う｜「星空の塵のような粒子を周囲に追加して」
光の残像｜「動きの軌跡に光の残像効果を追加して」
表面が流動・変形する｜「水のように表面が波打つように」
ふわふわ、すりガラス｜「すりガラスのようなマット質感にして」
背景をぼかす、被写界深度｜「背景を少しぼかして、手前の物体を目立たせて」
暗めのスポットライト｜「スポットライトを当てて、周囲は少し暗くして」
カートゥーン調のフラットスタイル｜「カートゥーンレンダリングの雰囲気にして」
meshPhysicalMaterial や transmission のような言葉を言う必要はありません——「透明なガラス球」と言えば、AIがどう作ればよいか分かります。
方法4：AIに逆質問させる
まったくアイデアが浮かばない場合は、こう伝えてみましょう。
「Remotion + Three.jsの3Dシーンを作りたいのですが、どんなパラメータにすればよいか分かりません。まずいくつか質問して、選択式で答えさせてください。」
AIは、物体はいくつか、光源は暖色か寒色か、テンポは速いかゆっくりか、どんな素材感か、といった質問をしてくれます。穴埋め問題より、選択問題のほうがずっと簡単です。
4. 3Dアニメーション用プロンプトテンプレート——そのまま使える
以下のプロンプトは実際に検証済みです。コピーして数か所を書き換えるだけで使えます。それぞれ、どんなシーンに適しているかも記載しています。
テンプレート1：製品展示スタイル（最も簡単）
Remotion + Three.jsで製品展示アニメーションを作ってください。 画面の中央に[物体：スマートフォン／腕時計／球体など]を置き、 材質は[材質：金属／ガラス／すりガラス]、 色は[色]にしてください。 Y軸を中心にゆっくり回転させ、速すぎず優雅にしてください。 左上から点光源を当て、柔らかな影を作ってください。 背景は単色で、[背景色]にしてください。 アニメーション全体の長さは[長さ：6秒など]にしてください。適している用途：ロゴ展示、製品外観、ブランドアニメーション。
テンプレート2：粒子宇宙スタイル
Remotion + Three.jsで粒子シーンを作ってください。 画面中央に[物体]を置き、 周囲に小さく発光する粒子を大量に配置してください。 粒子の色は[色]にし、 中心の物体に向かって螺旋軌道を描きながらゆっくり近づくようにしてください。 背景は暗い宇宙の雰囲気にしてください。 少しグロー効果を追加してください。 長さは[長さ：8秒など]にしてください。適している用途：テクノロジー感のあるオープニング、データビジュアライゼーション、発表会の背景。
テンプレート3：光と素材のスタイル
Remotion + Three.jsで光と素材を見せるアニメーションを作ってください。 [ジオメトリ：球体／立方体／トーラス]を[材質]で作り、 [素材効果：透明な屈折／金属の反射／ネオン発光]を加えてください。 光線が左から右へ表面を横切り、 光の[色]によって物体の表面に[効果]が生じるようにしてください。 カメラが物体の周囲をゆっくり回り、素材の細部を見せてください。 長さは[長さ]にしてください。適している用途：素材研究、デザインのインスピレーション、コンセプト展示。
テンプレート4：文字の3D化
文字列を3Dエフェクトにしてください。 文字内容は[入れたい文字]で、 3Dフォントでレンダリングし、厚みをはっきり見せてください。 文字が観客の方向へ浮かび上がり、 [効果：発光／金属／ガラス]を少し加えてください。 背景は[単色／グラデーション／星空]にしてください。 長さは[長さ]にしてください。適している用途：タイトルアニメーション、ポスター、SNSカード。
テンプレート5：抽象幾何学アート
抽象的な幾何学アニメーションを作ってください。 複数の[ジオメトリの種類]を空間にランダムに配置し、 それぞれの大きさと回転角度を変えてください。 素材は[統一した素材スタイル]にし、 配色は[色1] + [色2] + [色3]にしてください。 すべての物体がゆっくりと[動き方：浮遊／回転／脈動]し、 動く彫刻のように見えるようにしてください。 柔らかな照明と軽い被写界深度効果を加えてください。 長さは[長さ]にしてください。適している用途：アート制作、壁紙、コンセプト動画。
さらに加えられる「スパイス」
どのテンプレートの後にも、次のフレーズを加えて効果を細かく調整できます。
この一言を追加｜効果
「軽いBloomポストプロセスを1層追加」｜発光する物体に光のにじみが広がり、より幻想的になる
「カメラが物体の周囲をゆっくり回る」｜固定視点よりも映画的なカメラワークになる
「背景を単色ではなくグラデーションにする」｜単調さを避ける
「被写界深度効果を加え、背景を少しぼかす」｜主体がより目立つ
「アニメーションの冒頭にease-in、終わりにease-outを加える」｜急激な変化がなくなり、リズムが自然になる
「3秒から5秒の間に物体を拡大してから縮小する」｜アニメーションに「呼吸」のリズムを加える
5. プロンプトからスクリーンショットまで——完全ワークフロー
さて、プロンプトを書き終えた（または上のテンプレートから1つ選んだ）ら、次はどうすればよいでしょうか？
Step 1：Claude Codeにプロンプトを送る
Remotionプロジェクトのディレクトリを開き、Claude Codeにプロンプトを貼り付けます。Remotion Skillをインストール済みなら、Claudeが自動的に「アニメーションモード」に切り替わります。
Step 2：プレビューする
AIがコードを生成したら、次を実行します。
npx remotion studioブラウザにリアルタイムプレビューが表示されます。タイムラインをドラッグすると、各フレームの効果を確認できます。
Step 3：調整する
プレビューを見ながら、不満な点をAIに伝えます。
「背景が暗すぎるので、少し明るくしてください。」「粒子が多すぎるので、半分に減らしてください。」「回転速度が速すぎるので、30%遅くしてください。」
変更するたびに、Studioが自動で更新されます。満足するまで何度でも調整しましょう。
Step 4：スクリーンショット
調整できたら、スクリーンショットを撮ります：
方法A――1フレームをキャプチャ（推奨、最速）：
npx remotion still <コンポーネント名> 出力ファイル名.png --frame=フレーム番号たとえば3秒目（60fpsなら第180フレーム）の画面を撮りたい場合：
npx remotion still My3DScene screenshot.png --frame=180数秒待つと、1080pのスクリーンショットが完成します。フレーム番号を変えて、もう1枚撮ってみましょう――この「1フレームキャプチャ」は、動画全体をレンダリングするよりはるかに高速です。
方法B――動画全体を書き出してからフレームをキャプチャ：
npx remotion render My3DScene out.mp4レンダリング後、任意のプレーヤーで一時停止してスクリーンショットを撮ります。遅いですが完全です――連続して複数枚のスクリーンショットが必要な場合に適しています。
方法C――Studioから直接スクリーンショットを撮る：
Studioのプレビューウィンドウで目的のフレームまで移動し、右クリック → スクリーンショットを保存します。最も直感的で、コマンドラインは不要です。
Step 5：公式アカウント／ソーシャルメディアで使う
撮影した画像は標準的なPNG形式で、1080pの解像度です。そのまま公式アカウントのエディターにドラッグするか、SNSに投稿できます。
複数の画像が必要なら、プロンプト内のパラメーター（色／マテリアル／角度）を変更して、Step 1～4を繰り返します。5つのバリエーションなら10分で完成します。
6、正直に言うと：この方法ではできないこと
ここまでは、これで何ができるかを説明しました。ここでは何ができないのか、そしていつこの方法をやめて別のツールに切り替えるべきかを見ていきます。
WebGLの本質的な制限
WebGLはブラウザ上で動作します。ブラウザはプロ向けの3Dレンダラーではなく、その基盤はGPUパイプラインを再現するウェブエンジンです。つまり：
画質には上限があります。 BlenderのCyclesによるレイトレーシングや、Octaneのスペクトルレンダリング――WebGLではどちらも実現できません。本当のグローバルイルミネーションも、レイトレーシングもなく、マテリアルは簡略化されています。画面は「きれい」ですが「偽物」でもあり、リアルなレンダラー特有の微妙な間接光やマテリアルのディテールに欠けます。
シーンの複雑さが制限されます。 数万ポリゴンならスムーズに動きますが、100万を超えるとフレーム落ちが始まります。パーティクルも1万を超えると重くなります。一方、プロ向け3Dソフトでは、1体のキャラクターモデルが数百万ポリゴンというのは普通です。
物理シミュレーションがありません。 布の揺れ、液体の飛沫、剛体の衝突――Blenderなら数回クリックするだけのことでも、WebGLではゼロから自分で構築する必要があり、完成するものも簡略版です。
レンダリングが遅いです。 複雑な3Dシーンの30秒動画では、レンダリングに数時間かかることがあります。同じようなシーンでも、BlenderでGPUを使えば数分で済む場合があります。
WebGPUはまだ発展途上
WebGPUは次世代の標準で、WebGLより高速です。しかし、ブラウザが初期サポートを始めたのは2025年半ばで、FirefoxとSafariはまだ追随中です。Three.jsのWebGPU対応も実験的な段階で、APIは今後変更される可能性があります。現時点で実際のプロジェクトに使うのはギャンブルです。
AIが書いたコードにも落とし穴がある
一言で3Dアニメーションに変換できるのは確かに驚異的ですが、AIが生成したコードが「正しそうに見えるのに、実行すると動かない」というケースは少なくありません：
シンプルなシーン（1つのオブジェクト、1つの光源、回転アニメーション）：80%は一度で動作
中程度の複雑さ（複数のオブジェクト、複数のマテリアル、パーティクルシステム）：2～3回のバグ修正が必要
複雑なシーン（カスタムシェーダー、ポストプロセスパイプライン）：AIが生成したコードは高い確率で使えない
いつツールを切り替えるべきか？
ニーズ｜使うべきツール
ロゴ／プロダクト／データ可視化アニメーションを作る｜Remotion + Three.js ✅
コンセプト画像やソーシャルメディア用画像を作る｜Remotion + Three.js ✅
キャラクターとシーンのある短編を作る｜Blender
写真級のリアリティを追求する｜Unreal Engine / Blender Cycles
レンダリング速度が絶対条件｜Blender GPUレンダリング
簡単に言えば、Remotion + Three.jsは「見栄えのよい画面を素早く作るツール」であり、「映画級のレンダリングエンジン」ではありません。 スクリーンショットやコンセプト制作、ビジュアルの試行錯誤には、非常に高速で軽量です。ただし、これで『デューン』のVFXを作ろうとは思わないでください。
7、役立つ資料を一挙紹介
Remotion関連
リソース｜説明
公式ドキュメント｜非常にわかりやすく、まずここから始めるのがおすすめ
remotion-template-three｜公式の3D入門テンプレート、すぐに使える
Remotion Workshop｜創設者本人が講師を務める52分の無料チュートリアル
Make Video With Code｜1.5時間の無料ハンズオン
ByteGrad: Remotion + Claude Code｜AIを活用したRemotion開発の実践デモ
Claude-Code-Video-Toolkit｜コンポーネント＋トランジション＋テーマシステムを含む完全なツールキット
remotion-best-practices 3D規約｜3Dでつまずかないための総合ガイド
Three.js / WebGL
リソース｜説明
Three.js公式ドキュメント｜実行可能なサンプルを300以上掲載
WebGL2 & GLSL Primer｜GLSLをゼロからマスターし、原理を体系的に理解
Three.js Bootcamp｜3Dゲームプロジェクトを含む20時間のコース（2026.6更新）
Three.js Journey｜Bruno Simonによる定番コース
WebGL+Three.js入門と実践｜18章構成の中国語体系コース
オープンソースプロジェクト――実際に学ぶ
プロジェクト｜おすすめの理由
aimees-papercraft-world.com｜ソースコードとBlenderモデルがすべて公開されている、最高の学習教材
card-3d-animation｜Remotion + 3Dの最小サンプル、初めて試すのに最適
iMoss｜50万本の草葉＋カスタムシェーダー、圧巻の効果
siri-glsl｜シェーダーだけでAppleのデザイン言語を再現
インスピレーションサイト――可能性の頂点を見る
作品｜キーワード
bruno-simon.com｜Three.jsインタラクティブ作品の業界最高峰
samsy.ninja｜WebGPUサイバーパンク
jordan-breton.com｜3Dの浮遊島、FWA Site of the Day
bilal.show｜スクロール駆動の3Dストーリーテリング
まとめ
ここまで読んだ内容を一言でまとめると：
これまで3Dアニメーションを作るには、Blender、レンダリング、プログラミングを学ぶ必要がありました。今はNode.jsと1つのプロンプト、そして1枚の参考画像があれば十分です。
まず好きな3D参考画像を見つけ、テンプレートからプロンプトを1つ選んで少し変更し、Claude Codeに渡します。Studioで結果を確認したら、スクリーンショットを保存。10分後には、自分が「言葉で作った」3D画面が完成しています。