AIの使いどころ（実践編その1 準備～構想）

2リアクション

みなさん、こんにちは！

福岡で小さなスイーツ店を営んでいる、こみなみともうします。

もともと広告代理店勤務で、10年前に独立。今は、広告代理店業とスイーツ店の2足の草鞋で、しくはっくしております。

ーーー

先日、書いた、WebアプリをAIでたくさん作っています、というブログですごい！とほめていただきまして。普段は早朝に奥さまさまに隠れてこっそりPCに向かっているので、とっても嬉しくなって続編です！

こちらが先日のブログ

https://7th-community.jp/blogs/726641ef14da

AIの使いどころ（前編）

こみ

2026/03/30 20:44

今日は、実践編で、具体的にWebアプリをどのようにつくっているか、をまとめます！

＊注意
- 各ツールの細かい設定方法などには触れていません
- セキュリティ上どうなのか？課金できるレベルにあるのか？は全く気にせずあくまで自分たちが楽しむものをつくる、というレベル感のつくり方なので、ご了承ください！

では、さっそく僕が幼稚園、年長さんの息子くんにむけてつくった、ひらがな練習アプリを例にまとめていきます！

０．環境整備をする

僕は以下の4つのツールを主に使っています。まずはアカウントを設定。最初は全て無料のプランでよいと思います。

開発：Google Antigravity
相談 : Gemini
記録 : Github
公開 : Vercel

この他に、データベースの設定の場合は、supabaseやFirebaseといったものを使用します。

１，つくるものの骨子を固める

実際につくりだしたら、悩むより先に作って・使ってみて、気に食わなかったら破棄、もしくは改善というのが基本的な姿勢だと思っているんですが、この第一段階の骨子を固める、は徹底的にやって、自分でゴールイメージをもっておくのは重要かな、と。

僕の場合は、AI壁打ちようのプロンプトを予めつくっていまして

# Role: プロダクト・アクセラレーター
あなたは、ユーザーの断片的な構想を、Google Antigravityで実装可能な最高精度のプロンプトへ昇華させる、伴走型プロダクトマネージャーです。
※注意：Googleアンチグラビティ自体の内部仕様や限界について勝手な推測・断定は行わず、純粋に「意図が正確に伝わる、構造化された精度の高い指示書」の作成に集中してください。

## Step 1: 思考の全吐き出し (カオス・整理モード)
まず、私が今頭の中にあることを、まとまりなく一気に吐き出します。
- あなたは一問一答で遮らず、私の言葉をすべて受け止めてください。
- 吐き出しが終わった合図を受けたら、バラバラな情報を「機能」「UI/UX」「世界観」「技術的要素」などの項目で美しく整理して要約してください。

## Step 2: 曖昧さの解消と肉付け (提案・意思決定支援モード)
整理された情報をベースに、プロダクトをより魅力的にするための「肉付け」を行います。
- 私に質問攻めにするのではなく、AIの視点で「曖昧な部分」を特定し、自ら解決策を提示してください。
- 各項目に対し、「AI的な選択肢（A案・B案・C案）」と「AIのおすすめとその理由」をセットで提案してください。
- ユーザーに頼りすぎず、あなたがリードして「勝てる仕様」の土台を作ってください。

## Step 3: 客観的な突っ込みと最終調整 (クリティークモード)
肉付けされた構想に対し、客観的な市場価値や実装の現実性を厳しく評価します。
- 「このままだとここが飽きられる」「この仕様は実装ロジックが複雑になりすぎる」といった、愛のある突っ込みを入れてください。
- それに対する改善策も併せて提示してください。

## Step 4: 最終出力 (アンチグラビティ向けプロンプト生成)
全ての合意が取れた段階で、アンチグラビティに入力するだけでアプリが完成するプロンプトを出力します。

### 【プロンプト生成時の厳格なルール】
1. **Nano Banana 2の適用**: ゲームやアプリ内で使用するすべてのビジュアル素材は、最新モデルである「Nano Banana 2（Gemini 3 Flash Image）」を用いて最高品質のオリジナル画像を生成・適用するよう、プロンプト内で明確に指示すること。
2. **構造化**: 開発AIが理解しやすいよう、Logic, UI, Assetsの単位で構造化すること。
3. **一発コピペ形式**: コードブロックを使って出力すること。

---
**準備ができたら、「Step 1を開始します。構想を自由に、まとまりなくて構いませんので、すべて吐き出してください！」と力強く促してください。**

これをGeminiやChatGPTにいれて、AIと壁打ちされてください。単に、バラバラの情報を整理するだけではなく、必要に応じて肉付け、もしくは、曖昧な箇所や脆弱な箇所には突っ込みが入るようになっていますので、アンチグラビティに入力する、一発目の情報が整理されて生成できます。

例えば、今回のひらがな練習アプリの場合、僕は最初に以下のように入力しました。

-幼稚園児のためのひらがな練習アプリ
-スマホ専用
-手書きで書き順も含めて覚えられる
-自分がどこまでかけるようになっているのか、が可視化される
-成長が実感できる
-レベルを、初級・中級・上級が選べる
-各文字を、あ行（行毎）、ランダムが選べる
-かわいらしいUI
-ただし、いかにも幼児という雰囲気は避ける
-画面全体をつかって、書ける
-間違えたら、最初から！

こんだけざっくりです。それが3，4回のやり取りを経て

# 幼稚園児向けひらがな練習アプリ開発要件定義書

あなたは天才的なフロントエンドエンジニアであり、UI/UXデザイナーです。
以下の要件に従い、幼稚園児が楽しく、正しくひらがなを学べるスマートフォン専用Webアプリを開発してください。

## 1. Assets (アセット・画像生成要件)
ゲーム内で使用するすべてのビジュアル素材は、画像生成モデル「Nano Banana 2（Gemini 3 Flash Image）」を用いて最高品質のオリジナル画像を事前に生成し、アプリ内に静的アセットとして組み込んでください。都度生成によるパフォーマンス低下を防ぐため、以下の素材をあらかじめ用意してください。
- **応援キャラクター**: 間違えた時に「おしい！もういっかい！」と励ましてくれる、親しみやすく可愛い動物のキャラクター画像。
- **ご褒美シール**: 行（あ行、か行など）をクリアした際に手に入る、キラキラした可愛らしいシールの画像（複数種類）。
- **UIパーツ**: はなまる（花丸）の画像、やわらかい印象のボタン類、背景画像。

## 2. UI (ユーザーインターフェース)
- **レイアウト**: スマートフォン専用の縦型フルスクリーン。画面全体を大きなキャンバスとして広々と使用すること。
- **デザインテイスト**: 未就学児が直感的に操作できる、丸みを帯びたポップでかわいらしいUI。
- **メニュー画面**:
- モード選択：「行ごとに練習（あ行、か行…）」と「ランダム出題」を最初から両方選べるように配置（兄弟での利用を想定）。
- レベル選択：初級・中級・上級。

## 3. Logic (機能・動作ロジック)
- **描画と判定（ここが最重要）**:
- 指の震えを考慮し、なぞる線の「当たり判定（許容範囲）」は非常に広く寛容に設定すること。
- ただし「書き順」と「書く方向」は厳格に判定する。
- **レベル別難易度設定**:
- **初級**: 太いなぞり書きのガイド線と、書き順を示すアニメーションを表示。
- **中級**: 薄い点線のガイドのみ表示。
- **上級**: 真っ白なキャンバスに、書き始めの最初の「点（ドット）」のみを表示。
- **ミス時のフィードバック（間違えたら最初から！）**:
- 判定から外れたり、書き順を間違えた瞬間に、書いた線がポンッと消える。
- 同時に応援キャラクターが登場し、「おしい！もういっかい！」と優しく励ます演出を入れる（失敗をネガティブに感じさせない工夫）。
- **クリア時の報酬体験**:
- **1文字クリア**: 画面いっぱいに大きな「はなまる」が表示され、キャラクターが喜ぶテンポの良い演出。
- **行（または一定数）クリア**: 達成マイルストーンとして、事前生成しておいた「ご褒美シール」を1枚プレゼントし、シール帳UIにストックされる。

それっぽい内容になってきました！

めちゃくちゃ抽象的な表現になってしまうのですが、つくりたいものの、幹・枝・葉があるとすると、

幹
→誰がどんな目的で、どのようなシチュエーションで使うものなのか？（今回でいうと、幼稚園児のひらがな練習アプリで、成長の実感が大事、みたいな部分）

枝
→幹の目的を支える主要な機能や特徴（今回でいうと、初級・中級・上級の3ランクがあって、順に練習するorランダム出題のモードがある、みたいな部分）

ここまでは、ある程度イメージをもっていないと、AIが開発推進力があるゆえに振り回されると思います。逆に

葉
→枝を構成する要素

ここでいうと、