編集可能なAIモーショングラフィックス：実測した2つのワークフロー
CanvasループとインタラクティブSVG解説を制作・検証・ダウンロード。
Published · Aixio
編集可能なAIモーションを作る実用的な方法は、完成動画だけでなく小さなブラウザプロジェクトを作らせることです。2つの独立したAixio Websiteワークスペースで、Canvas/Web AudioのアンビエントループとインタラクティブSVG教材を制作し、デスクトップとモバイルで正確な時刻を確認してソースを出力しました。実行可能なZIPは以下から入手できます。
なぜブラウザのソースでモーションを作るのか
動画は投稿しやすい一方、文言、タイミング、曲線、レイアウトを変えると再生成が必要になりがちです。ブラウザネイティブのアニメーションなら、判断がHTML、CSS、JavaScriptに残ります。編集者は修正でき、開発者はタイムラインを検査でき、発表者はインタラクションを維持できます。
共通の制作契約は、オリジナル入力、固定した文言、明確な長さ、再生操作、難しい確認フレーム、決定論的なseek(seconds)、オフライン動作、ソースZIPです。Aixioは各ブリーフ、作業ファイル、Websiteプレビューを同じプロジェクトに保持しました。他のコーディング環境でも同じ技術は実装できます。ここで確認した利点は、専用レンダラーではなく制作と確認の一体化です。
ワークフロー1：Tideglassアンビエントループ
対象と仕事。 ソーシャルまたは音響編集者向けの、オリジナルのプロシージャル音を持つ24秒正方形ビジュアルです。
入力準備。 架空名Tideglass、4つの区間名、4色のパレットを用意しました。参照画像や第三者音源はありません。連続的な素材にはCanvas2Dが適し、Web Audioなら音を編集可能なまま保ち、外部サンプルのライセンスも不要です。
指示と実行。 初回ブリーフは1080正方形、正確な24秒、低減モーション、表示された操作、オフライン動作、window.motionReview.seek(seconds)を指定しました。エージェントが誤って画像生成を始めたため停止し、唯一の修正を使用しました。コードのみ、メディアや検索ツールは禁止、納品はindex.html、styles.css、script.js、README.mdです。
検収と納品。 未変更の書き出しは16.00秒でBLOOM / 03を表示し、ブラウザ警告・エラーはありませんでした。390×844では文書幅と表示幅が一致し、Canvasは収まりました。ソース、確認操作、プロシージャル音、録画メモを含むオフライン実行プロジェクトです。
TideglassソースZIPをダウンロード。SHA-256はチェックサム一覧に記載しています。
限界。 音量、ループ継ぎ目の画素比較、強制的な低減モーション、動画出力は未確認です。Aixioのabout:srcdocプレビューはDOM生成前に外部deferスクリプトを実行しました。未変更の書き出しは正常で、埋め込みプレビューの不具合は未解決です。
ワークフロー2：インタラクティブな3次ベジェ解説
対象と仕事。 教師や開発者向けに、講演、記事、モバイルリンクで使えるインタラクティブ教材です。
入力準備。 オリジナルの5部構成と標準的な3次ベジェ式を提供しました。点、ラベル、フォーカス、ドラッグ、レスポンシブ文字を編集可能にするため、CanvasよりSVG/DOMが適しています。
指示と実行。 別の新規Websiteワークスペースで、35秒のコードのみのブリーフを実行しました。ドラッグできる制御点、キーボード調整、補助線、接線ステージ、レスポンシブ配置、同じ確認APIを指定し、1回でindex.html、styles.css、app.js、README.mdが生成されました。
検収と納品。 未変更の書き出しは21.00秒で補助線、接線、t = 0.60、B(0.60)、座標、式を表示し、警告・エラーはありませんでした。390×844でも式とSVGは表示幅内です。編集可能なSVG、決定論的タイムライン、発表用操作を備えたレスポンシブなオフライン教材です。
ベジェのソースZIPをダウンロード。SHA-256はチェックサム一覧に記載しています。
限界。 実ポインタのドラッグ、キーボード調整、強制低減モーション、動画出力は未確認です。組み立てプレビューでは同じ順序不具合が発生しましたが、書き出しソースは正常でした。
変わる部分と再利用できた部分
用途に応じて、アンビエント素材はCanvasとWeb Audio、アクセシブルな教材はSVGとDOMを使いました。長さ、比率、難しいフレーム、検査基準も変わります。
再利用できたのは制作契約です。オリジナル入力を準備し、文言と時間を固定し、純粋な時間操作を公開し、難しいフレームを指定して繰り返し確認し、デスクトップとモバイルを検査してソースZIPを渡します。2つの大きく異なるブリーフで移植できましたが、モデル全体の信頼性、一括自動化、公開済みSkillを証明するものではありません。
費用、失敗、正直な範囲
Tideglassは停止した試行と修正で0.9805クレジット、ベジェは29.4821クレジットでした。第2回完了時のUI表示は28.4688でしたが、遅延決済後の合計は30.4626となり、承認上限30を0.4626超えました。その後の有料実行はありません。
これは実測した手動レシピであり、保存済みAixio Skillや自動パイプラインではありません。第3のレスポンシブ広告案は上限消費後に送信しませんでした。2つのダウンロードは実物で、隠れた第3出力や完成動画はありません。
同じレシピを再利用する
- 対象、用途、時間、比率、固定文言を先に決めます。
- 連続素材はCanvas、ラベル付き形状はSVG/DOM、配置中心はCSS/DOMを選びます。
- オフラインファイル、再生操作、低減モーション、
window.motionReview.seek(seconds)を要求します。 - 難しい確認時刻と必須要素を明記します。
- 書き出しを未変更で配信し、初期状態と別時刻の後から同じフレームを確認します。
- デスクトップと390px幅を確認してからソースZIPを出します。
正確なプロンプトと設定 · ワークフローレシピ · AixioでWebsiteを開始
別の実測モーションとして、1枚画像からのカメラ軌道実験も参照できます。
出典
注目例は制作者のRiso Window Seat、制作ノート、ツール契約です。構図、ブランド、非公開の元プロンプトではなく、決定論的な確認方法を応用しました。Bang Motionもスタイルブリーフ、短い文言、キーフレーム確認を推奨しますが、そのSkillはAixioで未導入・未検証です。アクセシビリティはW3Cのアニメーション解説と低減モーション技法C39を参照しました。
よくある質問
AIモーションを動画に書き出せますか？
完成物はまず編集可能なブラウザプロジェクトです。画面録画やCanvasストリームは後工程にできますが、今回は未検証で、ソースZIPの代わりにはなりません。
長い映画風プロンプト1本ではだめですか？
先に用途、タイムライン、難しいフレーム、操作、納品を固定すると、不具合を観察し、修正を具体化できます。全速再生の印象だけに頼りません。
Aixio Skillですか？
いいえ。2プロジェクトで試した手動レシピです。保存済みSkillや自動パイプラインは使用しておらず、ワンクリック再利用は主張しません。