プログラミング未経験でも大丈夫です。今日のゴールは「完璧に理解すること」ではなく、「AI と一緒に、何か 1 つを作れた」という体験です。わからないところは当日、講師が画面を見ながら一緒に進めます。むずかしいカタカナ語が出てきても、身構えなくて大丈夫。用語は覚えなくても、その場で AI に聞けます。肩の力を抜いて、一緒に楽しみましょう。
🎯 この講座でできること
GitHub のアカウント作成から始まり、Antigravity IDE で AI と一緒にコードを書いて、最終的に自分の作品を世界に公開するまでを 3 時間で。
📅 3 時間（180分）構成
| 部 | 時間 | 内容 |
|---|---|---|
| 第0部 | 7分 | Antigravity って何？（位置づけ＋IDE / CLI / SDK の整理／今日は IDE 版を使う） |
| 第1部 | 43分 | GitHub＆バージョン管理の「考え方」（ブラウザだけで完結：なぜ必要か → アカウント作成 → リポジトリ作成） |
| 休憩 | 10分 | — |
| 第2部 | 95分 | Antigravity で作る＋Git を体験（インストール → AI で作る → デバッグ →「作る→commit→壊す→戻す→push」） |
| 第3部 | 20分 | 実務ミニ演習（個人情報なしの"仕事で使える"1本を作って公開） |
| クロージング | 5分 | まとめ＋任意課題（自由創作・GitHub Pages 公開・Docker）の案内 |
※ 合計 180 分。自由創作・GitHub Pages 公開・Docker は「講座後の任意課題（宿題）」としてご案内します。
🙋 こんな方におすすめ
プログラミングをやったことがなくても大丈夫。「AI と一緒に、はじめてのものづくりを体験してみたい」という方のための講座です。むずかしい知識は必要ありません。
🎓 受講が終わると、こうなれます
3 時間後、あなたの手元には「自分で作って公開した作品」と「AI と一緒にものを作った経験」が残ります。次の 6 つができるようになった状態がゴールです。
- Google アカウントの準備（Antigravity ログイン用）
- 普段使う PC を準備（Mac / Windows どちらでも OK）
- 安定したネット環境
当日までに準備しておくこと
次の 5 つを準備しておくと、当日いちばん大事な「AI とものづくり」の時間をたっぷり使えます。もし準備が間に合わなくても、当日は講師が一緒にセットアップしますので、できる範囲で大丈夫です。
-
① Google アカウント（Antigravity のログインに使います）
Antigravity は Google アカウントでログインして使います。お持ちでない方は accounts.google.com から無料で作成できます。普段 Gmail や YouTube を使っている方は、そのアカウントがそのまま使えます。 -
② GitHub アカウント（当日いっしょに作るので、なくても OK）
作ったコードを保存・公開するためのサービスです。第1部（§1-3）で、作り方から丁寧に説明します。先に作っておきたい方は github.com から無料で登録できます。 -
③ Antigravity のインストール（事前にやっておくと当日スムーズ）
今回メインで使う、Google の AI コーディングアプリです。くわしい手順は第2部（§2-1）で説明しますが、ダウンロードとインストールを先に済ませておくと、当日すぐに操作から始められます。時間がなければ当日でも大丈夫です。 -
④ Git のインストール（Antigravity が裏で使う縁の下のツール）
Antigravity の「保存して GitHub に送る」機能は、裏側で Git（ギット）という仕組みを使います。準備は インストーラをダウンロードしてダブルクリックしていくだけで、黒い画面（ターミナル）は一切使いません。うまく入っているか不安でも、当日その場で確認・サポートしますのでご安心ください。 -
⑤ PC・ブラウザ・ネット環境
Mac・Windows どちらでも参加できます。Chrome など普段使えるブラウザと、動画会議とダウンロードに耐える安定したネット回線（できれば有線 LAN か安定した Wi-Fi）をご用意ください。3 時間の講座なので、充電器も接続しておくと安心です。
会社支給の PC は、アプリのインストールが制限されている場合があります。Antigravity と Git をインストールしてよいか、事前に情報システム部門（IT 部門）へご確認ください。難しい場合は個人の PC での参加をおすすめします。
上の準備は「できていれば当日スムーズ」というものです。未対応の項目があっても、当日はすべて講師が画面を見ながら一緒にセットアップします。「自分にできるか不安」という方こそ、そのままお越しください。
Antigravity は Google の「AI と一緒に開発する」プラットフォーム
Antigravity（アンチグラビティ）は、Google が 2025 年 11 月 18 日に公開した、エージェント型の開発プラットフォームです（同社の AI「Gemini 3」と同時に発表されました）。VS Code をベースにしていて、個人は無料プレビューで使えます（Mac / Windows / Linux 対応）。ひとことで言うと、「AI と会話しながらアプリを作れる、Google の新しい開発環境」です。
Antigravity は 1 つのプラットフォーム（土台）で、その中に 3 つの入り口があります。「Antigravity 本体」と「Antigravity IDE」という別の製品が 2 つあるのではなく、同じ Antigravity を、どの入り口から使うかの違いです。今日はこの中の IDE 版を使います。
今日使うアプリ（画面で操作）
黒い画面で操作（上級者向け）
プログラムに組み込む（上級者向け）
入り口の違いを表で確認（IDE と CLI）
| 項目 | Antigravity IDE（本講座で使う） | Antigravity CLI（参考） |
|---|---|---|
| 形態 | デスクトップアプリ（VS Code 風） | ターミナルで動くコマンドラインツール |
| 操作 | マウス＋メニュー＋AI チャット欄 | キーボード入力のみ |
| 入門者の入りやすさ | ◎（画面が見える） | △（黒い画面に慣れが必要） |
| 主な使い道 | 「AI と一緒にアプリを作る」 | 決まった作業の自動化など（上級者向け） |
- 画面のボタンやメニューで操作できる
- AI チャット欄に日本語で話しかけるだけ
- 画面が見えるので、初めてでも安心
- 黒い画面（ターミナル）で操作する
- 文字を打ち込んで指示を出す
- 慣れが必要で、初めての方には少し難しい
本講座では Antigravity の IDE 版をメインに使います。CLI 版・SDK は「実はこういう入り口もあるんですよ」レベルで触れる程度。「Antigravity の中の、IDE 版という入り口を使う」と覚えておけば大丈夫です。
1-1. GitHub とは何か（12分）
資料.docx → 資料_最終.docx → 資料_最終_修正.docx → 資料_最終_本当にこれで最後.docx …。
気づけばファイルが増殖して、どれが最新か分からなくなる——この「最終版_v2 問題」、多くの人が一度は経験します。この問題を根本から解決してくれるのが、これから学ぶ「バージョン管理」と、その代表的なサービス「GitHub」です。
GitHub（ギットハブ）は、作ったプログラム（コード）を インターネット上に保存・公開・共有できる、世界中で使われている無料のサービスです。世界中の開発者やアプリを作る人たちが、日々このサイトに自分の作品を置いています。
イメージとしては 「コード版の Google ドライブ」＋「だれでも見られる図書館」が近いです。自分のファイルを安全に保管できるだけでなく、公開すれば世界中の人に見てもらえて、逆に他の人の作品を読んで学ぶこともできます。
なぜ GitHub を使うの？
- 作品が消えない：PC が壊れても、コードはインターネット上に残ります（バックアップ）
- 世界に公開できる：作ったアプリやページを、URL ひとつで誰にでも見せられます
- 変更の履歴が残る：「いつ・どこを直したか」が記録され、前の状態にも戻せます
- Antigravity と相性が良い：今日使う Antigravity は GitHub と連携でき、ボタン操作だけで保存・公開できます
GitHub は「プロの開発者だけのもの」と思われがちですが、無料で誰でも使えます。今日は黒い画面（ターミナル）を使わず、ブラウザと Antigravity のボタン操作だけで GitHub を扱っていきます。
⬇ ダウンロード＝clone
誰でも見られる
1-2. バージョン管理のしくみ（8分）
GitHub を使うと、さっきの「最終版_v2 問題」が起きません。そのカギが 「バージョン管理」という考え方です。むずかしく聞こえますが、ゲームのセーブとまったく同じ。次の 3 段階のイメージだけ、先につかんでおきましょう。
手元でいじっている状態
セーブポイントを作る
クラウドにアップロード＝GitHub に送る
- commit（コミット）＝ ゲームのセーブ。「ここまでの状態」に名前を付けて記録します。いつでもこのセーブポイントに戻れます。
- push（プッシュ）＝ クラウドセーブにアップロード。手元のセーブを GitHub（クラウド）に送り、PC が壊れても残る状態にします。
この 「セーブ（commit）→ クラウドにアップロード（push）」のくり返しが、バージョン管理の正体です。だから「どれが最新か分からない」がなくなります。この 2 語の比喩は、この先ずっと同じ意味で使います。
「push」と「GitHub Pages で公開」は別物です
ここで、あとで混乱しやすいポイントを 1 つだけ先に整理します。どちらも "公開" という言葉が使われがちですが、意味はまったく違います。
| やること | 意味 | たとえると |
|---|---|---|
| push（プッシュ） | コードを GitHub に送る＝保管・共有（バックアップ） | クラウドにファイルを保存する |
| GitHub Pages で公開 | そのコードを誰でもブラウザで見られる Web サイトにする | お店をオープンして看板を出す |
今日メインでやるのは push（GitHub に保管する）までです。「Web サイトとして世界に見せる」GitHub Pages 公開は、講座後の任意課題（宿題）で紹介します。「push ＝ 保管」「Pages ＝ 公開」は別物、とだけ頭の片隅に置いてください。
1-3. アカウントを作る（8分）
ここから実際に GitHub のアカウントを作ります。すべてブラウザ（Chrome など）の中で完結します。画面の見た目は時期によって少し変わることがありますが、大きな流れは次のとおりです。
案内に沿って順番に入力します。ユーザー名は世界で 1 つだけの名前で、あとで作品ページの URL の一部にもなります（例：github.com/あなたの名前）。本名でなくて構いません。英数字で、覚えやすいものにしましょう。
登録したメールアドレスに数字のコードが届きます。それを画面に入力すると、本人確認（メール認証）が完了し、アカウントが使えるようになります。
登録の途中や後で「二段階認証」の設定をすすめられることがあります。これはログイン時にスマホでも確認して安全性を高める仕組みです。設定する場合は、スマートフォンを手元に用意しておいてください。当日は設定してもしなくても、講座は進められます。
1-4. リポジトリとは何か（7分）
リポジトリ（英語で repository、略して「レポ」とも呼びます）とは、1 つのプロジェクトのファイルをまとめて入れておく「箱」のことです。「アプリ 1 つ＝リポジトリ 1 つ」と考えると分かりやすいです。今日つくる作品も、それぞれ専用のリポジトリに入れていきます。
Public と Private の違い
- Public（パブリック＝公開）：世界中の誰でも中身を見られます。作品を見せたいときはこちら。今日は基本的に Public を使います。
- Private（プライベート＝非公開）：自分（と、招待した人）だけが見られます。人に見せたくないものはこちら。
※ Public にしても、あなたの GitHub のパスワードやアカウントが他人に触られるわけではありません。公開されるのは「箱の中に入れたファイル」だけです。
README（リードミー）とは
リポジトリを作ると、多くの場合 README.md という説明ファイルが一緒に入ります。これは そのプロジェクトの「表紙・説明書」にあたるもので、「これは何のアプリか」「どう使うか」を書いておく場所です。GitHub 上では、この README の内容がリポジトリのトップページに大きく表示されます。まずは「表紙のファイル」くらいの理解で十分です。
1-5. ブラウザでリポジトリを作る（8分）
ここでは練習用に demo-hello という名前のリポジトリ（自分専用のコード置き場）を、github.com 上に作ってみます。この作業はすべてブラウザ（Chrome など）の中だけで完結します。アプリのインストールは不要で、まだ Antigravity を入れていなくても進められます。
GitHub にログインした状態で、画面右上の 「＋」を押し、出てきたメニューから 「New repository（新しいリポジトリ）」を選びます。
Repository name（リポジトリ名）の欄に
demo-hello と入力します。名前は英数字で、あとから見て分かるものにしておきましょう。
Public（パブリック＝公開）を選びます。§1-4 で見たとおり、公開されるのは「箱の中に入れたファイル」だけです。人に見せたくないものを入れる場合は Private を選びます。
「Add a README file（README ファイルを追加）」にチェックを入れます。これで、箱の中に最初から「表紙のファイル（README）」が 1 枚入った状態で作られます。
最後にページ下部の緑色の 「Create repository（リポジトリを作成）」ボタンを押します。これで、あなた専用のリポジトリ（コード置き場）が GitHub 上にできあがります。
おめでとうございます。これで、あなた専用のリポジトリ（コードを入れる箱）がインターネット上に用意できました。ここまでは ブラウザだけで完結する作業でした。
この箱の 中を実際に触って、ファイルを作ったり書き換えたりするのは、AI コーディングアプリ「Antigravity」を入れたあとです。次の 第2部で Antigravity をインストールし、この箱を開いて（clone して）、AI と一緒に中身を作り、最後に GitHub へ公開するところまで一気にやります。
- 「最終版_v2 問題」と、バージョン管理が必要な理由を理解
- commit（＝セーブ）→ push（＝クラウドにアップロード）の考え方を理解
- 「push（保管）」と「GitHub Pages 公開」が別物だと理解
- GitHub アカウント作成
- リポジトリ（demo-hello）とは何かを理解
- ブラウザで demo-hello リポジトリを作成（README 付き）
2-1. Antigravity IDE のインストール（15分）
いよいよ今日の主役 Antigravity IDE を本格的に使っていきます。第1部でブラウザに作った GitHub の箱（リポジトリ）は、この後 §2-5 でこの Antigravity から開いて中身を作っていきます。ここではまず、インストールから改めて丁寧に説明します（事前準備で済んでいる方は、ちゃんと入っているかの確認のつもりで読み進めてください）。そもそも IDE（アイ・ディー・イー）とは、「コードを書く・動かす・AI に相談する」がぜんぶ 1 つの画面でできる作業アプリのこと。ワープロが「文章を書くためのアプリ」なら、IDE は「アプリを作るためのアプリ」だと考えてください。インストールはダウンロードとクリックだけで、黒い画面（ターミナル）は一切使いません。
使っている PC によって手順が少し違うので、下のタブで ご自分の OS（Mac か Windows）を選んでください。
ブラウザ（Chrome など）で Antigravity の公式サイトを開き、「Download for Mac（Mac 版をダウンロード）」ボタンを押します。ダウンロードフォルダに、アプリの入ったインストール用ファイル（
.dmg という形式のファイル）が保存されます。
ダウンロードしたファイルをダブルクリックで開きます。小さなウィンドウが出て、Antigravity のアイコンと「Applications（アプリケーション）」フォルダのアイコンが並んで表示されるので、Antigravity のアイコンを「Applications」フォルダのアイコンにドラッグ＆ドロップします。これでインストール完了です。
「アプリケーション」フォルダの中にできた Antigravity をダブルクリックして起動します。
Mac は、はじめて開くアプリに対して、安全のためこの警告を出すことがあります。これは アプリが壊れているわけでも、危険なわけでもありません。次のどちらかの方法で開けます。
- 方法 A（かんたん）：「アプリケーション」フォルダの Antigravity アイコンを 右クリック（または control キーを押しながらクリック）→ 出てきたメニューの 「開く」を選ぶ → 確認画面でもう一度 「開く」を押します。一度この方法で開けば、次からは普通にダブルクリックで起動できます。
- 方法 B：画面左上のアップルメニュー →「システム設定」→「プライバシーとセキュリティ」を開くと、下のほうに 「"Antigravity" は開発元を確認できないため…」という項目と 「このまま開く」ボタンが出ています。それを押して許可します。
起動後の案内に沿って 「Sign in with Google（Google でログイン）」を選び、事前に準備した Google アカウントでログインします。ブラウザが開いてログインを求められたら、いつもどおりメールアドレスとパスワードを入れて許可すれば OK です。これで Antigravity が使えるようになります。
ブラウザ（Chrome など）で Antigravity の公式サイトを開き、「Download for Windows（Windows 版をダウンロード）」ボタンを押します。ダウンロードフォルダに、インストール用ファイル（
.exe という形式のファイル）が保存されます。
ダウンロードした
.exe ファイルをダブルクリックします。インストール画面が出たら、基本は 「次へ（Next）」→「インストール（Install）」と進めていくだけで完了です。特別な設定は不要なので、そのまま進めて構いません。
インストールが終わると Antigravity が起動します（起動しない場合は、デスクトップやスタートメニューの Antigravity アイコンから開きます）。
Windows は、ダウンロードしたばかりのアプリに対して SmartScreen（スマートスクリーン）という安全機能で警告を出すことがあります。これも アプリが危険という意味ではありません。次の手順で進めます。
- 青い画面の中にある 「詳細情報」という小さな文字リンクをクリックします。
- すると下に 「実行」ボタンが現れるので、それを押します。
これでインストール／起動が続行します。ボタンの表記が「実行」ではなく「このまま実行」などになっていることもありますが、意味は同じです。
起動後の案内に沿って 「Sign in with Google（Google でログイン）」を選び、事前に準備した Google アカウントでログインします。ブラウザが開いてログインを求められたら、いつもどおりメールアドレスとパスワードを入れて許可すれば OK です。これで Antigravity が使えるようになります。
2-2. 基本操作・AI チャット（20分）
Antigravity の画面は、大きく 3 つのエリア（ペイン）に分かれています。まずはこの 3 つの役割さえ覚えれば、迷わず操作できます。
- ① 左：ファイル一覧（ファイルツリー）
いま開いているプロジェクトの中にあるファイルが、名前で一覧表示されます。ファイル名をクリックすると、その中身が中央に開きます。§2-5 で GitHub から開く「箱（リポジトリ）」の中身も、ここに並びます。 - ② 中央：エディタ
実際のコード（プログラムの文章）が表示・編集される場所です。AI が書いたコードもここに映ります。自分で手を入れることもできますが、今日は基本 AI にお願いするので、「結果が映る画面」くらいの気持ちで眺めていれば大丈夫です。 - ③ 右：AI チャット
今日いちばん使う場所です。ここに日本語で「◯◯を作って」「これを直して」と話しかけると、AI が中央のエディタにコードを書いてくれます。
迷ったら 右側の「AI チャット」欄です。ここが AI との会話の窓口。中央のエディタや左のファイル一覧に文章を打ち込むのではなく、右のチャット欄に日本語で書いて送信する、とだけ覚えておけば大丈夫です。
この講座で覚えてほしいのは、じつはこれだけです。知らない言葉が出てきたら「◯◯ってどういう意味？」、うまく動かない・赤い表示が出たら「これ直して」と、AI チャットにそのまま日本語で送ってください。専門用語も、英語のエラーメッセージも、そのままコピーして貼り付けて聞けば、AI がやさしく教えてくれます。「自分で調べなきゃ」と抱え込まなくて大丈夫。“AI に聞く” が、あなたの一番の武器です。
まずは肩慣らしに、AI へ挨拶してみましょう。右の AI チャット欄に次の文章を入れて送信してください。返事が返ってくれば、AI と会話できる状態になっています。
こんにちは。今日はあなたと一緒に簡単な Web ページを作ります。よろしくお願いします。
2-3. AI にコードを書かせる（25分）
いよいよ本番です。ここでは 自己紹介ページを AI に作ってもらいます（この後の §2-5 で、第1部でブラウザに作った demo-hello の箱に入れて、そのまま GitHub に送ります）。ポイントは、自分でコードを書く必要はないということ。作りたいものを日本語でお願いするだけで、AI が中央のエディタにコードを書いてくれます。流れは次の 3 ステップです。
右の AI チャット欄に、どんなページが欲しいかを言葉で伝えます。うまくいくコツは、「何を・どんな内容で・どんな見た目に」を具体的に書くこと。まずは下のプロンプト例をそのままコピーして送ってみましょう。
シンプルな自己紹介ページを HTML / CSS で作ってください。
内容：名前、自己紹介文 3 行、好きなもの 3 つ。
デザイン：パステルカラーで、丸みのあるカード風。スマホでも見やすく。
送信すると、AI が右のチャットで返事をしながら、中央のエディタにコードを書き始めます。書き終わると 「Accept（受け入れる）」や「適用」といったボタンが表示されるので、それを押します。これで AI が書いた内容が、実際のファイルとして保存されます。
💬 中身のコードが分からなくても大丈夫。今は「AI の提案に OK を出す」ボタンだと思ってください。気になる箇所は、あとから AI に「ここを説明して」と聞くこともできます。
出来上がったページが実際にどう見えるかを確認します。プレビュー＝作ったページを、実際のブラウザ表示のように見てみることです。開き方は次のどちらかです。
- いちばん簡単で確実な方法：そのまま AI チャットに 「このページをプレビューで見せて」とお願いします。AI が表示のしかたまで案内してくれるので、迷ったらまずこれで大丈夫です。
- もう一つの方法：左のファイル一覧で、できあがった
index.htmlを右クリックし、「ブラウザで開く」（または「Open with Live Server」）といった項目を選ぶと、ページが表示されます。※ こうした項目が見当たらないときは、上の「AI に頼む」方法を使えば問題ありません。
2-4. AI と一緒にデバッグ（15分）
デバッグとは、プログラムのおかしいところ（バグ）を見つけて直すことです。プログラム作りに「一発で完璧」はほとんどなく、直しながら仕上げていくのが当たり前。ここでは、その「直す」体験を、わざとコードを壊してから AI に直してもらう形でやってみます。
AI に「わざと動かない箇所を 1 つ作って」と頼んでもいいですし、さきほどのページに自分でボタンを足して、わざと反応しない状態にしてもかまいません。「うまく動かない状態」をあえて作るのが狙いです。
エラーメッセージが出ていればその文をコピーして貼り付け、出ていなければ「ボタンを押しても何も起きない」のように、おかしな挙動を普通の言葉で伝えます。専門用語は不要です。下のプロンプト例をそのまま使ってみましょう。
このコードのボタンを押しても何も起きません。エラーを調べて直してください。
AI が「原因はここです」と説明し、直したコードを提案してくれます。「Accept（受け入れる）」を押して適用したら、もう一度ボタンを押すなどして、直ったかを確認します。まだ直らなければ「まだ動きません」ともう一度伝えれば OK。会話をくり返して仕上げていきます。
赤いエラー表示が出ると身構えてしまいますが、エラーは「どこを直せばいいか」を教えてくれるヒントです。壊しても PC が壊れるわけではありませんし、GitHub には前の状態が残っているので、いつでも戻せます。分からないことは、遠慮なく AI チャットに聞いてください。「聞けば直る」──これがこれからの、あなたのいちばんの武器です。
2-5. Git を体験する ──「作る → commit → 壊す → 戻す → push」（20分）
第2部の仕上げは、第1部で学んだ「バージョン管理」を、実際に手を動かして"体で"つかむ時間です。第1部でブラウザに作ったリポジトリ「demo-hello」を Antigravity で開き、「作る → commit（セーブ）→ わざと壊す → 戻す → push（GitHub に送る）」という流れを一周します。すべて Antigravity のボタン操作で行い、黒い画面（ターミナル）は一切使いません。
いちどわざと壊して戻してみると、「commit ＝ いつでも戻れるセーブポイント」だと"体で"分かります。これが腑に落ちると、この先どんなに大胆に触っても「戻せるから大丈夫」と安心して作れるようになります。
準備：demo-hello を Antigravity で開く（clone）
ブラウザで demo-hello を開き、緑色の 「<> Code」ボタンから住所（URL）をコピー → Antigravity の 「Clone Repository（リポジトリを複製）」に貼り付けて取り込み、「開く（Open）」を押します。
💬 clone（クローン）＝ GitHub 上の箱を、自分の PC に丸ごとコピーして持ってくること。これで「ネット上の箱」と「手元の箱」がつながり、この後の commit・push ができます。コマンドは一切打ちません。
① 作る → ② commit（セーブポイントを作る）
§2-3・§2-4 で AI と作った自己紹介ページ（
index.html など）を、開いた demo-hello の中に置いて保存します（Mac は Command + S、Windows は Ctrl + S）。💬 すでに demo-hello を開いた状態で AI に作ってもらったなら、そのまま保存するだけで OK。迷ったら AI チャットに「このファイルを demo-hello に入れて」と頼めば案内してくれます。
画面左の 「Source Control（ソースコントロール＝変更管理）」アイコン（枝分かれのマーク）を押すと、変更したファイルの一覧が出ます。上の入力欄に短いメモ（例：
自己紹介ページを作成）を書いて 「コミット（Commit）」を押します。💬 これが第1部で学んだ 「セーブ」です。ここまでの状態に名前を付けて記録しました。まだ手元の PC の中の記録で、GitHub には送られていません。
③ わざと壊す → プレビューで確認
エディタで、たとえば見出しの文字を消す、タグを 1 つ削る、などしてわざとページを壊します（AI に「わざと表示が崩れるように 1 か所だけ変えて」と頼んでも OK）。保存してプレビューを開くと、さっきと違って表示が崩れているのが確認できます。
ここでわざと壊しても、②で「セーブ（commit）」しておいた状態はちゃんと残っています。次のステップで、その"セーブポイント"に戻します。
④ 戻す（セーブポイントに戻る）
Source Control パネルで、こわしたファイルの横にある 「変更を元に戻す（破棄）」の操作を選ぶと、②でコミットしたセーブポイントの状態に戻ります。プレビューを見ると、崩れていた表示がちゃんと直っているはずです。
💬 まさに 「ゲームでセーブした所からやり直す」のと同じ。これが commit（セーブ）のありがたみです。迷ったら AI チャットに「さっきコミットした状態に戻して」と頼めば案内してくれます。
⑤ push（GitHub に送る）
仕上がった状態で 「変更の同期（Sync Changes）」または「プッシュ（Push）」ボタンを押すと、記録した内容が GitHub にアップロードされます。ブラウザで自分の demo-hello を開き直すと、AI と作ったページが反映されています。
💬 push（プッシュ）＝ 手元のセーブを GitHub（クラウド）に送って反映すること。これで、第1部でブラウザに用意した箱に、AI と作った作品が保管されました（＝バックアップ完了。世界に見せる Web 公開は任意課題の GitHub Pages で）。
いちど clone してつなげてしまえば、あとは 「作って（編集）→ コミット（セーブ）→（必要なら戻す）→ プッシュ」のくり返しだけ。難しいコマンドは覚えなくて大丈夫。すべて Source Control パネルのボタンで完結します。
🔍 【おまけ・参考】ボタンの裏で動いている Git コマンド（打たなくて OK）
今日はすべてボタン操作なので、以下のコマンドを打つ必要はありません。「Source Control のボタンは、裏でこういう命令を出しているんだ」と仕組みを知りたい人向けの参考です。もっと深く知りたくなったら、これらを AI に「意味を教えて」と聞いてみてください。
| ボタン操作 | 裏で動いているコマンド（参考） | 意味 |
|---|---|---|
| コミット | git commit -m "メッセージ" | セーブポイントを作る |
| 変更を元に戻す | git restore ファイル名 | 直前のコミットの状態に戻す |
| プッシュ（同期） | git push | 手元のセーブを GitHub に送る |
💡 くり返しますが、今日はこれらを打ちません。ボタンだけで全部できます。倉本さん・ふじさん・露さんのように「仕組みまで知りたい」方向けの補足です。
- Antigravity IDE 起動
- Google アカウントログイン
- AI に話しかけてコード生成
- ブラウザでプレビュー
- AI と一緒にバグ修正
- 第1部で作ったリポジトリを Antigravity で開く（clone）
- commit（セーブ）→ わざと壊す → 戻す を体験（「戻せる」を体で理解）
- GitHub に push（保管）
ここまでで、AI と会話しながらページを作り、GitHub に保存する流れを体験しました。第3部では、その同じやり方で あなたの毎日の仕事にそのまま役立つ小さなツールを 1 本作ってみます。むずかしい知識はいりません。「こんなものが欲しい」と AI に日本語でお願いするだけです。
この演習では、お客様・患者さん・社員などの実在する個人情報は一切入力しません。名前・連絡先・患者情報などはすべて 「山田太郎」「サンプル商店」などのダミー（架空の内容）で作ります。実在の個人情報を扱う本格的なツールは、🐳 Docker の章のように「世界に公開しない」やり方とセットで、あらためて作りましょう。
まずは "こんなことに使える" イメージ（職種いろいろ）
第3部で作るのは、下のような小さなツールの仲間です。自分の仕事に近いものを 1 つイメージしてみてください（どれも作り方は第2部と同じ「お願いする → 受け入れる → 確認する」の 3 ステップです）。
✍️ ミニ演習：仕事用ダッシュボードを作ろう
今日のおすすめ題材は 「よく使う定型文＋リンクをまとめた"仕事用ダッシュボード"ページ」です。毎日のちょっとした手間（あいさつ文をコピペする、よく開くサイトを探す、今日のやることを思い出す）を、1 ページにまとめてしまいます。内容はすべてダミーで構いません。
仕事用のダッシュボードページを HTML と CSS の 1 ファイルで作ってください。
内容は次の 3 つを縦に並べてください（すべてダミーの内容で構いません）。
① よく使うあいさつ定型文を 3 つ（それぞれコピーしやすいように枠で囲む）。
② よく開くサイトのリンク集を 3 つ（例：検索、社内ポータル、カレンダー。リンク先はダミーで OK）。
③ 今日の To-Do を 3 つ書けるチェックリスト。
見た目は明るく見やすいカード風にして、スマホでもきれいに表示されるようにしてください。
「あいさつ文を 5 つに増やして」「リンクにアイコンを付けて」など、チャットで会話しながら育てていきます。中身は自由です。ただし 実在の個人情報は入れない ことだけ守ってください。
完成したら Source Control パネルから コミット（例：
仕事用ダッシュボードを作成）→ プッシュして、GitHub に保管します。これで「AI で作る → Git で保存」の一連の流れを、自分の手でもう一度なぞれました。
いきなり大きなものを目指さなくて大丈夫。身近な"面倒"を 1 つ、AI と自動化してみる——それだけで十分な第一歩です。作ってみると、次のアイデアが自然とわいてきます。「社内だけで使いたい」「個人情報を扱うので公開したくない」というツールは、🐳 Docker の章で"自分専用サーバー"として動かせます。
以下の ①自由創作 ②GitHub Pages で世界に公開 ③Docker で自分専用サーバー は、講座の時間内では扱いません。「もっと作ってみたい」「公開までやってみたい」という方向けの、おうちでの任意課題です。分からないところは、いつでも AI チャットに聞きながら進めてください。
① 自由創作にチャレンジ（おみくじ／じゃんけん／電卓）
第2部と同じやり方で、自分の作りたいものを AI と作ってみましょう。下の 3 つは、やさしい順に並んでいます。
| テーマ | 難易度 | 所要時間 | 身につくこと |
|---|---|---|---|
| 🎴 おみくじ | ★ | 15〜20分 | ボタン、配列ランダム |
| ✊ じゃんけん | ★★ | 20〜30分 | 条件分岐、判定、スコア管理 |
| 🧮 電卓 | ★★★ | 30分〜 | UI設計、演算ロジック |
テーマ別・AI へのスタータープロンプト例
「何て頼めばいいか分からない」ときは、下の例をそのままコピーして AI チャットに送るところから始めてください。1 ファイルで作ってとお願いしておくと、この後の公開もかんたんになります。送ったあとは「色を変えて」「ボタンを大きく」など、会話で自由に育てていきましょう。
🎴 おみくじ：ボタンを押すと結果がランダムに出る、いちばんやさしいテーマです。
ボタンを押すと「大吉・中吉・小吉・凶」などの結果がランダムで 1 つ表示される、おみくじアプリを HTML と JavaScript の 1 ファイルで作ってください。結果は大きな文字で表示して、見た目はかわいいパステルカラーにしてください。
✊ じゃんけん：あなたと AI（コンピューター）が対戦し、勝ち負けを判定します。
グー・チョキ・パーの 3 つのボタンを押すと、コンピューターとじゃんけんできるアプリを HTML と JavaScript の 1 ファイルで作ってください。勝ち・負け・あいこを画面に表示し、勝った回数と負けた回数も数えて表示してください。
🧮 電卓：数字ボタンと計算ボタンを並べた、いちばん歯ごたえのあるテーマです。
0〜9 の数字ボタンと、足し算・引き算・かけ算・割り算・イコール・クリアのボタンがある電卓アプリを、HTML と JavaScript の 1 ファイルで作ってください。押した数字と計算結果が上の画面に表示されるようにして、スマホでも押しやすい大きめのボタンにしてください。
🙋 自己紹介ページ（おさらい・アレンジ）：第2部で作ったページを、もっと自分らしく作り直すのもおすすめです。
自己紹介ページを HTML と CSS の 1 ファイルで作ってください。名前・ひとこと自己紹介・好きなもの 3 つ・SNS へのリンクを載せ、写真を 1 枚飾れる丸い枠も付けてください。全体は明るく、スマホでもきれいに見えるようにしてください。
② 作った作品を世界に公開する ── GitHub Pages
ここまでで作ったページ（おみくじなど）は、あなたの PC と GitHub の中にあります。これを 「URL ひとつで、誰でもブラウザから見られるホームページ」として公開できるのが GitHub Pages（ギットハブ・ページズ）です。GitHub の無料機能で、追加のアプリもコマンドも要りません。公開の操作はすべてブラウザ（github.com 上）で完結します。
※ 第1部で見たとおり、push（保管）と GitHub Pages 公開は別物です。まず §2-5 のやり方で作品を GitHub に push（アップロード）してから、この手順で"世界に見せる"公開をします。
操作する場所：ブラウザ（github.com） 公開したい作品のリポジトリのページを開き、上のメニューにある 「Settings（設定）」タブを押します。
Settings 画面の左側のメニューを下にたどると 「Pages」という項目があります。それをクリックします。
「Build and deployment」の下の 「Branch（ブランチ）」の欄で、「None」を
main に変更し、フォルダは / (root) のまま 「Save（保存）」ボタンを押します。💬 ブランチとは、ざっくり言うと「どの状態のファイルを公開するか」の指定です。今日は特に分けていないので、標準の
main を選べば OK です。
保存すると、少し待って（数分かかることがあります）ページを再読み込みすると、Pages の画面の上のほうに 「Your site is live at …（あなたのサイトは公開中です）」と、
https://あなたの名前.github.io/リポジトリ名/ のような公開 URL が表示されます。
表示された URL をクリック（またはコピーしてブラウザのアドレス欄に貼り付け）して開くと、あなたの作品がインターネット上のページとして表示されます。この URL は、スマホでも、友だちや同僚に送っても、同じように見てもらえます。これであなたの作品が、世界に公開されました。
GitHub Pages で公開したページは、URL を知っていれば誰でも見られる “完全公開”になります。作品を見てもらうにはぴったりですが、その裏返しとして、公開したくない情報（個人情報・パスワード・社外秘のメモなど）は載せないように気をつけてください。
「見せたい人だけに見せたい」「自分の PC の中だけで動かしたい」という “公開／非公開”の使い分けは、次の Docker（ドッカー）につながる大事なテーマです。
③ 発展：Docker で"自分専用サーバー"（興味があれば）
「お客様や患者さんの情報を扱うツールを、世界に公開せず、自分だけ（または社内だけ）で動かして使いたい」——そんなときの選択肢が Docker（ドッカー） です。無料の Docker Desktop を入れると、作ったアプリを自分の PC の中だけで動く"自分専用サーバー"として起動でき、インターネットには公開されません。設定は Antigravity の AI に「Docker で動かせるようにして」と頼めば手伝ってくれます。
今日は「こういう選択肢がある」と知っておくだけで十分です。まずは下の 4 つの"公開範囲"の違いだけ、ざっくりつかんでおきましょう。
| 手段 | 役割 | 公開範囲 |
|---|---|---|
| GitHub | コードの保管・共有・履歴管理 | 見えるだけ（そのままでは動かない） |
| GitHub Pages | かんたんな静的ページの公開 | 全世界に公開（デモ・作品発表向き） |
| Docker Desktop | 自分の PC で"自分専用サーバー"を起動 | 非公開・自分の PC の中だけ（実務向き） |
| レンタルサーバー（VPS など） | 本格的に常時公開・運用する | 公開（将来しっかり作るなら） |
おすすめの順番は 「まずは Docker で自分の PC の中で動かす → 本当に必要になったらレンタルサーバー／VPS（月数百円〜）を契約」。いきなり公開サーバーを借りなくて大丈夫です。くわしい手順は別の機会に。
操作で迷ったり、知らない言葉やエラーが出たら、まずは AI（Antigravity のチャット）に日本語でそのまま聞いてみてください。「◯◯ができません、どうすればいい？」「これどういう意味？」「これ直して」──この一言で、たいていのことは解決します。それでも解決しないときは、当日は講師が画面を見ながらサポートします。一人で抱え込まなくて大丈夫です。
A. まず迷惑メール（スパム）フォルダを確認してください。見当たらなければ、登録画面から「メールを再送」を押します。数分待っても来ない場合は、入力したメールアドレスに打ち間違いがないかも確認しましょう。
A. 設定を強くおすすめします（アカウントの乗っ取り防止になります）。スマホの認証アプリ（Google Authenticator など）を使えば OK です。設定は後からでもできるので、当日つまずいたら一旦スキップして先へ進んでも大丈夫です。
A. これは「ネットからダウンロードしたアプリ」に出る安全確認の表示で、故障ではありません。§2-1 の警告対処を参照してください。Mac は右クリック →「開く」、Windows は「詳細情報」→「実行」で開けます。
A. ブラウザを再読み込み（更新）してみてください。それでも進まないときは、一度ブラウザを閉じて開き直す、または別のブラウザで試すと解決することが多いです。
A. PC に Git というツールがまだ入っていないサインです。受講前のご案内（事前準備）の Git インストールを参照して、Git を入れてから進めてください。分からなければ講師が一緒に確認します。
A. まずファイルを保存したか確認してください。保存すると表示されることが多いです。それでも出ないときは、AI に「プレビューで見せて」とお願いすると、表示の仕方を案内してくれます。
A. GitHub にログインできているか／認証（サインイン）が済んでいるかを確認してください。§2-5 の手順を見直し、うまくいかなければ AI に「push できません」と伝えると原因を一緒に探してくれます。
A. Docker は PC のメモリや CPU を使うため、動作が重くなることがあります。任意課題の「Docker で自分専用サーバー」も参照してください。使わないときは Docker を停止しておくと軽くなります。
📖 用語ミニ辞典
講座で出てくる言葉を、1 行ずつやさしく。覚えなくて大丈夫です。迷ったらその場で AI に聞けば OK。
クリックして用語一覧を開く／閉じる
- GitHub（ギットハブ）
- コードを保存・公開・共有できる、ネット上の場所（無料で使えます）。
- リポジトリ
- プロジェクト 1 つ分の“箱”。作品ごとに 1 つ用意します。
- clone（クローン）
- GitHub の箱を、自分の PC に持ってくること。
- commit（コミット）
- 変更に名前をつけて記録すること（セーブに近いイメージ）。
- push（プッシュ）
- 手元の記録を GitHub に送ること。これで公開・保存されます。
- README（リードミー）
- 箱の表紙にあたる、説明書き。何のプロジェクトかを書いておく場所。
- IDE（アイディーイー）
- 画面で操作する開発ソフト。今回使う Antigravity がこれです。
- CLI（シーエルアイ）
- 黒い画面で文字を打って操作する方式。今回の講座では使いません。
- Docker（ドッカー）
- 自分の PC の中で“自分専用サーバー”を動かす仕組み（任意課題で紹介）。
💡 覚えなくて OK。迷ったら AI に「〇〇ってどういう意味？」と聞けば大丈夫です。
🙋 参加前のよくある不安
A. 普段ネットや資料づくりに使えている PC なら大丈夫です。特別なハイスペック PC は必要ありません。
A. 大丈夫です。当日は講師がサポートしますし、困ったらAI に日本語で聞けばその場で助けてくれます。完璧にできなくて大丈夫、まず楽しんでみてください。
A. 大歓迎です。前提知識はいりません。最初の設定でつまずいても、当日はAI と講師に任せて進められます。
A. 残ります。作品は GitHub に保存されるので、講座のあと自宅でも見返したり、続きを作ったりできます。
「まず AI に聞く」→「それでもダメなら講師に聞く」。この 2 段構えで、当日はどこでつまずいても必ず先に進めます。エラー表示が出ても慌てず、そのまま画面を見せてくれれば大丈夫です。
この通りでなくて OK。日本語で「やりたいこと」を伝えれば、AI が汲み取ってくれます。まずは下の例をコピーして送ってみましょう。
🚀 作り始める
HTML と JavaScript で、ボタンを押すとおみくじ（大吉・中吉・凶など）が出るページを、1 つのファイルで作ってください。
じゃんけんができる簡単なゲームを作ってください。
🛠 実務ツール
入力した金額に消費税を足して合計を出す、見積り計算ページを作ってください。
次の文章を、お客様に送る丁寧なビジネスメールに書き直してください：〔ここに文章〕
🎨 見た目を整える
全体の色をもっと明るく、やさしい雰囲気にしてください。
スマホでも見やすいレイアウトにしてください。
🆘 困ったとき
このエラーの意味を、プログラミング初心者にもわかるように説明してください。
うまく動きません。原因を探して直してください。
🌐 公開する
このページを GitHub に公開する手順を、初心者向けに教えてください。
💡 プロンプトは「正解」ではなく「たたき台」。うまくいかなくても、続けて「もっと〇〇して」と会話するだけで、AI が何度でも直してくれます。
🎓 講座お疲れさまでした！
今日 3 時間で身につけたこと：
- ✅ Antigravity は Google の開発プラットフォーム。今日はその「IDE 版」を使った
- ✅ バージョン管理の考え方（commit＝セーブ／push＝クラウドにアップロード）
- ✅ GitHub の基本（アカウント作成・リポジトリ・clone・commit・push）
- ✅ Antigravity で AI と対話してコードを書き、デバッグできる
- ✅ 「作る→commit→壊す→戻す→push」で"戻せる"を体で理解した
- ✅ 実務ミニ演習で"仕事で使える"ツールを 1 本作れた
これは「AI と一緒に何か作る」スタート地点です。日常の小さな課題（業務効率化ツール、家計簿、メモアプリ…）を AI と試してみてください。
今日は時間の都合で扱わなかった ①自由創作（おみくじ／じゃんけん／電卓）②GitHub Pages で世界に公開 ③Docker で自分専用サーバー は、「講座後の任意課題（宿題）」にまとめてあります。おうちでチャレンジして、GitHub Pages で公開できたら、ぜひ URL を講師にシェアしてください。自分の作品を世界に出した体験は、次への大きなモチベーションになります。
🚀 受講後、こう続けると伸びます
今日の 3 時間を「一度きりの体験」で終わらせないための、かんたんな続け方です。むずかしく考えず、1 つでも試してみてください。
📚 関連講座
業務効率化（フォルダ整理・Excel・データ分析）を AI で自動化したい方は、兄弟講座「Gemini CLI 実務活用講座」もどうぞ。