ドキュメント

HTML・Remotionのコード動画を編集可能なAEプロジェクトへ | ArbiFX

Code2AEとArbiFXでHTML・Remotion・Hyperframeのコード動画を編集可能なAfter Effectsプロジェクトに再構築。Codex・Claude CodeのSkill配置先、接続、依頼例、AE内での確認手順を紹介。

質問と回答

HTMLアニメーションを編集可能なAfter Effectsプロジェクトにするには？

ArbiFXの設定後、Code2AEを導入したAIアシスタントにHTMLの元プロジェクトと素材を渡します。code2aeで画面と動きを再構築し、AE内で差を確認・修正して保存するよう依頼します。書き出した動画の拡張子を変える方法ではなく、元コードと素材を使います。

出典: コード動画を AE プロジェクトに変換 · 5分で始める

次の手順: CodexやClaude Codeでコード動画を編集可能なAEプロジェクトにするには何が必要ですか？

RemotionのアニメーションをAEプロジェクトにして編集を続けられますか？

ArbiFXとCode2AEは、Remotionなどのコードアニメーションを編集可能なAfter Effectsプロジェクトとして再構築する手順に対応します。完全なRemotionプロジェクトと素材を渡し、画面と動きの再現、AE内での検証、保存を依頼してください。レンダリング済み動画の配置だけを成果物にする手順ではありません。

出典: コード動画を AE プロジェクトに変換

次の手順: コード動画をAE化するとき、AIに何を渡し、再現結果をどう確認しますか？

Hyperframeのコード動画を編集可能なAEプロジェクトで納品するには？

ArbiFXを設定した環境で、Code2AEを使うAIアシスタントにHyperframeの元プロジェクトと素材を渡します。成果物を編集可能なAfter Effectsプロジェクトと指定し、元コードの理解、画面と動きの再構築、AE内での比較、保存を依頼します。確認用に元プロジェクトも残します。

出典: コード動画を AE プロジェクトに変換

次の手順: コード動画をAE化するとき、AIに何を渡し、再現結果をどう確認しますか？

コード動画をAE化するとき、AIに何を渡し、再現結果をどう確認しますか？

元コードの全プロジェクトと必要な素材を渡し、AIがコードを理解して元の出力を観察できるようにします。ArbiFXを設定し、Code2AEによる再構築後にAE内で元の画面と動きを比較し、差を修正して保存するよう依頼します。工程の作成と再現確認は分けて検証します。

出典: コード動画を AE プロジェクトに変換

次の手順: CodexやClaude Codeでコード動画を編集可能なAEプロジェクトにするには何が必要ですか？

コード動画をAEプロジェクトにする準備・実行・確認

ここでいうコード動画は、HTML・Remotion・Hyperframeなどのソースコードがあるアニメーションです。このガイドのCode2AEワークフローでは、ArbiFXプラグインの導入、API Keyの検証・保存、AEレイヤーへのAFXの適用が必須です。元プロジェクト一式と必要な素材を渡し、納品前にAE内で再構築結果を必ず確認してください。

Windowsプラグインの導入・接続手順に沿って、アカウントのAPI Keyを検証して保存します。AEを開き、レイヤーにArbiFX → AFXを適用しておきます。
Code2AEの公開リポジトリから完全なSkillを取得し、フォルダー名をcode2aeにします。Codexでは ~/.codex/skills/code2ae/、Claude Codeでは ~/.claude/skills/code2ae/ に配置します。
HTML・Remotion・Hyperframeの元プロジェクト一式と必要な素材をAIに渡します。画面と動きを編集可能な形で残すことを指定し、下の依頼例を用途に合わせて使います。
元コードの確認と元の出力の観察を行ってから再構築するよう依頼します。AE内で比較し、差を修正して保存します。プロジェクトの作成と再現結果の確認は、それぞれ確認してください。

AIアシスタントへの依頼例

渡した元プロジェクトと素材をcode2aeで再構築してください。
成果物：編集可能なAfter Effectsプロジェクト。
元コードと出力を確認してから、画面と動きを再現してください。
AE内で比較し、差を修正して保存してください。

ツール接続とアニメーション再構築の違いは、AE MCPとコード動画のワークフローで確認できます。上の回答の出典リンクから元の操作説明も読めます。

出典: Code2AEの公開ガイド

🔥新機能

コード動画を AE プロジェクトに変換

ArbiFX は、Code2AE Skill と連携し、AI が生成した HTML、Remotion、Hyperframe などのコード動画を、映像と動きを忠実に再現した編集可能な After Effects プロジェクトに作り直せるようになりました。

AI に伝えてください

こちらをインストールしてください： https://github.com/Oxoxxidane/Code2AE_skill

5分で始めるに従って ArbiFX をインストールし、API Key を設定します。AE を開いたままにし、いずれかのレイヤーに ArbiFX → AFX エフェクトが適用されていることを確認してください。
元のコード動画プロジェクト一式と必要な素材を AI アシスタントに渡し、次のように依頼します。「code2ae を使って、このコード動画を編集可能な AE プロジェクトに作り直してください。映像と動きを忠実に再現し、AE 上で違いを確認・修正してから、プロジェクトを保存してください。」

5分で始める

以下の順番で操作すれば、初めての生成まで完了できます。

arbifx.com を開き、右上の ログイン からアカウントを作成してメールアドレスを確認します。新規登録すると 1200 クレジットがもらえます。
ホームページに戻り、ダウンロード セクションで Windows X64 を選んでインストーラーをダウンロードし、実行してプラグインをインストールします。
サイト右上から ダッシュボード → API Key管理 を開き、Keyを作成 をクリックして、生成された Key をコピーします。
After Effects を開いてレイヤーを選択し（新しい調整レイヤーがおすすめです）、エフェクト＆プリセット パネルで ArbiFX → AFX を見つけてレイヤーに適用します。
エフェクトコントロールパネルで、AFX の行にある Start ボタンをクリックして Start ウィンドウを開きます。
Start ウィンドウ右上の API設定 をクリックし、Key を貼り付けて 確認して保存 をクリックします。
エフェクト説明 に作りたいエフェクトを書き（例：「ブラックホールの降着円盤。オレンジ色の高温ガスが中心の周りを回転する」）、送信をクリックします。
しばらく待って 適用しました。 と表示されたら、エフェクトがレイヤーに適用されています。エフェクトコントロールでパラメーターを調整するか、Start ウィンドウで続けて修正内容を説明しましょう。