generate-image

画像を生成 — AI 画像作成

Remotion の動画プロジェクト向けに、ユーザーがカスタム画像を生成できるよう支援します。

ワークフロー

1. ニーズを把握する

まだ明確でない場合は、ユーザーに次の点を尋ねます。

• 画像の用途は何ですか？ — シーンの背景、サムネイル、キャラクター、商品写真、抽象アート、図解？
• スタイル — 写実的、イラスト、3D レンダリング、フラットデザイン、水彩画、ピクセルアート？
• 寸法 — 横長（1920x1080）、縦長（1080x1920）、正方形（1080x1080）？
• 雰囲気／色 — 明るい、暗い、暖色、寒色、ネオン、パステル？

2. プロンプトを作成する

Replicate 公式の prompt-images スキルに沿った手法で、完全な文章としてプロンプトを書きます（モデルに依存しないため、KIE にも適用できます）。次の順番で盛り込みます：被写体、スタイル、照明、カメラアングル、カラーパレット、背景の詳細。

プロンプトの例：

• 「上から見たモダンなテック系スタートアップのオフィス。白いデスクと青いアクセントを使った、すっきりとしたミニマルなデザイン。大きな窓から明るい自然光が差し込む、写実的な画像。」
• 「暗い背景に、紫と青に発光する線を配した抽象的な幾何学模様。未来的な3Dレンダリング。」
• 「手を振る親しみやすいロボットのマスコット。ロゴに適した、すっきりとした白い背景にパステルカラーを使ったカートゥーン調のイラスト。」
• 「暖かなオレンジとピンクのゴールデンアワーの空を背景にした、ダウンタウンのスカイラインのシルエット。ドローンによる空撮、シネマティックな表現。」

動画の場合は、さらに次の点も考慮します。

• 余白を設ける： Remotion でタイトルやキャプションを配置する場所に余白を設け、「テキストなし、透かしなし」と指定します。テキストは Remotion で描画します。
• シーンの一貫性を保つ： 動画内のすべての画像で、同じスタイルブロックをそのまま再利用し、最初にできた良い画像を参照画像として渡します。skills/remotion-production/rules/image-generation.md を参照してください。

3. remotion-media で生成する（デフォルト）

Use remotion-media generate_image:
- prompt: [crafted prompt]
- output_name: img-hero
- aspect_ratio: 16:9  # always pass it (default is 1:1); 9:16 for shorts
- resolution: 2K      # default 1K; use 2K+ for 1080p compositions
- image_urls: [optional reference images, up to 8, public URLs only]

画像は、エージェントの起動元ディレクトリ内の public/img-hero.png に保存されます。そのため、エージェント（Claude Code、Codex、Gemini CLI…）は Remotion プロジェクトのルートディレクトリから起動してください。image_urls の参照画像には、KIE が取得できる公開 URL を指定する必要があります。public/ 内のファイルは指定できません。

4. Replicate で生成する（特定のモデル）

ユーザーが特定のモデル（タイポグラフィ、複数の参照画像、特定のルック）を希望する場合や、KIE が失敗した場合は Replicate を使います。ローカルの replicate-mcp サーバーと REPLICATE_API_TOKEN が必要です。Replicate 公式の find-models および run-models スキルに従ってください。

1. 検索してから、スキーマを読む。 body: "<task>" を指定して search_models を実行し、続けて get_models（model_owner、model_name）と list_models_examples を実行します。スキーマに存在する入力のみを使用してください。アスペクト比の入力名はモデルによって異なります。
2. 予測を作成する。 公式モデルには model_owner、model_name、input を指定して create_models_predictions を使います。コミュニティモデルには version: "owner/name:<version_id>" を指定して create_predictions を使います。高速な画像モデルでは Prefer: "wait" を指定できます（最大60秒間ブロックします）。
3. status が succeeded、failed、canceled のいずれかになるまで、prediction_id を指定して get_predictions を実行し、状態を確認します。
4. output 内の URL からすぐにダウンロードします（1時間後に期限切れになります）。

mkdir -p public/images
curl -L -o public/images/img-[descriptive-name].png "<output URL>"

2026年10月時点での出発点（呼び出す前に検索し、スキーマを読んでください）：

• FLUX.2 Pro / Max（black-forest-labs/flux-2-pro、-max）：写実的な画像、input_images を使った複数の参照画像
• Nano Banana Pro（google/nano-banana-pro）：テキスト入り画像、編集
• GPT Image 2（openai/gpt-image-2）
• Ideogram v3 Quality / Turbo（オーナーは ideogram-ai、各ティアにIDが1つあります。ideogram を検索）：タイポグラフィ、ロゴ
• FLUX Kontext Pro（black-forest-labs/flux-kontext-pro）：1枚の参照画像（input_image）から編集

全体の手順については skills/remotion-production/rules/replicate-models.md を、プロバイダーの選択と一貫性に関するガイダンスについては rules/image-generation.md を参照してください。

5. Remotion で使用する

公式の remotion-markup スキルと同様に、remotion の <CanvasImage> を使って画像を追加します（<Img> も引き続き使用でき、どちらも effects を受け付けます）。サイズ調整とアニメーションについては、images.md と timing.md に従ってください。パスはプロバイダーによって異なります。generate_image は public/<output_name>.png に保存し、Replicate は public/images/ にダウンロードします。

import { CanvasImage, Easing, interpolate, staticFile, useCurrentFrame, useVideoConfig } from "remotion";

const frame = useCurrentFrame();
const { fps } = useVideoConfig();

// As a background (remotion-media output)
<CanvasImage
  src={staticFile("img-hero.png")}
  style={{ width: "100%", height: "100%", objectFit: "cover" }}
/>

// As an element that pops in (Replicate download)
<CanvasImage
  src={staticFile("images/img-product.png")}
  style={{
    scale: interpolate(frame, [0, 0.6 * fps], [0, 1], {
      extrapolateLeft: "clamp", extrapolateRight: "clamp",
      easing: Easing.spring({ damping: 200 }),
      output: "perceptual-scale",
    }),
  }}
/>

静止画にゆっくりとしたケン・バーンズ効果を加える方法については、skills/remotion-production/rules/image-generation.md を参照してください。

6. 反復する

画像が適切でない場合は、次のようにします。

• プロンプトを調整します。問題点をより具体的に指定してください（編集方法やよくある落とし穴については prompt-images を参照してください）。
• 複数のバリエーションを生成し、ユーザーに選んでもらいます。
• モデルがサポートしている場合のみ、除外条件を指定します（「テキストなし、透かしなし」）。ネガティブプロンプトを使うとかえって結果が悪くなるモデルもあります。
• ほかのシーンとの整合性を保てるよう、一度に変更するのは1つだけにします。