「環境は整った。けれど、一体AIに何をどう頼めばいいのだろう？」
第1部では、Antigravityという強力な開発エンジンを導入し、日本語でスムーズに連携できる土台を作りました。いよいよここからが本番です。
第2部のテーマは、「AIとの対話（プロンプト）の極意」。
プログラミングの文法を丸暗記する必要はありません。今日から求められるのは、有能なAIエンジニアに対して「どんな世界を作りたいか」を的確に伝える、ディレクター（監督）としての視点です。
1. 初心者のための「正解モード」を選択する
Antigravityを起動すると、プロ向けの緻密な画面構成に圧倒されるかもしれません。しかし、迷わずに制作を進める秘訣は、「余計な情報を視界から消し、思考をシンプルに保つこと」にあります。
1-1. AIチャット（エージェント機能）の活用
通常の設定では、暗号のようなファイル群が並ぶ複雑な画面が表示されます。これを見た瞬間に「自分には無理だ」とブレーキをかけてしまうのは、ごく自然な反応です。
- 解決策：画面右側にあるAIチャット（またはエージェント）欄を中心に作業を進めましょう。
- メリット：画面は馴染みのあるチャット形式になります。友人にメッセージを送るようなリラックスした感覚で、開発を進めることが可能になります。
1-2. 「ワークフロー」で専用の開発室を作る
「ワークフロー」ボタンを押すことは、PCの中に「特定のアプリ専用の開発室」を設けることを意味します。
- 活用のコツ：新しいアプリを作るたびに、新しいワークフローを立ち上げましょう。過去のプロジェクトの「残り香」がAIを混乱させるのを防ぎ、常にフレッシュな状態でアイデアに向き合ってくれます。
2. 魔法の指示書：AIの真価を引き出す「レシピ」の書き方
AIへの指示（プロンプト）は、一流シェフへのオーダーに似ています。「美味しいもの」という抽象的な頼み方よりも、具体的な素材や味付けを伝えることで、期待を上回るクオリティの回答が返ってきます。
2-1. 指示に込めるべき「3つの黄金比」
- 役割（Role）：「プロのWeb開発者として、初心者に優しいツールを作ってほしい」と、AIの立ち位置を明確にします。
- 機能（Features）：箇条書きで「何ができるか」を伝えます。追加、削除、完了チェックなど、具体的な「動き」を箇条書きにするのがポイントです。
- 制約（Constraints）：「1つのファイルで完結させて」「モダンなデザインで」といった指定に加え、「ReactやTailwind CSSを使って」と一言添えるだけで、仕上がりは一気にプロ級の品質へと引き上げられます。
【コピペで使える】最初の一歩を支える指示文
「プロのフルスタックエンジニアとして、利便性の高い『ToDoリストアプリ』を1つのファイルで作成してください。
【機能の要望】
・タスクをスムーズに入力・追加できること
・完了したタスクはチェックを入れて視覚的に区別できること
・ブラウザを閉じても、次回開いた時にデータが保持されていること（LocalStorageを使用）
【デザインのこだわり】
・モダンで清潔感のある白背景に、落ち着いた濃紺のアクセント
・スマートフォンでも操作しやすいよう、ボタンは角を丸く、余裕のあるサイズに
【制作の進め方】
ファイルの作成から環境準備、テスト、バグ修正まで、すべての工程を主体的に進めてください。準備ができたら『Approve（承認）』で指示を仰いでください。」
3. 制作開始：AIの「思考の冒険」を見守る
指示を送信した瞬間、AIは猛烈な勢いで「計画」を練り始めます。ここからは、ディレクターとしての腕の見せ所です。
3-1. 「Approve（承認）」は信頼の証
AIが「まず画面の骨組みを作り、次に保存機能を実装します。よろしいですか？」とプランを提示してきます。
- エンジニアの助言：提示されたプランがイメージと異なる場合は、遠慮なく「先にメイン画面の構成を考えてほしい」とチャットで割り込んで構いません。納得がいった段階で「Approve」ボタンを押し、AIを実作業へと解き放ちましょう。
3-2. 赤いエラー文字を恐れない
制作中、画面に警告やエラーが表示されることがあります。不安になる瞬間ですが、これこそがAntigravityの真骨頂です。
- 制作時の心得：エラーが出ても、ブラウザを閉じずに見守ってください。AntigravityのAIは、自らのミスに気づき、自律的に修正を行う能力を持っています。チャット欄に流れる「修正中…」という文字は、アプリがより強固に仕上がっていくプロセスなのです。
4. 完成後の磨き上げ：細部へのこだわりが命を吹き込む
AIから「完了しました」という報告が届いた時。そこからが本当の楽しみの始まりです。
4-1. プレビュー画面での検証
自動で立ち上がったプレビュー画面で、実際に文字を打ち込み、ボタンを操作してみましょう。
- チェックの視点：
- 文字の入力や変換はスムーズか？
- スマートフォンで表示した際、指でボタンが隠れてしまわないか？
4-2. 理想に近づける「追加オーダー」
「形にはなったけれど、もう少しこうしたい」という直感を大切にしてください。
- 「フォントをより高級感のある、洗練されたものに変更して」
- 「タスクを削除する際、消える動きにアニメーションを加えて」
こうした細かなやり取りを重ねることで、無機質なプログラムに、独自の「こだわり」という魂が宿ります。
もっと深く理解するための用語集
少し難しく感じた方のために、重要な言葉を噛み砕いて解説します。
| 用語 | 初心者向けのイメージ | 解説 |
|---|---|---|
| MCP | AI専用の「万能アダプター」 | Model Context Protocolの略。AIがあなたのパソコン内のファイルを見たり、Google検索などの外部ツールを使ったりするための共通の接続ルールのことです。 |
| ツール (Tool) | AIが使う「道具」 | AIが自分一人ではできないこと（ファイルの編集、検索、外部連携など）を行うために呼び出す機能のこと。人間が「ペン」や「電卓」を手に取る感覚に似ています。 |
| ワークフロー | 仕事の「手順書」 | 「まずAをして、次にBをして、最後にCで報告する」といった、一連の作業の流れのこと。これをAIに覚えさせることで、複雑な業務を丸ごと自動化できます。 |
| JSON (ジェイソン) | AIとプログラムの「共通言語」 | コンピュータが情報をやり取りする際の「決まった書き方」です。{ "名前": "Antigravity" } のようにカッコを使って整理して書くのが特徴です。 |
| 環境変数 (.env) | 大事なものを入れる「金庫」 | APIキー（パスワードのようなもの）など、プログラムの中に直接書くと危険な「秘密の情報」を、コードとは別の場所に保管しておく仕組みです。 |
| コンテキスト | AIの「短期記憶」 | 今までの会話の流れや、現在開いているファイルの情報など、AIが「今、何を基準に判断すべきか」という背景情報のことです。 |
💡 読み進める上でのヒント 全ての用語を完璧に暗記する必要はありません。実際に手を動かして、AIが自分の代わりにファイルを操作する「感動」を味わううちに、これらの言葉は自然と馴染んできます。
第2部のまとめ：創造主としての第一歩
お疲れ様でした。一行のコードも書くことなく、アイデアを「動く道具」へと変えることができました。これは、ほんの数年前までは数ヶ月の苦行のような学習を乗り越えた者だけが手にできた特権でした。
しかし、実際にアプリが動き出すと、さらなる欲求が湧いてくるはずです。「より美しいイラストを配置したい」「もっと高度な機能を付け足したい」。
最終回・第3部のテーマは：【応用・悩み解決編】エラーもデザインも怖くない。自作アプリを「プロ級」に育てる秘訣
次回、画像生成AIとの連携や、AIの動きが停滞した際の「魔法の合言葉」。クリエイティブな冒険は、まだ始まったばかりです。