子供と Vibe Coding でゲームを作るコツ

第2回AI活用大発表会 2025年6月28日

Transcript

1. 子供とVibe Codingでゲームを作るコツ AIツールを活用した親子プログラミング ガクシ 第2回AI活用大発表会 2025年6月28日 1
2. 目的 子供と一緒にAIツールを使用して 簡単なアクションゲームを作る 親子で楽しく学ぶ 最新のAIツールを活用 実際に動くゲームを完成させる 第2回AI活用大発表会 2025年6月28日 2
3. ガクシ / 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
4. セミナー概要 実況デモンストレーション 内容: 子供と一緒にゲームを作っている様子を実況 時間: 1時間 → 15分程度に凝縮した映像 ポイント: 実際の制作過程をリアルに体験 第2回AI活用大発表会 2025年6月28日 4
5. 使用するAIツール (1/2) Aqua voice タイピングができない子供に、音声で入力させる Gemini 子供に絵を出させる ChatGPT-o3 作りたいゲームの内容を伝えて初期プロンプトを作成 簡単な要件定義 ゲームの画像を生成 第2回AI活用大発表会 2025年6月28日 5
6. 使用するAIツール (2/2) Claude Code (メイン開発ツール) 今回メインで開発 Cursor (サブツール) 何をやってるのか分かりやすいので精密な作業はこれ 第2回AI活用大発表会 2025年6月28日 6
7. 技術スタック フレームワーク React (Vite) JavaScriptのフレームワーク 高速な開発環境 インフラ・管理 Vercel デプロイ先 GitHub ゲームの保存先 第2回AI活用大発表会 2025年6月28日 7
8. 開発の流れ 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
9. その他の手動操作 画像処理の課題と解決 透明色の問題 ChatGPTで出力した画像が透明色にならない 解決: Affinity Photoで修正 画像最適化 複数画像の透明色部分を除去するPythonツール（自作） 画像サイズの最適化（自作） 継続的な改善が必要 第2回AI活用大発表会 2025年6月28日 9
10. まとめ 子供とのゲーム開発で大切なこと AIツールを上手く組み合わせる 子供の創造性を引き出す 完璧を求めずに楽しむ 試行錯誤も学びの一部 一緒に作ることで、プログラミングの楽しさを共有！ 第2回AI活用大発表会 2025年6月28日 10
11. メルマガ 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