初心者AI体験 Code for OYAMA

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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