Step 8：まとめ・次のステップ
おつかれさまでした！LP を作って公開するところまで完了しました。
今日やったことの振り返り
| ステップ | やったこと |
|---|---|
| Step 1 | Antigravity・Bun をインストールして開発環境を整えた |
| Step 2 | HTML・Tailwind CSS・JavaScript の基���を学んだ |
| Step 3 | Web ページと LP の基礎知識を学んだ |
| Step 4 | Antigravity で AI に指示を出す方法を覚えた |
| Step 5 | 8 つのセクションを AI に作ってもらった |
| Step 6 | デザインを統一してスマホ対応した |
| Step 7 | Cloudflare Pages にデプロイして公開した |
AI への指示のコツ（まとめ）
うまくいったパターン
- セクション単位で頼む — 一度に全部ではなく、少しずつ
- 具体的に伝える — 「いい感じに」ではなく「青いボタンで、角丸で」
- 直してほしいところを明確に — 「ここのフォントサイズを大きくして」
- 参考イメージを伝える — 「和風」「モダン」「シンプル」など
困ったときの万能フレーズ
今の状態を確認して、何がおかしいか教えてエラーが出ました。（エラーメッセージを貼り付け）これを直して今のデザインをもっと〇〇にして次のステップ
もっと LP を良くしたい
- アニメーション追加 — 「スクロールしたらセクションがふわっと表示されるようにして」
- フォーム追加 — 「お問い合わせフォームを追加して」
- 多言語対応 — 「英語版のページも作って」
- SEO 対策 — 「SEO に最適化して」
他のサイトも作ってみたい
AI を使えば、同じ要領で様々なサイトが作れます：
- レストランの LP
- 美容院の LP
- イベント告知ページ
- ポートフォリオサイト
Web 開発をもっと学びたい
| リソース | 内容 |
|---|---|
| Astro 公式ドキュメント | Astro の詳しい使い方 |
| Tailwind CSS 公式 | Tailwind CSS のクラスリファレンス |
| MDN Web Docs | HTML/JavaScript のリファレ��ス |
| Google Antigravity Docs | Antigravity の詳しい使い方 |
最後に
今日の体験で、AI に指示を出してWebサイトを作る という流れを一通り経験できました。
プログラミングの知識がなくても、AI への伝え方次第で本格的な Web サイトが作れる時代です。ぜひこのスキルを活用して、自分のアイデアを形にしてみてください。
おつかれさまでした！