動画制作に挑戦しようとした人なら一度は通る道、それが「Live2D」や「Adobe After Effects（AE）」です。
どちらも技術案件が重く、習得に時間がかかります。
そこで、Canvaのマジック切り抜きでパッと分けたパーツを、そのままマウスでぐりぐりと動かして動画にする。と言うコンセプトでバイブコーディングをすることにしました。

技術的制約（設計ポリシー）

外部APIは使用しない（ネットワーク依存を排除）
React + ブラウザ標準機能のみで完結
クライアントサイドのみで処理が完結（サーバーレス運用／ローカル完結）

この制約により、導入ハードル（環境構築・運用費・権限周り）を最小化しつつ、「ブラウザを開けば動く」制作ツールを目指す。

技術スタック

カテゴリ技術用途 / 役割
フレームワーク React（Vite + TypeScript） UI構築／開発体験（高速ビルド、型安全）
状態管理 Zustand レイヤー・選択状態・ピン座標などアプリ状態管理
スタイリング Tailwind CSS ダークモード基調のスタイリッシュなUI設計
グラフィックス react-konva / konva Canvas操作（レイヤー、ドラッグ、変形の土台）
オーディオ HTML5 Audio API BGM/音素材の再生・制御
動画出力 MediaRecorder API Canvas + Audio をキャプチャして動画化（ブラウザ内完結）

ポイント：MediaRecorder に寄せることで、サーバーサイドでのエンコード（ffmpeg 等）を不要化し、「録画終了＝ほぼ即生成」の体験を狙う。

ディレクトリ構造

src/
├── components/
│ ├── StageArea.tsx # Konvaキャンバス処理
│ ├── Controls.tsx # 操作ボタン群
│ └── LayerControls.tsx # レイヤー順序制御UI
├── store/
│ └── useStore.ts # Zustand状態管理
├── utils/
│ ├── recorder.ts # 録画ロジック
│ └── animation.ts # アニメーション記録・再生ロジック
├── types/
│ └── index.ts # TypeScript型定義
└── App.tsx # メインアプリケーション

なぜこの制約・技術選定が効いたのか

本ツールでは、あらかじめ強い技術的制約を設けています。
これは「できることを減らす」ためではなく、開発・運用・ユーザー体験を同時に成立させるための設計判断です。

外部APIを使わないメリット

APIキー管理・課金・利用制限を一切考えなくてよい
サービス停止・仕様変更の影響を受けない
デモ・検証・個人制作でも「壊れない」

結果として
「作った瞬間から最後まで同じ挙動を保証できる」
という安心感が得られました。

クライアントサイド完結にした理由

サーバー不要 → デプロイ・保守コストがゼロ
ローカル実行・GitHub Pages 等でも成立
個人制作／プロトタイプ／教育用途に転用しやすい

特に動画生成系は
「サーバーでやると一気に重くなる・面倒になる」
という地雷が多いため、ブラウザ内で完結させる価値が非常に高いと判断しました。

React + Zustand による構成の意図

このツールでは、

・レイヤー順
・選択中オブジェクト
・アニメーション状態
・録画状態

といった状態が頻繁に変化します。

そのため、

・Reduxほど重くなく
・useState地獄にもならない

Zustandを採用しました。

状態 = UI操作 + アニメーション + 録画

という構造を一箇所で把握できる点が、開発速度・修正耐性の両面で効いています。

Konva + MediaRecorder の組み合わせが強かった理由

Canvas（Konva）
・レイヤー概念が明確
・ドラッグ・変形・順序制御が素直
・「1枚絵を動かす」用途に過不足がない

MediaRecorder API
・Canvas + Audio をそのまま録画できる
・ffmpeg 等の知識不要
・処理が終わったら即ファイル化できる

この組み合わせにより、

「操作しているそのままの画面を、動画として保存する」

という直感的なUXを実現できました。

ディレクトリ分離で意識したこと

・**components：**UIとCanvas描画に集中
・**store：**状態の唯一の真実（Single Source of Truth）
・**utils：**副作用・ロジックをUIから切り離す
・**types：**後から壊れないための保険

まとめ

強い制約は、創造性を殺さない
むしろ「迷わず作れる速度」を与えてくれる
バイブコーディング的開発と、堅実な設計は両立できる.

今回の構成は、
「専門知識ゼロでも触れるが、技術的に破綻しない」
というラインを本気で狙った結果です。