② 体験レッスンのページを作ってもらう | SkillhubAI(スキルハブエーアイ)

② 体験レッスンのページを作ってもらう

このレッスンでできること

コードを書かずに、体験レッスンの募集ページを1枚作ってもらい、ブラウザで開きます。

受講生

ページって、アプリの Codex でも作れたよね?

先生

はい。今度はターミナルで。
フォルダもファイルも、AI が
こむぎの日のフォルダの中に作ります。

見本:前回の録画

録画(早送り)頼んでから、ページができるまで(10倍速)

前回の録画での実測(2026年10月7日・Antigravity CLI 1.3.1・Gemini 3.8 Flash)

頼んでから完成まで:約4分半

作業中に確認を求められた回数:7回(フォルダを作る mkdir と、ファイルを作る確認をふくむ)

頼み方のコツは3つ

書くこと 今回の例
何を作るか 体験レッスンの募集ページ(index.html)
本当の情報 90分・2,500円・定員4名・平日10時と13時
雰囲気 生成りと小麦色、やさしい雰囲気。スマホでも見やすく

あなたの番:ページを作ってもらう

受講生

同じフォルダで頼めばいい?

先生

はい。こむぎの日のフォルダで agy。
agy -c なら、前の会話の続きから頼めます。

お願いカード

「ホームページ」フォルダを作る体験レッスンの募集ページ90分・2,500円・定員4名・平日10時と13時生成りと小麦色・スマホでも見やすく

貼る文(全文)

「ホームページ」というフォルダを作って、その中にパン教室「こむぎの日」の体験レッスン募集ページ(index.html)を作ってください。体験レッスンは90分・2,500円・定員4名・平日10時と13時です。色は生成りと小麦色で、やさしい雰囲気にしてください。スマホでも見やすくしてください。

緑の文字は、これから作るページの中身(HTML)です。読めなくて大丈夫です。数分かかるので、画面の下に esc to cancel と出ている間は待ちます。

こうなっていればOK

気づくこと:頼んでいない情報が入っている

前回のページには、渡していない情報が入りました。パンの名前が「プチミルクパン」になっていたり、お客様の声が作られていたりしました。AI は、足りない情報をそれらしく埋めることがあります。本当とちがう所は、言葉で直してもらえます。

直してもらう文(例)

ページの中の「お客様の声」は本当の声ではないので、消してください。

ここがポイント

お客さんに見せる前に、名前・料金・日時・感想は必ず自分の目で確かめます。ここは AI ではなく、人の仕事です。

つまずきやすいところ

こうなったら:何も起きない・固まったように見える
こうする:ページ作りは数分かかります。画面の下に esc to cancel と出ている間は、AI が作業中です。
こうなったら:index.html がどこにあるか分からない
こうする:/exit で終わってから ls と打ちます。「ホームページ」があれば、ls ホームページ で中を見られます。
こうなったら:ページの写真の所が、絵(イラスト)になっている
こうする:写真を渡していないからです。次のレッスンで、写真も AI に作ってもらいます。

※このレッスンの録画は、前回(2026年10月7日・Antigravity CLI 1.3.1)に撮ったものです。そのときのモデルは Gemini 3.8 Flash でした。Gemini 4 Argon で頼むと、かかる時間・確認の回数・できあがりは変わります。

※黒い画面は、Mac のターミナルで実際に動かして撮ったものです(2026年10月19日の画面は Antigravity CLI 1.4.2、10月7日の画面は 1.3.1)。撮影に使ったのは有料のアカウントで、ほかのアカウントで同じことができるかは確かめていません。Windows でどう見えるかも確かめていません。アカウントの行など、個人の情報は消してあります。撮影用に練習用フォルダを /tmp の下に置いたので、画面のフォルダの場所は、あなたのパソコンとはちがって見えます。

まとめ
  • 「何を・本当の情報・雰囲気」を書いて頼むと、フォルダとページを AI が作る
  • ファイルを作る前にも確認が出る(Allow creation of this file?)
  • AI が埋めた情報は、お客さんに見せる前に自分で確かめる
ページができました!
次のレッスンでは、このページに入れる写真を作ってもらい、最後にひとことで直してもらいます。