OpenDesign Motion：無料オープンソースの Claude Motion 代替

OpenDesign Motion は 2026年10月15日、OpenDesign v0.25.0 で公開されました。そのリリースのコードネームは OpenDesign Motion です。見出しはこれを Claude Motion のオープンソース代替と呼んでいます。

本サイトは独立したサイトです。OpenDesign、Anthropic、Google のいずれとも提携していません。

コードは open-design リポジトリにあります。このリリースの集計は 53 件の PR、16 人の貢献者、21 日です。その集計の下の一行はコードでアイデアを動画にするです。

OpenDesign Motion とは

OpenDesign Motion は、コードとして組まれたオープンソースのモーションデザインです。OpenDesign のライセンスは Apache 2.0 です。このリリースは、オープンソースの Claude Motion 代替として位置づけています。テキストから動画を作るモデルではありません。

コーディングエージェントが HTML、CSS、GSAP を書きます。HyperFrames は、ヘッドレス Chrome と FFmpeg でそのページを決定論的な MP4 にレンダリングします。HyperFrames は HeyGen のオープンソースでエージェントネイティブな動画フレームワークであり、OpenDesign に第一級市民として統合されています。フレームワークのライセンスは Apache-2.0 です。README はカタログのサムネイルを © HeyGen としています。

v0.25.0 のノートは、同梱例 5 つから始め、編集可能なアニメーションを作り、MP4 を書き出すよう述べています。動画を依頼すると、結果は編集可能なソースファイルと MP4 です。インタラクティブなアニメーションは実行可能な HTML のままです。アクティブなプレビューを離れると音は止まります。5 つの例は Motion Future、Product Promo、Showreel、UI Morph、Visual Lesson です。動画の書き出しは MP4 が再生できるかを確認し、失敗した書き出しでも編集可能なソースは残ります。

同じリリースは、このバージョンが編集、プレビュー、デバイスをまたいだ作業の継続をよりスムーズにすると述べています。

README は、リポジトリに 11 個の HyperFrames テンプレートと 39 件の Seedance プロンプトが同梱されると述べています。README は、OpenDesign のレンダーワークフロー（コンポジションキャッシュ、sandbox-exec の回避策、MP4-as-chip）を、リポジトリ内の design-templates/hyperframes/ に向けています。

README は、HyperFrames を他の生成器と組み合わせられるとも述べています。Seedance 2.0 は、映画的なテキストから動画、画像から動画として挙げられています。Veo 3、Sora 2、Kling 2 は、ルーティングされるモデルバリアントとして挙げられています。Suno v5 と Lyria 2 は音声レイヤーとして挙げられています。その組み合わせは第二の経路です。Motion のレンダー自体は、引き続き HTML アニメーションを MP4 にしたものです。

OpenDesign はエージェントを同梱しません。README は、デザインエンジンが、すでに PATH 上にある claude、codex、cursor-agent、copilot、hermes、または kimi のバイナリだと述べています。ワンクリックで切り替えます。

アプリ自体はオープンソースです。モデルは同梱しないため、モデル費用は持ち込むエージェントまたは API キーに依存します。

2026年10月17日、eogee.com は、OpenDesign のローンチチームが、ローンチのデモ動画は OpenDesign 内の DeepSeek V4.1 Flash で作ったと述べたと報じました。それはベンダーの主張です。その記事に独立したベンチマークは含まれていません。

OpenDesign のインストール方法

以下の手順は OpenDesign README にあるインストール経路です。コマンドブロックはそのファイルからコピーしています。

デスクトップアプリ

README はデスクトップアプリを最速の経路と呼んでいます。Node も、pnpm も、クローンも不要です。

インストール後、アプリは PATH 上のすべてのコーディングエージェント CLI を自動検出します。100+ の機能スキル、別のレンダリングテンプレートカタログ、151 のデザインシステムを読み込みます。エントリビューでブリーフを入力します。

プロジェクトはローカルでも、自分のデプロイでも実行できます。クラウドモデルへのリクエストと OpenDesign Cloud へのリクエストは、それぞれのサービスへ送られます。

コーディングエージェントへのインストール

GUI なしで OpenDesign を使えます。Claude Code、Codex、Cursor、Copilot、OpenClaw、Antigravity、Hermes、Kimi などの中で、スキル、プラグイン、または MCP サーバーとして呼び出します。

/usr/bin/od が OpenDesign の od を隠すことがあります。 DMG または Homebrew cask から macOS アプリをインストールした場合、シェルは依然として od を Apple の /usr/bin/od（8 進ダンプユーティリティ）に解決することがあります。デスクトップアプリで Settings → MCP server を開き、クライアント別のスニペットをコピーします。そのスニペットは絶対パスを使い、裸の od コマンドに依存しません。WSL2 のユーザーは、まずリポジトリの docs/wsl-setup.md に従ってください。

install.sh は od mcp install を包む薄いシェルラッパーです。ホストされた URL がランディングページの HTML フォールバックではなく shell を返すようにするためあり、シェルが Open-Design ではない od バイナリを解決した場合はすぐに失敗します。

# One-line install into the agent you're using:
od mcp install <agent>
# <agent> = claude | codex | reasonix | raven | cursor | copilot | openclaw
#         | antigravity | pi | vibe | hermes | cline | kimi | kiro
#         | trae | opencode

# Hosted equivalent for curl-based setup:
curl -fsSL https://open-design.ai/install.sh | sh -s <agent>

その後、エージェントの中で次のようにします。

> Use open-design to generate a landing page with the Linear design system

ファイルシステム対応のローカル CLI 実行では、エージェントが選んだ機能スキルまたはデザインテンプレートをあなたの DESIGN.md と組み合わせ、正規のプロジェクトファイルを書き、OpenDesign がそれらのファイルをプレビューします。ファイルシステムツールのない BYOK またはプレーン API の実行は、完全な <artifact> ブロックを 1 つ返します。

Docker

git clone https://github.com/nexu-io/open-design.git
cd open-design/deploy
cp .env.example .env
echo "OD_API_TOKEN=$(openssl rand -hex 32)" >> .env
docker compose up -d
# open http://127.0.0.1:7456

ブラウザが認証情報を求めたら、ユーザー名に open-design、パスワードに deploy/.env の OD_API_TOKEN の値を使います。これでホストネットワーキングなしに、Docker ブリッジのトラフィックを認証できます。API クライアントは引き続き Authorization: Bearer <OD_API_TOKEN> を使えます。

ソースから実行

git clone https://github.com/nexu-io/open-design.git
cd open-design
corepack enable && pnpm install
pnpm tools-dev run web

tools-dev が出力した URL を開きます。明示的なポートフラグを渡さない限り、開発用ポートは動的に割り当てられます。

Node ~24 と pnpm 10.33.x を使います。WSL2 のノートは docs/wsl-setup.md にあります。ネイティブ Windows のノートは docs/windows-troubleshooting.md にあります。完全なクイックスタート、環境変数、パッケージ版のビルド手順は QUICKSTART.md にあります。これらのファイルはリポジトリにあります。

Motion の始め方

v0.25.0 のノートはこの経路を示しています。Home または Community で Motion Design を開きます。同梱例 5 つのいずれかを選びます。@ ピッカーのモーションスキルを使います。動画を依頼します。編集可能なソースファイルと MP4 が得られます。インタラクティブなアニメーションは実行可能な HTML のままです。アクティブなプレビューを離れると音は止まります。

OpenDesign Motion vs Claude Motion vs Gemini Omni

以下の行は、v0.25.0 リリース、OpenDesign README、Anthropic の 2026年10月8日の記事、Claude Motion ヘルプセンター、そして本サイトの Gemini Omni とは のページを使っています。

Claude Motion は Team と Enterprise でベータです。ヘルプセンターは、Team ではデフォルトでオンだと述べています。Enterprise では、オーナーが Organization settings > Artifacts でオンにするまでオフのままです。Anthropic の記事は、Enterprise の管理者に、Dashboards と Motion で同じスイッチを使うよう述べています。

Claude は、テキスト、チャート、図形、画像をアニメーションさせるコードを書きます。任意の語句、数値、タイミングを変更できます。エディタで作品を調整するか、Claude に変更を依頼してから、MP4 をダウンロードします。ヘルプセンターは、アニメーションは Motion テンプレートから作られたアーティファクトだと述べています。Artifacts タブに保存されます。Export > MP4 で書き出します。デフォルトでは非公開です。共有するには共有します。使用量はプランの使用上限にカウントされます。より長い、またはより複雑なアニメーションはより多く使います。

記事の例は、四半期報告を全社会議向けの 30 秒の説明にしたもの、取締役会デッキのチャート上のモーション、顧客オンボーディング向けの製品ウォークスルーです。これらは記事中の例です。最大の長さ、解像度、フレームレートは公開されていません。Anthropic は、Claude Motion は動画生成モデルを使わないと述べています。生成された映像はなく、AI が生成した人物もいません。Anthropic は、Adobe、Descript、HeyGen、Higgsfield、invideo、Luma AI、または Runway への引き渡しを挙げ、Canva と Captions は近日対応です。

Gemini Omni は、Google が I/O 2026 の 5月19日に公開した生成モデルです。テキスト、画像、音声、または動画の入力から動画を作り、ネイティブの同期音声が付きます。最初のリリースは Gemini Omni Flash です。実際の映像を生成します。OpenDesign Motion と Claude Motion は、コードベースのアニメーションをレンダリングします。Omni は Google AI Plus、Pro、Ultra に含まれます。

これらの情報源がその事実を述べていないとき、セルは未公開と書きます。

どれをいつ使うか

1. HTML、CSS、GSAP として編集し、MP4 として書き出せるオープンソースのモーションデザインには OpenDesign Motion を使います。デスクトップアプリは macOS と Windows をカバーします。Linux はソースから実行します。すでに PATH 上にあるコーディングエージェントを持ち込むか、そのいずれかに OpenDesign をインストールします。
2. Claude の中でテキスト、チャート、図形、画像のベータアニメーションが欲しいときは、Claude の Team または Enterprise プランで Claude Motion を使います。Team ではデフォルトでオンです。Enterprise のオーナーが Organization settings > Artifacts でオンにします。Anthropic の記事とヘルプセンターから始めてください。
3. 生成された映像とネイティブの同期音声が欲しいときは Gemini Omni を使います。Gemini Omni とはがそのモデルを扱います。Gemini Omni の映像プロンプト、または OpenDesign の組み合わせ経路向けの Seedance と Veo のプロンプトは、プロンプトジェネレーターで下書きします。

関連記事

• GitHub の OpenDesign
• OpenDesign v0.25.0 リリース
• HyperFrames
• Anthropic: Dashboards and Motion
• Get started with Claude Motion
• Gemini Omni とは
• プロンプトジェネレーター