INITIALIZING
REMOTION × CLAUDE CODE

REMOTION
CREATIVE LAB

0
Shapes
0
Effects
0
Categories
Gallery Articles
WORKFLOW

What's Remotion?

Reactベースの動画フレームワーク。Claude Code と組み合わせて、プロンプトからモーショングラフィックスを生成する。

STEP 01
💬
Prompt

AIにアニメーションの内容を自然言語で指示する

STEP 02
⚡
Generate

Claude CodeがReactコンポーネントとして自動生成

STEP 03
🎬
Render

MP4・GIF・WebM形式で高品質レンダリング

Remotion はReactコンポーネントを動画フレームとして扱うフレームワーク。
Claude Code と組み合わせることで、プロンプト1つでプロ品質のモーショングラフィックスを生成できます。
このサイトでは、その成果物とノウハウを公開しています。

KNOWLEDGE

Articles

Remotion × Claude Code の制作ノウハウと、成果物のカタログ記事。

CATALOG
Remotion シェイプアニメーション辞典 408選 — 実演デモ付き完全カタログ
Remotionで使えるシェイプアニメーション408種を20カテゴリに分類。全てライブデモ付きで即座に動作確認できるビジュアル辞典。
2026-03-21 — 408 demos / 20 categories
CATALOG
モーショングラフィックス＆エフェクト 215選 — 心理効果とデモ付き完全カタログ
Webサイト・映像制作で使われるモーショングラフィックス215種を、心理的効果・用途・ライブデモ付きで完全解説。
2026-03-21 — 215 effects / 229 demos
COMING SOON
GUIDE
Remotion × Claude Code 実践ガイド
プロンプト設計、コンポーネント構造、レンダリング最適化まで。Claude Code を使ったRemotion開発の実践テクニック集。
COMING SOON
TUTORIAL
Claude Code で動画を自動生成する
テキスト指示だけでモーショングラフィックス動画を生成するワークフロー。セットアップから出力まで完全解説。