GooleAIStudioで『挿絵メーカー』アプリ作ってもらった。追記：再現用のファイルを添付しました。
ラノベなどの小説の表紙や挿絵をAIに生成してもらうアプリ
ご参考までにここに企画書などを載せておきます。こちらのファイルをGoogleAIStudioでインポートすれば再現できます。
私はプログラミングも英語も全然ダメなので、チャットページのGeminiに「こんなアプリを作りたいです」と相談して、企画書を書いてもらい、それをAI STudioのGeminiに持っていってアプリを作ってもらっています。
このアプリは「キャラクターの一貫性を保つ」という、生成AIにおける難しい課題を解決している点が特徴です。他にも挿絵を描くうえで必要な様々な要件を入力することができます。
まず、キャラクター選択の欄にキャラクターの設定を文章、あるいはイラストなどで入力し保存します。
次に「場所・背景」と「ポーズ・行動」の欄を入力します。「場所・背景」と「ポーズ・行動」と分けていますが、背景とポーズのプロンプトが一緒になっている文章の場合、わざわざ分離しなくても、片方の欄に入力すればAIは読み取ってくれます。
他には……。
画像のサイズ。正方形や、縦長や横長の画像が指定できます。
登場人物のアングル。全身やバストアップ、ウエストアップといった、キャラクターをどこまで画面に収めるかを指定できます。
画風のプロンプト。アニメ風、水彩画風などお好みの画風を指定してね。
ネガティブプロンプト。おかしなイラストにならないように「やってはいけないこと」をAIに伝える欄。難しいのでGeminiに相談して作ってもらおう。
それから、画像が生成されると、保存ボタンがあるからそれでイラストをダウンロードされるよ。修正を依頼する欄もあるから、ダメだしするときはそこに入力してね。修正をするボタンを押すと改良されたイラストが生成されるよ。
他の方が同様のアプリを開発できるよう、このアプリと似たものができる企画書を載せておきます。気になる人はこの企画書をコピペしてAIStudioで作ってみてね！
ライトノベル挿絵生成アプリ「StoryCanvas AI」開発企画書
1. 企画概要
タイトル: StoryCanvas AI（ストーリーキャンバス・エーアイ）
コンセプト: 物語に命を吹き込む。キャラクターの一貫性を保持したまま、シーンに合わせた挿絵を高速に生成するクリエイター支援ツール。
解決する課題:
従来の画像生成では、同じキャラクター名でも毎回顔や服装が変わってしまう。
プロンプト（指示文）の作成が難しく、意図した構図を作るのに技術が必要。
2. ターゲットユーザー
ライトノベル作家、Web小説投稿者
TRPG（テーブルトークRPG）プレイヤー
自作キャラクターのファンアートを作りたい創作者
3. 主要機能要件
(1) キャラクター管理機能（コア機能）
キャラクター設定: 名前、外見の特徴（テキスト）、参照画像を登録可能。
ローカル保存: ブラウザのLocalStorageを使用し、リロードしてもデータが消えないようにする。
参照画像の役割: ユーザーがアップロードした画像をAIに「視覚的な基準」として渡すことで、生成されるイラストのキャラクターデザインを固定する。
(2) シチュエーション設定機能
場所・背景: 「放課後の教室」「異世界の森」など、テキストで指定。
ポーズ・行動: 「読書している」「剣を構えている」など、動的な指示。
構図選択: バストアップ、全身、広角などをプルダウンで簡単選択。
(3) スタイル・詳細設定
画風指定: 「透明感のあるアニメ風」「厚塗り」などのデフォルト値を設定しつつ、変更も可能にする。
アスペクト比: 9:16（スマホ壁紙/表紙用）、1:1（アイコン用）、16:9（動画サムネ用）を選択可能。
ネガティブプロンプト: 低品質な描画や崩れた人体を防ぐための除外キーワードを裏側で制御。
(4) 生成・修正機能
画像生成: Gemini APIを使用し、上記の設定を統合して画像を生成。
修正（インペインティング/編集）: 生成された画像に対して「もう少し笑顔で」「背景を明るく」といったチャット形式のフィードバックで修正を行う。
4. 技術スタック・選定理由
Frontend: React + TypeScript
堅牢な型定義とコンポーネント指向で、複雑なUI状態（キャラクターリスト等）を管理しやすくするため。
Styling: Tailwind CSS
クラス名だけでデザインが完結し、開発速度が非常に速い。ダークモード（bg-gray-900等）の実装が容易。
AI Model: Google Gemini API (gemini-2.5-flash-image)
理由1: 画像認識と画像生成の両方が可能なマルチモーダルモデルであること。
理由2: 高速（Flash）であるため、試行錯誤が必要なクリエイティブ作業に適している。
理由3: プロンプトへの従順性が高く、日本語指示も高精度に理解する。
5. プロンプトエンジニアリング戦略（AIへの指示設計）
本アプリの肝となる部分です。以下の構造でプロンプトを組み立てます。
役割定義: 「あなたはプロのアニメイラストレーターです」と定義。
既存知識の遮断: 「有名なキャラクターと同名であっても、完全にオリジナルのキャラクターとして描くこと」を強く指示（著作権配慮および意図しないキャラ化の防止）。
マルチモーダル入力:
ユーザーが登録したキャラクター画像を inlineData (Base64) としてAPIに渡す。
「Reference Image 1 を厳密に参考にすること」と指示し、デザインの固定化を図る。
品質管理チェックリスト: プロンプトの最後に「アスペクト比は正しいか？」「キャラは指示通りか？」という自問自答を含めることで、AIの論理的思考を促し品質を上げる。
6. UI/UXデザイン方針
2カラムレイアウト:
左側：操作パネル（入力・設定）。スクロールしても常に見えるように。
右側：プレビュー画面。生成された作品を大きく表示。
ダークテーマ: クリエイティブな没入感を高めるため、黒や濃いグレーを基調とし、アクセントカラーにグラデーション（紫〜ピンク）を使用。
レスポンシブ対応: スマートフォンでも操作しやすいよう、モバイル時は1カラムになり、生成ボタン押下時に自動でプレビューへスクロールする機能を搭載。
7. 実装ステップ
プロジェクト作成: Google AI Studio または Vite環境のセットアップ。
API連携: generateStoryImage 関数の作成。テキストと画像をGeminiへ送信するロジックの実装。
UI構築: Tailwind CSSを用いて、入力フォームとプレビューエリアを作成。
状態管理: useState と useEffect を使い、キャラクターデータの保存・読み込み処理を実装。
結合テスト: 実際に画像をアップロードして生成し、キャラクターが似ているか、レイアウトが崩れないかを確認。
