leale
第1期 Day 3
石垣商店
株式会社leale — AI 活用 企業研修 第1期

Day 3：ミニ Web アプリ
制作ハンズオン

AI にコードを書かせて、石垣商店オリジナルの業務ツールを
今日中に完成させる。3日間の集大成となる 4 時間。

顧客
株式会社石垣商店
業種
銅・真鍮加工製造業
参加者
13名
日程
2026年　月　日
0:00-0:20オリエンテーション
0:20-1:00Web アプリ基礎
1:10-2:40メインハンズオン
2:50-3:40追加機能実装
3:40-4:00発表 + 修了式
Opening 0:00 - 0:20

3日間の集大成へ
— 今日はアプリを完成させる日

🎯 Day 3 のゴール

AI にコードを書かせて「材料計算チェッカー」ミニ Web アプリを完成させ、自分だけのツールにカスタマイズする。

3日間 振り返りクイズ（5分）

ここまでの学びを確認しましょう。スマホかブラウザで答えてみてください。

Q1. 生成 AI を一言で言い表すと？
A. 完璧な計算機
B. 知識は膨大だが経験ゼロの優秀な新人
C. インターネット検索エンジン
D. ロボット工場
Q2. Claude が特に得意なことは？
A. GWS アプリとの直接連携
B. 長文・論理的思考・コード生成
C. リアルタイムのニュース検索
D. 正確な数値計算
Q3. プロンプトで最も重要なことは？
A. できるだけ短く書く
B. 敬語を使う
C. 役割・背景・目的・形式を具体的に伝える
D. 英語で書く
宿題アイデアをホワイトボードや付箋に書き出してもらうと良いです。多様なアイデアが出ると Section 3 の動機づけになります。全員が同じハンズオンに集中できるよう「今日はまず全員で材料計算チェッカーを作る」と明示してください。
Live Poll — 開始時アンケート
3日間で一番役立ったものは何ですか？
QRコード
（講師設定）
参加者はスマホで
QR を読み取り投票
Day 1：Gemini で Gmail・Docs を効率化
Day 2：Claude でプロンプト技術習得
Day 2：実務演習（見積もり・報告書）
全体：AI への苦手意識がなくなった
📋 講師：「今日はその学びを全部使って、実際に動くアプリを作ります」と伝えて期待値を上げてください
Section 1 / 講義 0:20 - 1:00 / 40分

Web アプリとは何か
— HTML / CSS / JS の役割と AI との組み合わせ方

🎯 このセクションのゴール

Web アプリの3要素を理解し、「AI にどこを書かせればいいか」がわかるようになる。

1-1. HTML / CSS / JavaScript — 建物のたとえ（15分）

Web アプリは3種類のコードでできています。難しくはありません。

H
HTML

骨格・構造
「柱と壁」

C
CSS

デザイン・見た目
「壁紙と塗装」

J
JavaScript

動き・計算
「電気・設備」

ポイント：石垣商店の「材料計算チェッカー」で言えば、入力フォームが HTML、色やレイアウトが CSS、重量を計算する式が JavaScript です。

1-2. システムの育て方 5ステップ（10分）

業務システムは、いきなり大きく作るのではなく 小さく始めて段階的に育てていくのが基本です。「今日作るアプリはこの中のどこにいるのか？」を最初に押さえます。

📦 システムは「3つの部品」でできている
① フロントエンド

見える画面
（ボタン・入力欄）

② バックエンド

裏で動く仕組み
（計算・処理）

③ データベース

情報を溜める箱
（記録・保管）

STEP
1
スプレッドシートで管理する

在庫表・顧客リスト・日報など。手で入力して、関数で集計するだけのシンプルな状態。画面・処理・データが全部ひとつのシートに同居。

STEP
2
数式で自動化を始める

SUM・IF だけでなく、別のシートからデータを引っ張る IMPORTRANGE、絞り込む QUERY 等を使うと、プログラミングなしで複数ファイル横断の処理ができる。

STEP
3
裏で小さい命令を動かす（GAS デビュー）

GAS（Google Apps Script）は、スプレッドシートに「裏で動く小さな命令」を追加できる機能。例：毎朝9時に在庫表をメール送信／ボタンを押すと自動で帳票を作る。画面は今までのスプレッドシートのまま、裏側だけ強くなる。

STEP
4
Google フォームと連携する

画面は Google フォームに任せる。データはスプレッドシートに自動で溜まる。GAS で集計・通知をする。画面は Google の作った安定品 = エラー率ほぼゼロ。中小企業の業務システムの多くがここで十分。

STEP
5
自分専用の Web アプリを作る
📍 今日のゴール

画面（HTML/CSS/JS）も自分で作る。AI に書かせるから書ける。データの保存先はスプレッドシートでも、ブラウザのメモでも OK。今日は AI と一緒に「材料計算チェッカー」をこの形で作ります。

💡 大事なポイント

どのステップも「3つの部品」で考えると、今やっていることが整理できる。STEP 3〜4 は第2期で本格的に扱います。

参加者には「全部覚えなくていい」「今日は STEP 5 を AI と一緒に体験する日」と伝えてください。STEP 1-4 は"将来こうやって育てられる"という地図を渡すだけで十分。

1-3. AI にコードを書かせる基本方針（10分）

コードを自分で書く必要はありません。AI に書かせるコツを押さえましょう。

1
完成イメージを言葉にする

「誰が・何を・どう操作すると・何が起きるか」を具体的に書く。「なんかいいかんじのツール」は NG。

2
段階的に作らせる

一度にすべてを頼まず「まず HTML の骨格だけ」→「次に CSS」→「次に計算ロジック」と分けて依頼する。

3
エラーはそのまま貼り付ける

ブラウザのエラーメッセージをコピーして「このエラーが出ました。修正してください」と貼るだけで OK。

4
コードは html ファイルに保存して開く

メモ帳等に貼り付けて「○○.html」で保存。ダブルクリックするだけでブラウザで開ける。

「コードを読める必要はない」と明言してください。目的は「AI を使って動くものを作る体験」です。コードの意味を全部説明しようとしないこと。

1-4. 今日作るもの — 材料計算チェッカー（5分）

石垣商店様の銅・真鍮加工業務に特化した計算ツールです。

完成イメージ
  • ✅ 製品名を入力できる
  • ✅ 材質（銅 / 真鍮）をドロップダウンで選択できる
  • ✅ 直径(mm) と長さ(mm) を入力できる
  • ✅ 「計算」ボタンを押すと概算重量(g) が表示される
  • ✅ 見やすいデザイン（石垣商店のブランドカラー）
計算式（JavaScript で実装）
重量(g) = π × (直径/2)² × 長さ × 密度 / 1000
銅の密度：8.96 g/cm³
真鍮の密度：8.5 g/cm³（8.4〜8.7 の中央値）
☕ 休憩 10分（1:00 - 1:10）
Section 2 / メインハンズオン 1:10 - 2:40 / 90分

材料計算チェッカーを
Claude と一緒に作る

🎯 ゴール

Claude に段階的にコードを書かせ、ブラウザで動く「材料計算チェッカー」を全員が完成させる。

STEP 1: HTML の骨格を作る（15分）

まず Claude に「骨格だけ」を頼みます。以下のプロンプトをコピーして Claude に貼り付けてください。

STEP 1 プロンプト
あなたは Web 開発の専門家です。 銅・真鍮加工メーカー「石垣商店」向けの材料計算チェッカーを作ります。 まず HTML の骨格だけを作ってください。CSS や JavaScript は後で追加します。 【入力フォームに必要な項目】 - 製品名（テキスト入力） - 材質（銅 / 真鍮 のドロップダウン選択） - 直径（mm、数値入力） - 長さ（mm、数値入力） - 「計算する」ボタン 【出力エリア】 - 計算結果（重量 g）を表示するエリア HTML のみで、style タグ・script タグは不要です。 コードブロックで出力してください。
1
Claude からコードが返ってきたら

コードをすべて選択してコピーする（Ctrl+A → Ctrl+C）

2
メモ帳（またはテキストエディタ）に貼り付ける

Windows：スタートメニュー → メモ帳　Mac：テキストエディット

3
「calculator.html」という名前で保存する

ファイル → 名前を付けて保存 → ファイル名に「calculator.html」と入力

4
ブラウザで開いて確認

保存したファイルをダブルクリック → Chrome や Edge で開く

メモ帳で保存するとき「すべてのファイル」を選択して .html 拡張子にする必要があります。.txt になってしまうと動きません。トラブルが多い箇所なので全員の手順を確認してください。

STEP 2: CSS でデザインを整える（20分）

骨格ができたら、見た目を整えましょう。

STEP 2 プロンプト
先ほどの HTML に CSS を追加してください。 【デザイン要件】 - ページの背景：落ち着いたグレーまたはオフホワイト - メインカラー：ブロンズ・銅色（#b87333 付近） - フォント：見やすいサンセリフ体 - 入力フォームはカード状に中央配置（最大幅 500px） - 「計算する」ボタンは大きく、クリックしやすく - 計算結果の数値は大きく目立つように表示 - スマートフォンでも見やすいレスポンシブデザイン CSS を <style> タグに含め、完全な HTML ファイルとして出力してください。
ヒント：気に入らないデザインは「ボタンの色を青にしてください」「フォームをもっと大きくしてください」など追加で頼めば変えてもらえます。

STEP 3: 重量計算ロジックを追加する（25分）

JavaScript で実際に計算できるようにします。

STEP 3 プロンプト
先ほどの HTML + CSS に JavaScript の計算機能を追加してください。 【計算仕様】 材質ごとの密度： - 銅（Cu）：8.96 g/cm³ - 真鍮（Brass）：8.5 g/cm³ 計算式： 重量(g) = π × (直径mm / 2)² × 長さmm × 密度 / 1000 【機能要件】 1. 「計算する」ボタンを押すと計算を実行する 2. 重量を小数点以下2桁で表示する（例：125.34 g） 3. 入力値が空または0以下の場合はエラーメッセージを表示する 4. 製品名も結果エリアに表示する（例：「製品名：フランジ A の重量：125.34 g」） 5. 複数回計算した場合は履歴を5件まで表示する 完全な HTML ファイル（HTML + CSS + JS すべて込み）として出力してください。
EXERCISE — 動作確認

完成したアプリをテストしよう

  1. ファイルを保存してブラウザを更新（F5）
  2. 製品名：「フランジA」、材質：銅、直径：30mm、長さ：50mm を入力
  3. 「計算する」ボタンを押して結果を確認
  4. 正解：π × 15² × 50 × 8.96 / 1000 ≈ 316.7 g
⏱ 5分で確認

STEP 4: エラーが出たときの対処法（10分）

エラーが出ても慌てないでください。AI がすぐ直してくれます。

よくあるエラー
  • ・ボタンを押しても何も起きない
  • ・NaN（非数）が表示される
  • ・文字化けする
  • ・レイアウトが崩れる
対処法
  • ① F12 キー → Console タブを開く
  • ② 赤いエラー文をコピー
  • ③ Claude に貼り付けて修正依頼
  • ④ 直ったコードで上書き保存
エラー修正プロンプト
以下のエラーが出ています。修正してください。 【エラーメッセージ】 （ここにエラーをそのまま貼り付ける） 【現在のコード】 （ここに現在の HTML ファイルの内容を貼り付ける） エラーを修正した完全なコードを出力してください。
「エラーメッセージをそのまま貼るだけ」というシンプルさを強調してください。受講者がエラーに怖じ気づかず AI を活用する習慣を作ることが重要です。実際にエラーを意図的に出して実演してみると効果的です。

STEP 5: 自分用にカスタマイズする（20分）

基本が完成したら、石垣商店の業務に合わせてカスタマイズしましょう。

カスタマイズ プロンプト例
以下の追加機能を実装してください。 【追加したい機能（当てはまるものを選んで使ってください）】 - 材質に「洋白（ニッケルシルバー、密度8.7 g/cm³）」を追加 - 計算結果をキログラム（kg）でも表示する - 「リセット」ボタンを追加して入力欄と結果をクリアできるようにする - 印刷ボタンを追加して計算結果を印刷できるようにする - 計算履歴をダウンロードできるようにする（CSV 形式） - 会社名「石垣商店」のロゴテキストをヘッダーに追加する
Live Poll — ハンズオン後
アプリが完成しましたか？
QRコード
（講師設定）
参加者はスマホで
QR を読み取り投票
完成！計算も正しく動いた
ほぼ完成、一部動かない箇所がある
エラーが出て止まっている
まだ途中（Section 3 で続ける）
📋 講師：「エラーが出ている方、今すぐ一緒に解決します」と声をかけて個別サポートを優先してください
☕ 休憩 10分（2:40 - 2:50）
Section 3 / 個人作業 2:50 - 3:40 / 50分

追加機能の実装
— または自分のアプリ作りへ挑戦

🎯 ゴール

材料計算チェッカーをさらに強化するか、宿題で考えてきた自分のアイデアを形にする。

選択肢A：材料計算チェッカーに機能を追加する

以下から好きな機能を選んで Claude に実装させましょう。

1
材料費計算

銅の単価を入力すると材料費も同時計算

2
印刷ボタン

計算結果を A4 形式で印刷できる

3
メール文作成

計算結果をメール文章の形式でコピー

4
CSV 出力

計算履歴をエクセルで開けるファイルで保存

材料費計算 追加プロンプト
現在の材料計算チェッカーに「材料費計算」機能を追加してください。 【追加仕様】 - 材料単価（円/kg）を入力するフィールドを追加 - 重量と単価から「材料費（円）」を計算して表示 - 材料費は整数で表示（小数点なし） - 単価の入力が空の場合は材料費は表示しない（重量だけ表示） 現在のコードをベースに追加してください。完全な HTML ファイルで出力してください。

選択肢B：自分のアイデアで新しいツールを作り始める

開始時に発表したアイデアを形にしてみましょう。以下のプロンプトテンプレートを使ってください。

新規アプリ作成テンプレート
あなたは Web 開発の専門家です。 銅・真鍮加工メーカー「石垣商店」向けの業務ツールを作ります。 【ツール名】 （例：簡易見積もりフォーム） 【目的・背景】 （例：営業担当が電話口でお客様に概算の見積もりを伝えるため） 【入力項目】 （例：材質、形状、寸法、数量） 【出力・計算結果】 （例：概算の材料費と工賃の合計） 【その他の要件】 （例：スマホで使えること、印刷できること） まず HTML の骨格から始めてください。
Section 3 は各自のペースで進んでもらいます。詰まっている人を優先してサポートし、早く進んでいる人には「次に何ができたら業務が楽になるか」を考えながら自由に機能を追加させてください。残り10分でアプリのスクリーンショットを撮るよう促してください。
Section 4 / 発表 3:40 - 4:00 / 20分

完成したアプリを発表しよう
— 3日間の修了式

🎯 ゴール

完成したアプリを見せ合い、3日間の成長を全員で実感する。第2期（上級コース）への期待を高める。

PRESENTATION

画面共有 または 実演で発表（1人30秒）

  1. 作ったアプリ名と「誰のどんな業務に役立つか」を一言で紹介
  2. 実際に数値を入力して計算結果を見せる
  3. 「次に追加したい機能」を一言で
⏱ 13名 × 30秒 ≈ 約7分
COMPLETION MESSAGE

第1期 修了おめでとうございます 🎉

3日間で、AI の基礎知識から Gemini・Claude の実務活用、そして自分専用の Web アプリ制作まで駆け抜けました。

みなさんはもう「AI を使える人」です。
ここから先は、日常業務の中で少しずつ試して、自分の「使い方」を磨いていってください。

第2期（上級コース）のご案内

第1期を修了した方の中から、特に意欲的な方を対象に上級コースを開催します。

Day 1
AI 管理責任者の
役割 × GAS 入門
Day 2
Claude API ×
エージェント開発
Day 3
業務アプリ開発 ×
運用設計
対象：第1期修了者で「会社全体の AI 活用を引っ張りたい」「業務自動化を自分の手で実装したい」という意欲のある方
Live Poll — 最終アンケート
第2期（上級コース）に参加したいですか？
QRコード
（講師設定）
参加者はスマホで
QR を読み取り投票
ぜひ参加したい！
興味はある、内容次第
まず第1期の内容を実務で試したい
今は参加が難しい
📋 講師：結果を見せながら第2期の参加者を募集。「参加したい方は研修終了後に名前を教えてください」と案内してください

今日からできること — 次の一手

1
今日作ったアプリを職場で使ってみる

完璧でなくてよい。実際に使うことで「次に何が必要か」が見えてくる。

2
毎日 1 回 Claude または Gemini に何かを頼む

「メールの返信を書いて」「この数字を表にして」等、小さなことから継続する。

3
「AI でこれできないかな」を口癖にする

業務で面倒だと感じた瞬間に AI を試すクセをつける。それが習慣化の一歩。