AIで作る宿泊施設LP — 講座概要
プログラミング未経験でも大丈夫!AI に指示を出しながら、宿泊施設のランディングページ(LP)を1ページ作って公開するところまで体験します。
この講座のゴール
- 宿泊施設の LP を 1 ページ完成させる
- インターネット上に公開(デプロイ)する
- AI への指示の出し方を身につける
使うツール
| ツール | 役割 |
|---|
| Google Antigravity | AI 搭載の開発プラットフォーム(今日の主役!) |
| Bun | JavaScript の実行環境・パッケージマネージャー |
| Astro | Web サイトを作るためのフレームワーク |
| Tailwind CSS | HTML にクラス名を書くだけでデザインできる CSS フレームワーク |
| Cloudflare Pages | 作ったサイトを公開するサービス(無料) |
講座の流れ
| ステップ | 内容 | 時間目安 |
|---|
| Step 1 | 環境構築(ツールのインストール) | 30〜45分 |
| Step 2 | HTML・Tailwind CSS・JavaScript の基礎 | 15〜20分 |
| Step 3 | Web ページ・LP の基礎知識 | 10〜15分 |
| Step 4 | Antigravity の使い方を覚えよう | 15〜20分 |
| Step 5 | LP を制作しよう | 60〜90分 |
| Step 6 | デザインの仕上げ | 20〜30分 |
| Step 7 | デプロイ(公開) | 20〜30分 |
| Step 8 | まとめ・次のステップ | 10〜15分 |
前提条件
- Chrome ブラウザ がインストール済み
- Gmail アカウント を持っている
- プログラミングの経験は 不要
困ったときは
- 手を挙げて講師に声をかけてください
- エラーが出たら そのまま画面を見せて もらえると解決が早いです
- 各ステップのページに トラブルシューティング をまとめています