初級五：完全プロジェクト実践
本章のガイド
1. "Happy Path" を拒否：コアチェーンの完善
多くの初心者がプロトタイプを作る時、往々にして「Happy Path」（最も理想的なルート）しか作りません：ユーザーがクリック → API が正常に応答 → 結果を表示。 しかし現実世界では、物事はそう順調にはいきません。プロトタイプを本当のプロダクトのように見せるために、次のいくつかの「見えない」部分を考慮する必要があります。
1.1 「待ち状態」と「フィードバック」の追加
ユーザーが「コピー生成」をクリックした時、AI が応答するまでに数秒かかることがあります。画面に何の反応もなければ、ユーザーはプログラムが壊れたと思います。 AI IDE に Loading 状態を追加してもらいましょう：
プロンプト例： 「生成ボタンをクリックした時、ボタンを『生成中...』に変更してクリック不可にし、同時に右側の領域にローディングアニメーションを表示してください。API が結果を返した後にのみ、元の状態に戻してください。」
1.2 「失敗」と「異常」の処理
API Key が期限切れになる可能性もあり、ネットワークが切断される可能性もあります。 AI IDE にエラー処理を追加してもらいましょう：
プロンプト例： 「API リクエストが失敗した場合、コンソールに直接エラーを出すのではなく、ページ上部に赤いプロンプトボックス（Toast）を表示し、ユーザーに『生成に失敗しました。後でもう一度お試しください』と伝え、ユーザーが再度生成をクリックできるようにしてください。」
1.3 会話履歴の永続化
AI とのやり取りの中で、会話内容を保存し、ユーザーが履歴を振り返り、以前の交流を続けられるようにする必要があります。現段階ではデータベースを導入せず、次のような軽量ソリューションを選択できます：
ストレージソリューションの選択：
| ソリューション | 適用シーン | 特徴 |
|---|---|---|
| LocalStorage | 純フロントエンドプロジェクト、ユーザーデータをブラウザに保存 | 実装がシンプル、リロードしても消失しない、デバイス間の同期不可 |
| JSON ファイル | ローカルプロトタイプ、データをファイル形式で保存 | 構造が明確、デバッグしやすい、手動編集可能 |
| TXT ファイル | 最もシンプルなソリューション、テキスト内容を素早く記録 | フォーマットが自由、互換性が高い |
会話内容の例： 保存された会話履歴には通常、次の内容が含まれます：
[
{
"role": "user",
"content": "BluetoothイヤホンのTikTok販売コピーを生成して",
"timestamp": "2026-01-20 10:30:00"
},
{
"role": "assistant",
"content": "【Bluetoothイヤホンおすすめコピー】\n\n🎧 レイテンシフリー、没入型リスニング体験\n\nみんな！このBluetoothイヤホン本当に最高👇\n\n✅ 40dBアクティブノイズキャンセリング、一瞬で音楽の世界へ\n✅ 30時間の超長バッテリー、1週間の通勤で充電不要\n✅ 通話クリアさは対面と同じ、地下鉄の騒音でも会話可能\n✅ 半インイヤー設計、長時間着用でも痛くない、圧迫感なし\n\n💰 期間限定キャンペーン、下のリンクをクリックしてゲット！",
"timestamp": "2026-01-20 10:30:05"
}
]実装プロンプト：
「会話履歴の保存機能を実装してください。ユーザーと AI の会話記録を JSON ファイルとして保存（または LocalStorage を使用）することをサポートしてください。ページに入るたびに自動的に履歴会話を読み込み、個別の会話記録の表示と削除をサポートしてください。」
2. 魂を注入：リアルデータの模擬（Mock Data）
空っぽのページは人を感動させられません。想像してみてください、「EC素材ワークベンチ」を他人に見せようとして、履歴記録が空っぽ、あるいは「test / test / test」の一行しかない場合。 デモンストレーション効果を最高にするために、リアルなデータを「偽造」して、プロトタイプが半年間運営された本当のプロダクトのように見せる必要があります。
2.1 AI にデータ構造を設計させる
各フィールドが何と呼ばれるべきか（例えば name か title か）を自分で考える必要はありません。これは完全に AI に任せられます。
あなたは 業務シーン を AI に伝えるだけでいいです：
プロンプト例： 「TikTok EC素材ワークベンチのプロトタイプを作っています。 『商品タスク』を記述するための JSON データ構造を設計してください。 このタスクには：商品の基本情報（名前、カテゴリ）、入力素材（画像リンク）、および AI が生成した結果（タイトル、コピー、ポスター画像）が含まれるべきです。 JSON の例を直接ください。」
AI はあなたの説明に基づいて、productName、generatedContent のようなフィールドを自動的に考えてくれます。
2.2 AI に「リアルな」データを批量生成させる
データ構造ができたら、次は AI に「穴埋め」をさせ、リアルに見えるデータを批量生成させます。
プロンプトのコツ： AI に「データを生成して」とだけ伝えるのではなく、インターンにタスクを割り当てるように、業務背景と内容要件を伝える必要があります：
- 業務背景：AI に私たちが「TikTok EC」をやっていることを伝え、商品タイトルは目を引くものに（例えば「スタイルアップ神器」「学生必須」）、コピーは口語体にする
- 画像要件：プロトタイプを美しく見せるため、画像はモノクロのプレースホルダーではなく、ランダムなカラフルな風景画や実物写真が望ましい
プロンプト例： 「先ほど設計した構造に基づいて、10 件のリアルな模擬データを生成してください。 （注意：必ずしも JSON 形式である必要はありません。フロントエンドを書いているなら JavaScript 配列として生成させてもいいし、Python を使っているなら List として生成させても構いません。）
業務シーンの要件：
- ここは総合百貨店で、商品は「レディース」「デジタル」「コスメ」の 3 カテゴリにまたがると仮定する。
- 生成されたタイトルとコピーは非常に「TikTok風」にする：例えばタイトルには Emoji (🔥, ✨) を含め、コピーは「最高」「実測おすすめ」といった口調にする。
- 画像フィールド：
https://picsum.photos/seed/{random_id}/300/400という形式を統一して使用し、各画像が異なるようにする。」
生成された Mock Data の例：
export const mockProductTasks = [
{
id: 'task_001',
name: '夏用フレンチレトロ花柄ワンピース',
status: 'completed',
input: {
category: 'レディース',
features: ['ウエストマーク', 'スタイルアップ', 'エレガント'],
originalImage: 'https://picsum.photos/seed/dress_input/300/400'
},
output: {
generatedTitle: '✨誰が着ても可愛い！このフレンチ花柄ワンピース本当に最高🔥',
generatedCopy:
'みんな！このワンピース本当にスタイルアップ効果抜群！ウエストマークが最高で、着るとすぐウエストが見えます。生地も通気性があって、夏に着ても全く蒸れません。デートやお買い物にピッタリ！👗',
generatedPosterImage: 'https://picsum.photos/seed/dress_output/300/400'
},
createdAt: '2026-01-20T10:00:00Z'
},
{
id: 'task_002',
name: '超強ノイズキャンセリング Bluetooth イヤホン Pro',
status: 'completed',
input: {
category: 'デジタル',
features: ['ノイズキャンセリング', '超長バッテリー', '低レイテンシ'],
originalImage: 'https://picsum.photos/seed/tech_input/300/400'
},
output: {
generatedTitle: '🎧 ついに見つけた！このイヤホンのノイズキャンセリングすごすぎ！🔇',
generatedCopy:
'これを着けると、世界が一瞬で静かになります。音質も最高で、音楽を聴くとまるで現場にいるみたい。バッテリーも申し分なく、1回の充電で1週間使えます！学生必須アイテム！',
generatedPosterImage: 'https://picsum.photos/seed/tech_output/300/400'
},
createdAt: '2026-01-21T14:30:00Z'
}
// ... その他のデータ
]2.3 （応用）LocalStorage を使って「擬似的な追加・削除・更新」を実装
先ほど生成した「模擬データ」をただ見るだけでなく、削除も修正もでき、さらに新しく生成したタスクがページをリロードしても残るようにしたい場合は、LocalStorage と組み合わせることができます。
プロンプト例： 「データストレージ機能を実装してください。
localStorageから優先的にデータを読み込む。localStorageが空の場合、先ほど生成した Mock データで初期化し、それらをlocalStorageに保存する。- 同時に
addProductTaskとdeleteProductTask関数を書き、毎回の操作後にlocalStorageを同期して更新する。」
このステップにより、プロトタイプは「記憶」を持ち、ユーザー体験はほぼ本物のプロダクトと変わりません。
3. フィードバックの収集と迅速な反復
部屋に閉じこもっていては良いプロダクトは作れません。今、あなたのプロトタイプは「コア機能」+「完全なチェーン」+「デモデータ」を備えています。いよいよ他人に見せましょう。
3.1 誰にテストしてもらう？どうテストする？
- 友達や同僚に頼む：技術を理解している必要はなく、ちょっと使ってみてもらうだけでOK
- 誘導せずに観察する：「ここをクリックして」と言うのではなく、彼らがどこをクリックするかを見る。ボタンが見つからなければ、デザインに問題があるということ
- 「オズの魔法使い」法：AI がまだ接続できていなければ、裏側（またはデータベース）で手動でデータを修正して AI の戻り値を模擬し、ユーザーがこの機能を必要としているかを先に検証する
3.2 バグと不満への対応
- レイアウト崩れ：異なる画面サイズで崩れる可能性がある
- アクション：スクリーンショットを撮って AI IDE に送る → 「この画面幅で崩れています。修正してください。」
- 操作が煩わしい：「このプロセスは複雑すぎる」
- アクション：提案を AI IDE に伝える → 「ユーザーがアップロードしてから生成するまで遅すぎると感じています。ワンクリック生成に変更できませんか？」
- 新機能の要望：「この機能があればいいのに」
- アクション：コアかどうかを評価し、コアなら AI に簡易版を迅速に実装させる
覚えておいてください：この段階では、AI はあなたの最良の修正アシスタントです。問題を見つけるのはあなたの役割で、コードの修正は AI に任せましょう。
4. 🎓 ステージ最終課題：あなたの「卒業制作」を完成させよう
おめでとう！あなたは「ニーズ」から「プロトタイプ」、そして「AI 統合」までの全プロセスを歩み終えました。いよいよ最終成果を披露する時です。
今回の最終課題は「EC素材ワークベンチ」に限定されません。 自分の興味や業界のバックグラウンドと組み合わせて、唯一無二の AI プロダクトプロトタイプを作り上げる必要があります。
テーマ選びと要件
産業多分類シーン方向リファレンス から最も近いシーンを一つ選ぶか、自分のアイデアに基づいて全く新しいシーンを構想してください。
プロジェクトは前の章で学んだすべての内容を総合的に活用する必要があります：
- プロトタイプの構築：フロントエンド技術を使って美しく使いやすいインターフェースを構築する
- ニーズの制御：大いに全てを求めるのではなく、コア機能の論理的なループを完成させる
- API の統合：リアルな AI モデル（LLM/VLM など）を統合し、アプリケーションに真のインテリジェンスを付与する
- 遊べるアプリケーションを実装する：静的ページではなく、データフローとインタラクションフィードバックのある動的アプリケーション
課題の成果物
最終的に以下の 2 つを提出する必要があります：
- 完全なプロトタイプアプリケーション：デプロイされてオンラインで動作、またはローカルで実行可能で、完全な使用チェーンを備える
- 30 秒のデモ動画：アプリケーションのシーンを簡単に紹介し、コア機能の実際の操作をデモンストレーションする動画
これは Stage 1 の最後の戦いです。以下のリストに従って作品をチェックしてください：
次のステップ
最終課題が完了したら、あなたは「AI アプリケーションプロトタイプを独力で開発する」能力を備えています。 次の Stage 2 では、より複雑なフルスタック開発に深く入り込み、このプロトタイプを、データベースがあり、ユーザーシステムがある、本当にオンラインできる商業レベルのアプリケーションにする方法を学びます。
次のステージでお会いしましょう！