テキストの企画書から絵コンテ(ストーリーボード)を起こし、各カットをつないで1本の動画にする——その一連の作業を、人手のコマ割りや動画編集なしで自動化するOSSが「StoryGen Atelier」です。 Geminiで脚本とフレーム画像を生成し、Vertex AI Veoでカット間のつなぎ動画を作り、最後にffmpegで結合する。 本記事は、この絵コンテ生成・動画生成パイプラインの中身を、公式READMEを一次ソースに実務目線で整理します。

30秒で理解する StoryGen Atelier

・Geminiで絵コンテの脚本とフレーム画像を生成し、Vertex AI Veoでつなぎ動画を作り、ffmpegで1本に結合するApache 2.0ライセンスのOSS。2026年6月時点で800★超
・中核は「補間チェーン(Interpolation Chain)」というスライディングウィンドウ方式。隣り合うカットのペアごとにGeminiが遷移を解析し、Veoがつなぎクリップを並列生成する
・フロントはReact+Vite+Mantine UI、バックエンドはNode.js(Express)+better-sqlite3。ログダッシュボードとギャラリーを内蔵
・アニメ・サイバーパンク・ジブリ風・リアリズム・中国水墨画の5スタイルの作例を公開。スタイルとショット数はカスタム可能
・必要環境はNode.js 18+・ffmpeg・Google CloudのVertex AI有効化・Gemini APIキー。start_servers.sh でバック/フロントを一括起動

まずは完成形を見るのが早いので、公式READMEのUI画像を冒頭に置きます。 絵コンテのカットがカード状に並び、各カットのプロンプトとフレーム画像をWeb UI上で確認・編集できる構成です。

StoryGen Atelierの絵コンテ編集UI。各カットのフレーム画像とプロンプトがカード状に並ぶ
StoryGen Atelierの絵コンテUI。Geminiが生成した各カットのフレームとプロンプトをWeb上で確認できる(出典:公式README添付画像)

公式リポジトリは 0xsline/StoryGen-Atelier です。 2025年12月に公開され、JavaScript製、ライセンスはApache 2.0。 本記事はREADME記載の事実のみを採用し、推測は事実と区別して扱います。

StoryGen Atelierとは——絵コンテ生成と動画生成をつなぐOSS

StoryGen Atelier(ストーリージェン・アトリエ)は、AIで絵コンテと動画を自動生成するツールです。 READMEの説明をそのまま要約すると、役割分担は次のようになります。

絵コンテの脚本:Geminiのテキストモデルがストーリーボードの脚本を生成する
フレーム画像:Geminiの画像モデルが各カットのフレーム(静止画)を生成する
つなぎ動画:Vertex AI Veoがカット間を補間するクリップを生成する
最終結合:ffmpegが全クリップを1本の動画に結合する

つまり「テキスト→絵コンテ→各カットの動画→1本の物語動画」という流れを、1つのWeb UIの中で完結させるのが狙いです。 従来であれば、脚本を書き、絵コンテを描き、各カットを動画化し、編集ソフトでつなぐ——という分業を、AIモデルの組み合わせで一気通貫にしています。

機能面では、READMEは次の5つを挙げています。

Storyboard Generation:Geminiが脚本とフレームを生成。スタイルとショット数をカスタム指定できる
Video Generation:絵コンテの補間チェーンに基づき、Vertex Veoがクリップを生成、ffmpegで結合する
Logs Dashboard:動画ログ・絵コンテログをSQLiteで永続化。閲覧・エクスポート・クリアに対応
Gallery:生成した絵コンテと動画を保存・読み込み・削除できる
Prompt Guide:モデルへのプロンプト指示の参考として guide/VideoGenerationPromptGuide.md を同梱

ログ管理とギャラリーが最初から付くため、「生成しっぱなし」にならず、過去の生成物を後から見返せるのは実運用で効いてきます。

ギャラリー——5つの作画スタイルの作例

READMEには、同じ絵コンテ生成エンジンから出力された複数の作画スタイルの作例が、静止画の絵コンテ+生成された動画サンプルのセットで掲載されています。 スタイルはプロンプトで切り替えられ、1つの企画を異なるトーンで試せるのが特徴です。 ここでは公式READMEの作例から、スタイルごとに「絵コンテの静止画」と「Veoでつないだ動画」を並べて確認します。 動画はポスター画像をクリックすると再生されます(読み込み軽量化のため自動再生はしません)。

まずはアニメスタイルです。 絵コンテのフレームと、それを補間チェーンで動画化したサンプルを並べます。

StoryGen Atelierのアニメスタイル作例。複数カットの絵コンテフレーム
アニメスタイルの絵コンテ作例(出典:公式README `exampleImg/Anime.png`)
アニメスタイルの生成動画デモ。ポスター画像をクリックで再生(出典:公式README デモ動画)
アニメスタイルの生成動画デモ(別カット)。補間チェーンでカットがつながる様子(出典:公式README デモ動画)

続いてサイバーパンクスタイル。 ネオンと雨に濡れた夜景のトーンが、動画化でさらに立ち上がります。

StoryGen Atelierのサイバーパンクスタイル作例
サイバーパンクスタイルの絵コンテ作例(出典:公式README `exampleImg/Cyberpunk.png`)
サイバーパンクスタイルの生成動画デモ。ポスター画像をクリックで再生(出典:公式README デモ動画)

ジブリ風スタイルでは、やわらかな光と自然描写のトーンが特徴です。

StoryGen Atelierのジブリ風スタイル作例
ジブリ風スタイルの絵コンテ作例(出典:公式README `exampleImg/GhibliStyle.png`)
ジブリ風スタイルの生成動画デモ。ポスター画像をクリックで再生(出典:公式README デモ動画)

リアリズム(写実)スタイルは、実写に近い質感を狙うトーンです。

StoryGen Atelierのリアリズム(写実)スタイル作例
リアリズム(写実)スタイルの絵コンテ作例(出典:公式README `exampleImg/Realism.png`)
リアリズムスタイルの生成動画デモ。ポスター画像をクリックで再生(出典:公式README デモ動画)

最後に中国水墨画スタイル。 余白と筆致を活かした、東洋的なトーンの作例です。

StoryGen Atelierの中国水墨画スタイル作例
中国水墨画スタイルの絵コンテ作例(出典:公式README `exampleImg/ChineseInk.png`)
中国水墨画スタイルの生成動画デモ。ポスター画像をクリックで再生(出典:公式README デモ動画)

同じ生成パイプラインでも、スタイル指定だけでここまで絵と動画のトーンが変わります。 静止画の絵コンテがVeoの補間チェーンでつながり、1本の動画として動き出す様子が、各スタイルのデモから確認できます。 なお動画は公式READMEに添付されたGitHubホスト版を直接参照しており、ポスター画像はフレームをローカル抽出したものです(再生できない環境向けに各キャプションから直リンクも辿れます)。

アーキテクチャ・しくみ——補間チェーンによる動画生成

StoryGen Atelierの心臓部は、READMEが「Core Technology」として独立した節を割いている動画生成アルゴリズムです。 静止画の絵コンテを、連続した1本の物語動画に変えるための仕組みで、完全自動かつ3つのフェーズで構成されます。

このプロジェクトが採るのは補間チェーン(Interpolation Chain)/スライディングウィンドウという戦略です。 絵コンテのカット列を、隣り合うペア(Shot A→Shot B)に区切って順番に処理していきます。 全体の流れを図にすると次のようになります。

flowchart TD S[絵コンテのカット列
Shot 1..N] subgraph P1[フェーズ1 遷移解析 Gemini] G1[隣接ペア A→B を
スライディングウィンドウで取得] G2[Geminiが A と B の
視覚内容を解析] G3[トランジション・プロンプト
+ 推奨尺 を出力] end subgraph P2[フェーズ2 クリップ生成 Vertex AI Veo] V1[プロンプト + 開始フレームA
+ 終了フレームB を Veo へ] V2[つなぎクリップを並列生成] V3[最終カットは
専用の締めクリップを生成] end subgraph P3[フェーズ3 最終結合 FFmpeg] F1[全 .mp4 を時系列でリスト化] F2[concat + ストリームコピー
-c copy で無劣化結合] F3[full_story_xxx.mp4 を出力] end S --> G1 --> G2 --> G3 --> V1 --> V2 --> V3 --> F1 --> F2 --> F3

各フェーズの役割を、READMEの記述に沿って整理します。

第一に遷移解析(Gemini)です。 システムはまず絵コンテのカット列をスライディングウィンドウで走査し、隣り合う2カットごとにGeminiを呼び出します。 Geminiは「Shot AからShot Bへどう滑らかに遷移するか」を解析し、具体的なトランジション・プロンプト(例:「ゆっくりドリーズームしながら右にパン……」)と推奨尺を出力します。 ここでGeminiが担うのは画像生成ではなく、カット間の「動きの設計」だという点がポイントです。

第二にクリップ生成(Vertex AI Veo)です。 フェーズ1の解析結果を受けて、Veoモデルが並列で動画クリップを生成します。 各ペア(A, B)について、Geminiが書いた遷移プロンプトと開始フレームA・終了フレームBをVeoに渡し、AとBをつなぐクリップを作ります。 そして最終カット(Shot N)には、「最後のフレームで穏やかに余韻を残して締める」といったプロンプトで専用の締めクリップを別途生成し、物語にきれいな終わりを与えます。

第三に最終結合(FFmpeg)です。 全クリップ(つなぎクリップ+締めクリップ)が揃ったら、バックエンドがffmpegで無劣化結合します。 生成された .mp4 を時系列にリスト化し、concat プロトコルとコピーモード(-c copy)でストリームをそのまま連結する——再エンコードを避けることで画質劣化と処理時間を抑え、最終的に full_story_xxx.mp4 を出力します。

技術スタックは、READMEによれば次の構成です。

レイヤー採用技術役割
フロントエンドReact / Vite / Mantine UI絵コンテ編集・生成操作のWeb UI
バックエンドNode.js(Express)Gemini/Vertex呼び出し・ログ・データ管理
データ保存better-sqlite3動画ログ・絵コンテログの永続化
動画結合fluent-ffmpegクリップの連結処理
脚本・画像生成Google Gemini(Text/Image)絵コンテの脚本とフレーム生成
動画生成Google Vertex AI Veoカット間のつなぎクリップ生成

外部DBを立てずbetter-sqlite3でローカル完結させ、動画結合もfluent-ffmpegに任せる——重い基盤を増やさず、AIモデルの呼び出しと結合に絞った軽量な構成だと分かります。

インストールと起動

導入の前提は、READMEのRequirementsに明記されています。 ローカル環境とGoogle Cloud側の両方を整える必要があります。

Node.js 18+ / npm:バック・フロントの実行環境
ffmpeg:クリップ結合に必須
Google Cloudプロジェクト:Vertex AI API(動画生成のVeoモデル)を有効化しておく
Gemini APIキー:絵コンテの脚本・画像生成に使用

環境変数は backend/.env.env.example からコピー)に設定します。 READMEのサンプルは次のとおりで、使用モデル名まで指定する形です。

PORT=3005
GEMINI_API_KEY=your_gemini_api_key
GEMINI_TEXT_MODEL=gemini-3-pro-preview
GEMINI_IMAGE_MODEL=gemini-3-pro-image-preview
# Vertex AI(動画生成に必須)
VERTEX_PROJECT_ID=your_gcp_project_id
VERTEX_LOCATION=us-central1
VERTEX_VEO_MODEL=veo-3.1-generate-preview

起動はルートディレクトリからの一括スクリプトが推奨です。 バックエンドとフロントエンドを別々に立ち上げる必要はありません。

# 実行権限を付与(初回のみ)
chmod +x start_servers.sh
# サーバー起動
./start_servers.sh

このスクリプトは、バックエンドAPIを3005番ポート、フロントエンドを5180番ポートで起動し、ログをそれぞれ backend.log / frontend.log に出力します。 手動で立ち上げたい場合は、バックエンドとフロントエンドを個別にインストール・起動します。

# バックエンド
cd backend
npm install
cp .env.example .env   # 実際のキーを記入
npm run dev            # または npm start

# フロントエンド(既定ポート 5180)
cd frontend
npm install
npm run dev

本番用にビルドする場合は、フロントエンドで npm run build を実行します。 ディレクトリ構成はREADMEに記載があり、backend/(API・Gemini/Vertex呼び出し・ログ管理)、frontend/(React+Vite+Mantine)、guide/(プロンプトガイド)、exampleImg/(README用の作例)に分かれています。

基本的な使い方——絵コンテから動画まで

起動後の流れは、機能構成から次のように整理できます。 まずスタイルとショット数を指定して絵コンテを生成し、内容を確認・調整してから動画化に進む形です。

第一に、絵コンテの生成です。 作りたい物語のテーマやプロンプトを与え、作画スタイル(アニメ・サイバーパンク・ジブリ風・リアリズム・水墨画など)とショット数を指定すると、Geminiが脚本と各カットのフレーム画像を生成します。 生成結果はWeb UI上にカット単位で並び、ギャラリーに保存できます。

第二に、動画への変換です。 絵コンテが固まったら動画生成を実行します。 ここで前述の補間チェーンが走り、Geminiが各カット間の遷移を解析し、Veoがつなぎクリップを並列生成し、ffmpegが1本に結合して full_story_xxx.mp4 を出力します。

第三に、ログとギャラリーの活用です。 生成のたびに動画ログ・絵コンテログがSQLiteに残り、ダッシュボードから閲覧・エクスポート・クリアができます。 気に入った絵コンテや動画はギャラリーに保存し、後から読み込み直して再利用できます。

なお、より良い動画を得るためのプロンプト指針として、リポジトリには guide/VideoGenerationPromptGuide.md が同梱されています。 Veoに渡すトランジションの書き方に迷ったら、まずこのガイドを参照するのがよいでしょう。

ユースケース——どんな場面で効くか

StoryGen Atelierの強みは「テキストの企画から短尺の物語動画までを、1つのUIで素早く起こせる」点にあります。 READMEの機能セットから、向く用途を整理します。

コンセプト動画のたたき台:広告・SNS向けの短尺動画の方向性を、複数スタイルで素早く比較する
絵コンテのスタイル検証:同じ脚本をアニメ・写実・水墨画などで出し分け、トーンの当たりを付ける
ショートストーリーやMV風映像のプロトタイピング:脚本からカット割り・動画化までを一気に試す
プロンプト設計の学習:同梱のプロンプトガイドを参照しながら、Veo向けトランジション指示の感覚を掴む

逆に、フレーム単位の厳密な一貫性や、キャラクターの完全な同一性が要求される本番映像制作は、Veoのような生成系の苦手分野です。 StoryGen Atelierは「最終納品物を作る編集ソフト」ではなく、「企画と検証フェーズを高速化するツール」と捉えるのが実態に合います。

類似OSS・関連ツールとの比較

AI動画まわりのOSSは目的が分かれており、StoryGen Atelierの立ち位置を相対化しておくと選びやすくなります。 ここでは、絵コンテ生成→動画化という観点で、性質の異なるツールを並べます。

観点StoryGen Atelier一般的なAI動画編集系OSS
主目的絵コンテ生成+カット間補間で物語動画を生成既存動画の編集・字幕・翻訳・合成
入力テキスト企画(脚本を自動生成)既存の動画ファイル
中核モデルGemini(脚本・画像)+ Vertex AI Veo(動画)音声認識・翻訳・画像処理モデル中心
動画生成あり(Veoでゼロから生成)多くは生成ではなく加工
必須クラウドGoogle Cloud(Vertex AI)+ Gemini APIローカル完結のものが多い

ポイントは、StoryGen Atelierが「ゼロから動画を生成する」側に立っていることです。 既存動画に字幕や吹き替えを付けるツール(例:VideoLingoのような翻訳・字幕系)とは入力も目的も異なります。 また、Claude Codeを動画スタジオ化するOpenMontageのように「編集を自動化する」方向とも別軸で、StoryGen Atelierは「企画から映像素材そのものを起こす」ところに振り切っています。

この立ち位置を「入力が既存動画か/テキスト企画か」「処理が加工中心か/生成中心か」の2軸で捉えると、StoryGen Atelierの独自性がはっきりします。

quadrantChart title AI動画OSSのポジショニング x-axis 既存動画を加工 --> テキストから生成 y-axis 編集・後処理が主 --> 物語・素材生成が主 quadrant-1 企画から映像生成 quadrant-2 生成寄りの編集 quadrant-3 既存動画の編集 quadrant-4 既存動画の生成補助 StoryGen Atelier: [0.85, 0.85] 字幕・翻訳系OSS: [0.2, 0.25] 動画編集自動化系: [0.35, 0.45]

Geminiを使った開発の入口を広く知りたい場合は、コマンドラインからGoogleのAIを扱うGemini CLI 使い方入門もあわせて参照すると、APIキー周りやモデル指定の感覚が掴みやすくなります。

制限と注意点

便利さの裏側で、StoryGen Atelierには運用上の前提と注意がいくつもあります。 README記載の事実ベースで挙げます。

第一に、Google Cloud依存とコストです。 動画生成にはVertex AIのVeoモデル、絵コンテ生成にはGeminiが必須で、いずれも従量課金です。 特にVeoによる動画クリップ生成はコストが大きくなりやすく、ショット数を増やすほどクリップ数(=Veo呼び出し回数)が増えて課金額も膨らみます。 まずは少ないカット数で料金感を確かめるのが安全です。

第二に、セットアップの前提です。 Node.js 18+・ffmpeg・Google CloudプロジェクトでのVertex AI有効化・Gemini APIキーが揃って初めて動きます。 ローカルにffmpegが入っていない、Vertex AIを有効化していない、といった状態では動画生成まで到達できません。

第三に、生成系モデルの限界です。 Veoは静止画から動画を生成しますが、フレーム単位の精密制御やキャラクターの完全な一貫性は保証されません。 補間チェーンは隣接カットを滑らかにつなぐ設計ですが、長い物語で前後の細部まで一致させる用途には不向きです。

第四に、成熟度とモデル名の流動性です。 公開は2025年12月と比較的新しく、.env サンプルに記載されたモデル名(gemini-3-pro-previewveo-3.1-generate-preview など)はいずれもプレビュー系です。 プレビューモデルは仕様や提供状況が変わり得るため、利用時点で有効なモデル名へ読み替える前提で運用するのが無難です。

要するに、StoryGen Atelierは「手元にNode+ffmpeg環境があり、Google CloudのVertex AIとGemini APIを使える人」向けのツールです。 裏でVeoとGeminiの従量課金が走るため、無料のローカル完結ツールと同じ感覚で回すとコストに驚くことがあります。 小さな絵コンテ・少ないショット数から試し、料金とクオリティのバランスを掴んでから本格運用に進むのが現実的です。

まとめ——絵コンテから動画化までを1本につなぐOSS

StoryGen Atelierは、Geminiで絵コンテの脚本とフレームを生成し、Vertex AI Veoでカット間のつなぎクリップを作り、ffmpegで1本の動画に結合するApache 2.0ライセンスのOSSです。 中核の補間チェーン(スライディングウィンドウ)方式により、「テキスト→絵コンテ→各カットの動画→1本の物語動画」という工程を、Web UIの中で自動でつなげるのが最大の特徴でした。

一方で、VeoとGeminiの従量課金、Google Cloud側の準備、プレビューモデルへの依存、生成系ゆえの一貫性の限界——といった現実的な前提も無視できません。 本番映像の完成品を作るというより、企画と検証フェーズを高速化するツールとして捉えるのが実態に合います。

「テキストの企画から短尺の物語動画を素早く起こしたい」「複数の作画スタイルで方向性を比較したい」という人にとって、StoryGen Atelierは試す価値のある選択肢です。 まずは少ないカット数で start_servers.sh から動かし、補間チェーンがどんな動画を吐くのかを小さく確かめるところから始めるのがよいでしょう。 Geminiを使った開発全般に触れたい場合はGemini CLI 使い方入門を、AI動画制作の別アプローチを知りたい場合はOpenMontageの解説もあわせてどうぞ。

参照ソース

0xsline/StoryGen-Atelier — GitHub リポジトリ・README(一次ソース)
Vertex AI Veo(動画生成モデル)公式ドキュメント

本記事中の作例画像(exampleImg/ 配下)およびデモ動画は、すべて公式リポジトリのREADMEに掲載された公式デモ素材を出典としています。 StoryGen Atelier本体のライセンスは Apache License 2.0 です。 デモ動画はGitHubホスト版(user-attachments)を直接参照し、ポスター用静止画は各動画のフレームをローカル抽出して用いています。