Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
子供と Vibe Coding でゲームを作るコツ
Search
Satoshi5884
June 20, 2025
0
2
子供と Vibe Coding でゲームを作るコツ
第2回AI活用大発表会 2025年6月28日
Satoshi5884
June 20, 2025
Tweet
Share
More Decks by Satoshi5884
See All by Satoshi5884
20250508-ACL-seminar
satoshi5884
0
57
20250422_LT
satoshi5884
1
980
4/22 presentation
satoshi5884
0
16
Featured
See All Featured
GraphQLとの向き合い方2022年版
quramy
49
14k
Measuring & Analyzing Core Web Vitals
bluesmoon
7
490
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
15
1.5k
How to train your dragon (web standard)
notwaldorf
94
6.1k
Designing for Performance
lara
609
69k
What’s in a name? Adding method to the madness
productmarketing
PRO
23
3.5k
Making Projects Easy
brettharned
116
6.3k
Faster Mobile Websites
deanohume
307
31k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
252
21k
GraphQLの誤解/rethinking-graphql
sonatard
71
11k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
229
22k
Why Our Code Smells
bkeepers
PRO
337
57k
Transcript
子供とVibe Codingでゲームを作るコツ AIツールを活用した親子プログラミング ガクシ 第2回AI活用大発表会 2025年6月28日 1
目的 子供と一緒にAIツールを使用して 簡単なアクションゲームを作る 親子で楽しく学ぶ 最新のAIツールを活用 実際に動くゲームを完成させる 第2回AI活用大発表会 2025年6月28日 2
ガクシ / Gakushi 化学研究者 × AIアプリ開発者 本業 : 製薬系・化学 R&D
エンジニア 副業 : Python & Web アプリ開発 Flash ゲーム制作→生成 AI 時代に復帰 9 種の AI/業務効率化アプリを公開 メルマガ、note、ブログ、podcast コミュニティ & 登壇 ACL セミナー 4 回/約 300 名 AIAU・AIツール LT Night 等 計 540 名参加 Udemy コース 3 本 リリース 第2回AI活用大発表会 2025年6月28日 3
セミナー概要 実況デモンストレーション 内容: 子供と一緒にゲームを作っている様子を実況 時間: 1時間 → 15分程度に凝縮した映像 ポイント: 実際の制作過程をリアルに体験
第2回AI活用大発表会 2025年6月28日 4
使用するAIツール (1/2) Aqua voice タイピングができない子供に、音声で入力させる Gemini 子供に絵を出させる ChatGPT-o3 作りたいゲームの内容を伝えて初期プロンプトを作成 簡単な要件定義
ゲームの画像を生成 第2回AI活用大発表会 2025年6月28日 5
使用するAIツール (2/2) Claude Code (メイン開発ツール) 今回メインで開発 Cursor (サブツール) 何をやってるのか分かりやすいので精密な作業はこれ 第2回AI活用大発表会
2025年6月28日 6
技術スタック フレームワーク React (Vite) JavaScriptのフレームワーク 高速な開発環境 インフラ・管理 Vercel デプロイ先 GitHub
ゲームの保存先 第2回AI活用大発表会 2025年6月28日 7
開発の流れ 1. ChatGPT-o3で初期プロンプト作成 2. npm create vite@latestでReact(vite)のセットアップ 3. Claude Codeでゲームの骨格作成、ダミー画像を生成
4. ダミー画像に沿ってChatGPTで画像を生成 5. Claude Codeで全体を調整 6. Vercelでデプロイ 第2回AI活用大発表会 2025年6月28日 8
その他の手動操作 画像処理の課題と解決 透明色の問題 ChatGPTで出力した画像が透明色にならない 解決: Affinity Photoで修正 画像最適化 複数画像の透明色部分を除去するPythonツール(自作) 画像サイズの最適化(自作)
継続的な改善が必要 第2回AI活用大発表会 2025年6月28日 9
まとめ 子供とのゲーム開発で大切なこと AIツールを上手く組み合わせる 子供の創造性を引き出す 完璧を求めずに楽しむ 試行錯誤も学びの一部 一緒に作ることで、プログラミングの楽しさを共有! 第2回AI活用大発表会 2025年6月28日 10
メルマガ https://s.chemtoollab.com/squeeze-news ポートフォリオサイト https://portfolio-gakushiai.vercel.app/ X https://x.com/home python-share https://python-share-ai.netlify.app/ 第2回AI活用大発表会 2025年6月28日
11