Session 2 サポートスタッフ用マニュアル

ICチップに書き込み！バイブコーディングで自己紹介サイトを作ろう
AI駆動開発勉強会 #4 講師：岩崎 雅也 約80分

ゴール

参加者がバイブコーディングで自己紹介サイトを作り、NFCチップに書き込んで「スマホをかざすとサイトが開く」状態にすること。

環境構築
~20分
サンプル
確認
~5分
バイブ
コーディング
~30分
Web連携
~15分
NFC
書き込み
~10分
💡
スライドの言葉遣いは非エンジニア向けにあえて専門用語を潰してあります。サポート時も同じトーンで。
0:00 - 20:00 頃

環境構築

操作 ① AntiGravity インストール

Google Antigravity（コードエディタ）をインストール。2〜3分かかる。

  • 初期セットアップで Agent-driven development を選択させる
  • 拡張機能3つを入れる：Toolkit for Antigravity、Japanese Language、Live Server

操作 ② Git インストール

  • Windows：git.exe をダウンロード → インストーラー実行（ほぼ x64、確認項目は全部OKでOK）
  • Mac：ターミナルで Homebrew インストール → brew install git
⚠
Mac ユーザー要注意：ほとんどの方が Homebrew 未インストール。ターミナルから Homebrew → Git の順でインストールが必要。ここで詰まる人が多い。

操作 ③ GitHub アカウント作成

Google アカウントの SSO でサインアップ可。持っていれば割とスムーズ。

操作 ④ Cloudflare アカウント作成

Webサイト公開用。こちらも Google SSO 対応。アカウント作成だけでOK。

⏱
環境構築は 最も時間がかかるパート（約20分）。インストール待ちの間に講師が説明を進めるので、つまずいている人を優先サポート。
20:00 - 50:00 頃

サンプル確認 → バイブコーディングで改造

操作 サンプルプロジェクトを開く

  • Google ドライブ（共有リンク）からダウンロード
  • 保存先はドキュメントフォルダ推奨（ダウンロードフォルダだと消しがち）
  • AntiGravity の「フォルダを開く」で開く
  • 手始めに AI エージェントに「このプロジェクト何？」と聞いてもらう

操作 Live Server で確認しながら編集

Go Live ボタンを押す → ブラウザにサイトプレビューが表示。画面分割で左にプレビュー・右にコードを並べると見やすい。

進行 まず講師と一緒にやること

連絡先（名前・会社名・役職・メール・住所）を自分の情報に変更。変わったのを確認できたら自由改造タイムへ。

進行 自由改造でできること

  • 背景色をピンクなど好きな色に変更
  • SNS を Instagram だけにするなど項目の追加・削除
  • 画像の差し替え（Gemini 3 Pro なら画像生成も可）

サポート AI モデルの使い分け（質問されたら）

モデル コーディング力 スタミナ消費 速度
Gemini 3 Flash★★★★小早い
Gemini 3 Pro (High)★★★★★大遅い
Claude Opus 4.6★★★★★大遅い
Claude Sonnet 4.6★★★★小普通

基本は Gemini 3 Flash でOK。うまくいかない時だけ Pro(High) や Claude に切替。

サポート セーブとロード（困った時に教える）

  • セーブ = Git push。ゲームでいう「セーブ」
  • ロード = 前回 push した状態に戻す。「やばくなったらロード」と伝える
50:00 - 65:00 頃

Web サイト連携（GitHub → Cloudflare）

操作 GitHub に push する

  • AntiGravity の UI から「GitHub に公開」を実行
  • GitHub 認証（ブラウザでログイン）
  • リポジトリのタイプを Private に設定
  • git config（名前・メールアドレス）はサンプルにテキストファイルが入っているので、それを編集して実行するだけ
  • リポジトリ URL を指定して push 完了
⚠
最もつまずきやすいポイント：GitHub への認証周り。push 時の認証で止まる人が多いので重点サポート。

操作 Cloudflare Pages でデプロイ

  • Cloudflare ダッシュボードを開く
  • 注意：先に「Workers」で GitHub 連携をしないと Pages でリポジトリが選べない（謎仕様）
  • Workers で GitHub 連携 → 一旦戻る → Pages を選び直す
  • Git repository をインポート → 自分のリポジトリを選択
  • ポチポチ進める → デプロイ完了 → プロジェクト URL が発行される
  • URL をクリックして自分のサイトが表示されれば OK
✅
この連携は初回1回だけ。以降は GitHub に push するだけで Cloudflare に自動デプロイされる。
65:00 - 80:00 頃

NFC チップに書き込み

操作 手順

  1. スマホに NFC Tools（無料）をインストール（iOS / Android）
  2. アプリを開いて「書き込み」を選択
  3. URL を入力（Cloudflare で発行されたプロジェクト URL）
  4. 「書き込む」ボタンを押して NFC チップにスマホを近づける
  5. 書き込み完了 → NFC シールを名刺やカードに貼る
  6. スマホをかざして自己紹介サイトが開けば完成！
随時

よくあるトラブルと対応

🚨 環境構築で詰まる（最多）

Mac の Homebrew インストールでターミナル操作に慣れていない人が多い。コマンドをコピペで済むよう誘導。

🚨 GitHub の認証が通らない

ブラウザでの GitHub ログインが必要。デバイス認証画面が出たらコードを入力させる。SSO（Google）でやるのが一番ラク。

🚨 Cloudflare で Pages にリポジトリが出ない

先に Workers で GitHub 連携を済ませてから、Pages を選び直す。これを知らないとハマる。

🚨 バイブコーディングで壊れた

「ロード」（git reset）で前回 push した状態に戻せる。焦らず戻してやり直し。

🚨 AI の応答が遅い・エラーが出る

スタミナ切れの可能性。モデルを Gemini 3 Flash に切り替えるか、少し待つ。無料枠だと AI Pro は5時間待ちになることも。

💬
時間が余った参加者は、バイブコーディングで自由改造 → push → 自動デプロイの繰り返しでOK。
事前

当日サポート事前チェックリスト

  • 自分の PC で一通りの手順を事前に試した
  • AntiGravity + 拡張機能3つのインストール手順を把握
  • GitHub / Cloudflare の SSO ログインの流れを確認
  • Cloudflare の Workers → Pages の順序を理解
  • NFC Tools アプリで書き込みテスト済み
  • サンプルプロジェクトの Google ドライブ共有リンクを確認
AI駆動開発勉強会 第004回 Session 2 ─ サポートスタッフ用マニュアル