見出し画像

【個人開発】Claude Designの衝撃、最後はGPT-5.5。AIリレーで挑んだ子供向けゲーム開発体験談|ムシ算

こんにちは、芽芽斗 守(めめと・まもる)です。

先日公開した『ムシ算』を紹介した記事には、予想より多くの方が反応してくれました。

スキを押してくれた方、ムシ算を実際に子供と遊んでくれた方、ありがとうございます。

前回の記事で「GW中はお休みするかも」とお伝えしていましたが、帰省先で幸運にも一人の時間を確保できました。

何より、開発を終えて完成したばかりの今の熱量が冷めないうちに書き残しておきたくて、予定を変更して、今こうして記事を書いています。

今日は『ムシ算』制作エピソードの続きを書かせてください。

語りたいのはゲームの中身そのものではなく、その「舞台裏」。

AIと対話しながら作り上げる、いわゆる「バイブコーディング」というスタイルでの開発記録です。

AIを使って何かを作ってみたい方や、実際の制作プロセスに興味がある方に、少しでもヒントになれば嬉しいです。

算数を好きになってもらうために、考えた

最初の着想は単純でした。
前回の記事でも触れましたが、面白くなさそうに算数の宿題をしている息子を見てずっとこんなことを考えていました。

このまま算数が嫌いになったら嫌だな……

息子のために知育アプリをいくつかインストールしてあげたことがあります。でも使うたびに、私が選んだものはどれも「勉強している感」が強すぎると感じていました。問題を解かせることが目的になっていて、子どもが自分からやりたくなる設計になっていない。

だったら、自分で作ってしまえばいいんじゃないか。
そんなことを思いながら、気づいたら作り始めていました。

参考にしたのはポケモンとたまごっちです。
私が小さい頃を振り返って、思い出深かったのがこの2つだったので(笑)

「集める・育てる」という快感のループ。あの仕組みに算数をくっつけたら勉強している感を消せるんじゃないかと思いました。

虫というテーマは、息子を見ていてひらめきました。

カブトムシ、クワガタ、ダンゴムシ。
生き物のコレクションが好きな子どもは多い。

虫で釣って、気づいたら算数を学んでいた。
そういうゲームにしたいと思いました。

はじめに仕様書を書く重要性

実際制作した仕様書

作ると決めてまずやったのは、仕様書を書くことでした。

ターゲットは誰か、どんな機能が必要か、レアリティの確率はどうするか。 頭の中にあるものを全部テキストに落とし込んで、AIに渡せる状態を作る。

これは前職でも同じでした。ものづくりの依頼をするとき、仕様書がなかったり、書いた内容がおかしかったりするとぼこぼこにされました(笑)

現場で叩き込まれた習慣が、個人開発にもそのまま生きています。

仕様書が固まってからAIと話すと、会話の精度がぜんぜん違う。最初にちゃんと言語化しておくと、あとの作業がずっとスムーズになる気がします。

仕様書がないと最初はふわっとしたものができても、あとから隙間が生まれてくる。気づいたら思い描いていたものと全然違うものができていたということになりかねない気がします。

これからAIを使ってなにか作ってみたいと思っている方がいたら、ぜひ取り入れてみてください。

AIと開発して「仕様書がないと迷子になる」という声はあちこちで聞こえてきますし、私もそう思います。

2か月で20バージョンのスクラップ&ビルド

色々な作業と並行しながら、制作は2か月ほどかけて20回以上のアップデートを繰り返しました。1日に3〜4回更新した日もあります。

せっかく個人開発として楽しんでいるのだから、「完璧に設計してから作る」より「作って見て直す」スタイルのほうがいいと思っていました。

もともと石橋をたたいて渡るタイプなので
完璧にしようとしたら一年はかかっちゃいそうでした。(笑)

開発の流れをざっくりまとめると、こんな感じです。

開発記録(1)

①骨格を作る
算数クイズ、ガチャ、図鑑の基本構造を実装。
虫は最初は20種、絵文字だけのシンプルなものからはじめました。

②デザインコンセプトを「森」にする
息子がどうぶつの森をやっているのを見て着想。
「森の中にいる感」に変えて、虫の種数も20種から100種に拡張しました。

③音をコードで作る
BGMも効果音も、音源ファイルは使っていません。重いデータを読み込まないため、子どもが待たずにすぐ遊べるようになっています。 音の高さやタイミングを数字で書いておくと、ブラウザが音楽として再生してくれる仕組みです。ドレミを音符じゃなくて数字で表現する、みたいなイメージです。
AIと一緒に作っていくのが、思っていたより楽しかった。

④100種に拡張して、確率を設計する
レアリティはSSR/SR/R/Nの4段階で、確率は3%/7%/25%/65%。
ガチャが出ないとふてくされる息子を見て、
あたりは出ないのがあたりまえ」と教育したかったのです(笑)

開発記録(2)

⑤息子にテストプレイしてもらう
今回は息子にテスターをしてもらいながら作りました。
作って直す過程を見せてあげるのは教育に良いかなと思ったからです(笑) それに、大人の頭の中にある
「たられば」の理論よりも、実際にターゲットに触ってもらうのが、プロダクトの良し悪しを測るのに一番正確だと思います。

⑥テキストを小学生向けに全直し
問題は10問セット制も導入しました。実際に触らせてみて分かりましたが、子どもの集中力が続くのはこれが限界です。市販の知育アプリで10問区切りが多いのも、子どもを観察し尽くした結果の最適解なのだと気づきました。現場の先人たちの試行錯誤に頭が下がります。

⑦説明文を2〜3倍に拡充する
100種すべての説明文にこだわりました。
アレキサンドラトリバネアゲハの翼が30センチ近くになる話、ヘラクレスオオカブトが体重の850倍を持ち上げられる話。
調べていて、私も楽しかったです。

AIのハルシネーションにやられた話

今回の開発でもハルシネーション(もっともらしい嘘)にやられました。

フリーの写真素材サービスから虫の写真を取得しようと、「APIを使って取得するコードを書いて」とAIに指示しました。AIはすぐに出力してくれたのですが、実際に組み込んでみると100種のうち68種が表示されない。

ほとんどですよね(笑)

原因はCORSというルールの壁と、AIのハルシネーションでした。

指示通りにAPIを使っているように見えたコードはデタラメで、実際にはただの「画像の直リンク」でした。

異なるサイト間で安全にデータをやり取りするための許可ルールを「CORS」と呼びます。

単なる直リンクだった今回のコードは、当然その許可を得ていないため、ブラウザのセキュリティ機能によって「怪しい通信」としてブロックされていたのです。

ここで気づいたのが、AIには「Webの暗黙のルール」が抜け落ちているという事実です。

「画像の直リンクは相手に迷惑がかかる」とは判断してくれませんでした。指示されれば、ただ無邪気にその通りのコードを出します。

フリー素材であっても、著作権フリーであることと技術的・倫理的なアクセス制限は別の話。

AIの出力を鵜呑みにせず、最終的には人間がハンドリングする必要があると痛感し、写真は渋々断念しました。

かわりに選んだのがSVGです。SVGというのは、数字や記号で書かれた「ベクター形式の画像」のことです。

写真とちがって著作権の問題がなく、ファイルも軽い。どんな画面サイズでも綺麗に表示されます。

100種すべてのイラストをゼロから作ることにしました。

最初のSVGは正直ひどかった。全部色違いのミミズが出てきました(笑)
子どもに見せたときの反応もまあ、薄かったです。子供は素直ですよね。

そこで方針を3つ決めました。3Dスタイル、光源の再現、そしてキョロ目。 白目・黒目・ハイライトの3層で目を描く。

この「キョロ目」を入れた途端に、息子の反応が変わりました。「めっちゃかわいい!」と。

完成イラストを抜粋

方向性が決まったのでそれをベースにAIに描いてもらった形です。

100種を描き終えたあと、ハルシネーションで30種近くが似たようなテンプレートになっていることに気づきました。ここでもです。

仕方がなく、それは十数回ラリーの末に個別に描き直しました。

他にも書ききれないくらいのトラブルがありましたが、それはまた別の機会に(笑)

Claude DesignでLPを作ろうとした話

ゲーム本体がひとまず完成したのが4月中旬。
ランディングページを作ろうとしたのは、その後です。

ちょうどそのころ、Anthropicが「Claude Design」をリリースしていました。2026年4月17日のことです。話題だし試してみたいと思っていたので、使ってみることにしました。

テキストで伝えると、ランディングページやスライドをリアルタイムで生成してくれる機能です。発表当日にFigmaの株価が約7%下落したというニュースを見て、「それは試してみなきゃ」と思っていました(笑)

試してみると、第一稿でいきなり「おお」と声が出た。クオリティが高い。ここと、ここと、ここを直せば完成する。そう思いながらレビューして、エンターを押した瞬間。

容量が終了しました。続きは1週間後

チーン(笑)

7割くらいの完成度で、ぴたりと止まってしまいました。直したい箇所がいくつもあって、まさに修正に入ろうというタイミングで切れる。

AIには一度に処理できる量の上限があって、長くなるほどそこに引っかかりやすくなります。詰めの甘さじゃなくて、仕様なんですけど。

あの瞬間の脱力感は毎回独特です。

Claude Designでここまで作りました。

ChatGPTは、正直使っていなかった。

少し話が戻ります。

ゲームを開発していた3月ごろ、私の開発環境はClaudeとGeminiが中心でした。自然とそうなっていた時期で、ChatGPTを使う場面がだんだん減っていた。

世間の声もそうだったと思います。
ChatGPT、ちょっとごめん、という時期でした(笑)

実はゲーム開発のあのフェーズでChatGPTを使おうとしても、当時のバージョンではなかなか思うように動かない場面が多かった。
使いたくても、うまくかみ合わなかったというのが正直なところです。

それが変わったのが、LPを作ろうとしていた4月末のことです。

GPT-5.5の登場で見直した

Claude Designが詰まったとき、ふと思い出しました。

4月23日にGPT-5.5が登場したとき、私の反応は「ふーん、そうなんだ」ぐらいでした。ニュースをちゃんと追うでもなく、さらっと流していたと思います。OpenAIが「ごちゃごちゃした仕事でも丸投げできる」と言っていたのは覚えていましたが、なんか抽象的だなと深堀りもしなかったです。

今回のことがあり、初めてちゃんと触りました。

驚きました。コーディングの質が著しく上がっていた。
特にフロントエンドの生成で、デザインへの解像度が前とは違う。

スペーシングやマージン、タイポグラフィ。
プロンプトだけでそこまでケアしてくれるようになっていました。

後から公式発表を読んでみると、コーディングや複雑な作業への対応力が大きく伸びたことが強調されていました。自分の体感とも、そこはかなり一致していました。

進化の体感と、5.5という数字の説得力がちゃんと一致していました。

人間に例えるなら、しばらく見ない間に「ちゃんと勉強して戻ってきたんだね、えらい!」と褒めたくなるような感覚です(笑)。

その後の作業は、こんなリレーになりました。

Claudeで修正を重ね、GPT Images 2.0でビジュアルを整え、デザイン部分はGPT-5.5でコーディングし直す。

出来上がったLP

行ったり来たりしながらも、確実に前に進んでいきました。
そしてLPが仕上がったあと、GPT-5.5はさらに一歩踏み込んできたのです。

アプリ本編の修正相談をしたところ、なんと具体的な実装の提案まで返してきました。

ゲーム開発の「あのフェーズ」で使えていたら、また違う展開があったかもしれない。そう思うくらいには、はっきりと進化していました。

🔗完成したLPのフルはこちらから。

どれが一番か、より、どれをどこで使うか

最強のAIはどれか」という話は、私の所感ではあまり意味がなくなってきた気がします。

設計や文章まわりはClaude。
デザインの初稿はClaude Design。
細かいデザイン調整とコーディングはGPT-5.5。
画像生成はChatGPT Images 2.0。
日々の調べ物はGeminiを活用する。

「ムシ算」とそのLPは、そんなリレーによって生まれました。
一人でやっているけれど、一人じゃない。

そういう感覚が、最近の開発にはあります。

「完成」より「公開」

最後に、開発を通じていちばん強く思ったことを書きます。

もう少し改善してから公開しよう」と思い続けると、永遠に公開できない。少なくとも私は、です。

「ムシ算」を公開したことで実際のフィードバックが得られ、次に直すべき箇所がはっきりと見えてきました。久しぶりに連絡をとった友人をテスターとして巻き込むこともできました(笑)。

こうして直していく作業は楽しいものですね。

20年以上前、初めて個人でホームページを作っていたときの感覚に、なぜかすごく似ているのが不思議です。

個人ホームページを作った経験は、その後のキャリアを支えてくれていた気がします。あの体験がなければ今の自分はなかったかもしれない。

このAI開発の体験が、次にどう繋がっていくのか。
それが今いちばん楽しみなことだったりします。

ゲームは遊ばれてはじめて完成する。そう思っています。

ぜひお子さんと遊んでみてもらえたら、嬉しいです。

最後まで読んでいただきありがとうございました。もし少しでも刺さるものがあれば、スキを押してもらえると励みになります。


ムシ算|虫好きの子が算数を好きになる知育ゲーム

🔗(推奨)説明を読んで遊ぶ。

🔗説明を読まずに、すぐに遊ぶ。

使い方

スマホ・タブレット・PCのブラウザから、そのまま遊べます。
インストールは不要です。

ホーム画面に追加すると、アプリのようにかんたんに起動できます。

【動作環境】 iPhone / iPad:Safari(推奨) Android:Chrome(推奨) PC:Chrome / Safari / Edge(最新版)
※ Internet Explorerは非対応です。
※ PWA対応ブラウザではホーム画面に追加してアプリとして使えます。