---
title: 初心者AI体験 Code for OYAMA
tags: 
author: [びし](https://www.docswell.com/user/bishi)
site: [Docswell](https://www.docswell.com/)
thumbnail: https://bcdn.docswell.com/page/87DKKW8MJG.jpg?width=480
description: Code for OYAMA主催で開催した初心者向けのAI体験会の資料です。
published: April 26, 26
canonical: https://www.docswell.com/s/bishi/ZGNLY8-2026-04-26-114351
---
# Page. 1

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

第6回 もくもく会 / 特別編
初⼼者AI体験
〜AIに、はじめまして〜
Code for OYAMA
2026年4⽉29⽇（⽔・祝）9:30〜12:00
会場︓⼩⼭市市⺠活動センター「おやま〜る」


# Page. 2

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

OPENING
1/5 はじめに
今⽇のゴール
AIを“こわがらず触れる”状態で
帰ってもらう。
上⼿に使いこなすことは⽬標にしません。まずは触ってみて、
「あ、できるかも」と思えたら⼤成功です。
Code for OYAMA 初⼼者AI体験
2 / 33


# Page. 3

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

OPENING
2/5 はじめに
今⽇のタイムテーブル
10分
オープニング・⾃⼰紹介
20分
① AI体験のご紹介
20分
② AIで画像をつくってみよう
10分
休憩
20分
③ AIにオリジナルのお話を書いてもらおう
30分
④ AIでかんたんWebアプリ（ゲーム）
40分
⑤ 交流タイム・振り返り
Code for OYAMA 初⼼者AI体験
3 / 33


# Page. 4

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

OPENING
3/5 はじめに
会場のお願い
Wi-Fi
写真・撮影
会場のWi-Fiをご利⽤ください（当⽇
SSID/PWは会場にて掲⽰）
広報⽤に会場⾵景を撮影します。写りたく
ない⽅は挙⼿でお知らせください
質問はいつでも
楽しむのが⼀番
「あ、わからない」を貯めないで。⼿を挙
げる or 近くのスタッフへ
うまくいかなくて全然OK。困ったらとなり
の⼈やスタッフと⼀緒に
Code for OYAMA 初⼼者AI体験
4 / 33


# Page. 5

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

OPENING
4/5 はじめに
⾃⼰紹介タイム
お名前 ＋ 今⽇期待していること
⼀⼈あたり 20秒くらいでラフに
例︓
「⼩⼭市の◯◯です。AI、ニュースでよく聞くけど触ったことなくて。
今⽇ちょっとでも“⾃分でも使えそう”って思えたら嬉しいです。」
Code for OYAMA 初⼼者AI体験
5 / 33


# Page. 6

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

01
SECTION 1
AI体験のご紹介
そもそもAIって︖ 今⽇の相棒Gemini


# Page. 7

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

SECTION 1 / AI体験のご紹介
1/4
そもそも AI ってなに︖
ざっくり⾔うと、「⼈間みたいに考えたり・つくったりする“仕組み”」。
スマホの顔認識
⾃動翻訳
おすすめ表⽰
写真の「⼈の顔」を⾃動で⾒つけ
る
英語を⽇本語にスッと変換
YouTubeやSpotifyの“次の⼀本”
Code for OYAMA 初⼼者AI体験
7 / 33


# Page. 8

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

SECTION 1 / AI体験のご紹介
2/4
今⽇注⽬するのは「⽣成AI」
⾒分けるコツ︓“新しいものをつくる”AIが⽣成AI。
⽂章・画像・⾳・コードなどを、お題に合わせてつくってくれます。
⽂章
画像
コード
もっと⾊々
物語・要約・メール
イラスト・写真⾵
アプリ・ゲーム
⾳・動画・⾳楽…
Code for OYAMA 初⼼者AI体験
8 / 33


# Page. 9

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

SECTION 1 / AI体験のご紹介
3/4
今⽇の相棒︓Google Gemini
Gemini（ジェミニ）
Googleの⽣成AI
ログインしてみよう
1
2
⽂章も画像もコードも、
1つのチャット画⾯で
お願いできる万能選⼿。
Code for OYAMA 初⼼者AI体験
3
ブラウザで
gemini.google.com を開く
右上「ログイン」→
Googleアカウントでサインイン
下部のチャット欄が
表⽰されたら準備完了 ✨
9 / 33


# Page. 10

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

SECTION 1 / AI体験のご紹介
4/4
うまくいくコツ︓プロンプト
AIへの“お願いの仕⽅”がプロンプトです。
だれが
なにを
どんな⾵に
どこで
例︓⼩学⽣の⼥の⼦、猫
例︓本を読む、ジャンプ
する
例︓⽔彩画⾵、ドット絵
⾵
例︓桜の下、宇宙ステー
ション
組み合わせると強い 👉 「桜の下で本を読む猫を、⽔彩画⾵に描いて」
うまく出ない時は、要素を⾜したり減らしたり。何度でも聞き直してOK︕
Code for OYAMA 初⼼者AI体験
10 / 33


# Page. 11

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

02
SECTION 2
AIで画像をつくってみよう
プロンプトで絵を描いてもらう


# Page. 12

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

SECTION 2 / 画像をつくろう
1/5
まずはシンプルなお題から
STEP 1
STEP 2
STEP 3
STEP 4
⾒本を⾒る
⼀緒にやる
⾃分で試す
シェアする
講師がまず1つ作ってみる
同じお題をみんなで⼊れてみ
る
好きなお題に変えてみる
となりの⼈に⾒せ合う
今⽇の最初のお題
「桜の下で本を読む猫」を描いて
Geminiのチャット欄に⼊⼒して、送信 → 出てくる画像を眺めてみよう
Code for OYAMA 初⼼者AI体験
12 / 33


# Page. 13

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

SECTION 2 / 画像をつくろう
2/5
プロンプトの書き⽅
😅 ざっくりすぎる例
✨ 情報を⾜した例
「猫を描いて」
「桜の下で本を読む
三⽑猫を、⽔彩画⾵に」
AIが⾃由に想像して描く。
気に⼊るかは運まかせ。
Code for OYAMA 初⼼者AI体験
“だれが／なにを／どこで／
どんな⾵に”の要素を追加。
イメージに近づきやすい。
13 / 33


# Page. 14

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

SECTION 2 / 画像をつくろう
3/5
応⽤︓スタイル・構図を変えてみる
🎨 スタイル指定の例
📐 構図・アングルの例
•
⽔彩画⾵ / 油絵⾵
•
真上から⾒た / 真横から
•
ドット絵⾵ / ピクセルアート
•
アップ（顔のドアップ）
•
•
アニメ調 / 漫画⾵
写真⾵ / リアル
•
•
全⾝が⼊るように
朝の光で / ⼣焼けの中で
•
クレヨン画⾵ / 落書き⾵
•
広い背景で / ⼩さく中央に
Code for OYAMA 初⼼者AI体験
14 / 33


# Page. 15

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

SECTION 2 / 画像をつくろう
4/5
ちょっと⼤事な話︓AIと著作権
⽇本の法律でのざっくり整理です（2024年 ⽂化庁の考え⽅）
AIの学習には、著作物をわりと⾃由に使える
著作権法30条の4。ただし「権利者の利益を不当に害する」場合は例外あり。
出てきた画像が、既存の作品と“そっくり”だと危ない
類似性 ＋ 依拠性（元作品を知ってる等）が揃うと著作権侵害になりうる。
SNSに載せる・配る・売るときは要注意
私的に⾒るだけなら緩いが、公開・販売では責任を問われる可能性あり。
Code for OYAMA 初⼼者AI体験
15 / 33


# Page. 16

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

SECTION 2 / 画像をつくろう
5/5
シェアタイム
お気に⼊りの⼀枚を、
となりの⼈に紹介してみよう
「どんなプロンプトで出したか」も⼀緒に話すと盛り上がります
🌸
Code for OYAMA 初⼼者AI体験
16 / 33


# Page. 17

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

03
SECTION 3
AIにオリジナルのお話を書いてもら
おう
情報を渡すほど、AIはあなたらしく応えてくれる


# Page. 18

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

SECTION 3 / お話を書いてもらおう
1/4
まずは“あなたのこと”をAIに渡そう
AIは、渡された情報を⼿がかりに応えてくれます。まずは⾃分の特徴をざっくり伝えてみよう。
性別
年齢
職業
性格
趣味
例
例
例
例
例
⼥性 / 男性
（答えたくなければ
省略OK）
30代 / 40代前半
（年代でOK）
保育⼠ / 会社員 / 学
⽣
（業種でもOK）
おっとり
⼼配性 / 負けず嫌い
登⼭ / ガーデニング
推し活
⚠ 個⼈を特定できる情報はNG 本名・住所・勤務先名・電話番号・メールなどは書かない。
Code for OYAMA 初⼼者AI体験
18 / 33


# Page. 19

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

SECTION 3 / お話を書いてもらおう
2/4
2ステップで“あなたらしい”エピソードを
まず⾃分を伝える → それから書いてもらう、の2回に分けて送信するのがコツ。
1
⾃分のプロフィールを伝える
私はこんな人です。覚えておいて。
・40代前半の女性／職業は保育士
・性格はおっとりしていて少し心配性
・休日の楽しみは登山とガーデニング
2
続けてエピソードを頼む
この“私”が週末に起こしそうな、ちょっと笑えるエピソードを400字くらいで書いてください。
Code for OYAMA 初⼼者AI体験
19 / 33


# Page. 20

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

SECTION 3 / お話を書いてもらおう
3/4
応⽤︓情報を⾜すほど、AIはピッタリ応える
出てきた物語に“ちょっと違うな”を感じたら、情報を⾜したり注⽂を付けて、もう⼀度頼んでみよう。
1
プロフィールを⾜す
2
「実は最近、膝を痛めていて…」と追加。状
況がリアルになる
3
ジャンルを指定
「ちょっと笑える／ほろりとする／ありそう
な失敗談」
シーンを指定
「朝の登⼭⼝で」「ガーデニング中に」と舞
台を具体化
4
⼝調を変える
「やさしい語り⼝で／三⼈称で／⽇記⾵に」
→ 渡す情報が増えるほど、AIは“あなた”にピッタリ合わせてくれる。会話で育てよう。
Code for OYAMA 初⼼者AI体験
20 / 33


# Page. 21

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

SECTION 3 / お話を書いてもらおう
4/4
シェアタイム
“⾃分っぽい︕”と感じた⼀⽂を
となりの⼈と共有しよう
どんな情報を渡したら“らしさ”が出たか、を添えると気づきが広がります。
Code for OYAMA 初⼼者AI体験
21 / 33


# Page. 22

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

04
SECTION 4
AIでかんたんWebアプリ
プログラミングせずに、動くゲームをつくる


# Page. 23

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

SECTION 4 / Webアプリ
1/6
今⽇つくるもの︓ブロック崩し
本命
ブロック崩し
予備のお題
インベーダー
弾を撃って敵を倒す
Pong
シンプルな卓球ゲーム
数当てゲーム
・操作はキー2つだけ（←→）
・改造しがいがたっぷり
Code for OYAMA 初⼼者AI体験
描画トラブル時の安全牌
23 / 33


# Page. 24

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

SECTION 4 / Webアプリ
2/6
Geminiにコードを頼んでみよう
コピペ⽤プロンプト
HTML 1ファイルで動く「ブロック崩し」ゲームを作って。
・<canvas>で描画、操作は左右キー
・外部ファイルやライブラリは使わない
・色は明るめ、残りブロック数を表示
・失敗するとゲームオーバー、全部消すとクリア
💡 ポイント
「HTML 1ファイルで」＝保存して開くだけで動く。
「外部ファイル使わない」＝セットアップ不要。トラブル激減︕
Code for OYAMA 初⼼者AI体験
24 / 33


# Page. 25

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

SECTION 4 / Webアプリ
3/6
まずは Canvas でそのまま動かそう
Gemini の Canvas なら、保存しなくても Gemini の中でそのままプレビューできます。
① Canvas で開く
返答の「Canvasで開く」ボタンをクリック。右側にコードと
プレビュー画⾯が並びます。
② プレビューで遊ぶ
プレビュー欄でそのまま動きます。保存・ダウンロード不要。
すぐに動作確認ができます。
③ そのまま追いお願い
「ボールを速くして」などと追加指⽰すれば、Canvas 内の
コードとプレビューが⾃動で更新されます。
→ ⾃分のPCやサーバーに残しておきたい場合は、次のページの⼿順で保存します。
Code for OYAMA 初⼼者AI体験
25 / 33


# Page. 26

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

SECTION 4 / Webアプリ
4/6
コードを保存してブラウザで動かそう
① コードをコピー
② メモ帳に貼付け
Geminiの返答の右上「コピー」ボタン
Windowsメモ帳 / Macテキストエディッ
ト
③ 名前を付けて保存
④ ダブルクリック
ファイル名を「game.html」にする（txt
不可）
ブラウザで開いて、遊んでみよう︕
⚠ メモ帳の「.txt」が残ると動きません。保存時「すべてのファイル」→「game.html」
Code for OYAMA 初⼼者AI体験
26 / 33


# Page. 27

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

SECTION 4 / Webアプリ
5/6
改造してみよう
Geminiに“追いお願い”するだけで、ゲームは育ちます。
ブロックの⾊を虹⾊にして
ボールのスピードを2倍にして
スコアを画⾯右上に表⽰して
ゲームクリア時にお祝いメッセージを出して
パドルを短くして難しくして
背景を夜空の画像⾵にして
🔁 新しいコードが出たら、また同じ game.html に貼り直して保存 → ブラウザ再読込
Code for OYAMA 初⼼者AI体験
27 / 33


# Page. 28

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

SECTION 4 / Webアプリ
6/6
シェアタイム
⾃分のゲームを、となりの⼈に
プレイしてもらおう 🎮
「ここ改造したんですよ」ポイントを⼀⾔添えてみてください。
Code for OYAMA 初⼼者AI体験
28 / 33


# Page. 29

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

05
SECTION 5
交流タイム・振り返り
今⽇の体験を、明⽇へつなぐ


# Page. 30

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

SECTION 5 / 交流タイム
1/3
今⽇の⼀⾔シェア
今⽇印象に残ったこと／これから試したいことを⼀⼈⼀⾔
⼀番びっくりしたこと
⼀番ワクワクしたこと
意外と難しかったこと
家に帰ってやってみたいこと
Code for OYAMA 初⼼者AI体験
30 / 33


# Page. 31

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

SECTION 5 / 交流タイム
2/3
AIと上⼿に付き合うコツ
個⼈情報は⼊れない
本名・住所・電話番号・マイナンバーなどはプロンプトに書かない。
⽣成物の「似すぎ」に注意
既存の作品やキャラクターにそっくりな場合は、公開・販売しない。
AIは「しれっと」間違える
事実っぽい嘘を⾔うことがある（ハルシネーション）。⼤事な情報は必ず別ソースで確認。
Code for OYAMA 初⼼者AI体験
31 / 33


# Page. 32

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

SECTION 5 / 交流タイム
3/3
Code for OYAMA の活動
シビックテック団体
Code for OYAMA
⼩⼭市をテクノロジーで
少しだけ便利に・楽しく。
・もくもく会（⽉1回）
・地域課題×IT のアイデアづくり
・どなたでも歓迎︕
Code for OYAMA 初⼼者AI体験
NEXT
次回もくもく会
フリースタイルで⾃分の作業を持ち寄る会。AI続
き・プログラミング・ ⾃分のプロジェクト、なん
でもOK。
connpass
code4oyama.connpass.com
お問い合わせフォーム
code4oyama.org
32 / 33


# Page. 33

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

ありがとうございました︕
〜 また、おやま〜るで会いましょう 〜
Code for OYAMA