概要
Gemini APIを使って、キャラクターの設定からビジュアル生成までを完全自動化・半自動化できる「AIキャラクターシートメーカー V1.0.6」を開発しました。
- デモページ: https://furuyan1234.github.io/character-sheet-maker/
- GitHubリポジトリ: https://github.com/FURUYAN1234/character-sheet-maker
この記事では、このアプリのコア技術である「プロンプトエンジニアリングの極意(特に画風の完全制御)」と「Gemini API(テキスト推論、Structured Outputs、マルチモーダル画像生成)の実践的な叩き方」について、実際のソースコードを引きながら徹底的に解説します。
このアプリでできること
本アプリケーションは、ReactとViteで構築された完全フロントエンド完結のSPAです。バックエンドは持たず、ユーザーのAPIキーをセッションメモリでのみ保持する安全なBYOK(Bring Your Own Key)方式を採用しています。
- ユーザーは「性別」「世界観」「衣装」「画風」などの38以上のパラメータを選択、またはテキストで自由入力します。
- 「サイコロボタン」を押すと、指定した1項目だけをGeminiが文脈に合わせて自動推論(補完)します。
- 「全項目ランダム」ボタンを押すと、ルールベースの制約に従いつつ、すべての項目を自動で埋め、名前やセリフまでもJSONで一括生成します。
- 最後に「画像生成」ボタンを押すと、すべての設定が1つの長大な英語プロンプトにコンパイルされ、指定した画風でキャラクターシート画像が生成されます。
プロンプトアーキテクチャの解説:18種の画風を強制するウェイト制御
画像生成において最も難しいのは、「ユーザーが指定した画風」をAIに確実に守らせることです。他の要素(例:「重厚な西洋鎧」という衣装)に引っ張られて、画風が勝手に変わってしまう現象(コンセプトブリード)を防がなければなりません。
本システムでは、専用のプロンプト構築ロジック内で、18種類の画風に対して圧倒的に強い重み付け(ウェイト)を持たせたキーワード群を定義しています。
// 画風ごとの固有スタイルキーワード(抜粋)
const ART_STYLE_KEYWORDS = {
'青年漫画(写実・硬派)': '(seinen_manga:4.5), (heavy_inking:3.8), (detailed_crosshatching:3.5), (gritty_realism:3.2), (muscular_detail:2.8), (thick_bold_lines:3.0)',
'少女漫画(華麗・繊細)': '(shoujo_manga:4.5), (screentone_flowers:3.8), (sparkle_effects:3.5), (thin_delicate_lines:3.2), (soft_dreamy_shading:3.0), (romantic_atmosphere:2.8)',
'90年代のレトロなセル画風': '(90s_anime:4.5), (cel_animation:4.0), (retro_color_palette:3.8), (hand_painted_background:3.5), (VHS_aesthetic:2.5), (nostalgic_tone:2.8)',
'ドット絵・ピクセルアート': '(pixel_art:5.0), (8bit:4.5), (limited_color_palette:4.0), (blocky_shapes:3.8), (dithering:3.0), (retro_game_aesthetic:3.2)',
};
このように、単に「〜風 (style)」と指示するのではなく、関連するレンダリング手法、線の太さ、色の塗り方、特有の現象(VHSのノイズやディザリングなど)を分解し、数値による極端な重み付け(3.0〜5.0)と共に複数列挙します。
これを最終的に組み立てるプロンプトの先頭、つまり [0. アートスタイル最優先指令] として配置することで、後続の衣装や体型の指示に引っ張られることなく、圧倒的な画風の固定化を実現しています。
また、ジェンダーバイアス(AIが中性的に描きがちな問題)を克服するため、性別の表現についても専用の否定プロンプトを含むウェイトを動的に計算しています。
const genderWeight = (d.gender.includes('男') || d.gender.includes('巨漢'))
? `(ULTRA-MASCULINE:3.8), (MALE focus:2.8), (strong_anatomy:2.2), (NO_FEMININITY:4.5)`
: `(ULTRA-FEMININE:3.8), (FEMALE focus:2.8), (soft_graceful_anatomy:2.2)`;
Gemini APIの実践的な活用
本アプリでは、テキスト生成と画像生成の両方にGoogleのGemini APIを使用しています。単なるチャットとしての利用ではなく、アプリケーションの裏側でどのようにAPIを叩いているかを紹介します。
1. 個別フィールドの推論(コンテキスト渡し)
ユーザーが個別のフィールドの「AI生成(サイコロ)」ボタンを押したときの処理です。現在のフォームの入力状態をコンテキストとして文字列化し、以下のようなプロンプトをGeminiに送信しています。
const prompt = `キャラクターデザイナーとして、以下の既存設定に基づいて「${fieldLabel}」の値を1つだけ生成してください。
既存設定: ${contextStr}
結果はその値のみを返してください(説明不要)。日本語で。`;
APIからの返答から余計なクォーテーションや括弧を正規表現で取り除き、直接Reactのステートに反映させます。
2. JSONモードを活用した一括ガチャ生成(Structured Outputs)
「全項目ランダム」の際、名前やセリフ、好きなものなどのテキスト項目は、Gemini APIの responseSchema 機能を利用して一括生成させています。
const result = await callGeminiText(prompt, onStatusUpdate, {
responseMimeType: "application/json",
responseSchema: {
type: "OBJECT",
properties: {
name: { type: "STRING" },
catchphrase: { type: "STRING" },
dialogue: { type: "STRING" },
likes: { type: "STRING" },
dislikes: { type: "STRING" },
nickname: { type: "STRING" },
}
}
});
return JSON.parse(result.text);
リクエストボディでスキーマを強制することで、AIは確実に指定したJSONフォーマットでデータを返してきます。これによりフロントエンド側で安全に JSON.parse() を実行でき、エラーハンドリングのコストを劇的に下げることができます。
3. スマート連携によるガチャ崩壊の防止
完全ランダム生成といっても、すべてを無作為に選ぶと「筋肉質の巨漢で魔法少女の服を着た乳幼児」といった破綻した設定が生まれます。これを防ぐため、ランダム化の直後に「スマート連携」というルールベースのロジックを挟んでいます。
// 連携1: 女性系キャラクターなら髭を強制的に「髭なし」にする
if (FEMALE_GENDERS.includes(newData.gender)) {
newData.facialHair = '髭なし';
}
// 連携2: 年齢が「乳幼児」なら、体型を小柄に制限し筋肉を無効化
if (CHILD_AGES.includes(newData.ageGroup)) {
newData.bodyBuild = getRandom(CHILD_BUILDS);
newData.muscleType = '筋肉強調なし';
}
この「ランダム抽出 → 最小限の制約による上書き」のアプローチにより、AIの想像力を活かしつつ、最低限のもっともらしさ(Plausibility)を担保しています。
外部システム連動:OCRメタデータの焼き付けハック
このツールで生成された画像は、後続のシステム「Nano Banana 2 Powered Super AI 4-koma System(自動マンガ生成システム)」に画像をアップロードするだけで、キャラクターの性格や戦闘スタイルが自動で引き継がれる仕組みになっています。これを実現しているのが、画像へのテキスト焼き付けハックです。
プロンプトに以下の指示を埋め込みます。
- 画像上部:「太字の黒色日本語タイポグラフィ」で以下を直接描画。
■氏名:${finalName}
■アクション:${d.actionTendency} // 例: 近接格闘・体術
■感情幅:${d.emotionRange} // 例: バランス型
■演出:${d.directionStyle} // 例: ダイナミック・見開き向き
Imagen 3/4やGemini 3.1の画像生成モデルは文字描画精度が非常に高いため、この指示だけで画像上部に綺麗な日本語でメタデータが印字されます。
システム側はこれをOCRで読み取り、マンガのコマ割りやセリフのトーンを自動調整します。画像1枚が、ビジュアルとJSON設定ファイルを兼ねた強力なペイロードになるわけです。
Zenith Protocol:絶対に止まらないAPIフォールバック
公開ツールとして最も重要なのは「安定稼働」です。LLMのAPIは、429エラー(レートリミット)やセーフティフィルターによって頻繁にエラーを返します。
そこで、**「Zenith Protocol(自動フォールバック機構)」**を実装し、複数のモデルをシームレスに切り替えています。
最大の障壁は、GeminiマルチモーダルモデルとImagenモデルでAPIのエンドポイントもリクエストボディの構造も全く異なる点です。
-
Geminiモデル:
generateContentエンドポイント。contents配列に渡し、responseModalities: ["IMAGE"]を指定。Base64はinlineDataに入る。 -
Imagenモデル:
predictエンドポイント。instances配列にpromptを渡し、parametersにアスペクト比などを指定。Base64はpredictions[0].bytesBase64Encodedに入る。
Zenith Protocolでは、配列のループ処理の中でモデル名のプレフィックスを判定し、動的にフェッチの構造を切り替えています。
for (const modelId of MODELS_TO_TRY) {
try {
if (modelId.startsWith("gemini")) {
// Gemini用のフェッチ構築と解析
} else {
// Imagen用のフェッチ構築と解析
}
return { base64Img: 抽出データ, usedModel: modelId };
} catch(e) {
// エラーなら次のモデルへ自動的にフォールバック
console.warn(`${modelId} failed:`, e.message);
}
}
これにより、あるモデルがセーフティで弾かれたり一時的にダウンしていても、ユーザーは「少し処理が長いな」と感じるだけで確実に画像を生成できます。
まとめ
「AIキャラクターシートメーカー」は、単なるAPIのラッパーから一歩踏み出し、プロンプトの構造化、UIとの密な結合、そしてエラー時のフォールバック戦略までを作り込むことで、実用レベルの強力なツールを目指しました。
Reactを用いたAIアプリケーション開発や、APIのフェイルセーフ設計の参考になれば幸いです。ソースコード全体はGitHubに公開しておりますので、ぜひ皆さんのAPIキーを使って、極限まで画風を制御したキャラクターを鋳造してみてください!!
