Antigravityを使ってGeminiAPI（NanobananaPro）と連携して挿絵メーカーを作った

├── README.md                     # プロジェクト全体概要・工程ガイド
├── 01_企画・要件定義/
│   ├── 01_企画書.md               # アプリのコンセプト、目的、ターゲット、機能概要
│   └── 02_要件定義書.md           # 機能要件・非機能要件・画面一覧など
├── 02_設計/
│   ├── 01_基本設計.md             # 全体構成・システム構成・データフロー
│   └── 02_画面UI設計.md           # 画面遷移、UIレイアウト、プロンプト生成UI仕様
├── 03_開発/
│   ├── README.md                 # 開発環境のセットアップ・コード構造についてのガイド
│   └── src/                      # 将来のソースコード格納用
└── 04_公開/
    ├── 01_ビルド・デプロイ手順.md  # ビルド、公開、配布手順
    └── 02_リリースノート.md        # バージョン履歴・変更点

# 01_企画書

## 1. プロジェクト名
**挿絵メーカー** (Sashie Maker)

## 2. 目的・背景
- **背景**: ライトノベルやWeb小説の執筆において、挿絵（イラスト）があることで読者の没入感や作品の魅力が大幅に向上する。
- **課題**: イラストの発注や自作には時間・コストがかかり、画像生成AI単体では「登録したキャラクターの見た目を保ったまま、小説の特定のシーンに合わせた画像を作る」作業が難しい。
- **目的**: キャラクターの立ち絵画像と小説のシーン文章を入力するだけで、キャラのビジュアルを一貫して保ちながらシーンにぴったりのライトノベル挿絵を簡単に生成・管理できるツールを提供する。

## 3. ターゲットユーザー
- Web小説家 / ライトノベル作家（カクヨム、小説家になろう、アルファポリス等で執筆している個人作者）
- 同人小説作家 / イラスト付き小説を作成したいクリエイター

## 4. 動作環境
- **形態**: ローカル環境（Localhost）で起動・利用するWebベースのアプリケーション

## 5. コンセプト・コアバリュー

- **「立ち絵 × シーン文章 ＝ シーンにぴったりの挿絵」**
- **キャラクタービジュアルの固定**: 登録した立ち絵画像を元に、顔・髪型・衣装などの一貫性を保ったまま挿絵化。
- **文脈に合わせた画像生成**: 小説本文（シーン文章）から、登場人物のポーズ・表情・背景・雰囲気をAIが自動解析して再現。

## 5. 主要機能

### 📚 1. 小説プロジェクト管理機能
- **複数小説の作成・切り替え**: 執筆中の複数の小説（プロジェクト）を個別に作成し、切り替えることができる最上位の管理機能（例: 「AI事務員宮西さん」等）。
- **小説のあらすじ・概要メモ管理**: 小説全体の概要、あらすじ、執筆用メモを一元管理。
- **下位エンティティの親子関係制御**: 選択されている小説に完全に紐づく形で、後述の「キャラクター」および「シーン」が個別管理される構造。

### 👤 2. キャラクター管理機能
- **立ち絵画像の登録・保存**: キャラクターのベースとなる立ち絵（イラスト）をアップロード。
- **キャラクター設定のAI自動生成 & 自由編集**: 立ち絵画像からAIが特徴（髪型、服装、性別等）をMarkdown形式で自動抽出し、ユーザーが最大2万文字まで自由に詳細設定を追加・編集できる機能。
- **立ち絵別ポーズ自動同時生成**: キャラクター情報を保存したタイミングで、表情と服装を維持した「正面」「横向き」アングルの立ち絵を裏側で自動的に並列同時生成し、一括保存する機能。
- **白背景自動透過システム**: アップロードまたはAI生成した立ち絵画像から白背景を自動で透過処理し、透過PNGとして保持する機能。
- **簡易ライブラリ**: 選択中の小説に属するキャラクターの名前と立ち絵画像のみで管理するシンプルなキャラクター一覧。

### 🎬 3. シーン管理機能
- **シーン文章（本文）の管理**: 挿絵にしたい小説の該当部分のテキストを登録・保存。
- **登場キャラの紐付け**: そのシーンに登場するキャラクターを選択。
- **シーン設定MarkdownのAI自動生成 & 自由編集**: 小説本文からAIが構図、表情、時間帯、背景設定などの指示Markdownを自動生成し、ユーザーが最大2万文字まで自由に調整・肉付けできる機能。
- **永続的なステータス維持**: リロード時にも直前に選択していた小説、シーン、キャラクター、アクティブタブの状態がブラウザに記憶され、自動復元される機能。

### 🎨 4. 挿絵生成 & 出力機能
- **複数ポーズ参照による同一性強化**: 登録された「元画像」「正面」「横向き」すべてのポーズ画像をAIへのマルチモーダル入力として同時に渡し、キャラクターの同一性（一貫性）を極限まで高めて生成する機能。
- **4構図同時並列生成（構図バリエーション）**: 1回の実行で4つの異なるカメラ構図（①三分割構図、②日の丸構図、③三角形構図、④対角線構図）を並列で同時生成し、2×2グリッドで比較表示する機能。
- **自動一括保存 & ダウンロード**: 生成された4つの画像はすべて自動でシーンの履歴に一括保存される。2×2グリッドからクリックしてプレビュー切り替えおよびローカルPCにダウンロードが可能。

# 02_要件定義書

## 1. 概要・システム範囲

本システムは、ユーザーが登録した**「キャラクターの立ち絵画像」**と**「小説のシーン文章」**を取り込み、キャラクターのビジュアル（顔・服装・特徴）を維持したまま、小説の該当シーンに合わせたライトノベル風挿絵画像を生成・管理・プレビューするアプリケーションです。

---

## 2. ユーザーフロー

1. **キャラクター登録**: 立ち絵画像（PNG/JPG）をアップロードし、名前を入力すると、AIが自動でキャラクター特徴プロパティ（プロンプト等）を解析・設定する。
2. **シーン作成**: 挿絵にしたい小説本文（シーン文章）を入力し、登場キャラクターを選択すると、AIが本文からシチュエーション（構図・表情・背景など）を自動生成する。
3. **挿絵生成**: 設定された条件を元に、NanobananaPro APIを通じて画像生成を実行する。
4. **確認・保存**: 生成された画像をシンプルプレビューで確認し、NanobananaPro標準機能で画像として保存・ダウンロードする。

---

## 3. 機能要件

### 3.1 小説プロジェクト管理機能 (Novel Management)
- [ ] **小説（プロジェクト）の作成・選択・削除**
  - 複数の小説（例: 「AI事務員宮西さん」等）をデータベースに個別に登録・管理する機能
  - ヘッダー部分のプルダウンメニューから編集したい小説プロジェクトを切り替えて選択できる仕様
  - 選択された小説に属するキャラクターやシーン情報のみが連動して表示・編集・保存される仕様
- [ ] **ヘッダーからの小説管理・作成アクセス**
  - プルダウンの右隣に「＋ 新規小説を作成」ボタンを配置し、クリックすると新規入力モードにクリアされた状態で小説管理画面（設定・あらすじ編集・一覧・削除）へ遷移する仕様
- [ ] **あらすじ・概要・メモ記述**
  - 小説の概要、あらすじ、プロット、執筆用メモを自由に記述・保存できるテキストエリア機能

### 3.2 キャラクター管理機能 (Character Management)
- [ ] **立ち絵画像の登録・保持**
  - キャラクターの参照用立ち絵イラスト（PNG / JPG / WebP）のアップロード機能
- [ ] **キャラクター外見特徴MarkdownのAI自動生成 (Visual)**
  - アップロードされた立ち絵画像を解析し、AIが外見特徴のみをまとめた設定Markdownテキストを自動生成する機能
  - **定義するMarkdown構造 (完全固定 - characterVisualフィールドに保存)**:
    ```markdown
    # [キャラクター名] - 外見特徴
    ## 1. 基本ビジュアル
    - 性別: 
    ## 2. 詳細ビジュアル
    - 髪型・髪色: 
    - 瞳の色: 
    - 服装: 
    - その他特徴: 
    ```
- [ ] **キャラクタープロフィール・設定Markdownの編集機能 (Profile)**
  - ユーザーが手動で記述・編集する、キャラクターの生い立ちや性格等をまとめたMarkdownテキストを保存できる機能
  - **定義するMarkdown構造 (完全固定 - characterProfileフィールドに保存)**:
    ```markdown
    # [キャラクター名] - 詳細設定
    ## 1. プロフィール
    - 年齢 / 外見年齢: 
    - 職業 / 役割: 
    ## 2. キャラクター性
    - 性格: 
    - 武器・能力: 
    - その他補足: 
    ```
- [ ] **設定Markdownの自由編集機能**
  - AIが生成した外見特徴(Visual)と、ユーザーが記述するプロフィール(Profile)の双方（それぞれ最大2万文字）を、ユーザーが自由に追加・編集して保存できる機能


- [ ] **立ち絵バリエーション（別ポーズ）の自動同時生成・登録機能**
  - キャラクターの保存をトリガーとして、インプット元画像からキャラクターの服装や表情の一貫性を維持したまま、以下の別ポーズ画像を裏側で自動的・並列にAI（NanobananaPro）により同時生成して一括保存する機能
    - 正面（Front view pose）
    - 横向き（Side view pose）


- [ ] **簡易キャラクターライブラリ管理**
  - 登録されたキャラクターの名前と立ち絵画像のみを表示するシンプルな管理一覧
  - キャラクターの追加、名前・設定Markdownの編集、および削除機能


### 3.2 シーン管理機能 (Scene Management)
- [ ] **シーン文章の登録・管理**
  - 挿絵対象となる小説本文（段落・エピソードテキスト）の入力および一覧保存
- [ ] **登場キャラクターの紐付け**
  - キャラクターライブラリから、シーンに登場するキャラを選択
- [ ] **AIによるシーン設定Markdownの自動生成**
  - 入力されたシーン文章（小説本文）をAIが解析し、挿絵に必要なシチュエーションをまとめたシーン設定Markdownテキストを自動で生成する機能
  - **定義するMarkdown構造 (完全固定)**:
    ```markdown
    # シーン設定概要
    ## 1. 登場人物と状態
    - 登場キャラクター: 
    - 各キャラの表情: 
    - 各キャラのポーズ・アクション: 
    ## 2. 構図・カメラワーク
    - カメラアングル: 
    - キャラクターの配置: 
    - 視線の方向: 
    ## 3. 背景・環境
    - 場所・環境: 
    - 時間帯・天候: 
    - 光源・ライティング: 
    - 全体の雰囲気: 
    ```
- [ ] **シーン設定Markdownの自由編集機能**
  - AIが生成したシーン設定Markdown（最大2万文字）を、ユーザーが自由に追加・変更・微調整して保存できる機能


### 3.3 挿絵生成 & プロンプト自動生成機能
- [ ] **複数アングル画像の参照による同一性強化**
  - 登録された立ち絵画像（インプット画像、正面、横向き）が存在する場合、これら全ての画像をAIへ同時に参照入力し、キャラクターのビジュアル同一性を維持する機能
- [ ] **白背景自動透過システム**
  - アップロードされた画像および生成された正面・横向き立ち絵画像から、HTML Canvas を用いて白色の背景領域を自動で検出し、透過PNGに加工して保持する機能
- [ ] **作業ステータスの永続化と復元**
  - ブラウザのリロード時やPCの再起動時にも、最後に開いていたタブ、選択されていたキャラクター、シーンなどの作業状態を localStorage により維持・復元する機能
- [ ] **NanobananaPro API連携**
  - NanobananaPro画像生成APIとの通信・生成実行


- [ ] **アスペクト比・画質パラメータ設定**
  - ラノベ挿絵用縦長アスペクト比（2:3, 3:4 等）および解像度指定
- [ ] **4構図同時並列生成・自動保存機能**
  - 1回の実行で異なる4つのカメラ構図（①三分割構図、②日の丸構図、③三角形構図、④対角線構図）の画像を並列生成し、2×2グリッドで比較表示する機能
  - 生成された4つの構図画像は、シーンの生成履歴に自動的に一挙保存される仕様とする。


### 3.4 プレビュー & 出力機能
- [ ] **シンプル画像プレビュー**
  - 生成された挿絵画像を画面上に表示するだけのシンプルなビューワー
- [ ] **生成挿絵の独立保存（履歴管理）**
  - 生成された画像をシーンに紐づく独立した画像データとしてアプリ上のローカルストレージ（IndexedDBの別テーブル）に複数枚保存・蓄積できる機能
- [ ] **クライアントマシンへのダウンロード**
  - 保存された画像履歴から、指定した画像をローカルマシンにダウンロード（PNG/JPEG等で保存）できる機能

---

## 4. 非機能要件

- **動作環境・システム構成**: Localhost（ローカルPC）上でサーバーを起動して利用するWebベースのアプリケーション。外部への公開は想定しない。
- **UI/UX・操作性**: 立ち絵と本文をセットするだけで、残りの複雑なプロパティ調整やシチュエーション設定はAIが代行する、手間の少ない直感的UI
- **データ保持・プライバシー**: 登録した立ち絵画像、キャラ設定、シーン文章、生成履歴はブラウザ/ローカルストレージ（IndexedDB等）に安全に保存
- **拡張性**: 今後画像生成APIの仕様変更に対応しやすいモジュール構造

# 01_基本設計

## 1. システム構成・動作環境
本システムは、ローカルPC（Localhost）上で動作するWebベースのSPA（シングルページアプリケーション）として構築します。データはすべてブラウザ内のデータベースに保存され、サーバーへのデータ送信はNanobananaPro等のAPI通信のみに限定されます。

- **実行環境**: ローカルPCブラウザ（Chrome推奨）
- **サーバー起動元**: Node.js (Next.js 開発サーバー)
- **公開形態**: ローカル利用専用（非公開）

## 2. 技術スタック
- **実行プラットフォーム**: Node.js
- **UIフレームワーク**: Next.js (React)
- **フロントエンド言語**: TypeScript / JavaScript (ES6+)
- **スタイル（CSS）**: Vanilla CSS (CSS Modules / CSSカスタムプロパティを用いたモダンデザイン)
- **ローカルデータベース**: IndexedDB (画像のバイナリデータおよびテキストデータを大容量保存するため)
- **API通信**:
  - **画像生成**: NanobananaPro API (Google AI Studio経由 / モデルID: `gemini-3-pro-image-preview` ※利用にはGoogle CloudプロジェクトのBilling有効化が必要)
  - **AIプロファイル/シチュエーション生成**: Gemini API (Google AI Studio経由 / モデルID: `gemini-3.6-flash` または `gemini-3.6-pro`)


## 3. データモデル（データベース設計）

### 3.1 Novels (小説情報)
| フィールド名 | 型 | 説明 |
| :--- | :--- | :--- |
| `id` | String (UUID) | 小説プロジェクト識別子 |
| `title` | String | 小説タイトル (例: 「AI事務員宮西さん」) |
| `description` | String | 小説のあらすじ・概要・メモ |
| `createdAt` | DateTime | 作成日時 |
| `updatedAt` | DateTime | 更新日時 |

### 3.2 Characters (キャラクター情報)
| フィールド名 | 型 | 説明 |
| :--- | :--- | :--- |
| `id` | String (UUID) | キャラクター識別子 |
| `novelId` | String (UUID) | 関連する小説ID (外部キー) |
| `name` | String | キャラクター名 |
| `images` | Object | 各ポーズの立ち絵画像データを保持するマップオブジェクト<br>- `input`: String (元画像Base64 - 必須)<br>- `front`: String (正面ポーズBase64 - 任意)<br>- `side`: String (横向きポーズBase64 - 任意) |
| `characterVisual` | String | AI解析による外見特徴MD（最大2万文字、ユーザー編集可能。構成: #名前-外見特徴, ##1.基本ビジュアル[性別], ##2.詳細ビジュアル[髪型・髪色/瞳の色/服装/その他特徴]） |
| `characterProfile` | String | ユーザー手動入力による設定MD（最大2万文字、ユーザー編集可能。構成: #名前-詳細設定, ##1.プロフィール[年齢/職業], ##2.キャラクター性[性格/能力/補足]） |
| `createdAt` | DateTime | 作成日時 |
| `updatedAt` | DateTime | 更新日時 |

### 3.3 Scenes (シーン・挿絵生成情報)
| フィールド名 | 型 | 説明 |
| :--- | :--- | :--- |
| `id` | String (UUID) | シーン識別子 |
| `novelId` | String (UUID) | 関連する小説ID (外部キー) |
| `name` | String | シーン名 |
| `text` | String | シーン文章（小説の本文テキスト） |
| `characterIds` | Array<String> | 登場キャラクターのIDリスト |
| `aiSituation` | String | シーン設定MD（最大2万文字、ユーザー編集可能。構成: #シーン設定概要, ##1.登場人物と状態[登場キャラ/表情/ポーズ], ##2.構図・カメラワーク[アングル/配置/視線], ##3.背景・環境[場所/時間・天候/光源/雰囲気]） |
| `createdAt` | DateTime | 作成日時 |
| `updatedAt` | DateTime | 更新日時 |

### 3.4 GeneratedImages (生成された画像履歴)
| フィールド名 | 型 | 説明 |
| :--- | :--- | :--- |
| `id` | String (UUID) | 画像識別子 |
| `sceneId` | String (UUID) | 関連するシーンID (外部キー) |
| `image` | Blob / DataURL | NanobananaProによって生成された画像データ |
| `createdAt` | DateTime | 生成日時 |
| `updatedAt` | DateTime | 更新日時 |


---

## 4. データフロー設計

### 4.1 キャラクター登録・別ポーズ追加生成（アドオン）フロー
```mermaid
sequenceDiagram
    actor ユーザー
    participant UI as フロントエンドUI
    participant DB as IndexedDB
    participant AI as AI解析API
    participant NB as NanobananaPro API
    
    ユーザー->>UI: 立ち絵画像アップロード(白背景透過) & 名前入力
    ユーザー->>UI: 「AI設定読み込み」ボタン押下
    UI->>AI: 立ち絵元画像を送信
    AI-->>UI: キャラクター外見特徴（Visual Markdown）を返却
    ユーザー->>UI: 「キャラクターを保存」ボタン押下
    UI->>NB: [並列同時生成] 元画像 + 外見特徴Markdownを送信（正面ポーズ & 横向きポーズ指示）
    NB-->>UI: 生成ポーズ画像群（白背景）
    UI->>UI: それぞれの白背景を自動検出して透明（透過PNG）化処理
    UI->>DB: input画像, front画像, side画像およびMarkdownをキャラクター情報として一括保存
    DB-->>UI: 保存完了
```

### 4.2 挿絵生成（4構図並列生成 ＆ 比較選択採用）フロー
```mermaid
sequenceDiagram
    actor ユーザー
    participant UI as フロントエンドUI
    participant DB as IndexedDB
    participant AI as シチュエーション生成API
    participant NB as NanobananaPro API
    
    ユーザー->>UI: 本文テキスト入力 & 登場キャラ選択
    UI->>AI: 本文テキスト + 登場キャラ設定Markdownを送信
    AI-->>UI: 構図・表情・背景などのシーン設定Markdown
    ユーザー->>UI: 「挿絵を生成」実行
    UI->>DB: 選択した全キャラクターの全アングル画像(元画像・正面・横向き)をロード
    UI->>NB: [並列呼び出し] 全立ち絵画像 + シーン設定を4つの構図指示(三分割, 日の丸, 三角形, 対角線)で同時に送信
    NB-->>UI: 4種類の生成完了画像
    UI->>DB: 4枚すべての画像をGeneratedImages（画像履歴）に自動一挙保存 (sceneIdと紐付け)
    DB-->>UI: 保存完了
    UI-->>ユーザー: 2x2のグリッドおよび保存履歴に反映を表示
```

### 4.3 クライアントへのダウンロードフロー
```mermaid
graph LR
    A[ユーザー: ダウンロードボタン押下] --> B[UI: IndexedDBから指定されたGeneratedImagesレコードをロード]
    B --> C[UI: Blob URLを生成して隠しaタグからダウンロード実行]
    C --> D[ユーザー環境に画像ファイル保存]
```

# 02_画面UI設計

本アプリケーションは、Localhost環境での利用を想定したシングル画面のデスクトップ向けダッシュボードUIで構成します。「キャラクター管理」と「シーン・挿絵生成」の2つの主要機能をタブで切り替えて使用でき、小説管理はヘッダーからグローバルにアクセス・選択できます。

---

## 1. 画面構成一覧

### 1.1 メインナビゲーション（ヘッダー）
- **アプリタイトル**: 左端に「🎨 挿絵メーカー」を表示。
- **小説切り替えプルダウン**: タイトルのすぐ右隣に配置。データベースに保存されている小説プロジェクト（例：「AI事務員宮西さん」等）をプルダウンで瞬時に切り替え可能。
- **「＋ 新規小説を作成」ボタン**: プルダウンのさらに右隣に配置。クリックすると小説管理画面（設定・一覧・削除）へ遷移し、入力フォームがクリアされ新規作成モードになります。
- **機能タブメニュー**: 右側に「👤 キャラクター管理」「🎬 シーン・挿絵生成」のタブ切り替えボタンを配置。

### 1.2 小説管理画面（独立設定画面）
※「＋ 新規小説を作成」ボタンをクリックするか、小説編集を行う際に表示される画面です。
- **小説の設定・編集（左側）**:
  - 小説タイトル、あらすじ・概要メモのテキストエリア。
  - **「小説プロジェクトを保存」ボタン**: 小説情報を新規登録または更新保存します。
- **小説プロジェクト一覧（右側）**:
  - 登録済みの小説一覧をカード型で表示。カードを選択するとその小説の編集モードになり、キャラクターやシーンの読み込みもその小説のものに切り替わります。「削除」ボタンによる関連データの一括削除も可能です。

### 1.3 キャラクター管理画面
- **新規登録フォーム（左側）**:
  - キャラクターの名前入力、立ち絵画像（PNG/JPG/WebP）の選択・ドロップエリア。
  - **「1. AI設定読み込み (外見解析)」ボタン**: 画像入力後にこのボタンを押すと、AIが立ち絵画像を解析し、中央のエディタに初期設定Markdownを生成・反映します。
  - **「立ち絵をPCへダウンロード」ボタン**: 現在選択している立ち絵画像をPNG形式でローカルPCへダウンロードします。
  - **「2. キャラクターを保存」ボタン**: 編集内容をデータベースへ保存します。その際、まだ生成されていない「正面」「横向き」の別ポーズ立ち絵画像が自動的に並列で同時生成・透過処理され、一括保存されます。
- **キャラクター設定エディタ（中央）**:
  - 外見特徴(Visual)と詳細プロフィール(Profile)の2つのMarkdownテキストエリア。
  - **ポーズ画像ライブラリ**: 保存後に自動生成された「正面」「横向き」および元の「インプット画像」を表示切り替えするエリア。
- **キャラライブラリ（右側）**:
  - 登録されているキャラクターの立ち絵サムネイル一覧。選択することで編集可能です。

### 1.4 シーン・挿絵生成画面
- **シーン設定・入力（左側）**:
  - シーン名入力、小説本文（テキスト）入力エリア。登場キャラクターのチェックボックス選択、アスペクト比（2:3 / 3:4）の指定。
  - **「1. 本文からシーン設定をAI抽出」ボタン**: シーン設定Markdownを自動抽出して中央エディタに反映。
  - **過去のシーンライブラリ**: 作成済みのシーン一覧を表示。選択して切り替えや削除が可能。
- **シーン設定エディタ（中央）**:
  - AI抽出された構図や背景等の指示Markdownをユーザーが微調整するテキストエリア。
  - **「2. 挿絵を生成 (4構図並列)」ボタン**: 4種類の構図画像を並列同時生成します。
- **プレビュー & ライブラリ（右側）**:
  - メインプレビュー画面。
  - **同時生成の4構図グリッド**: 生成された4つの構図（三分割、日の丸、三角形、対角線）を比較選択する2x2サムネイル。
  - **「3. PCへダウンロード」ボタン**: 表示中の画像をローカルへ保存.
  - **確定保存済みの履歴リスト**: シーンに紐づいて保存されている画像履歴の一覧。

---

## 2. ワイヤーフレームイメージ

### 2.1 小説管理画面のレイアウト案
```text
+-----------------------------------------------------------------------------------------+
|  🎨 挿絵メーカー  [📚 小説選択 v]  [＋ 新規小説を作成]                [ キャラクター管理 ]  [ シーン・挿絵生成 ] |
+---------------------------------------+-------------------------------------------------+
|  【左ペイン: 小説の設定・編集】         |  【右ペイン: 小説プロジェクト一覧】               |
|   ◆ 小説タイトル                      |  📚 AI事務員宮西さん                  [削除]    |
|   [ AI事務員宮西さん        ]         |   あらすじ：AIがオフィス課題を解決する...       |
|                                       |   作成：2026/08/10   更新：2026/08/10           |
|   ◆ あらすじ・概要・メモ              |  ---------------------------------------------  |
|   +---------------------------------+ |  📚 次の小説タイトル                  [削除]    |
|   | AIが人間のオフィスの様々な      | |   あらすじ：近未来を舞台にしたSFファンタジー... |
|   | 課題を解決していくコメディ...   | |                                               |
|   +---------------------------------+ |                                               |
|   [ 小説プロジェクトを保存 ]          |                                                 |
+---------------------------------------+-------------------------------------------------+
```

### 2.2 キャラクター管理画面のレイアウト案
```text
+-----------------------------------------------------------------------------------+
|  🎨 挿絵メーカー  [📚 小説選択 v]  [＋ 新規小説を作成]                [ キャラクター管理 ]  [ シーン・挿絵生成 ] |
+-------------------+-------------------------------------------+-------------------+
| 【新規キャラクター】| 【キャラクター設定(Visual & Profile)】     | 【キャラライブラリ】|
|  名前: [________] | ◆外見特徴 (Visual: AI自動生成 & 編集)      | +---------------+ |
|                   | - 髪型: 銀髪の無造作なショートヘア         | | [Image(透過)] | |
|  立ち絵アップロード| - 瞳の色: 深いブルー                      | | リク          | |
|  +-------------+  | - 服装: 黒い革の鎧、白いマフラー          | +---------------+ |
|  |             |  |                                           | +---------------+ |
|  |  [ Image ]  |  | ◆詳細プロフィール (Profile: ユーザー手動)  | | [Image(透過)] | |
|  |   (透過済)  |  | - 年齢: 17歳                              | | ミーア        | |
|  +-------------+  | - 性格: クールで無口だが仲間想い          | +---------------+ |
|  [ 1.外見解析 ]   | +---------------------------------------+ |                   |
|  [ 立ち絵DL ]     | | 【ポーズ画像ライブラリ(表示切替)】    | |                   |
|  [ 2. 保存する ]   | | [元画像]       [正面]       [横向き]   | |                   |
|                   | +---------------------------------------+ |                   |
+-------------------+-------------------------------------------+-------------------+
```

### 2.3 シーン・挿絵生成画面のレイアウト案
```text
+-----------------------------------------------------------------------------------------+
|  🎨 挿絵メーカー  [📚 小説選択 v]  [＋ 新規小説を作成]                [ キャラクター管理 ]  [ シーン・挿絵生成 ] |
+--------------------------+----------------------------------+---------------------------+
|  【左ペイン: 入力・設定】  |  【中央: シーン設定エディタ】     |  【右: プレビュー & 履歴】  |
|   シーン名: [_________]  |                                  |  +---------------------+  |
|   小説本文 (テキスト):   |   シーン設定Markdown (AI & 手動)  |  |                     |  |
|  +--------------------+  |  +----------------------------+  |  |    [メインプレビュー] |  |
|  | 「あいつが来るぞ」 |  |  # シーン設定概要              |  |  |                     |  |
|  +--------------------+  |  ## 1. 登場人物と状態          |  |  +---------------------+  |
|   登場キャラクター選択:   |  - リク: 表情は引き締まり...   |  | 【同時生成の4構図】       |
|   [x] リク   [ ] ミーア  |  ## 2. 構図・カメラワーク      |  | +-----------+-----------+ |
|   アスペクト比:          |  - ローアングルから見上げる... |  | |[三分割構図]|[日の丸構図]| |
|   (o) 2:3  ( ) 3:4       |  +----------------------------+  | +-----------+-----------+ |
|                          |                                  | |[三角形構図]|[対角線構図]| |
|   [ 1. シーン設定AI抽出 ]|   [ 2. 挿絵を生成 (4構図並列) ]  | +-----------+-----------+ |
|  +--------------------+  |                                  | [ 3. PCへダウンロード ]   |
|  |【過去シーン一覧】  |  |                                  | [ 確定保存済みの履歴一覧 ]|
|  | - 第一章 宿敵対峙  |  |                                  |                           |
+--------------------------+----------------------------------+---------------------------+

---

## 3. デザイン方針
- **カラーテーマ**: ダークテーマ（背景：深めのグレー `#121214` / `#1a1a1e`、アクセントカラー：ライトイエロー `#ffd200`）を基調とし、暗い部屋での執筆作業時でも目が疲れにくい配色を採用。
- **レイアウト構造**: 画面左右にスクロールバーが独立して現れる構成にし、入力側が長くなってもプレビュー枠や操作ボタンが常に画面内に固定表示されるように設計。
- **操作フィードバック**: 画像生成の進行状況（プログレスバー等）と、過去履歴の切り替え時のシームレスなローディング表示の実装。

cd "/挿絵メーカー/03_開発" && npm run dev

src/
├── app/
│   ├── layout.tsx     # 共通レイアウト定義
│   ├── page.tsx       # アプリケーションのメイン画面 (SPA) と状態管理ロジック
│   └── globals.css    # グローバルスタイル (Vanilla CSSによるダークテーマ設計)
└── lib/
    ├── db.ts          # IndexedDB (Dexie.js) のデータベース定義とスキーマ設計
    └── ai.ts          # Gemini API / NanobananaPro API との通信インターフェース