本日つくるもの
議事録オーガナイザーという名前の、単一の HTML ファイルで動くブラウザアプリです。ファイルを1つダブルクリックすれば開き、インターネットに接続していなくても動きます。
議事録を読み込む
テキストを貼り付けるか、.txt / .md ファイルを選ぶと読み込みます。読み込みはブラウザの中だけで完結し、外部には送信されません。
決定事項・課題・ToDo に仕分ける
キーワードのルールで3分類に振り分け、担当者と期日も行から取り出します。仕分けが違っていれば画面上で手直しできます。
タスクボードに並べる
ToDo を担当者別・状態別に並べます。担当者、状態、キーワードで絞り込めます。状態は 未着手 / 対応中 / 完了 の3つです。
BPMN 図を自動で描く
担当者を横レーンに置いた業務フロー図を SVG で描きます。開始と終了、タスク、条件分岐のゲートウェイを、議事録の記載順から組み立てます。
本日のゴール
終わったときに、次の4点が手元に残っている状態を目指します。
議事録オーガナイザー（機能を1つ足した状態）
Gemini ブラウザ版で生成し、Antigravity で直して、自分の業務に効く機能を1つ追加した単一 HTML ファイル。
生成プロンプト
配布したプロンプトに、自分で書き足した差分を含めたもの。別の題材に作り替えるときの元になります。
セキュリティ・ガバナンス討議メモ
3人1組で読んだユースケースについて、自分の組の結論と、顧客に説明するときに添える一言。
機能追加アイデアメモ
相互デモで他の方から受けた指摘と、翌営業日にやる1アクション。
できるようになること
生成と修正でツールを使い分けられるようになります。長い出力を作るのはブラウザ版のチャット、手元のファイルを読んで直すのは IDE、という置き場所の違いを、自分の手で体験したうえで顧客に説明できる状態にします。
あわせて、生成 AI を業務で使うときに入力してよい情報の線引きを、自分の言葉で言えるようにします。判断が割れる場面を4つ用意しているので、正解を1つに決めるのではなく、割れた理由を持ち帰ってください。
当日の流れ
全 [300min]。休憩 [20min] を含みます。後半 [120min] がハンズオンです。
| 枠 | セッション | 所要 | この時間で持ち帰ること |
|---|---|---|---|
| S01 | オープニング 座学 | [15min] | 本日のゴールと、Gemini ブラウザ版と Antigravity の役割分担 |
| S02 | AI駆動開発の全体像と営業転換 座学 | [60min] | 生成AI最先端 [20min] ／ ツール比較と勘所 [20min] ／ 現場事例と数字 [20min] |
| － | 休憩 | [10min] | － |
| S03 | セキュリティ・ガバナンス 座学 ワーク | [60min] | 基本リスク [20min] ／ 安全ワークフロー [20min] ／ 3人1組のユースケース討議 [20min] |
| － | 理解度確認テスト | [10min] | 解き終わった方から休憩へ。誤答の多かった設問は S04 の冒頭で解説します |
| － | 休憩 | [10min] | － |
| S04 | 簡易プロトタイプ作成 ハンズオン | [120min] | 解説とデモ [20min] ／ Geminiで生成 [25min] ／ 取り込みと操作練習 [15min] ／ 動作確認と修正 [25min] ／ 機能追加 [25min] ／ 相互デモ [10min] |
| S05 | 質疑応答・クロージング 座学 | [15min] | 成果物4点の確認と、翌営業日の1アクション |
表は横にスクロールできます。時間は目安です。S04 の進み方によって前後します。
使うツールと役割分担
本日は3つを使い分けます。作るのは Gemini ブラウザ版、直すのは Antigravity、確かめるのは Chrome。この分担が今回の肝です。
つくる
Gemini ブラウザ版
Chrome で開くチャット
- 配布プロンプトを貼って、HTML を一式まるごと生成します
- 長い出力に強く、無料で使える範囲が広いです
- 手元のファイルは読めません。生成結果は自分でコピーして保存します
なおす・ふやす
Antigravity
IDE 版（インストールして使うアプリ）
- 保存した HTML をフォルダごと取り込み、中身を直接読んで直します
- 日本語で指示すると、該当箇所を探して書き換えます
- 実行のたびに無料枠を消費します。修正はまとめて1回に絞ります
たしかめる
Google Chrome
ブラウザ
- 保存した HTML をダブルクリックして開き、動作を確認します
- 外部ファイルを読み込まない作りのため、オフラインでも表示されます
- 直したあとは再読み込みして、壊れていないかを毎回見ます
当日 Antigravity で選ぶモデル
Gemini 3.5 Flash (Low)
チャット入力欄のすぐ下にあるモデル選択のドロップダウンから選んでください。起動直後は (Medium) など別の深さが選ばれていることがあります。名前が同じで括弧の中だけが違うため、見落としやすい箇所です。選んだモデルは、その実行が終わるまで維持されます。選べるモデルの一覧は Antigravity 公式ドキュメントのモデル一覧 で確認できます。
モデル名は入れ替わりが早いため、当日の指定はこの1ブロックだけを更新します。他のページに書かれた名前と食い違ったときは、ここの表記を正としてください。
どちらに頼むかの早見
| やりたいこと | 頼む先 | 理由 |
|---|---|---|
| アプリを一から作る | Gemini ブラウザ版 | 出力が長く、枠を気にせず作り直せるため |
| 生成物の表示が崩れているので作り直す | Gemini ブラウザ版 | Antigravity へ取り込む前の段階。まだファイルにしていないため |
| 保存済みファイルの不具合を直す | Antigravity | ファイルを直接読んで、該当箇所だけ書き換えられるため |
| 機能を1つ足す | Antigravity | 既存コードを壊さずに追記する指示が出せるため |
| ブラウザで開いて動きを見る | Chrome | ファイルをダブルクリックするのが最短。IDE 内のプレビューより速いため |
answer/ にある見本をコピーして続きから進めます。
事前セットアップ
当日までに次の8点を済ませてください。手順とスクリーンショットは事前セットアップガイドにまとめてあります。
- 1Gemini ブラウザ版へのログイン使用するアカウントを確認し、ログインできることを見ておきます。ここを最初に済ませてください。
- 2Google Chrome の最新化バージョンを確認し、更新があれば適用します。
- 3Antigravity のインストール公式サイトから OS 別のインストーラーを取得します。Windows 10（64bit）以降、macOS 12 Monterey 以降が対象です。
- 4Antigravity の初回起動とサインインGoogle アカウントでログインし、Security and Data Use policy を確認して進めます。
- 5使用モデルの確認チャット入力欄の下のドロップダウンから Gemini 3.5 Flash (Low) を選べることを見ておきます。
- 6配布ZIPのダウンロードと展開このページからダウンロードし、デスクトップなど分かる場所に展開します。
- 7Zoom の準備オンライン参加の方のみ。ブレイクアウトルームへの移動と復帰の操作を確認します。
- 8開催の数日前は Antigravity の重い利用を控える無料枠は週単位で回復する仕組みのため、直前に使い込むと当日の残量が目減りします。
ハンズオンの進め方
配布ZIPを展開したフォルダを起点に進みます。ファイルの置き場所と名前は決めてありますので、そのとおりに保存してください。
全体の流れ
演習7ステップ
| 演習 | やること | 使うもの | できていれば合格 | 枠 |
|---|---|---|---|---|
| 01 | 議事録を読む docs/議事録_20260710_定例.md を読み、決定事項・課題・ToDo に人の手で3件ずつ振り分けます |
配布docs | どの行で判断に迷ったかを1行書けている | ステップ1前 [5min] |
| 02 | 何を作るか決める 配布プロンプトを読む前に、欲しい画面の要素を3つ書き出し、今日試したいものに印を付けます |
手元メモ | 欲しい要素を3つ書き出し、選んだ理由を書けている | ステップ1前 [5min] |
| 03 | Gemini で生成する プロンプトを1文字も変えずに貼って送信し、出力された HTML を保存します |
Gemini ブラウザ版 | ブラウザで開いて画面が出る／サンプル読み込みで3分類が出る | ステップ2 [25min] |
| 04 | 取り込みと操作練習 Open Folder でデスクトップの 0826_handson を開き、画面各部を確認し、モデルを選んで軽い指示を1つ送ります |
Antigravity | File Explorer に中身が見える／モデルが Gemini 3.5 Flash (Low)／指示に応答が返った | ステップ3 [15min] |
| 05 | 動作確認と修正 6点のチェックリストを埋め、直したい点をまとめて1回で指示します |
Antigravity ／ Chrome | 6点すべてに印が付いている／確認メモを書けている | ステップ4 [25min] |
| 06 | 機能追加 コード内の拡張ポイントのコメントから1つ選び、自分の業務に効く機能を足します |
Antigravity ／ Chrome | 足した機能が動く／元からある表示と保存が壊れていない | ステップ5 [25min] |
| 07 | 相互デモと改善メモ 3人1組で画面を見せ合い、次に足すなら何かを1つずつ言い合います |
各自のアプリ | 他の方からのアイデアが2件以上メモに残っている | ステップ6 [10min] |
表は横にスクロールできます。各演習の詳しい手順は、配布ZIP内の exercises/ に入っています。
成果物の保存先
展開したフォルダの output/ に、次の名前で保存してください。名前を変えると講師が画面越しに追えなくなります。
0826_handson/
output/
meeting-organizer.html … アプリ本体
meeting-organizer_bk.html … 修正前のバックアップ
確認メモ.md … 6点チェックの結果と直した内容
追加した機能.md … 足した機能、理由、受けたアイデア
docs/ にダミーの議事録を3本入れてあります。この3本ですべてのステップが完結します。顧客名・技術者名・単価が入った実物は使わないでください。
prompts/02_修正依頼テンプレ.md にあります。
症状: （何が起きているか。画面上の見た目で書く） 期待する動き: （どうなってほしいか） 該当箇所の見当: （分かれば関数名や見出し名。分からなければ「不明」）複数まとめて送るときは、この3点セットを番号付きで並べます。1回の送信につき5件までを目安にしてください。
配布物ダウンロード
当日使うプロンプト、演習、ダミー議事録、講師見本を1つの ZIP にまとめてあります。事前にダウンロードして展開しておいてください。
ZIP の中身
| フォルダ | 入っているもの |
|---|---|
| prompts/ | Gemini へ貼る生成プロンプト、修正依頼テンプレ、機能追加テンプレ |
| exercises/ | 演習01〜07の手順。目的、操作、OK基準、発展課題まで |
| docs/ | ダミー議事録3本、タスク一覧CSV、AI入力可否ルール |
| usecases/ | セキュリティ・ガバナンス討議ワークのケース6本（S03-3で使用） |
| hints/ | ツールの使い分け、修正指示の良い例と悪い例、つまずいたときの対処 |
| output/ | 成果物の保存先。最初は空です |
| answer/ | 講師見本。研修中は開かないでください |
| GEMINI.md | このプロジェクトの前提を書いた文脈ファイル。Antigravity が読みます |
| .agents/ | Antigravity のワークスペースルール3本。当日その場で効きます |
| .gemini/ | Gemini CLI 用の設定とスラッシュコマンド5本。当日は使わない持ち帰り用の見本です |
今回は Gemini 3.5 Flash (Low) だけで開発するため、他のAIツール向けの設定ファイルは入れていません。answer/ は生成がうまくいかない場合の予備です。講師が判断してお声がけしますので、それまでは開かずに進めてください。
FAQ
当日その場で拾いきれなかった質問は、この欄に追記して後日ご案内します。
Gemini ブラウザ版と Antigravity は、結局どう使い分けるのですか。
作るのが Gemini ブラウザ版、直すのが Antigravity です。Gemini ブラウザ版は手元のファイルを読めない代わりに、長いコードを一気に出すのが得意で、無料で使える範囲も広めです。Antigravity は保存したファイルを直接読んで、指示した箇所だけを書き換えられます。
今回は生成に時間とトークンがかかるため、重い生成を Gemini 側に寄せて、Antigravity の実行回数を修正と機能追加に温存します。
このアプリは AI が議事録を要約してくれるのですか。
いいえ。このアプリは AI を呼びません。決定事項・課題・ToDo の仕分けは、あらかじめ決めたキーワードの一致で判定しています。API キーも通信も不要で、オフラインで動きます。
見分け方は簡単です。同じ議事録を入れて毎回同じ結果になるのがルール、変わりうるのが AI です。AI に投げる版へ発展させたい場合の差し込み位置は、生成されるコードの中にコメントで書かれています。その場合は API キーの管理と、入力してよい情報の線引きが新しく必要になります。
Antigravity の無料枠に達して実行できなくなりました。
まず講師にお声がけください。判断のうえ、配布物の answer/prototype.html をご自身の output/ にコピーして、そこから続きを進めていただきます。作業が止まることはありません。
枠は週単位で回復する仕組みのため、当日その場で復活はしません。開催の数日前から重い利用を控えていただくと、当日の残量に余裕が出ます。
Gemini の生成が途中で切れました。
「続きを出力してください」と送ると、切れたところから続きが出ます。最初から出し直させないでください。
つなぎ目で同じ行が重複することがあります。貼り合わせたあと、重複した行を削ってからブラウザで開いて確認してください。
保存した HTML がブラウザで開けません。テキストエディタで開いてしまいます。
拡張子が .txt のまま保存されている可能性が高いです。Windows はエクスプローラーの表示タブで「ファイル名拡張子」にチェックを入れると、実際の拡張子が見えます。meeting-organizer.html に直してください。
もう1点、コピーした先頭に説明文が混ざっていると表示が崩れます。<!DOCTYPE html> より前と </html> より後は削除してください。
BPMN 図が表示されません。空のままです。
図に載るのは決定事項と ToDo です。課題は図には出しません。読み込んだ議事録から ToDo が1件も取れていないと、図は空になります。
担当者と行動が書かれた行があるかを確認してください。整理結果の画面で分類を手直ししてから、「図を再生成」を押すと反映されます。それでも出ない場合は、配布物の docs/議事録_20260710_定例.md で試してください。素直な構造で書いてあります。
社内のネットワークで、生成したアプリは動きますか。
動きます。外部の CDN・フォント・API・画像を一切参照しない作りにしてあるため、ネットワークを切っても表示されます。動作確認のチェックリストにも「ネットワークを切っても表示される」を入れてあります。
もし切ると表示が崩れる場合は、生成物のどこかに外部参照が混ざっています。Antigravity に「外部から読み込んでいる箇所を探して、ファイル内に埋め込む形へ置き換えてください」と指示してください。
成果物はどこに保存すればよいですか。
展開したフォルダの output/ に、決められた名前で保存してください。アプリ本体は meeting-organizer.html、修正前のバックアップは meeting-organizer_bk.html、そのほかに 確認メモ.md と 追加した機能.md の4点です。
ブラウザのダウンロードフォルダに置いたままにすると、あとで見失います。生成した直後に output/ へ移してください。
Day1・Day2 を欠席しました。当日ついていけますか。
ついていけます。Day3 は前半が座学、後半が手を動かすハンズオンで、Day1・Day2 の成果物を持ち込む前提にはしていません。
Day1 は生成AIの基礎と営業への転換、Day2 は上流設計とベンダーコントロールの観点を扱いました。当日は S01 の冒頭で本日のゴールと役割分担を最初から説明しますので、そこから入っていただければ大丈夫です。