AIを使ったWeb制作において、アウトプットの品質を最も大きく左右するのが「AIへの指示の出し方（プロンプト）」です。
「思ったようなデザインにならない」「動かないコードが出力された」という悩みの多くは、指示文をほんの少し変えるだけで解決します。この記事では、AIコーディングアシスタント「Antigravity」の性能を最大限に引き出し、開発効率を上げるためのプロンプト作成テクニックを解説します。
1. なぜプロンプトの工夫が重要なのか？
AIは非常に優秀ですが、人間の頭の中にある「完成イメージ」を直接読み取ることはできません。「かっこいいサイトを作って」という曖昧な指示では、AIは一般的な無難なデザインを出力するしかありません。
AIに対して「目的」「対象」「満たしたい条件」を明確に言語化して伝えることが、意図した通りのコードを素早く手に入れるための鍵となります。
2. Antigravityに的確な指示を出す3つの基本ルール
指示文を書くときは、以下の3つのルールを意識すると劇的に出力クオリティが向上します。
2.1. ルール①: 役割（ロール）を明示する
指示の冒頭で「あなたはプロのWebエンジニアです」や「あなたはUIデザイナーです」とAIに役割を定義します。これにより、AIは関連する専門知識を優先的に使って回答を組み立てるようになります。
2.2. ルール②: 完成図の条件を箇条書きで具体化する
文章でダラダラと要望を書くよりも、「何を表示し、どのような色やフォントを使い、どんな動きをするか」を箇条書きで分割して伝えます。AIは箇条書きを1ステップずつ処理するため、要望の漏れが少なくなります。
2.3. ルール③: エラーやデザイン崩れは「今のコード」を添えて伝える
「ボタンが崩れたので直して」と伝えるだけではAIも対応に困ります。「現在このようになっています（HTML/CSSコードを添付）。スマホ幅の時にボタンがはみ出てしまうので、横並びから縦並びに切り替えるCSSに修正してください」のように、現状と理想のギャップを明確に伝えます。
AIとの対話で素晴らしいサイトが完成したら、いよいよ公開です。ブログ運営やサーバーの管理性を重視するなら、月数百円で運用可能な「Hostinger」のような信頼できるレンタルサーバーを事前に確保しておくとスムーズです。
3. 実戦で使える！Web制作プロンプトテンプレート
以下は、新規のホームページ制作やLP制作でそのまま使えるプロンプトテンプレートです。コピーして要望に合わせて書き換えてご活用ください。
4. まとめ：対話を重ねてコードを研ぎ澄ます
AIは一度の指示で完璧なものを出すとは限りません。むしろ、最初に出力されたコードをベースに、「ここをもう少し白くして」「このテキストの位置を20px下げて」といった「追加の対話（フィードバック）」を2〜3回繰り返すことで、完成度の高いWebサイトに仕上がっていきます。
次は、もしコードが思い通りに動かないエラーやバグに遭遇した際の、「Antigravityを使った解決手順」を学びましょう。