こんにちは、ステッチの宮田です。突然ですが、こんなゲームを作りました。Sくんランナー — 障害物をかわして駆け抜けろ。 https://experiment.stitch.co.jp/runner/スマホでもPCでも遊べる、ブラウザゲームです。(ただ、PCのほうが遊びやすいです)ルールはシンプル。走り続けるSくんを操作して、次々と現れる障害物をよけ続けるだけです。ClaudeCodeに少し慣れ始めたときに、生成AIをつかってどんなことができるんだろう?という好奇心から取り組んでみた備忘録です。すべての工程を4時間ほどでやってみました。使ったツールたちプログラミング:Claude Codeメインの開発はすべて Claude Code(Anthropicの生成AI)で行いました。私はエンジニアではないので、自身でコードを書くことはなく、自然言語で「こういうゲームを作りたい」「ここの動きをこう変えたい」を日本語で伝えながら作っていきました。とはいえ完全にお任せできるわけでもなく、出てきたものを動かして確認して、気になるところを指摘して直してもらう……というやりとりを繰り返しました。ディレクションに近い感覚です。BGM:SUNOゲームのBGMは SUNO で制作しました。元々ゲームのコンセプトなどはClaudeCodeにまとめていたので、その世界観に合うようなBGMをSUNOに制作してもらうためのプロンプトをClaudeCodeにまとめてもらっています。SUNOは昨年v5が出てきたあたりから明らかに品質が挙がった印象を受け、有料契約をして遊んでいました。音楽の知識が少なくても、雰囲気のある曲があっさりできてしまうのが本当にすごいです。。。イラスト:ChatGPTキャラクターや障害物のイラストは ChatGPT(DALL-E)で生成しました。こちらもClaudeCodeにイラスト生成用のプロンプトをまとめてもらいました。少しレトロゲームみたいなイメージにしたかったので「手書き風・白黒・スケッチタッチ」で統一することで、ゲーム全体のビジュアルに一体感が出たかな…と感じています。開発中、つまずいたこと① コードが肥大化しすぎた最初はゲームの処理をひとつのファイルにまとめていたのですが、気づいたら膨大な量になっていました。それによって、毎回改修を加えるたびにソースコードを確認するのでトークンの消費が多くなってしまったり時間がかかってしまったりという状況に。そこで、ClaudeCodeに相談しながら、用途別にファイルを分割するよう提案をうけ、プレイヤー系・敵系・画面表示系に分けることで、ようやく管理しやすくなりました。② ドローンを複数並べようとしたら当たり判定が崩壊した「ドローンが複数機で編隊を組んで出てくる」演出を作ろうとしたのですが、イラストの表示位置と当たり判定がズレてしまい、見えないところで当たる・当たるべき場所で当たらないという状態に。原因を掘っていくと、複合的な問題があったようでなんどか修正指示をしても解消せず。ClaudeCodeに対して実際にプレイしている映像を見せられれば一番話が早いですが、スクリーンショットで見せることしかできないため、なかなか話が進まないことが多かったです。今回の取り組みの時間制限内では修正が難しいと判断し、泣く泣く機能ごと削除しました。。。③ 落とし穴の見た目が「穴っぽくない」スコアが一定以上になると落とし穴が登場するのですが、最初の実装では穴の見た目が背景と馴染んでいなかったり、プレイヤーが穴に落ちている最中に障害物の下に隠れてしまったりと、見た目の問題がいくつか出ました。穴の内部を背景色で塗って「透明に見せる」擬似表現に変えて、プレイヤーのレイヤー順序を調整することで解決。やはり見た目にかかわる部分はつまづくことが多かったなという印象です。登場するキャラ紹介SくんStitch(ステッチ)の頭文字「S」が走り出した、会社公式キャラクター。見た目はそのまま「S」の文字。でも目があって足があって、全力で走っている。操作はジャンプのみ。スペースキーまたは画面タップで飛び上がり、2段ジャンプも可能。ライフは最初3つで、障害物に当たるたびに減っていく。コーヒーを拾うと回復できる。バグ虫背中に「BUG」と刻まれた、地を這う害虫。低姿勢で這い回るタイプの障害物。ジャンプで飛び越えるのは簡単だが、ゲーム序盤から頻繁に登場するので油断できない。何かエラーが起きたときに「虫(バグ)が出た」と言うのは万国共通。エラー看板(404)「404」と書かれた工事バリケード。中くらいの高さの障害物。Web制作をやっていると必ず遭遇する「ページが見つかりません」の象徴。見た瞬間にちょっと嫌な気持ちになる。要件変更!土台から飛び出した巨大な「要件変更!」看板。矢印が上を向いている。中くらいの高さの障害物。開発あるある。ゲーム中に出てくるたびに「あ〜」となる。技術的負債積み上がった古いPCやサーバーの山。てっぺんに「404」のモニター。全障害物の中で最も背が高い。どんな現場にも潜んでいる、時限爆弾的な存在。放置するほど大きくなるのがリアルなところ。高い分だけ飛び越えにくく、ゲーム内での存在感も大きい。ドローン目つきの悪い偵察ドローン。空中を浮遊して行く手を阻む。空中に浮かんでいるため、かわすかジャンプのタイミングで頭をぶつけるかの二択を迫られる。高度によってパターンが2種類ある。コーヒー(アイテム)おまけ:ライフを回復できるアイテム。顔つきがかわいい。「+1」の文字付き。走っていると時々登場するので、積極的に取りに行こう。さいごに生成AIをフル活用してゲームを作ってみて、一番感じたのは「技術的な敷居が下がったぶん、ディレクションの重要性が上がった」ということです。AIは指示通りには動きますが、「何を作りたいか」「どう感じてほしいか」「どこで諦めてどこにこだわるか」は人間が決める必要があることを強く実感しました。ゲームバランスの調整、敵キャラのコンセプト設計、「ここの動きが気持ちよくない」という感覚などは、結局、自分で考えてトライして積み重ねていく作業でした。今回の取り組みでは試さなかったのですが、開発担当:ClaudeCode、検証担当:Codexという連携によって、ClaudeCode単体よりも効率や品質を上げられるかもという情報をよく見るため、ぜひ今後取り組んでみたいと思います。プログラミング経験がなくても、ちゃんと動くものが作れる時代。まだClaudeCodeやCodexに触っていない方はぜひ取り組んでみるきっかけになればうれしいです。また、せっかくなので、ぜひゲームも遊んでみてください!ゲームはこちらhttps://experiment.stitch.co.jp/runner/