Claudeで自分のIPを素早く拡張する方法

CodexとClaudeに直接GIFを頼む

クラゲのアニメーションはすぐに作れましたが、結果はしっくりきませんでした。キャラクターは動くものの、そのアニメーションはAirJellyのピクセルアートデザインの本質を捉えていませんでした。

ピクセルサイズ、シルエット、比率、色数制限、触手の形、フレームのタイミング、そのすべてが重要です。そのうちの一つでも大きくずれると、結果はAirJellyそのものではなく、似た新しいキャラクターに見え始めます。

つまり本当の課題は、アニメーションを生成することではありませんでした。キャラクターの視覚的アイデンティティを最後まで保つための、十分に明確な制約を構築することだったのです。

PixeloramaをClaudeに接続する

Pixeloramaを選んだのは、ピクセルアートとフレームバイフレームのアニメーションのために専用に作られているからです。グリッド、ピクセル単位の編集、フレーム管理、アニメーションプレビュー、透明背景での書き出しを提供します。

こうしたツールレベルの制約が、有用な創造的制約になります。テキストの説明だけからピクセルアートのスタイルを近似させるのではなく、ピクセルアニメーションの論理に従う環境をClaudeに与えるのです。

PixeloramaにはネイティブのMCPがなかったので、Claudeが作った

PixeloramaはMCPサーバーを提供していないため、最初のステップはClaudeにMCPサーバーを書かせ、ワークフローに組み込むことでした。npm依存ゼロ、単一ファイル、Node ≥ 18。やることは2つです。.pxoプロジェクトファイルを直接書き込み（Pixelorama v1.1.10のソース、pxo_version 6に基づいて実装）、PixeloramaのヘッドレスCLIを動かして画像を書き出します。

統合されると、最も難しい問題であるスタイルの一貫性はほぼ解決しました。残ったのは、動作、表情、タイミング、細部を会話の中で説明し、Claudeにプレビューさせて洗練させることでした。

繰り返し学んだ教訓を再利用可能なSkillにする

ツール統合に加えて、プロンプト、デザインルール、制作ワークフローをSkillにまとめました。これにより、新しいアニメーションを作るたびに同じルールをClaudeに説明する必要がなくなり、Claudeは確立された視覚言語を再利用し、ワークフローは時間とともに一貫性を増していきます。

すべてをまとめてプレビューし、その後バッチで書き出す

すべてのアクションをカテゴリ別に整理し、単一のHTMLページでまとめてプレビューします。これにより、セット全体にわたってキャラクターの比率、動きの範囲、再生速度、全体的なスタイルをはるかに簡単に比較でき、書き出した後ではなく書き出す前に不整合を発見できます。

すべてのアクションを洗練させたら、セット全体を透明GIFとして書き出します。一緒にデザインし、一緒にレビューし、一緒に書き出すことで、アセットファミリー全体の一貫性が保たれます。一つずつ仕上げて書き出すやり方では決して得られないものです。

同じアセットをより多くのIP製品へ広げる

GIFが最終成果物である必要はありません。アニメーションから最も表情豊かな静止フレームを選び、SVGに変換し、Figmaに持ち込んで第二段階の作業 — 輪郭、色、ストローク、レイアウト — を行い、そのアートワークをステッカー、アクリルチャーム、バッジ向けに適応させます。

同じモーションアセットは動画でも再利用できます。ナレーションに合わせた表情で反応するアニメーションのプレゼンターアバターとしてのAirJellyです。アニメーション絵文字からフラットグラフィック、物理的なグッズ、動画キャラクターまで、1つのIPアセットコレクションが分離され、再結合され、再利用され続けます。