---
title: 勉強会_AIでジェネレーター_新人向け_石黒友季子_20260524
tags:  #ai  
author: [smile_yukiko_it](https://www.docswell.com/user/smile_yukiko_it)
site: [Docswell](https://www.docswell.com/)
thumbnail: https://bcdn.docswell.com/page/GEWG15GPJ2.jpg?width=480
description: 勉強会_AIでジェネレーター_新人向け_石黒友季子_20260524 by smile_yukiko_it
published: May 24, 26
canonical: https://www.docswell.com/s/smile_yukiko_it/KE188Q-2026-05-24-093733
---
# Page. 1

![Page Image](https://bcdn.docswell.com/page/GEWG15GPJ2.jpg)

勉強会 / 新人向け
AIといっしょに、はじめての
ジェネレーターづくり
～ 1枚のHTMLで「入力→出力」の小さな道具を作ってみる ～
対象：プログラミング初級〜新人エンジニア（写経できればOK）
面白きこともなき世を面白く
石黒友季子


# Page. 2

![Page Image](https://bcdn.docswell.com/page/47ZLPNL6J3.jpg)

ORIENTATION
今日のゴールと進め方
ゴール
進め方（90分の例）
① 解説：道具のしくみ（20分）
• 「入力→出力」の小さな道具を1つ作れる
② デモ：AIと一緒に作る（20分）
• AIへの「伝わる頼み方」を体験する
• 動かして・直すまでを一周する
③ 演習：自分で作る（35分）
④ 振り返り（15分）


# Page. 3

![Page Image](https://bcdn.docswell.com/page/YJ6WM8WLJV.jpg)

WHAT
そもそも「ジェネレーター」とは？
入力されたものを、決まった形に整えて出すだけの小さな道具です。
入力
処理
出力
名前・項目など
整える・組み立てる
完成した文章
例）名前を入れたら「あいさつ文」が出てくる、みたいなもの。これも立派なジェネレーター。


# Page. 4

![Page Image](https://bcdn.docswell.com/page/GJ5MZ9MMJ4.jpg)

WHY
なぜ「1枚のHTML」から始めるの？
すぐ動く
配りやすい
こわくない
ブラウザで開くだけ。準備がいら
ない
ファイル1つ渡すだけ。環境構築の
説明が不要
小さいから、壊しても気軽に直せ
る


# Page. 5

![Page Image](https://bcdn.docswell.com/page/9E29R29R7R.jpg)

FLOW
作る流れは、たった4ステップ
1
2
3
4
決める
頼む
動かす
直す
何を作るか
小さく決める
AIに伝わる形で
お願いする
ブラウザで
開いて確認
おかしければ
直して再確認
③④はぐるぐる繰り返してOK。少しずつ良くしていきます。


# Page. 6

![Page Image](https://bcdn.docswell.com/page/D7Y4DY45EM.jpg)

STEP 2
AIへの頼み方＝「分・形・完・格」
分
形
完
格
小さく分けて頼む
出力の形を言う
完成の条件を言う
ていねいさを言う
「ふわっとお願い」だと、ふわっとしたものが返る。具体的に頼むほど、近いものが出ます。


# Page. 7

![Page Image](https://bcdn.docswell.com/page/VENY6PY4J8.jpg)

EXAMPLE
AIへの「頼み方」具体例
プロンプト例（コピペで使える形）
「名前を入力すると、あいさつ文を作る “1枚のHTML” を作って。
・入力欄1つ（名前）と、出力欄1つ（あいさつ文）
・ボタンを押すと『◯◯さん、こんにちは！今日もよろしくお願いします』と表示
・外部のライブラリは使わず、ファイル1つで完結
・コードはコピペでそのまま動く形で出して」
→ 分（やること）・形（HTML1枚）・完（こう表示）・格（コピペで動く）が入っています。


# Page. 8

![Page Image](https://bcdn.docswell.com/page/Y79PL3P4E3.jpg)

STEP 3
動かす：ブラウザで開くだけ
①
AIが出したコードをコピー
②
メモ帳に貼って index.html で保存
③
ファイルをダブルクリックで開く
サーバも環境構築もいりません。これがHTML1枚の良いところ。


# Page. 9

![Page Image](https://bcdn.docswell.com/page/G78DXMDV7D.jpg)

STEP 4
直す：エラーは“こわくない”
うまく動かないとき
AIに“そのまま”伝える
「こう表示されてほしいのに、
•
画面が真っ白／ボタンが効かない
•
文字化けする
•
思った表示にならない
こうなった。エラーは○○。
直して」
エラー文は要約せず
“全文そのまま”貼るのがコツ


# Page. 10

![Page Image](https://bcdn.docswell.com/page/L7LM83MRJR.jpg)

演習（35分）
「あいさつ文ジェネレーター」をAIと作る
1
作るものを決める（名前→あいさつ文）
5分
2
プロンプトを書いてAIに頼む
10分
3
出たコードを保存して開く
10分
4
おかしければAIに伝えて直す
10分


# Page. 11

![Page Image](https://bcdn.docswell.com/page/4EMY6DYPEW.jpg)

WORKSHEET
あなたのプロンプトを書いてみよう
「分・形・完・格」を意識して、AIへの頼み文を下書きしよう。
✎
✎
✎
✎


# Page. 12

![Page Image](https://bcdn.docswell.com/page/PER9P49YJ9.jpg)

TIPS
つまずきポイント＆コツ
小さく頼む
一度に全部でなく、まず最小で動かす
事実を渡す
エラーは全文。『動かない』だけだと直せない
少しずつ足す
動いたら1機能ずつ追加していく


# Page. 13

![Page Image](https://bcdn.docswell.com/page/P7XQ32Q4EX.jpg)

SAFETY
安全のはなし（だいじ）
作った道具に、入力した内容が「どこへ行くか」を意識しよう。
•
今日のような“1枚HTML”は、ふつう端末の中だけで完結（外部送信なし）
•
でも「外部に送る機能」を足すと話は別。送り先を確認する
•
会社の情報・個人情報は、安易に入力・送信しない


# Page. 14

![Page Image](https://bcdn.docswell.com/page/37K9YM9P7D.jpg)

REFLECTION
振り返り
1
今日いちばん『できた！』と思ったこと
2
次に作ってみたい小さな道具
3
まだ分からないこと


# Page. 15

![Page Image](https://bcdn.docswell.com/page/LJ3W9YW4J5.jpg)

今日のいちばん大事なこと
「小さく作って、動かして、直す」
これを、AIといっしょに。
お疲れさまでした。面白きこともなき世を面白く