Givery / 2 day hands-on
AIプロトタイピング研修
ChatGPT と Codex で CSV 可視化ダッシュボード を作りながら、
要件定義 → プロトタイピング → ベンダー説明 までを 1 周する 2 日間です。
- Day 1
- 2026 年 5 月 26 日（火）
13:00 〜 17:00
- Day 2
- 2026 年 6 月 2 日（火）
13:00 〜 17:00
- 形式
- オンライン（Teams）
ハンズオン中心
- 持ち物
- 事前セットアップ完了済みのノート PC
ヘッドセット・カメラ ON
このサイトの使い方
本サイトは 2 日間の研修中、画面の片隅で常時開いておくリファレンスです。タブを切り替えると、その時々で参照したい内容にすぐ辿り着けます。研修開始のオープニング時に URL を共有しますので、ブックマークしておいてください。
02 環境チェック
当日朝 10 分のセルフ確認
事前セットアップが完了しているかを 5 項目で素早く確認します。詰まったらここの切り分けマトリクスから入って、二次対応を判断します。
03 題材
CSV 可視化ダッシュボード
業務でよくある「CSV を渡されて Excel で集計してグラフ化する」作業を、ブラウザ上の単一 HTML で完結させる題材です。段階設計と技術スタックを確認できます。
04・05 Day 1 / Day 2
タイムテーブルと演習
各日のタイムテーブルと、Exercise の進め方リンクを集約しています。手が止まったらここに戻って、次に何をするかを再確認します。
06 ベストプラクティス
AI と仕事するコツ 7 つ
プロンプト設計の 4 要素、失敗パターン、AI と人の役割分担。研修中も研修後も繰り返し効く原則を整理しています。
07 発展課題
早く終わった方向け
フィルタ機能・複数 CSV 比較・PDF 出力の 3 課題を用意しています。実務応用に直結する内容です。
08 Tips & ダウンロード
PDF・公式情報源・Q&A
配布資料 PDF へのリンク、OpenAI / Chart.js / PapaParse の公式ドキュメント、よくある詰まりの Q&A を集約しています。
2 日間のゴール
研修終了時に、以下の 3 つが自力で出来るようになっている状態を目指します。
- 要件の言語化と AI 整理：ビジネス課題を「ジョブ・ペイン・やること・やらないこと」に分けて書き、AI に整理させたうえで業務実態と照らして自分でレビューできる。
- 仕様 → プロトタイプの流れ：ChatGPT で画面仕様を作り、Codex に渡して動く CSV 可視化ダッシュボードを単一 HTML で作れる。
- ベンダー説明資料の組み立て：作ったプロトタイプを材料にベンダー向け説明資料を組み立て、見積もり依頼前に質問リストを精緻化できる。
やること／やらないこと
| やること | やらないこと |
|---|
| 要件の言語化と AI でのたたき台作成 | 完成度の高い本番アプリ開発 |
| 単一 HTML で動く CSV 可視化ダッシュボード作成 | Node.js / npm / ビルドツール利用 |
| ベンダー向け説明資料の組み立て | 内製化・自前コーディング完結 |
| 動くプロトタイプを用いた発注レビュー観点の習得 | GitHub リポジトリ運用、Git 操作 |
| プロンプト設計の 4 要素（役割・文脈・制約・出力形式）の習得 | 個別の技術スタック（React / Python 等）の深堀り |
研修終了時に持ち帰る 5 つの成果物
すべて自分の手で作り、`output/` フォルダに保存します。明日からの実務で部品として再利用できる形にすることが目的です。
| 成果物 | 用途 |
|---|
requirements.md 要求整理シート | 新規企画の最初の言語化に流用 |
screen_spec.md 画面詳細仕様書 | AI へのコード生成指示の前段資料 |
dashboard.html 動くプロトタイプ | ベンダー説明で「動く実物」として提示 |
vendor_brief.md ベンダー向け説明資料 | 初回 MTG 前にベンダーへ送付 |
review_checklist.md レビュー観点 | 納品物受領時の確認チェックリスト |
研修中のサポート
質問は Teams のチャットに随時書いてください。エラーメッセージは「動かない」と言葉だけで伝えるより、ブラウザ開発者ツール（F12）→ Console タブの赤い文字をそのまま貼り付けるほうが、解決までの時間が桁違いに短くなります。
環境チェック
事前セットアップガイドの手順が完了している前提で、当日朝 10 分でセルフ確認をします。1 項目でも引っかかったら、後段の切り分けマトリクスに進んでください。Day 1 オープニング前に全項目グリーンにします。
必須 5 チェック（順番に実行）
- VSCode 起動 → 配布フォルダを開ける：「ファイル」→「フォルダーを開く」で
epsn-handson を選び、左サイドバーに AGENTS.md や handson/ が並ぶこと。
- GitHub サインイン済み：VSCode 左下の人型アイコン横に GitHub ユーザー名が表示されていること。
- Codex 拡張インストール済み：Extensions パネルに「Codex — OpenAI's coding agent」(提供元 OpenAI) がインストール済み表示。
- Codex に ChatGPT エンタープライズでサインイン済み：Codex サイドパネルにアカウント名／ワークスペース名が出ていること。
- 動作確認：Codex のチャット入力欄に
こんにちは と送って、日本語の応答が返ってくる。
切り分けマトリクス（症状別の一次対応）
| 症状 | 一次対応 | それでもダメな時 |
|---|
| Codex が拡張機能パネルに出てこない |
VSCode 最新版にアップデート → 再検索 |
VSCode 再インストール、または別ユーザープロファイルで試行 |
| Codex にサインインできない |
ブラウザを Chrome に変更 → 再ログイン |
ChatGPT エンタープライズの個人ブラウザログイン可否を確認 |
| 「こんにちは」に応答がない |
VSCode 完全終了 → サインアウト → 再ログイン |
社内プロキシ／ファイアウォール（OpenAI への HTTPS 接続）を情シスに確認 |
| 配布 ZIP が解凍できない |
ZIP の再ダウンロード、解凍先を C ドライブ直下に変更 |
研修事務局までメール／チャットで連絡し、別経路で再送 |
| GitHub サインインが弾かれる |
メール認証メールのリンクをクリック済みか確認 |
会社メールアドレスを使っているか、個人メールと取り違えていないか確認 |
「こんにちは」が通った後にやっておくこと
handson/ フォルダを VSCode で開いた状態にしておく- Codex のサイドパネルを画面右側に配置（コードと並べて見やすい）
- ブラウザのタブに、本サイト＋ ChatGPT＋GitHub Pages の予備を開いておく
- Teams を最大化し、講師のチャットが見えるようにしておく
事前セットアップ未完了の方へ
研修開始前に
事前セットアップガイド PDF を確認してください。研修中冒頭の 10 分では一括解決できないため、当日朝までに完了する必要があります。
業務データの取扱い
研修中、本物の顧客名・売上額・契約金額・個人情報は ChatGPT および Codex に入力しません。実例で試したい場合は、必ずダミー化してから貼り付けてください。
題材：CSV 可視化ダッシュボード
業務でよくある「CSV を渡されて、Excel で集計してグラフ化する」作業を、ブラウザ上で完結させる単一 HTML のダッシュボードを 2 日間で作ります。Node.js / npm を使わず、CDN から PapaParse と Chart.js を読み込むだけで動かす点が特徴です。
なぜこの題材なのか
3 つの理由で選定しています。
- 業務直結：営業企画・経営企画・経理・人事のいずれの部署にも、毎月「CSV を渡されて何かを可視化する」業務がある。研修後に最も再利用しやすい題材。
- 段階的に作れる：「CSV 読み込み → テーブル → グラフ 1 種類 → 種別切替 → 統計量」と段階が明確で、Day 1 後半に基礎版・Day 2 前半に完成版を作る設計に乗せやすい。
- 制約が現実的：環境制約（Node.js NG）を逆手にとって、単一 HTML＋CDN という「軽くて速い」スタイルでまとめられる。実装規模も適切。
完成形の機能
| 機能 | 説明 |
|---|
| CSV ドラッグ&ドロップ | ファイル選択ダイアログとドラッグ&ドロップの両対応 |
| 自動パース | PapaParse でヘッダー検出・型推定、行数／列数を表示 |
| データプレビュー | CSV の先頭 10 行を表で表示 |
| グラフ描画 | Chart.js で棒・折れ線・円グラフを切替表示 |
| 軸選択 UI | X 軸（ラベル列）／Y 軸（データ列）をセレクトで指定 |
| 基本統計量 | 数値カラムごとに平均・中央値・最大・最小・標準偏差を表示 |
| レスポンシブ | モバイル幅 768px 以下で 1 カラムに崩れる |
段階設計
Day 1 後半
基礎版
CSV 読み込み → テーブル表示 → 棒グラフ 1 種類が動く。ファイル名と行数／列数の表示まで。
所要：35 分（Exercise 4）
Day 2 前半
完成版
グラフ種別切替（棒・折れ線・円）、X 軸／Y 軸選択、基本統計量テーブル、スタイル仕上げまで。
所要：120 分（Exercise 2・3）
発展課題
応用機能
フィルタ機能・複数 CSV 比較・PDF 出力のいずれかを実装。実務応用に直結。
所要：20〜45 分（任意）
技術スタックと選定理由
| 採用 | 理由 |
|---|
| HTML / CSS / JavaScript（単一ファイル） | Node.js / npm が使えない環境制約。CDN のみで完結 |
| PapaParse（5.5.3 系） | CSV パーサーの定番。ブラウザ単体で動く、ヘッダー検出・型推定が強力 |
| Chart.js（4.5.1 系） | グラフ描画の定番。棒・折れ線・円を 1 ライブラリで網羅、軽量 |
配布サンプル CSV の中身
| ファイル | カラム | 用途 |
|---|
samples/sales-by-region.csv |
年月・地域・売上高・利益・取引件数・新規顧客数 |
月次レビュー想定。地域別・月次の集計演習 |
samples/monthly-expenses.csv |
月次経費の費目別明細 |
経費分析・予実差異の演習 |
samples/employee-kpi.csv |
従業員別の業績 KPI |
個人別パフォーマンス比較の演習 |
Tips：自社の CSV で試したい場合
研修中は配布サンプルを使うのが原則ですが、業務で抱えている CSV があれば「同じカラム構造のダミー版」を作って試すと、研修後の応用が一気に進みます。社員名・顧客名・金額は架空のものに置き換えてください。
Day 1：要件を言語化し、基礎版を動かす
2026 年 5 月 26 日（火）13:00 〜 17:00。
要件の言語化に時間をかけ、ChatGPT で整理 → 画面仕様まで作り込み、Day 1 後半で Codex に基礎版を生成させて動かすまでが目標です。
タイムテーブル
各演習のカード
Exercise 1 / 30 min
ジョブ・ペインの記述
「誰が」「どのような状況で」「何を達成するために」CSV ダッシュボードを使うのか、自分の言葉で 1 ページに書く。ペインは機能・社会・感情の 3 分類で。
アウトプット：output/requirements.md のたたき台
演習詳細を開く →
Exercise 2 / 40 min
ChatGPT で要件整理
Exercise 1 のジョブ・ペインを土台に ChatGPT に要件整理シートを作らせ、業務実態と照らして自分の手で書き直す。プロンプト設計の 4 要素を意識。
アウトプット：整理済み output/requirements.md
演習詳細を開く →
Exercise 3 / 50 min
画面詳細仕様書の作成
要件整理を元に「画面の役割」「表示情報（項目名・データ型）」「ユーザー操作」「制約」を埋める。Codex にコード生成させる直前の設計書として完成度を上げる。
アウトプット：output/screen_spec.md
演習詳細を開く →
Exercise 4 / 35 min
Codex で基礎版を生成
starter/dashboard.html から Codex 対話で、CSV を読み込んで棒グラフ 1 種類が動く基礎版を完成させる。動いた瞬間が研修の山場。
アウトプット：動く starter/dashboard.html
演習詳細を開く →
Day 1 のつまずきポイント
- Exercise 1：ジョブとペインの粒度が荒い。「使いやすい」「便利」が消えるまで書き直す
- Exercise 2：ChatGPT の出力をそのまま貼り付けて満足する。必ず自分の言葉に書き直す
- Exercise 3：データ型が「テキスト」「数字」のような曖昧表現になっている。string・integer・date のような具体型に
- Exercise 4：Codex に「全部書き直して」と頼むと差分が追えない。「○○だけ追加して」と小さく切る
Tips：Codex への最初の指示の型
最初の依頼の最後に「動かす前に質問があれば 3 つまで聞いてください」と書くと、Codex が前提確認を返してきます。OpenAI 公式が reverse interview pattern と呼ぶ手法で、初稿の品質が大幅に上がります。
Day 2 への持ち越し
Day 1 終了時に「Day 2 で重点的に確認したい部分」を 1 つメモしてください。Day 2 オープニング 10 分でその確認から始めます。基礎版が動かないまま終わってしまった人は、Day 2 冒頭で講師が個別フォローします。
Day 2：仕上げて、説明資料まで完成
2026 年 6 月 2 日（火）13:00 〜 17:00。
Day 1 の基礎版に機能を足して完成版にし、ベンダー向け説明資料の作成、ミニ発表会、理解度確認テストまで一気通貫で進めます。
タイムテーブル
各演習のカード
Exercise 1 / 10 min
Day 1 振り返り＋計画
基礎版が動くかを確認し、Day 2 で埋める 3 機能（種別切替・軸選択・統計量）の順番を決める。
演習詳細を開く →
Exercise 2 / 60 min
グラフ種別切替・軸選択
セレクトボックスを 3 つ（種別／ラベル列／データ列）追加し、それぞれの変更で即座に再描画されるようにする。小さい単位で AI に依頼する練習。
演習詳細を開く →
Exercise 3 / 60 min
統計量・スタイル仕上げ
数値カラムに対して平均・中央値・最大・最小・標準偏差を表示。白背景・ネイビーアクセントで仕上げ、レスポンシブ対応まで。
演習詳細を開く →
Exercise 4 / 30 min
ベンダー向け説明資料
完成したダッシュボードを材料に、ベンダーへの発注説明資料を作成。質問リストを「動くものを見た後に出せる質問」のみで 5 個以上。
演習詳細を開く →
Exercise 5 / 40 min
ミニ発表会
1 人 5〜7 分で発表。テーマ → 要件整理のキモ → 画面デモ → 質問リスト → 明日からどう使うか。スライドは作らず、画面共有＋口頭で。
演習詳細を開く →
Exercise 6 / 20 min
理解度確認テスト
GoogleForm 10 問選択式。合格目安 6 割。要件 3 層・ジョブ&ペイン・プロンプト設計・ベンダーレビュー・ダッシュボード構成の理解度を確認。
演習詳細を開く →
Day 2 中盤の AGENTS.md 取り込み
Day 2 の Exercise 3 が終わった段階で、講師から「ハンズオン直下の AGENTS.md を理想形に差し替えましょう」とアナウンスがあります。
研修開始時の AGENTS.md は意図的に最小化されていて、AI に望む状態を毎回口頭で伝える状態です。
そこから理想形（docs/codex-templates/AGENTS.example.md）に切り替えると、Codex の応答が一段速く・正確になります。
取り込み前後の差を体感することが、ベンダー発注時の仕様書作成スキルに直結します。
注意：発表会と理解度テストは時間厳守
Exercise 5（ミニ発表会）は人数 × 8 分が目安。1 人が長引くと後ろが詰まります。Exercise 6 は 20 分以内に必ず GoogleForm を送信してください。終了後に集計が走ります。
ベストプラクティス：AI と仕事するコツ
研修中、Codex に対して効きやすい指示の出し方を 7 つに整理しました。Day 1 と Day 2 で何度か繰り返し触れます。研修後の業務でも同じ原則が効きます。
プロンプト設計の 4 要素
OpenAI 公式のプロンプトガイドでは、効くプロンプトに必要な 4 要素が定義されています。研修中はこの 4 要素が揃っているかを毎回チェックしてください。
| 要素 | 意味 | 例 |
|---|
| 役割 / Role | AI に演じてほしい立場 | 「あなたは B2B SaaS の PM です」 |
| 文脈 / Context | 何を前提に考えるか | 「以下のジョブとペインから……」 |
| 制約 / Constraints | 守ってほしいルール | 「絵文字禁止」「200 字以内」 |
| 出力形式 / Format | どんな形で返してほしいか | 「見出し順・表形式で」 |
7 つの原則
1. 役割・背景・出力形式を必ず添える
AI に「これを作って」と裸で投げない。「あなたは ○○ です」「これは ○○ の用途で使います」「出力は ○○ の形式で」の 3 点を毎回添える。
2. 一回で全部完成させようとしない
「全部やって」より「セレクトを追加 → 動作確認 → 次へ」。小さい単位で検証を回すほうが、結果として早い。差分が追えなくなる前に止める。
3. 業務データは入れない原則
本物の顧客名・売上額を ChatGPT / Codex に入れない。ダミー化してから使う。社内ポリシーが許す範囲でも、研修中は徹底する。
4. AI のアウトプットを「たたき台」として扱う
初稿を 100% 信じない。必ず人が業務実態と照らして書き直す。これをサボると、後で必ず差し戻しが発生する。
5. プロンプトに制約を書ききる
「使ってはいけないライブラリ」「フォントスタック」「色」など、AI が勝手に決めて欲しくない要素はプロンプト側で確定させる。
6. エラーメッセージはそのまま貼る
「動かない」と伝えるより、ブラウザの Console（F12）の赤いエラーをそのままコピペするほうが、はるかに早く解決する。AI は「実際に起きていること」を求めている。
7. 「動かしてみた結果」を AI にフィードバックする
「ボタンを押したらこうなった、期待は ○○ だった」と具体的に返すと、Codex の次の応答がガラリと変わる。期待値とのギャップを伝えることが鍵。
Tips：reverse interview pattern
抽象的な依頼を投げる前に、「動かす前に質問があれば 3 つまで聞いてください」と書き添えると、AI が前提の確認を返してきます。OpenAI 公式が推奨する手法で、複雑なタスクほど効きます。
失敗パターン集（避けたい型）
| 失敗パターン | 何が起きるか | 対処 |
|---|
| 「いい感じにして」 | AI が解釈で迷い、暴走したコードを返す | 「色は #1e3461、余白 24px、フォント sans-serif」と数値で縛る |
| 「全部一気に作って」 | 差分が大きすぎて、どこが原因か追えない | 1 機能ずつ依頼 → 動作確認 → 次へ |
| AI の出力を読まずに承認 | 後段で動かない、想定と違う実装が混入 | 承認前に必ず差分を読む、変更点だけ要約させる |
| 本物データを入力 | 機密漏洩リスク、推論結果が業務的に不適切 | ダミー化してから渡す |
| 1 人で長時間詰まる | Day 1 / Day 2 の他の演習に進めなくなる | 15 分以上止まったら講師に声をかける |
AI と人の役割分担
| 領域 | AI に任せる | 人がやる |
|---|
| 要件整理 | 初稿の言語化、抜け漏れ補完 | 業務実態との照合、判断、優先順位 |
| プロトタイプ作成 | コード生成、定型実装、テストパターン | 仕様の確定、動作確認、UX 判断 |
| ベンダー説明 | 資料初稿、質問リスト生成 | 関係構築、交渉、最終判断 |
| レビュー | 機能網羅チェック、定型確認 | 重要度判断、修正方針の決定 |
発展課題（早く終わった人向け）
Day 1 / Day 2 の各演習を予定より早く終えた方は、ここから 1 つ選んで取り組んでください。実務応用に直結する内容で、研修終了後に最も再利用しやすい部分です。
3 つの発展課題
1 / やさしい / 20–30 min
フィルタ機能の追加
データの一部だけをグラフに反映するフィルタ UI を追加。カラム選択＋比較演算子（以上／以下／等しい／含む）＋値の 3 つで条件を組みます。
実務応用：BI ツール風の「絞り込み → 再集計」サイクルの基本パターン。Tableau や Looker の発想を最小単位で体験できる。
課題詳細を開く →
2 / ふつう / 30–45 min
複数 CSV 比較ビュー
2 つの CSV を同時にアップロードし、グラフを横並びまたは重ねて表示。統計量にも A／B／差分の 3 列を追加して、差分思考を可視化します。
実務応用：「先月 vs 今月」「自社 vs 競合」「実績 vs 目標」のような差分分析を、コードを書かずに高速で回せる土台。
課題詳細を開く →
3 / ふつう / 30–45 min
PDF 出力ボタン
現在の画面を PDF として保存するボタンを追加。window.print() と @media print の組み合わせで、外部ライブラリなしで PDF 化できます。
実務応用：ベンダー宛て資料・社内会議資料の自動生成。研修終了後、最も使い回しが利くスキル。
課題詳細を開く →
選び方の目安
| こんな人に | おすすめ課題 |
|---|
| 基礎版が動いたばかりで、もう少し触ってみたい | 1. フィルタ機能（やさしい） |
| 業務で「比較」が多く、すぐ応用したい | 2. 複数 CSV 比較 |
| 研修終了後、ベンダー説明資料を一気に強化したい | 3. PDF 出力 |
| 3 つ全部やりたい | 1 → 3 → 2 の順序を推奨。難度が滑らかに上がる |
Tips：bonus を始める前に
必ず完成版（Exercise 3 終了時）の dashboard.html を output/dashboard.html に保存してから始めてください。bonus の実装でバグった時に、安全な巻き戻しポイントになります。
Tips & ダウンロード
配布資料 PDF、よく使う公式情報源、研修中に起こりがちな詰まりポイントの Q&A を集約しています。研修中・研修後ともにここをブックマークしておいてください。
配布資料 PDF
OpenAI 公式情報源（2026 年 5 月時点で最新を確認済み）
ライブラリ公式情報源
よくある詰まり Q&A
Q. Codex が応答を返さない
A. ネットワーク／プロキシ問題が最頻。VSCode を一度完全終了 → 再起動 → Codex サインアウト → 再ログインで直ることが多いです。それでもダメなら、社内 PC から OpenAI への HTTPS 接続が許可されているか情シスに確認してください。
Q. CSV をアップロードしてもグラフが描画されない
A. ブラウザの開発者ツール（F12）→ Console タブを開き、赤いエラーをそのまま Codex のチャットに貼り付けてください。「動かない」より「Cannot read property 'destroy' of undefined」のような具体的エラーのほうが、解決が桁違いに早くなります。
Q. 業務の本物データを入れていいか迷う
A. 迷ったら入れない。会社名・人名・金額・契約番号は架空のダミーに置き換えてから入力してください。研修中は配布サンプル CSV のみで進めるのが原則です。
Q. 完成形を先に見たい
A. handson/completed/dashboard.html を開けば見られますが、まず自分の手で動くところまで作ってから見るほうが、学習効果が高いです。完成形を真似て写経すると、研修後に応用が利きません。
Q. Day 1 の Exercise 4 で基礎版が動かなかった
A. Day 2 冒頭 10 分の振り返り時間で講師が個別フォローします。動かなかった原因（プロンプトの粒度、ブラウザ側のエラー、Codex の応答品質）を言語化して、Day 2 を迎えてください。
Q. AGENTS.md の取り込みはいつやる？
A. Day 2 の Exercise 3 が終わった時点で、講師が「取り込みましょう」とアナウンスします。それまでは意図的に最小化された AGENTS.md のままで進めてください。取り込み前後の Codex 応答の差を体感することが研修の重要ポイントです。
Q. 発展課題は研修中にやらないとダメ？
A. 任意です。研修中に取り組んでも、研修後に挑戦しても構いません。実務応用に直結する内容なので、研修後の方が「自分の業務にどう生かすか」のイメージが湧きやすいかもしれません。
緊急時の連絡先
研修中に環境トラブル・通信障害・その他のサポートが必要な場合は、以下に連絡してください。
- Teams チャット：研修事務局チャンネル（即時対応）
- 講師に直接：研修中の画面共有中なら、ミュート解除して質問 OK
