今日のゴール：あなただけのWebページを完成させる
ここではAIに話しかけるだけで、あなただけのオリジナルWebページを作ります。完成品はインターネット上で家族や友人に見せることもできますよ。
前回の記事「Antigravityを触ってみよう」で画面の操作を覚えた方は、今日は実際に一つの作品を完成させましょう。
作るもの：趣味の紹介ページ
今回は「自分の趣味を紹介するWebページ」を作ります。内容はあなたの好きなものに変えてください。ここでは例として「家庭菜園」を趣味にします。
ステップ1：プロジェクトを作る
Antigravity（idx.google.com）にログインし、新しいプロジェクトを「HTML」テンプレートで作成します。
ステップ2：AIに基本構造を作ってもらう
AIチャットに以下のようにお願いします。
あなた：「家庭菜園の趣味を紹介するWebページを
作ってください。以下の内容を含めて：
・ページタイトル：「はなこの家庭菜園日記」
・自己紹介文（家庭菜園歴3年の主婦）
・今育てている野菜のリスト
（トマト、きゅうり、ナス、バジル）
・最近の収穫の感想
・背景は緑を基調にした優しい色合い
・スマートフォンでも見やすくしてください」
AIが数秒でHTMLコードを生成し、右側のプレビューにあなたのWebページが表示されます。
ステップ3：気に入らない部分を修正する
完成したページを見て「もう少しこうしたい」と思ったら、AIに追加で指示するだけです。
あなた：「文字をもう少し大きくしてください。
あと、ページの一番下に
『お問い合わせはメールで』と追加して。」
あなた：「野菜のリストを表にして、
種まき時期と収穫時期も追加してください。」
AI：「表形式に変更しますね。
| 野菜 | 種まき時期 | 収穫時期 |
|------|-----------|---------|
| トマト | 3月 | 7〜8月 |
| きゅうり | 4月 | 6〜8月 |
| ナス | 3月 | 7〜9月 |
| バジル | 4月 | 6〜10月 |
この内容をHTMLの表に反映します。」
ステップ4：デザインをもっと素敵にする
あなた：「ページの上部に大きなヘッダーを追加して、
『はなこの家庭菜園日記』と表示してください。
ヘッダーの背景色は深い緑、文字は白にして。」
あなた：「各セクションの間に線を入れて区切りを
わかりやすくしてください。
あと、角を丸くしたカードデザインに
してもらえますか？」
デザインのことがわからなくても、「こんな感じにしたい」と日本語で伝えればOK。AIがデザインの専門知識を使って、きれいに仕上げてくれます。
ステップ5：完成品を確認する
プレビュー画面に表示されているページが、あなたの作品です。スクロールして全体を確認してみてください。
完成したページの構成：
┌─────────────────────────────┐
│ はなこの家庭菜園日記 │ ← ヘッダー
├─────────────────────────────┤
│ 👩🌾 自己紹介 │
│ 家庭菜園歴3年の主婦です... │
├─────────────────────────────┤
│ 🌱 育てている野菜 │
│ トマト、きゅうり、ナス... │
├─────────────────────────────┤
│ 📝 最近の収穫日記 │
│ 先週、初めてのナスが... │
├─────────────────────────────┤
│ 📧 お問い合わせ │
└─────────────────────────────┘
もっとアレンジするアイデア
基本が完成したら、こんな追加リクエストも試してみてください。
「天気によって背景色が変わるようにして」
「写真を表示する場所を追加して」
「ページ内をスムーズにスクロールするナビゲーションを付けて」
「訪問者数を表示するカウンターを付けて」
AIが対応できる範囲で、どんどん進化させることができます。
全体を振り返って — AIと一緒なら、何でも作れる
今日、あなたはプログラミングの知識ゼロの状態から、自分だけのWebページを完成させましました。これは本当にすごいことです。
AIに話しかけるだけで、あなたのアイデアが形になります。この体験を通じて、「自分にもできるんだ」と感じていただけたなら嬉しいです。
次の記事では、プログラマーでなくてもAI開発ツールを活用できるさまざまな方法をご紹介します。
個人開発12年の現場で実感したこと
線引きするときの3つの判断軸
- 失敗時の影響が金銭やユーザー体験にどれだけ波及するか
- 復旧オペレーションが明文化されているか
- 観測ログから人間が再現できる粒度に整っているか