generative-illustration

ジェネレーティブイラストレーション

AI 生成のイラスト素材とコード駆動のモーションを組み合わせて、表現豊かでコンセプト重視の作品を作ります。これはデザイナーがモーショングラフィックデザインと呼ぶ分野です。エージェントネイティブな方法で制作します。AI がビジュアルを作り、コードが命と意味を吹き込みます。

使用する場面

• アニメーションイラスト、詩的な／アンビエントな「モーションポエム」、視覚的なメタファー。
• 美しくイラスト化されたシーンが意図を持って動く、短いブランド作品やアート作品。
• 「AI 生成のビジュアル＋コードによるモーション」のあらゆるハイブリッド作品。
• **対象外：**データビジュアライゼーションには chart-animation、見出しテキストのみの場合は kinetic-typography、3D／GLSL／大量のパーティクルシステムには webgl-animation を使用してください。

セットアップ／前提条件

• レンダリングに API キーは不要です — Node、playwright-core（Chromium を自動取得）、ffmpeg をすべてローカルで無料で利用できます。これで、合成＋アニメーション＋書き出しという中核部分をまかなえます。
• **AI 生成（素材＋音楽）には API キーが 1 つ必要です。**最も簡単なのは単一の OpenRouter キーを使う方法です。OPENROUTER_API_KEY を設定してください。このスキルで使う 3 つのジェネレーターすべてを、1 つのキーで利用できます。
  • ベクター → recraft/recraft-v4.1-vector
  • 絵画風テクスチャ → google/gemini-2.5-flash-image
  • 音楽 → google/lyria-3-clip-preview（音声には stream: true が必要です）
• **任意の代替手段：**より安価な Recraft を使う場合は REPLICATE_API_KEY（recraft-ai/recraft-v4.1-svg、画像あたり約 $0.04。$0.08 と比べて安価です）、Lyria を直接使う場合は Google AI Studio の GEMINI_KEY を利用できます。
• または独自の素材／音楽を用意する（手描き、任意の AI ツール）ことで、生成工程をすべて省略できます。モーション＋制作の中核部分にキーは一切必要ありません。

失敗の 90％を防ぐ唯一のルール

AI 生成の大きなイラストを 1 枚だけアニメーションさせようとしてはいけません。小さく独立した要素を複数生成し、それぞれを 1 つのまとまりとしてコードでアニメーションさせます。

AI 画像／ベクターモデルの出力は、グループ化されていないパスの平坦な集合です。<g> も、ID も、「これが腕／これらが花びら」といった情報もありません。その中のパーツにリグを設定することはできません。ここから、次の 2 つの失敗パターンが生じます。

• 画像全体を静止させたままクロスフェードする → PowerPoint のように見えます。
• パスを近さに応じて自動でクラスタリングし、それぞれを揺らす → 不気味な印象になります（意図のない動きで、すべてがぐらぐら揺れます）。

**構造は 1 枚の画像の中ではなく、素材と素材の間にあります。**各要素を個別のきれいなファイルにし、コードで全体を動かします。（これは実際にモーションイラストを制作する人の手法です。パーツを別々にデザインし、コードで構成して見せます。）

パイプライン

1. コンセプト — 1 つのメタファーに絞り、徹底的に無駄を省きます。
2. 各要素を個別に AI で生成し、単色の背景に分離します。
3. 背景を取り除き、透明なスプライトにします。
4. 動きをコードで作成します — <canvas> 上の決定論的なシーク用ハーネスで、スプライト＋テキスト＋グレインを配置し、アニメーションさせます。
5. レンダリング — すべてのフレームをキャプチャし、ffmpeg を使って MP4 にします。
6. 音楽 — カスタムトラックを生成（Lyria）し、ミックスします。

1 · アセットの生成

• くっきりしたベクター要素（花、アイコン、生き物）→ Recraft v4.1 SVG。
• 絵画風のテクスチャ（水彩のにじみ、紙のざらつき）→ 画像モデル（Gemini「nano-banana」）。
• 具体性が大切です。 実在感のある個性的な題材を指定しましょう。汎用的なプロンプトからは、ありきたりなアートしか生まれません。

プロンプト	結果
a single delicate wildflower, soft petals…	平坦で、ありきたりで、漫画風
a single **elegant poppy** on a **tall slender curved stem**, soft coral-red petals with a **delicate dark center**, one leaf, refined minimal flat vector, single isolated element, plain solid white background	優美で、ひと目でそれと分かるポピー。「デザインされた」印象がすぐに伝わります

• 常に no text を加えましょう。AI は文字をうまく描けません。正確で編集可能な文字は、コードで追加します。
• 簡単に切り抜けるよう、"single isolated element, plain solid white background" を指定しましょう。
• 背景のパスを削除します。 Recraft はキャンバス全体を覆う白い長方形をパス #0 として描画します。バウンディングボックスが viewBox のほぼ全体を覆うパスを見つけて削除すると、透明なスプライトになります。

# keep every path EXCEPT the one whose bbox spans the whole canvas
def is_bg(path, VBW):
    nums = [float(n) for n in re.findall(r'-?\d+\.?\d*', d_of(path))]
    xs, ys = nums[0::2], nums[1::2]
    return xs and (max(xs)-min(xs)) > VBW*0.92 and (max(ys)-min(ys)) > VBW*0.92

• Recraft v4.1 の SVG 形式：<path …></path>（自己終了タグではありません）、viewBox="0 0 2048 2048"、transform="translate(x,y)"、絶対座標。

2 · 決定論的なシークハーネス（きれいにレンダリングするための鍵）

表示される値はすべて、時間 t の純粋関数にします。requestAnimationFrame ループや CSS トランジションは使いません（フレームグラバーと同期がずれて、ちらつくためです）。

window.__T = totalSeconds;                 // total duration
window.__seek = (t) => render(t);          // bar width, x/y, opacity, scale — all derived from t
// on load: render the frame named in the URL
window.__seek(parseFloat(new URLSearchParams(location.search).get('t')) || 0);

1 つのブラウザーで Playwright のループを実行し、t = 0, 1/30, 2/30 … にシークして各フレームをスクリーンショットに撮影し、その後 ffmpeg でつなぎ合わせます（サイズは偶数にし、yuv420p を使用してください）。状態を持つシミュレーション（パーティクルなど）では、シード付き RNG を使ってシミュレーションを決定論的に進め、毎回同じ結果がレンダリングされるようにします。

3 · スプライトのアニメーション

• 各アセットを Image として読み込みます（HTML を自己完結させるため、インラインの base64 data-URI を使用します）。各インスタンスは save/translate/rotate/scale/restore の中で drawImage します。
• 各スプライトの動きの支点を基準に配置します（動きに応じて、底辺、中心、角など）。たとえば、線から立ち上がるようにするには、translate(x, baseY) の後、(-w/2, -h) に描画します。
• 動きはアイデアに合わせましょう。反射的に「拡大」を選ばないでください。カウントアップ、分割・二重化、スライドイン、広がり、瞬時の変化、0 からの拡大など、それぞれ異なる意味を伝えます。静止時の動きには、穏やかな sin(t) の揺らぎを使います。
• 手作り感のある Softcore のテクスチャを加えるため、粒子のオーバーレイ（シード付きノイズ）を追加します。
• キャプチャ時には、すべての画像のデコードが完了したら window.__ready() フラグを使って処理を開始します。

4 · クラフト — 動くだけでなく「良い」ものを作るために

• ビジュアルはコンセプトに選ばせ、特定の表現に頼らないでください。 モーションの語彙は使い回すのではなく、このアイデアから導き出す必要があります。複利なら、点が倍々に増えて画面を埋め尽くす（植物ではありません）。白紙のページなら、最初の一語がテキストのダムを決壊させる（芽ではありません）。情報過多なら、タブやウィンドウが増殖してノイズになります。無関係なコンセプトに「地面から何かが育つ」という表現を使い回すことが、作品を陳腐でありきたりにする最大の理由です。 もう一度「何かが育つ」という表現を使いたくなったら、いったん立ち止まり、コンセプトが実際にはどのような姿をしているのかを考えてください。（元の庭の作品で植物が育つ表現がうまくいったのは、コンセプトが文字どおり植物に関するものだったからです。）
• 因果関係。 原因→結果を文字どおり結び付けてください（入力が届く→その場所で何かが起きる）。関連の薄い出来事を並行して起こすと、ランダムなノイズに見えます。
• 抑制。 モーションでは、静止画より要素を少なくする必要があります。要素が多すぎると動きがノイズになります。核となるものだけを残し、盛り込みすぎないでください。
• 主役を際立たせる。 重要な要素（「成功のきっかけとなった」もの）がある場合は、ほかを暗くして、その要素を際立たせてください。光輪、拡大、色の変化などが使えます。
• リズム：収束 → 一拍の静止 → 振り返り。 締めくくりの一文は振り返る表現です。アクションが止まってからでなければ、印象に残りません。モーションが終わるのを待ち、一拍置いて、それからスローガンを表示してください。動きが続いている間に結論を重ねてはいけません。
• イージング。 視聴者が読むものには、決してリニア補間を使わないでください。不透明度だけでなく、値にもイージングを適用してください。小さく弾ませる動きにはオーバーシュートを、成長する動きにはゆっくりとしたイーズアウトを使います。
• 意味の整合性 — 自ら作品を台無しにしないでください。 失敗や衰退を描く場合、自社製品の機能としてラベル付けしないでください（「当社製品は中核機能で失敗する」と受け取られます）。代わりに、中立的な表現やプロセスに関する表現を使ってください。

5 · 音楽

Lyria 3（OpenRouter google/lyria-3-clip-preview）でカスタムトラックを生成します。AI 生成なので、ロイヤリティフリーです。音声出力には stream: true が必要です。チャンクは delta.audio.data に Base64 形式で届くので、連結して MP3 にデコードしてください。ffmpeg でミックスします。長さを調整し、フェードイン／アウトを加え、ナレーションがある場合はその下で音量を下げます（約0.5）。

6 · 検証ループ（省略しないでください）

作品をレンダリングし、全尺のコンタクトシートを作成して（最初の数秒だけでなく、タイムライン全体からフレームをサンプリングして）、自分で確認してください。空白のフレームはありませんか？ 行が重なっていませんか？ コンセプトはちゃんと伝わっていますか？ 修正して再レンダリングしてください。この納品と検証のループが、「動いた」と「良い作品だ」を分けます。

references/

• asset-pipeline.md — アセットのプロンプト、背景除去コード、Recraft／Gemini のフォーマットに関する注意事項
• render-harness.md — 完全な seek-harness HTML、Playwright によるキャプチャ、ffmpeg のレシピ
• craft.md — 因果関係、リズム、抑制、主役の際立たせ方と具体例

---

iart.ai を支えるクラフト。コストの目安：Recraft SVG は約 $0.04、Lyria のトラックは数セントで、完成作品全体を $1 未満で制作できます。