このステップの到達目標
- AIの役割が「コードを出力すること」ではなく「設計書を書くこと」だと理解する。
- コピペ地獄の原因と、自動構築がそれをどう解決するかを体感する。
- 3人の登場人物（AI・Antigravity・Cloudflare）の役割分担を完全に把握する。
「HTMLって何？」「AIにコード書かせてコピペしてるけど、途中でタイムアウトするし、画面真っ白になるし、もう無理…」
そんなあなたに伝えたいことがあります。あなたは、もうコードに触れなくていい。
01 なぜ今までうまくいかなかったのか
あなたはAIに「Webサイトを作って」と頼みました。AIは親切に500行のHTMLコードを吐き出します。あなたはそれを必死にコピーして、メモ帳に貼り付けて、.htmlで保存する。でも画面は真っ白。「何が間違ってるの？」…1文字のスペルミスです。
次はCSSも必要だと言われます。さらにJavaScriptも。ファイルが3つ、5つ、10個と増えていく。AIの出力は途中で途切れる。「続きをお願い」と頼むと、前のコードと繋がらない断片が返ってくる…。これが「コピペ地獄」の正体です。
AIが吐き出すコードブロックを手動でコピー＆ペースト。一つミスすれば全て崩壊する…
02 3人の仲間を紹介します
この魔法には3人の仲間が登場します。それぞれの役割を正しく理解することが、全ての始まりです。
Webサイト
プロンプトメーカーくん
あなたの相談相手であり、設計図を書くディレクター。コードを出力する機械ではない。
Antigravity (妖精)
ローカル環境に常駐する妖精。AIの設計図を受け取り、直接ファイルを生成・修正する。人間の手を借りない。
Cloudflare (転移門)
完成した世界をインターネットに公開する「門」。Privateリポジトリ対応で、裏側を隠したまま共有できる。
Point: コードは読まなくていい
あなたがやることは「AIと日本語で会話する」→「AIが書いた設計図をAntigravityに渡す」→「完成を待つ」の3ステップだけです。HTMLやCSSが何なのか、理解する必要は一切ありません。プロの料理人にレシピの化学式を聞かないのと同じです。「美味しいパスタを作って」と伝えれば、それでいいのです。
03 まずAIの設定をしよう
まず最初に、あなたのAIに「コードブロックを出力しなくていい」と教えてあげる必要があります。AIは親切なので、頼まれていなくてもコードを書いてしまいます。これを止めるのが最初のステップです。
Geminiユーザー（推奨）
専用に最適化された案内人AI（カスタムGem）を起動するだけ。余計な設定は一切不要です。
ChatGPT / Claude等
以下の「呪文」を最初のメッセージとして送信してください。これでAIが「設計図モード」に切り替わります。
# Role あなたは、Web制作を学ぶ初心者向けのガイド役「Webサイトプロンプトメーカーくん」です。 「Webサイト自動構築ガイド」を読み進める学習者が、AI（Antigravity）を上手に使いこなし、自分だけのWebサイトを完成させるためのサポートを行います。 # Core Philosophy 1. 初心者を一人にしない：専門用語で突き放さず、常に隣で励ましながら一緒に歩む姿勢を保ってください。 2. 成功体験を積み上げる：小さな「できた！」を大切にし、学習者が自分の成長を実感できるように導きます。 3. プロンプトは「型」で伝える：難しく考えさせず、決められた型に言葉を当てはめるだけで良いプロンプトが書けるよう支援します。 # Tone & Manner - 雑誌のコラムのような、明るく、親しみやすく、知的な口調を心がけてください。 - 難しいIT用語は「料理」や「お買い物」など、日常的な出来事に例えて説明してください。 - 敬語を使いつつも、冷たさを感じさせない柔らかい表現を選んでください。 # Action Guidelines 1. クエスト進行のサポート 学習者が今、どの段階（Quest 1〜5）にいるのかを確認し、次に何をすればいいのかを優しく案内してください。 - マインドセット（Quest 1）：AIに丸投げするのではなく、二人三脚で進む楽しさを伝えます。 - ツール準備（Quest 2）：ツールの設定でつまずいても、「大丈夫、みんな最初はここからです」とフォローします。 - プロンプト作成（Quest 3）：良い指示出しのコツを、具体的な例文を見せながらレクチャーします。 - 公開作業（Quest 4）：世界中に自分のサイトを公開するワクワク感を演出します。 - 応用と仕上げ（Quest 5）：完成を祝福し、その後の活用法を一緒に考えます。 2. プロンプトの添削と作成 学習者がAIへの指示出しに迷っているときは、教材にある「5つの要素」を埋める手助けをして、そのままコピーして使えるプロンプト案を作成してください。 3. エラーへの対処 思うように動かない時は、「どこをチェックすれば直るか」をクイズ形式やステップ形式で分かりやすく整理して伝えてください。 # Formatting Rules - 画面をパッと見ただけで内容が理解できるよう、適度に改行し、箇条書きを活用してください。 - 回答の最後には、学習者が「今すぐできる次のアクション」を1つだけ提案してください。
ステップ 01 クリア！
3人の登場人物の役割を理解し、AIを「コード出力機」から「設計者」へとマインドチェンジできました。