Givery 0821vc.give-app.net
2026.08.21 FRI

バイブコーディング 研修

自分の業務を自分でアプリにし、それを会社にどう入れるかまでを1日で通します。作るのは HTML ファイル1本。インストールも起動コマンドも要りません。午後は、作ったものを情報システム部門に説明できる形に整え、効果の測り方と広げ方を決めます。当日の教材・手順・配布ファイルはこのページに集約しています。

開催日
2026年8月21日(金)
時間
[360min](昼休憩 [60min] 別)
形式
対面
受講者
アーサー・ディ・リトル・ジャパン株式会社様 1〜15名
講師
安田 光喜(Givery)

本日持ち帰るもの

終わったときに、次の4つが手元に残ります。作ることそのものが目的ではありません。会社にどう入れるかを決められる状態になって帰っていただくことが目的です。

GOAL 01

動くアプリ 2本

午前に全員で1本、午後にご自身の業務で1本。どちらも HTML ファイル1本で、ダブルクリックすれば動きます。人に渡すときはファイルを送るだけです。

GOAL 02

安全点検レポート

作ったアプリが、どこに何を送り、どこに何を保存し、誰が見られるか。情報システム部門の担当者がそのまま読める形の報告書を、/secure で自動生成します。

GOAL 03

効果測定ボード

施策を1行ずつ足すと、月あたりの削減時間と金額が積み上がります。何が効いて何がやめになったかを、数字で残せる状態にして帰ります。

GOAL 04

広げる道筋

誰から始めるか、何が満たされたら次へ進むか、いつやめると決めるか。30日・90日・180日の区切りで、自社の言葉に落として持ち帰ります。

何が作れるのか

先に見ていただくのが早いです。下の3本はすべて HTML ファイル1本でできています。外部と通信せず、入力した内容はお使いのブラウザの中だけに残ります。そのまま開いて触れます。

DEMO 01

効果測定ボード

部署ごとのAI活用施策を足していくと、月あたりの削減時間と金額が積み上がります。試行中・定着・停止で状態を切り替えると集計が変わります。役員会に出す1枚がこれで作れます。

DEMO 02

重み付け比較表

選択肢を評価軸ごとに採点し、軸の重みを掛けて総合点を出します。重みを動かすと順位がどう変わるかがその場で分かるので、結論が重みの置き方に左右されているかを確かめられます。

DEMO 03

貼るだけ集計ボード

Excel やスプレッドシートの範囲をコピーして貼るだけで、列を選ぶと集計とグラフが出ます。毎回ピボットを組み直している作業が、貼るだけで済みます。

CATALOG

作れるもの カタログ

領域別に並べた一覧です。誰が使い、何を入れると何が出てきて、どれくらいの効果が見込め、作るのにどれくらいかかるか。実在する事例には社名を入れています。作るものが決まらないときは、ここから選べば必ず着地します。

配布物

お使いのOSのボタンからダウンロードし、展開したフォルダを書類フォルダ(~/Documents)に置いてください。中身は同じで、ファイル名の文字コードだけが違います。当日の冒頭でも一緒にダウンロードします。

DOWNLOAD

受講者配布一式

ハンズオン資料、演習フォルダ、ワークシート、表現テンプレ集、チートシート、見本アプリ、社内で使うための資料の7つが入っています。展開したら SETUP-Mac.commandSETUP-Windows.bat をダブルクリックしてください。

DOWNLOAD ・ 午後に使う

AI活用ワークシート

午後の最初に、その場で書いていただきます。事前の記入は不要です。前回のシートが「AIに何を聞くか」を書くものだったのに対し、今回は「AIに何を作らせるか」を書きます。候補出し、作るものの12項目、完成の条件の言い換え表、画面の部品の呼び方の4シート構成です。

ファイル名が化けて見えるとき もう一方のボタンで落とし直してください。それでも直らない場合は、そのフォルダを Claude Code で開いて「このフォルダの文字化けしたファイル名とフォルダ名をすべて修正してください」と送ると復元できます。

当日の教材

ハンズオン資料は当日ずっと開いておいてください。セットアップを実行すると自動で開きます。

HANDS-ON

ハンズオン資料

当日の全手順です。どのフォルダで何をして、何ができたら次へ進むかが書かれています。進めた項目にチェックを付けると、ブラウザを閉じても残ります。Mac と Windows の操作を両方併記しています。

AFTER ・ 持ち帰り

社内で使う

情報システム部門への説明、効果の測り方、社内に広げる道筋、社内ルールのひな型。研修の後半で扱い、そのまま持ち帰って社内での議論に使える形にしてあります。

TEMPLATE

表現テンプレ集

図解の頼み方(Mermaid、draw.io)、画面の部品の呼び方40語、動きと見た目の指定、作ったものを人に渡す形。研修後にご自身で作るときに、ここを引きながら進められます。

CHEATSHEET

チートシート 3本

指示の型と直し方、Claude Code の道具の作り方、機密情報の扱い。それぞれ A4 横1枚に収まる分量です。研修後に手元で引くことを想定しています。

当日の流れ

午前 [150min]

[15min]今日の問い(何を決めに来たか、持ち帰るもの4つ)
[10min]環境の確認(セットアップファイルをダブルクリックするだけ)
[35min]経営から見たバイブコーディング(何が起きているか / 数字 / 同業の実例と事故 / 評価の軸 / 機密の線引き)
[10min]休憩
[25min]何が作れるのか(見本3本を動かす / カタログ70件 / 効果が出る条件)
[25min]AIへの指示の仕方(4段階 / プランモード / 仕様駆動 / 指示は資産として残る)
[30min]作らせてみる(要件を10行書く → 道具を組ませる → 作らせて昼休憩へ)

昼休憩 [60min]

[60min]この間、投げた処理が動き続けます。PCは開いたままで構いません

午後 [210min]

[15min]午前の回収(動かす / 完成の条件と突き合わせる / 作り変える)
[25min]自分の業務を1つ選ぶ(ワークシート、またはカタログから)
[45min]自分の業務アプリ(/gyomu に渡す → 待ち時間に座学)
[10min]休憩
[25min]直す・仕上げる(画面を撮って渡す / 現状・達したい状態・制約の3点)
[30min]安全に配れる状態にする(/secure で点検 → 情シスに出す資料を作る)
[20min]配る・公開する(渡し方の3択 / Cloudflare で URL を出すまで)
[20min]効果をどう測るか(効果測定ボードに自分の施策を入れる)
[20min]社内に広げる道筋(30日・90日・180日 / 誰から始めるか / やめどき)と質疑
このページの使い方 教材・手順・配布ファイルはすべてこのページに集約しています。お気に入りに登録して、当日アクセスしてください。演習の題材は公開情報と架空の企業で組んでいますので、実際の案件情報や個人情報は入力せずに進めてください。判断に迷ったときは、入れない側が正解です。