「Nano Banana Pro Powered Super AI 4-koma System/自律型4コママンガ生成システム」とは
1. はじめに：AIは「道具」から「ディレクター」へ
AIによるマンガ制作は、これまで人間がプロンプトを練り、何度も「ガチャ」を回す補助的な役割が主流でした。本プロジェクトは、その工程を根本から覆し、AIをディレクターに据えることで、ネタ収集から構成、演出、レンダリングまでを完全無人化することを目的に開発されました。
「人間がクリエイティブな工程から意図的に離脱する」という設計思想に基づき、拡散モデル特有の弱点をコードレベルで制御する独自のプロトコルを実装しています。
2. 解決した技術的課題
画像生成AI（Diffusion Model）で「4コマ漫画」を生成する際、以下の3つの壁が立ちはだかります。
- 空間の崩壊: 正確なコマ割りや枠線を維持できず、内容が融合してしまう。
- 同一性の欠如: 同一キャンバス内で、キャラクターの造形（髪型、眼鏡、服装）がコマごとに変わる。
- 意思決定の依存: 「何を描くか」というネタ出しにおいて人間に依存している。
これらを解決するために実装したのが、以下の技術群です。
3. 物理的空間制約：ABSOLUTE PHYSICAL GEOMETRY LOCK
「4コマで描いて」と自然言語で頼むのではなく、キャンバスの空間座標をピクセル単位の物理制約としてLLMに叩き込みます。
// src/App.jsx より抜粋
// 2:3の縦長キャンバス内に4つの等間隔な水平ストリップを強制
const geometryLock = `
[ABSOLUTE PHYSICAL GEOMETRY LOCK - v121.3]
(Aspect Ratio: 2:3 Vertical ONLY).
(Orientation: Portrait Mode).
(Physical Barrier: Top 15% and bottom 15% are solid pure white blocks).
(Structure: 4 EQUAL-SIZED HORIZONTAL STRIPS stacked vertically).
(Panel Width: EXTEND TO THE VERY EDGES. ZERO PADDING ON SIDES).
`;
キャンバスの上下15%を「Physical Barrier」として意図的に死域化することで、AIがタイトルや署名を書き込むスペースを物理的に確保し、コマのレイアウトがキャンバス端で切れるのを防いでいます。
4. 特徴量の数理的制御：Weighted Immutable Prompts
キャラクターの同一性（Character Consistency）を保つため、解析フェーズで抽出された特徴量に数学的な重み（Weight）を付与し、不変の定数としてプロンプトに注入します。
// 特徴量の一貫性を担保する重み付け注入のロジック
// 例: female:1.6, glasses:1.2 などの強度を指定
const VAR_CAST_LIST = "${castList.replace(/\n/g, ', ')}";
「female:1.6」のように、モデルが無視できない強度のウェイトを明示することで、複数コマにわたる描写でも眼鏡の有無や髪の色といった特徴の「欠落」や、キャラ同士の「混ざり合い（フュージョン）」を最小限に抑えています。
5. 堅牢なモデル巡回ロジック：Model Cycling Strategy
Gemini 2.0 Flash Thinking などの最新モデルは、実験的提供（Experimental）ゆえに404エラーやクォータ制限が発生しやすい不安定な側面があります。これを克服するため、利用可能なモデルを動的に巡回するフォールバック機構を構築しました。
// src/lib/gemini.js より抜粋
const MODEL_IDS = [
"gemini-2.0-flash-thinking-exp-01-21", // 最新の思考モデルを優先
"gemini-2.0-flash-thinking-exp",
"gemini-2.0-flash",
"gemini-1.5-flash-latest" // 最終的な安定版へフォールバック
];
export const callThinkingGemini = async (prompt, ...) => {
for (const modelId of MODEL_IDS) {
try {
// モデルへの接続および生成処理を実行
const result = await model.generateContent(...);
return { text: finalOutput, thought: thought };
} catch (err) {
console.warn(`Model ${modelId} failed:`, err.message);
// 失敗時は即座に次のモデルへフォールバックし、生成を継続
}
}
};
さらに、Gemini 2.0の thought パーツを抽出し、フロントエンドの「Neural Process」ログにリアルタイム表示することで、AIの思考過程をユーザーが透過的に監視できる仕組みも導入しています。
6. Imagen 3 のレンダリング最適化
最終出力では、Imagen 3のAPIを叩く際にマンガ特有の縦積み構造を維持するためのパラメータ制御を行っています。
// src/lib/imagen.js より抜粋
parameters: {
sampleCount: 1,
aspectRatio: "9:16", // 4コマの縦積みに最適な超縦長比率を指定
personGeneration: "allow_adult"
}
aspectRatio: "9:16" を明示的に指定することで、キャンバス内の横方向の余白を削ぎ落とし、4つのコマが密集して描画されるよう最適化されています。
技術スタック
- Frontend: React 19 / Vite 7 / Tailwind CSS
- AI Engine: Google Gemini API & Imagen 3
- Architecture: 思考トレースを活用した非同期プロンプト・コンパイル
おわりに
このシステムは、AIが「人間の道具」であることを超え、自律した「クリエイター」として振る舞う未来を検証するための実験体です。ソースコードはMIT License、ロジックはCC BY-NC-SA 4.0で公開しています。
エンジニアの皆さんの手で、このプロトコルをさらに洗練させていただければ幸いです。
Repository: https://github.com/FURUYAN1234/nano-banana-pro
Demo: https://furuyan1234.github.io/nano-banana-pro/
Technical Article (note): https://note.com/happy_duck780/n/ndf063558c1f5