1. はじめに
本プロジェクトは、一枚のイラストを読み込むだけで、誰でも簡単に「揺れる」アニメーション（WebM動画）を作成できるツール「Easy V-Studio」の開発記録です。
当初は複雑なマルチレイヤー編集ツールを目指していましたが、ユーザー体験を追求した結果、究極にシンプルな「シングルイメージ・モーションメーカー」へと進化しました。
2. 開発の変遷とターニングポイント
最初は「高機能」を目指した
初期案では、Photoshopのようなレイヤー構造と、無制限のピン変形を想定していました。しかし、実際に動かしてみると「ピンを打つ場所を間違えると画像がバラバラになる」「操作が難しい」という課題に直面しました。
「引き算」の設計へ
「初心者でも迷わず動かしたい」という思考に切り替え、以下の大胆な方針転換を行いました。
- シングルレイヤー特化: レイヤー管理の煩わしさを排除。
- ピン数の制限（最大4つ）: 迷いを減らし、パフォーマンスを最大化。
- オーバーダブ（重ね録画）機能: 一度に全てを動かすのではなく、パーツごとに命を吹き込んでいく楽しさを提供。
3. 技術的こだわり：Antigravityの真骨頂
開発において、特にAIエンジニアとしてこだわった技術的ブレークスルーを紹介します。
① 「破綻しない」変形アルゴリズム
ピンを動かして画像を歪ませる際、計算が単純だと画像が「ちぎれる」現象が起きます。
逆二乗重み付けを用いたメッシュ変形を採用し、さらに**画像の四隅に不可視のアンカー（重石）**を自動配置しました。これにより、どんなに激しくピンを動かしても、絵が画面外へ逃げていかず、自然な肉感の「揺れ」を維持することに成功しました。
② ミリ単位の「継ぎ足し録画」同期
何度もRECを繰り返して動きを重ねる際、時間がズレるとアニメーションがカクつきます。
- 30FPS固定サンプリング: 録画中のデータの密度を一定に保つスタビライザーを実装。
- 二分探索による高速コマ検索: 数千フレームの中から、現在の時間をミリ秒単位で瞬時に見つけ出し、スムーズに補間再生します。
③ 「ピンの見えない」クリーンエクスポート
画面上では緑色のピンが見えないと操作できませんが、書き出した動画にそれが映るのはNGです。
これを解決するため、Konvaのマルチレイヤー録画を採用しました。
-
Layer 0: 画像の描画（ここだけを映像としてキャプチャ） -
Layer 1: UI・ピン操作（ユーザーにだけ見えるガイド）
この分離により、録画中にどれだけピンを激しく動かしても、保存されるのは「生き生きと動くイラストだけ」という魔法のような体験を実現しました。
4. 製品版（Pro版）への道のり：配布と安定性の追求
ここからはkimi-K2にチェックをしてもらいながら作成しています。
最終段階では、プロトタイプを「誰でも配布・利用できる製品」に昇華させるため、目に見えない部分での最適化を行いました。
どこでも動く「相対パス」ビルド
WebM動画を生成するアプリを配布する際、「サーバーのどこに置いても動く」ことが重要です。Viteのデフォルト設定である絶対パス（/assets/）から、相対パス（./assets/）への切り替えと、それに伴うデプロイエラーの解消（CORS対策）を徹底し、ホスティング環境を選ばない頑健性を確保しました。
厳格なコード品質とSPAサポート
製品版ビルドにおけるTypeScriptの型定義を厳格化し、開発中の「曖昧な型」や「未使用変数」によるバグの芽をすべて除去しました。また、npx serve -s によるSPAモードへの対応をドキュメント化し、ユーザーがローカル環境で立ち上げても 404 エラーに苦しまないようUI/UXを整備しました。
5. 結びに
Easy V-Studioは、単なる技術の集合体ではありません。AIと人間の対話を通じて、「複雑なものを極限までシンプルに削ぎ落とす」ことで生まれた、表現者のための楽器です。
一枚の絵に命を吹き込むその瞬間を、ぜひ楽しんでください。