【徹底解説】ナノバナナの専用アプリ作り方！フィギュアも簡単！10分で作れる！【サンプル付き】

Googleの画像生成AI「ナノバナナ」もう使っていますか？

ナノバナナの夜明けから、早5日！

誰もが驚くクオリティの画像を、
テキストで指示するだけで簡単に生み出せるその能力は、
まさに革新的。

けど、業務で使うと、
1枚ずつ指示を出して、生成するのは少し手間ですよね。

そう考えたことはありませんか？

この記事では、そんなあなたの悩みを解決し、
「ナノバナナをさらに進化させて、
業務の効率を飛躍的に高める方法」をご紹介します。

例えば、こんなアプリも簡単にできる↓

ナノバナナよく知らん！って人は↓から読むと良いかも！

0.Google AI Studio Buildでアプリを開発する

その解決策とは、
ずばり「Google AI Studio Build」を使って、
あなた専用のナノバナナアプリを作ることです。

ナノバナナは、
実はAPI（アプリケーション・プログラミング・インターフェース）を通じて、外部のアプリケーションから操作することができます。

このAPIとGoogle AI Studio Buildを組み合わせれば、
オリジナルの画像生成ツールを開発できるのです。

ナノバナナの能力を最大限に引き出し、
煩雑な作業から解放されることで、
クリエイティブな仕事に集中できるはずです！！

1.ナノバナナであなた専用アプリの作り方

ここから作り方を紹介します！
無料で作って、使えます。

Google AI Studio Buildを使えば、以下のステップで簡単に作れます。

Google AI Studio Buildを詳しく知りたい人は↓を読んでね！

ステップ1：Google AI studio buildにアクセス

まずは、Google AI studio buildにアクセスします！

ステップ2：APIキーを取得

Get API Keyをクリックする

APIキーを作成をクリック

これで、GeminiのAPIキーを取得。

ステップ4：プロンプトを書く

プロジェクトを貼り付けて、以下のように指示して、10分ほどで完成です！

ユーザーがファイルをアップロードしたら、アップロード画像がnano bananaを使って、フィギュアになるアプリを作って下さい。

2.ナノバナナのアプリのサンプル

ナノバナナを活用した実用的なアプリの作り方をサンプルの指示と一緒にご紹介します。

実際に、僕が日々制作したプロンプトも公開していきます！
100日バイブコーディング制作中です！
詳しくはこちら

そのうち、有料になるかも・・・

良いねもらえると、サンプルの追加がんばれます！！

1）8ショット違うアングル画像生成アプリ

Google AI Studio Buildで以下の指示をして、完成です。

あとは動かして、テストします。
エラーが出たら、修正指示をして、繰り返せばOKです。

・要件定義書
・UI・UX設計書

要件定義書

# ✅ 要件定義書｜ナノバナナ🍌らぶ！ AIモデル作成編（代表的8ショット版）

---

## 🧩 機能要件

- ユーザーは画像ファイル（jpg/png）を1枚アップロードできる。
- 「生成枚数」は1〜8枚でユーザーが指定可能。
- 生成画像は以下条件で構成される：
   - **カメラアングル**は代表的な8ショットから自動割当（均等またはランダム）。  
   - **ポーズ・表情・感情**は各画像ごとに必ず異なるようにランダム生成。  
- Gemini AIが「アングル + ポーズ + 表情 + 感情」を組み合わせたプロンプトを自動生成。
- nano banana APIを通じて指定枚数分の画像を非同期生成。
- 結果は一覧表示され、**一括ダウンロード**可能。
- 生成中はローディング表示で進捗を可視化。
- エラー時はアラート表示（例：「生成に失敗しました」）。

---

## 🎨 UI・UX要件

- 白背景×黒文字のシンプルデザイン。
- 画面構成：
   ① ファイルアップロード欄  
   ② 生成枚数入力（1〜8）  
   ③ 「ナノバナナでつくる！🍌」ボタン  
   ④ 生成中ステータス表示（スピナー＋進捗バー）  
   ⑤ 結果一覧（グリッド表示／アングル名キャプション付き）  
   ⑥ 一括ダウンロードボタン
- スマホ最適化（レスポンシブ設計）、8枚上限なのでページネーション不要。

---

## 🛠 非機能要件

- ファイル形式：jpg, png ／ 最大サイズ10MB。
- 枚数制限：最小1枚〜最大8枚（バリデーションあり）。
- Gemini AIで自動プロンプト生成し、ポーズ・表情・感情の多様性を担保。
- nano banana APIは非同期で並列リクエスト処理（最大8件）。
- 画像はサーバーに一時保存し、セッション終了または30分後に削除。
- MVP段階では認証なし（匿名利用のみ）。

---

## 📸 代表的な8ショット（プリセット）

1. クローズアップ  
2. ミディアムショット  
3. ロングショット（全身）  
4. アイレベルショット  
5. ハイアングル  
6. ローアングル  
7. エクストリームクローズアップ  
8. バードアイビュー  

---

## 🚀 技術補足

- 枚数が8未満の場合：上記8ショットからランダム抽出。  
- 枚数が8の場合：8ショットを均等に割り当て。  
- Gemini AIはアングル名を英語に変換し、nano banana API用のプロンプトを生成。  
- 並列処理で8枚同時生成が可能だが、API負荷に応じて順次処理 fallback を実装。  

UI・UX設計書

# UI・UX設計書 ｜ Nano Banana🍌 AIモデル作成 MVP（最終版）

## 1. プロジェクト概要
| 項目 | 内容 |
|------|------|
| プロダクト名 | **Nano Banana – Variations Generator** |
| 目的 | ユーザーが 1 枚の画像をアップロードするだけで、Gemini AI＋nano banana API により最大 10 枚のバリエーション画像を生成・ダウンロードできる “超ミニマル” 生成サービスを提供する |
| コアバリュー | - **爆速**：入力は画像＋枚数のみ<br>- **おもしろさ**：🍌モチーフのカジュアル UI<br>- **ノンストレス**：進捗可視化・エラー早期検知 |
| ターゲット | SNS クリエイター／ライトなデザイナー／AI 画像生成に興味のある一般ユーザー |
| プラットフォーム | モバイル Web（スマホファースト）＋ PC 対応（中央 960 px 幅） |
| 技術前提 | React + Vite + Tailwind CSS／Gemini API／nano banana API |
| MVP 範囲 | 画像生成体験のみ。ユーザー登録・履歴保存は行わない。 |

---

## 2. ペルソナ & ユースケース

### 2.1 ペルソナ
| 項目 | 内容 |
|------|------|
| 名前 | さき (26) |
| 職業 | SNS マネージャー（飲食チェーン） |
| ゴール | 投稿用の “映える” 画像を素早く量産したい |
| ペイン | - Photoshop での作業が重い<br>- AI プロンプトが難しい |
| デバイス | iPhone 14 Pro（Safari 最新） |

### 2.2 主要ユースケース
1. 画像バリエーションを 3 枚だけ作り、すぐダウンロードして SNS へ投稿する  
2. AI で “ちょっと違う角度／表情” を自動で出して比較検討する

---

## 3. ユーザーストーリー & 主要タスクフロー

### 3.1 ユーザーストーリー
> **As a** SNS マネージャー  
> **I want** to upload a single photo and generate 3–10 creative variations automatically  
> **So that** I can quickly choose the best shot for my post without deep AI knowledge.

### 3.2 タスクフロー
1. 画像をドラッグ & ドロップまたはタップして選択  
2. 生成枚数（ステッパー or 数値入力）を 1–10 で指定  
3. 「バナナでつくる！🍌」ボタンをタップ  
4. スピナー + 進捗テキスト表示（API 呼び出し開始）  
5. 生成完了 → グリッドにサムネイル表示  
6. ✅ 個別ダウンロード or 📦 一括 ZIP ダウンロード  
7. セッション終了で画像キャッシュ消去

---

## 4. 画面一覧 & 画面遷移図

### 4.1 画面一覧
| ID | 画面名 | 目的 |
|----|--------|------|
| **M01** | メインページ | アップロード〜生成〜DL まで一気通貫 |
| **O01** | 進捗オーバーレイ | 生成中のステータス表示 |
| **T01** | トースト通知 | 成功 / エラー / 再試行ガイド |
| **P01** | 利用規約 PDF | フッターリンクから外部表示 |

### 4.2 画面遷移図
```mermaid
flowchart TD
    Start([ページ読込])
    Start --> M01
    M01 -->|画像選択| M01_Select
    M01_Select -->|生成ボタン| O01
    O01 -->|成功| M01_Result
    O01 -->|失敗| T01
    T01 -->|閉じる| M01
5. ワイヤーフレーム（主要画面）
5.1 M01 メインページ（スマホ幅 390 px）
css
コードをコピーする
┌───────────────────────────────┐
│ nano banana🍌                │  ← Sticky Header
├───────────────────────────────┤
│ ① [＋ 画像をアップロード]     │
│    またはドラッグ＆ドロップ     │
│                               │
│ ② 生成枚数 [ - 3 + ]          │ ← ステッパー
│                               │
│      ┏━━━━━━━━━━━━━━━┓        │
│ ③   ┃ バナナでつくる！🍌 ┃        │ ← Primary Button
│      ┗━━━━━━━━━━━━━━━┛        │
│                               │
│ ──────────── hr ─────────── │
│ ④ 生成結果 (Grid 2col)        │
│  ┌──┬──┐                      │
│  │##│##│ …                    │
│  └──┴──┘                      │
│                               │
│ ⑤ [📦 ぜんぶダウンロード]      │ ← Secondary Button
└───────────────────────────────┘
デスクトップ時は中央寄せ・最大 900 px 幅

6. インタラクション仕様
ID	事象	挙動	メモ
INT-01	画像選択	change で即プレビュー生成、10 MB 超は T01 エラー	Drag & drop 対応
INT-02	生成ボタン押下	入力完了時のみ disabled=false	aria-live で進捗読み上げ
INT-03	生成中	O01 オーバーレイ：🍌スピナー＋「バナナを熟成中…（%）」	ESC でキャンセル不可
INT-04	成功	O01 fade-out → M01_Result にスクロール	
INT-05	エラー	T01 トースト右上表示、5 s 後 auto-close	再試行リンク付き
INT-06	個別 DL	<a download> Blob 返却	
INT-07	一括 DL	ZIP 生成 → 進捗 0–100 % → T01 成功	

7. ナビゲーション & 情報設計
グローバルナビ：MVP では不要、ヘッダーにロゴのみ

フッター：利用規約 / プライバシーポリシー（外部 PDF）、© 2025 Nano Banana

情報階層：1 階層。追加機能時は /advanced など SPA 内ルーティング

8. アクセシビリティ & レスポンシブ考慮
項目	対応内容
コントラスト	白 (#FFFFFF) × 黒 (#000000)、アクセント #FADB4E でも WCAG AA 準拠
フォントサイズ	最小 14 px（モバイル）、見出し 18–24 px
タップ領域	ボタン・入力は 44 × 44 px 以上
キーボード操作	tab フォーカス順、Enter/Space で操作可
スクリーンリーダー	aria-label／aria-live（進捗）
レスポンシブ	Tailwind breakpoints：sm 390→、md 768→中央固定、lg 1024→グリッド 3 列

付録 A. カラーパレット
目的	HEX	役割
Primary Accent	#FADB4E	🍌 バナナイエロー
Text / Icon	#000000	黒文字
Background	#FFFFFF	白背景
Error	#FF4D4F	トースト／バリデーション

2）ナノバナナ🍌らぶ！ フィギュアメーカー

こんな感じで作れます↓

Google AI Studio Buildで以下の指示をして、完成です。

・要件定義書
・UI・UX設計書

要件定義書

# 📝 要件定義書｜ナノバナナ🍌らぶ！ フィギュアメーカー

## 1. 機能要件

- **ファイルアップロード機能**  
　ユーザーが任意の画像ファイル（.jpg/.png）を1枚アップロード可能。

- **フィギュアタイプ選択機能**  
　以下の3タイプから1つを選択：  
　　① ねんどろいど・デフォルメ系  
　　② 躍動感あるポーズ系  
　　③ アニメ・ゲームの看板キャラ系

- **表情選択機能**  
　以下の4つから選択：笑顔 😊／怒り 😠／うるうる 🥺／無表情 😐

- **画像生成機能（4方向）**  
　Googleの「nano banana API」を用いて、アップロード画像をもとに  
　正面／背面／左側面／右側面の4方向のフィギュア風画像を生成。

- **ダウンロード・シェア機能**  
　生成画像は保存・SNS共有が可能（Twitter/X, Instagram, Threads等）。

---

## 2. UI・UX要件

- **トップページ構成（1ステップ完結型UI）**  
　アップロード → タイプ選択 → 表情選択 → 生成ボタン、のシンプルな流れ。

- **選択UI**  
　フィギュアタイプ・表情選択は、イラスト付きカード型UIで視覚的に分かりやすく設計。

- **画像生成中の体験設計**  
　生成処理中はローディングアニメーション＋「生成中…少々お待ちください」等の演出。

- **結果表示UI**  
　4方向画像は並列でギャラリー表示。各画像の下に「保存」／「シェア」ボタンを設置。

- **デザイントーン**  
　カラフルで親しみやすく、ナノバナナのブランド感を演出（例：イエロー＆ホワイトを基調にポップなフォント使用）。

---

## 3. 非機能要件

- **パフォーマンス要件**  
　画像生成は非同期処理で実装し、レスポンスタイム10秒以内を目指す。

- **使用制限（MVP仕様）**  
　1ユーザーあたり1日5回まで生成可能。ログインなしでの利用も可能（cookieで回数管理）。

- **ストレージ管理**  
　アップロード画像と生成画像は24時間以内に自動削除（サーバー容量対策）。

- **法的・倫理的配慮**  
　著作権に配慮し、公序良俗に反する画像や有名キャラクターの不正使用は禁止。

- **技術スタック想定（MVP段階）**  
　- フロントエンド：React + TailwindCSS  
　- バックエンド：Firebase Functions（認証／ストレージ管理）  
　- 画像生成API：Google nano banana API

---

✅ 本要件はプロトタイプ（MVP）実装を前提とし、以後のユーザーテストにより機能改善・拡張を予定します。

UI・UX設計書

# UI・UX設計書  
## プロジェクト名：ナノバナナ🍌らぶ！ フィギュアメーカー（MVP）

---

## 1. プロジェクト概要
ユーザーが任意の画像をアップロードし、フィギュア風に変換・生成できるWebアプリ。  
Google nano banana APIを活用し、簡単操作でオリジナルフィギュアの4方向画像を生成。  
MVP版は「トップページ1ステップ完結UI」を中心に設計する。  

---

## 2. ペルソナ & ユースケース
### ペルソナ
- **名前**：さくら（22歳・女子大生）  
- **特徴**：アニメやゲームが好き。自分の推しキャラやイラストをフィギュアにしてSNSでシェアしたい。  
- **デバイス利用環境**：スマホ中心（iPhone使用）、SNSヘビーユーザー  

### ユースケース
1. 推しキャラのイラストをアップロードし、フィギュア風に変換  
2. 好きなフィギュアタイプや表情を選んで楽しむ  
3. 生成画像を保存・SNSに投稿して友達と共有  

---

## 3. ユーザーストーリー & 主要タスクフロー
### ユーザーストーリー
- 「私は画像をアップロードして、好きなタイプと表情を選び、数秒でフィギュア風画像を作りたい。なぜならSNSで推しを自慢したいから。」

### タスクフロー
1. 画像をアップロード  
2. フィギュアタイプを選択  
3. 表情を選択  
4. 「生成する」ボタンを押す  
5. 生成中アニメーションが表示される  
6. 4方向フィギュア画像が表示される  
7. 各画像を「保存」または「シェア」する  

---

## 4. 画面一覧 & 画面遷移図
### 画面一覧
1. トップページ（生成UI一体型）  
2. 結果表示セクション（同一画面内スクロールまたは切替）  
3. 補助UI（ローディング、エラーメッセージ、利用回数制限通知、利用規約リンク）  

### 画面遷移図
[トップページ]
├──> [生成中ローディング]
├──> [結果表示ギャラリー]
│ ├── 保存ボタン
│ └── シェアボタン（X, Instagram, Threads）
└──> [利用回数制限アラート]

yaml
コードをコピーする

---

## 5. ワイヤーフレーム（主要画面）
### トップページ（モバイル想定）
- ヘッダー：ロゴ「ナノバナナ🍌らぶ！」  
- ステップUI（縦並びカード型）
  1. アップロードエリア（「ここに画像をアップロード」／「ファイルを選択」ボタン）  
  2. フィギュアタイプ選択（3種類のカード：①ねんどろいど風 ②躍動ポーズ風 ③看板キャラ風）  
  3. 表情選択（4種類のカード：😊 笑顔／😠 怒り／🥺 うるうる／😐 無表情）  
  4. 「生成する」ボタン（バナナイエローの大きなボタン）  
- フッター：利用規約・お問い合わせリンク  

### 結果表示セクション
- 生成された4方向画像を2×2のギャラリーで表示  
- 各画像の下に「保存する」「シェアする」ボタン  

---

## 6. インタラクション仕様
- **アップロード時**：サムネイル表示＋「削除」アイコン  
- **選択UI**：選択したカードは枠線が黄色に変化  
- **生成ボタン**：押下後にローディングアニメーション（回転するバナナ🍌アイコンと「生成中…少々お待ちください」テキスト）  
- **エラー時**：赤いトースト表示（例：「対応形式は JPG / PNG のみです」）  
- **利用制限超過**：モーダル表示（「1日の利用上限に達しました」）  

---

## 7. ナビゲーション & 情報設計
- **シングルページ構成**：トップページ完結  
- **補助リンク**：フッターに「利用規約」「プライバシーポリシー」  
- **保存／シェア導線**：結果画面に直接配置（SNS投稿を促進）  

---

## 8. アクセシビリティ & レスポンシブ考慮
- コントラスト比：WCAG 2.1 AAに準拠（黄色背景＋黒文字で可読性確保）  
- アイコンとテキストを併用して識別性を向上  
- スマホを優先に設計し、PCではカードを横並びに展開  

---

## 9. 暫定ブランドガイドライン
- **カラー**  
  - メインカラー：バナナイエロー `#FFE135`  
  - アクセントカラー：フレッシュグリーン `#6CC551`  
  - ベースカラー：ホワイト `#FFFFFF`  
  - サブカラー：ライトグレー `#F5F5F5`  

- **フォント**  
  - 丸みのある親しみやすいサンセリフ体  
  - Webでは「Nunito」や「Rounded M+」を想定  

- **トーン＆マナー**  
  - ポップ・明るい・親しみやすい  
  - カード型UIを多用し、イラストや絵文字を活用して直感的に操作できるようにする  

---

3) ストーリージェネレーター

これは、1発で動かないので、テストしながら、何度かエラー修正の指示をしてください。

要件定義書

# 📘 要件定義書｜NanoComic（仮）  
**目的：キャラ画像とテーマから、ショート動画用のシーン画像を自動生成するツール**  
**対応言語：日本語／英語（切り替え式 UI 対応）**

---

## 1. 機能要件

- ユーザーはキャラ画像を1枚アップロードできる（png/jpg対応）  
- テーマ入力欄に自由記述でテーマを入力（例：「意外な結末」「友情」「失敗からの学び」など）  
- テーマに応じたストーリー構成テンプレート（最大5シーン）を自動選択  
- 各シーンについて「シーン名」「セリフ／ナレーション」「演出（表情・ポーズ・背景）」を自動生成  
- キャラ画像をベースに、Nano Banana APIで各シーンの画像を生成（表情・アングル・背景を最適化）  
- 生成画像は順番付きでダウンロード可能（1シーン＝1ファイル）  

---

## 2. UI・UX要件

- **ステップ形式UI（4ステップ）**  
  1. キャラ画像アップロード  
  2. テーマ入力  
  3. シーン構成プレビュー確認  
  4. 画像生成・ダウンロード  

- **シーン構成プレビュー画面**では、テンプレに基づいた最大5シーンの構成を表示  
- 各シーンは「セリフ」「ポーズ」「表情」「背景」などが見えるカードUIで表示  
- 画像生成中は「進捗バー＋簡易アニメーション」で待機状態を視覚化  
- 「すべてダウンロード」ボタンでzip取得 or 個別ダウンロードが可能  
- ダウンロードファイル名にシーン番号・名前を含める（例：`01_決意.png`）  
- 動画編集ツールとの親和性を高めるため、画像縦横比は16:9で固定  

- **🔤 言語切り替え対応（日本語／英語）**  
  - 画面右上などに言語トグル（🇯🇵／🇺🇸）を設置  
  - UIテキスト・エラーメッセージ・テンプレ内容すべてに対応  
  - 初期言語はブラウザのロケールに応じて自動選択（例：`navigator.language`）

---

## 3. 非機能要件

- Nano Banana APIは非同期で使用し、通信エラー時は自動リトライ（最大2回）  
- キャラ画像および生成画像は24時間で自動削除（サーバー側の一時ストレージ使用）  
- テンプレ構成・使用テーマは匿名ログとして記録（改善用）  
- ユーザー認証は不要（初期MVP）、セッションベースで操作を管理  
- 対応ブラウザ：Chrome、Safari、Edge（モバイル対応はv2以降）  
- 法的配慮：アップロード画像はユーザーの著作物であることを明記し、利用規約内に記載  
- バイリンガル対応の翻訳文はi18n対応構造で保持（JSON or YAMLベース）  
- 商用利用・R18コンテンツは初期リリースでは禁止（利用規約で制限）  

---

## 4. 補足：言語切り替え対応の注意点

- **翻訳データ構造**：i18n対応ライブラリを前提（例：React-i18next, vue-i18n など）  
- **ユーザー入力内容（テーマなど）は翻訳対象外**、ただし生成される出力内容（シーン名やナレーション）は多言語で用意  
- **テンプレ構成自体を日英それぞれで持つ必要がある**（例：「意外な結末」→"Unexpected Twist"）  
- 今後の拡張として「多言語テンプレ管理用CMS or 管理画面」の構築を検討

---

UI・UX設計書

# NanoComic（仮）｜UI・UX設計書（日本語対応版）

## 1. プロジェクト概要
- **目的**：ユーザーが1枚のキャラ画像とテーマを入力すると、最大5シーンの「ショート動画用シーン画像」を自動生成し、ダウンロードできる。  
- **提供価値**：  
  - ショート動画（TikTok/YouTube Shorts/Instagram Reels）制作用の“使える静止画コマ”を最短手順で作成できる  
  - テンプレ主導の構成で、初心者でも破綻しないストーリーが成立する  
- **対象プラットフォーム**：Web（PC優先／Chrome・Safari・Edge）  

---

## 2. ペルソナ & ユースケース
### ペルソナ
- **動画クリエイター（20–30代）**
  - 課題：毎日投稿する動画の素材づくりに時間がかかる  
  - 目的：短時間で5コマの素材を生成し、すぐ編集に使いたい  

### 代表ユースケース
1. キャラ画像をアップロード → テーマ入力 → 5コマ構成を確認 → 画像生成 → zip一括ダウンロード  
2. 構成はそのまま、2コマだけ個別ダウンロードして差し替えに使う  

---

## 3. ユーザーストーリー & タスクフロー
- 「**私は** ショート動画を作る人として、  
  **キャラ画像とテーマを入力するだけで** 5コマの画像を自動生成し、  
  **ダウンロードしてすぐに編集に使える** ようにしたい。」

### タスクフロー（4ステップ形式）
1. 画像アップロード  
2. テーマ入力  
3. シーン構成プレビュー  
4. 画像生成 & ダウンロード  

---

## 4. 画面一覧 & 遷移図
### 画面一覧
- **Step1**：キャラ画像アップロード  
- **Step2**：テーマ入力  
- **Step3**：シーン構成プレビュー（最大5コマ）  
- **Step4**：画像生成 & ダウンロード  
- **利用規約画面**：注意事項、商用不可、24時間で削除  

### 遷移図
ホーム
└─ Step1（画像アップロード）
└→ Step2（テーマ入力）
└→ Step3（プレビュー）
└→ Step4（生成・ダウンロード）
└→ 完了 または 再生成

yaml
コードをコピーする

---

## 5. ワイヤーフレーム概要

### Step1：画像アップロード
[ヘッダー] NanoComic（β） [リンク] 利用規約

[進行状況] 1/4 ─●───

[アップロード枠]
画像をドラッグ＆ドロップ または [画像を選択]

対応形式：PNG / JPG

推奨：1024px以上

注意：著作権にご注意ください（商用不可）

[プレビュー表示] [再選択] [削除]

[次へ]（有効：画像が選択されている場合）

shell
コードをコピーする

### Step2：テーマ入力
[進行状況] 2/4 ──●──

[入力欄]
テーマ（例：意外な結末／友情／失敗からの学び）

[サジェスト] #友情 #逆転 #日常 #憧れ #成長

[ヒント]
場所・雰囲気・感情を含めると精度が上がります
例：「夜の教室で、憧れの先輩に本音を伝える」

[戻る] [次へ]

shell
コードをコピーする

### Step3：シーン構成プレビュー
[進行状況] 3/4 ───●─

[シーンカード（最大5枚）]
┌ シーン01：導入
│ セリフ：...
│ 演出：表情=驚き、ポーズ=固まる、背景=夜の教室
└ [テキストを編集]（任意・1行）

...（最大5コマ）

[生成する] [戻る]

shell
コードをコピーする

### Step4：生成 & ダウンロード
[進行状況] 4/4 ────●

[進行バー] 生成中…
[各シーンの状態]
01 導入 生成中…
02 対立 待機中…
03 転機 待機中…
04 クライマックス 待機中…
05 余韻 待機中…

[生成完了カード]
[サムネイル] [個別ダウンロード] ファイル名: 01_導入.png
...（最大5枚）

[すべてダウンロード（zip）] [再生成（全体／個別）]
[新しいプロジェクトを始める]

yaml
コードをコピーする

---

## 6. インタラクション仕様
- **入力チェック**：PNG/JPG、最大10MB  
- **エラー表示**：  
  - 「アップロードに失敗しました」  
  - 「生成に時間がかかっています。数秒後に自動で再試行します」  
- **進行状況**：シーンごとに「待機中／生成中／完了／失敗」を表示  
- **再生成**：全体またはシーンごとに可能  
- **ファイル命名**：`01_導入.png` の形式  
- **縦横比**：初期は **16:9固定**（将来的に1:1や9:16を選択可能にする）

---

## 7. ナビゲーション & 情報設計
- **グローバル要素**：ロゴ、利用規約、フィードバックフォーム  
- **メイン要素**：4ステップウィザード  
- **データ管理**：セッションIDで生成結果を紐付け（ユーザー登録不要）

---

## 8. アクセシビリティ & レスポンシブ対応
- キーボード操作：Tab移動／Enterで操作可能  
- コントラスト比：WCAG AA（4.5:1以上）  
- スクリーンリーダー：進行状況を読み上げ  
- レイアウト：PC最適、スマホでは縦1カラム表示  

---

## 9. 非機能要件
- 生成画像は24時間で自動削除  
- 利用規約で「商用利用不可」を明示  
- APIエラー時は最大3回まで自動再試行  
- ダウンロードは署名付きURLでセキュアに提供  

---

## 10. 将来拡張
- 画像比率選択（16:9, 1:1, 9:16）  
- プロジェクト保存機能  
- キャラの切り抜き補助（マスク指定）  
- セリフの多言語化  

---

4) AI4コマ漫画アプリ

要件定義書↓

要件定義書
1. 概要
プロダクト名: 4-Koma Maker (4コマメーカー)
目的: ユーザーが提供するキャラクター画像とストーリーを基に、AIを活用して縦長の4コマ漫画を自動生成するWebアプリケーション。
特徴:
日本語と英語のUIおよびセリフ生成に対応。
メインキャラクターとサブキャラクターの画像アップロード機能。
AIがストーリー内容を解釈し、最適なコマ割り構造（起承転結など）を自動選定。
AIがキャラクター画像の特徴を抽出し、全コマを通じて外見の一貫性を維持。
カラー、またはスクリーントーンを使用した白黒（モノクロ）の作画スタイルを選択可能。
生成された画像内に、AIが状況に応じた吹き出しやモノローグをセリフと共に描画。
完成した漫画は、縦に結合された1枚の画像、または各コマ個別でのダウンロードが可能。
2. 機能要件
入力
キャラクター画像:
「メインキャラクター」と「サブキャラクター」の2名を登録可能（サブは任意）。
アップロード形式はPNG, JPG, PDFに対応。
ファイルサイズは各10MBまで。
アップロード後、プレビューサムネイルが表示され、削除も可能。
ストーリーテキスト:
物語のあらすじやテーマを記述するテキストエリア。
作品のジャンルやキャラクターの口調などを補足するための「タグ」入力欄。
言語設定:
初回アクセス時にモーダルウィンドウで「日本語」または「英語」を選択。
選択した言語はUIテキスト全体と、生成される漫画のセリフに反映される。
ヘッダーのトグルスイッチでいつでも言語の切り替えが可能。
カラースタイル:
生成する漫画の作画スタイルを「カラー」または「白黒」から選択可能。
処理 (AIによる自動生成)
キャラクター特徴抽出 (extractCharacterFeatures):
アップロードされたキャラクター画像をAIが分析し、髪型、服装、アクセサリーなどの視覚的特徴をタグ形式で抽出する。
この特徴タグは、後続の全プロセスでキャラクターの一貫性を保つための指示として利用される。
設計図（ストーリーボード）生成 (generateStoryboard):
ユーザーが入力したストーリー、タグ、キャラクター特徴を基に、AIが4コマの設計図をJSON形式で生成する。
ストーリーの文脈からAIが「起承転結」「ギャグ（フリ→オチ）」「時系列」など最適なコマ割り構造を自動で判断し、各コマの役割を定義する。
各コマごとに以下の要素を定義する：
role: コマの役割（例: "起: 導入"）。
dialogue_jp / dialogue_en: 日本語と英語のセリフ。
background: 背景の説明。
action_description: キャラクターの表情、ポーズ、行動の詳細な説明。
characters_present: コマに登場するキャラクターのリスト（Main_01, Sub_01）。
パネル画像生成 (generateSinglePanelImage):
設計図の各コマ情報とキャラクター特徴タグを基に、4枚のパネル画像を個別に生成する。
ユーザーが選択した「カラースタイル」に基づき、フルカラーまたは白黒（スクリーントーン使用）の画像を生成するようAIに指示する。
セリフ・吹き出しの描画: AIはセリフの内容や文脈を解釈し、漫画のベストプラクティス（例：叫び声はギザギザ、心の声はモコモコ）に従って、適切な吹き出しやナレーションボックスをテキストと共に画像内に直接描画する。
画像結合 (combineImages):
生成された4枚のパネル画像を、クライアントサイドのCanvas APIを用いて縦一列に結合する。
各コマの間には枠線が描画され、最終的に1080x4320pxの一枚のPNG画像として出力される。
出力
プレビュー:
設計図プレビュー: 画像生成前に、AIが生成したテキストベースの設計図（各コマの役割、セリフ、場面説明など）がカード形式で表示される。
漫画プレビュー: 画像生成後、完成した縦長の4コマ漫画が表示される。
ダウンロード:
結合画像: 縦に結合された1枚の4コマ漫画（4-koma.png）をダウンロード可能。
個別パネル: 4枚のコマ画像をそれぞれ個別に（panel_1.pngなど）ダウンロード可能。
3. UI・UX要件
デザイン:
白とグレーを基調とした、清潔感のあるミニマルなデザイン。
アクセントカラーとしてブルー系を使用。
フォントは Noto Sans および Noto Sans JP を採用し、日英両言語で高い可読性を確保。
レイアウト:
画面を大きく左右2分割したレイアウトを採用。
左側: キャラクターアップロード、ストーリー入力などの「入力エリア」。
右側: 生成された設計図や完成漫画が表示される「プレビューエリア」。
操作性:
ユーザーの操作フローは「①入力 → ②設計図生成 → ③漫画生成」のステップに沿って明確に誘導される。
処理中はローディングスピナーと「生成中...」のテキストが表示され、システムの稼働状態をユーザーにフィードバックする。
入力内容が不十分な場合（ストーリー未入力など）は、生成ボタンが非活性化され、誤操作を防ぐ。
エラー発生時には、プレビューエリアに内容を説明するメッセージが表示される。
4. 非機能要件
キャラクター一貫性:
最初にキャラクター画像から特徴を抽出し、そのテキスト情報を全パネルの画像生成プロンプトに含めることで、服装や髪型などの一貫性を担保する。
堅牢性 (エラーハンドリング):
AIからの応答が期待通りでない場合（例: JSON形式の崩れ、画像データ欠損）でもアプリケーションがクラッシュしないよう、try-catch構文やデータの存在チェックを適切に配置している。
画像の読み込みに失敗したコマは、結合時にエラーメッセージ付きのプレースホルダーとして表示される。
セキュリティ:
Gemini APIキーは環境変数 (process.env.API_KEY) を通じて管理され、クライアントコードに直接ハードコードされない。
実行環境:
Reactフレームワークをベースとし、Tailwind CSSでスタイリングされたモダンなWebアプリケーション。
ブラウザ上で動作し、主要な最新ブラウザに対応。

いいねクリックしてもらえたらがんばれます！！

3.まとめ

今回は、Google AI Studio Buildとナノバナナを活用した便利なアプリの作り方を紹介しました！

バイブコーディングでなら、
簡単にアプリも作れます。

もし、
バイブコーディングという新しい開発スタイルで、
もっと本格的に作りたい方は↓こちらのマガジンをどうぞ！

また、↓このサイトでは実際にバイブコーディングで制作した、
アプリやWebサイトを公開しています。

どんなものが日本語だけの指示で作れるのか・・・
ぜひ、ご覧くださいね。

--------------------------------------------------------------
▼バイブコーディング制作ポートフォリオサイト

ぜひ、見ていって下さいね！