動画制作に挑戦しようとした人なら一度は通る道、それが「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：**後から壊れないための保険
まとめ
強い制約は、創造性を殺さない
むしろ 「迷わず作れる速度」 を与えてくれる
バイブコーディング的開発と、堅実な設計は両立できる.
今回の構成は、
「専門知識ゼロでも触れるが、技術的に破綻しない」
というラインを本気で狙った結果です。