ピアノの鍵盤の図と、鍵盤を横軸にしたジャンプゲームの画面を並べたアイキャッチ

AIにコードを書かせて、音感トレーニングのジャンプゲームを作った ── Vibe Codingで個人開発した記録

ドミソ、と言われれば何も考えずに出てきます。ところがミソシ、と言われると止まります。頭の中で鍵盤を思い浮かべて、ミがあって、ひとつ飛ばしてソで、もうひとつ飛ばしてシ、と数えてようやくたどり着く。レファラも同じで、いちいち数えないと出てきません。 私は音楽アプリを作っていますが、ピアノをきちんと弾いてきた人間ではありません。子どもの頃から鍵盤で遊んでいた人は、たぶんこれを反射で答えます。指がその形を覚えているからで、考えていないから速い。うらやましいと思いつつ、いまさら音階練習をする気にもならない。 その、埋まらないまま放置していた穴を埋めるゲームを作りました。遊んでいるうちに、和音の形が指ではなく体に入る。そういう仕掛けのジャンプゲームです。 立体にしたら、遊びたくなってしまった きっかけは前回の記事です。音楽アプリのマスコット「えびふりゃ」を3D化した話 を書いて、その最後に、ここからゲームにするといった展望が具体的にあるわけではない、と正直に書きました。そのときは本当にそう思っていました。 ところが、立体になったものが跳ねている動画を眺めているうちに、どうしてもこれで遊びたくなってきた。翌日にはジャンプゲームを作りはじめていました。順番が逆だったら、たぶんこうはなっていません。先に「ジャンプゲームを作ろう」と考えたのではなく、跳ねている立体を見てしまったから作りたくなったわけで、この順番は自分では選べないものでした。 まずは傾けて動かす試作から ジャンプゲームと一口に言っても種類があります。横に走って穴を飛び越えるタイプ、足場を伝って上へ登っていくタイプ、決まったリズムで跳ぶタイプ。えびふりゃは丸くてぽよんと跳ねるので、足場を伝って上へ登っていく形が素直だろう、ということで方向が決まりました。 操作は、スマホを傾けて左右に動かす方式にしました。跳ねるのは自動で、プレイヤーがやることは着地する場所を選ぶことだけです。指でボタンを押すよりも、傾けた角度がそのまま横移動になるほうが、体で狙っている感じが出る。最初に組んだ試作はそこだけを確かめるためのもので、手触りは思っていたよりずっと良いものでした。 ここまでは順調でした。問題はこの先です。 音楽と結びつけようとして、最初は失敗した 作っているのは音楽アプリのマスコットが主役のゲームです。せっかくなら音楽と結びつけたい。そう考えて最初に試したのは、足場を踏むと音が鳴り、うまくつなげると得点が伸びる、というよくある作りでした。 これがまったく駄目でした。踏むたびに鳴る音と、得点が入ったときの効果音と、伴奏のような低音が混ざって、何がどうなって褒められているのか分からない。そもそもプレイヤーは「どこを狙って飛べばいいのか」が分からない。音が鳴っているだけで、音楽が遊びの一部になっていないのです。 このとき一度、音の要素を薄める方向に逃げかけました。音を減らせば手触りは整うけれど、それはもう「マスコットが跳ねるだけのゲーム」で、わざわざ音楽アプリのキャラでやる意味がない。逃げるくらいなら、音の使い方そのものを間違えていると考えるべきでした。 効いた一手 ── 画面の横軸を、そのままピアノの鍵盤にする 行き詰まりを抜けたのは、音を「演出」ではなく「地形」にしてからでした。 画面の横方向を、そのままピアノの鍵盤だと考えます。左端が低い音で、右へ行くほど高い音。マスコットが立つ足場は、その鍵盤の上に生えている板です。そして肝心なところは、足場を置く場所を「いま集めている和音の音の上」だけに限る、というルールです。ドミソを集めている場面なら、板はド・ミ・ソの真上にしか現れない。レやファの上には何もありません。 もうひとつ、真上には次の足場を作らないことにしました。これは実際に遊んでみて気づいたことです。同じ音の上に板が続いてしまうと、傾けなくても勝手に登っていけてしまう。それでは横移動する理由がなくなり、和音の並びを体で覚えるどころか、画面すら見なくなる。だから次の板は必ず別の音の上に置く。プレイヤーは「ド、その次はミ、その次はソ」と、鍵盤の上を横に渡り歩くことになります。 そこまで決めてから、和音に含まれない音の上に置いていた「引っかけ」の板も全部消しました。残っているのは常に正解の音だけです。罠を減らすと難易度が下がって間延びしそうなものですが、実際は逆でした。正解しか置かないからこそ、ド・ミ・ソという三つの位置関係が繰り返し体に入る。踏んだ板には、その音が和音の何番目かも小さく表示しています。根っこの音がR、三番目が3、五番目が5。 そしてステージが上がるごとに、集める和音がひとつずつずれていきます。ドミソの次はレファラ、その次がミソシ、ファラド、ソシレ。まさに私が咄嗟に出てこない並びを、順番に踏まされるわけです。自分で自分に課した練習台のような形になりました。 音は、木琴のような柔らかい音色にしました。板を踏むと、その音が根っこの音と重なって鳴る。和音がそろった瞬間には音がまとめて鳴ります。仕組みとしては単純ですが、ばらばらに踏んだ音が最後に和音として鳴る、という順番になっているのが大事なところで、音が答え合わせの役をしてくれます。 何を競うゲームなのか ── 関所と、その鍵 ここでもうひとつ壁がありました。和音を集めると言っても、ド・ミ・ド・ミと二つだけ踏み続けても登れてしまう。それでは何を競うゲームなのか分かりません。 そこで、ステージの境目に関所を置きました。木の柵で行く手が塞がっていて、その和音の音を全部そろえるまで通れない。二つしか踏んでいなければ弾き返されます。ステージが区切られると背景の色も少しずつ変わっていって、登っている実感が出るようになりました。 さらにもう一段、関所には鍵をかけました。和音がそろっても門は自動では開きません。そろえた瞬間だけ普段より高く跳べるようになり、その高跳びでぎりぎり届く位置に金色の鍵が浮かびます。通常のジャンプでは絶対に届かない高さで、横にもずらしてあるので、まっすぐ上がるだけでは取れない。鍵を取ったら、今度は門の鍵穴に自分で当てにいきます。うまく差し込めると錠前が跳ね上がり、柵が左右に割れて飛んでいく。 「和音をそろえる」「鍵を取る」「鍵穴に差す」という三段構えにしたことで、ステージの切り替わりが行為としてはっきりしました。点数が増えていくよりも、自分の手で開けたという手応えのほうが、区切りとしてずっと強い。 3Dで作ったのに、2Dのゲームに見えない問題 見た目のほうでも、途中で大きく作り直した箇所があります。 最初にBlenderで作った画面のモックはかなり気に入っていたのに、実際に動くゲームはそれと似ても似つかないものになっていました。原因は単純で、ブラウザで動かすために形を簡略化しすぎていたのです。せっかく立体にしたマスコットが、ただの丸い絵に戻ってしまっていました。 そこで作り方を変えて、Blenderで丁寧にレンダリングした絵を透過画像として書き出し、ゲームはその絵を並べるだけにしました。マスコットは三つの姿勢と五つの向き、木の板は音ごと、関所も鍵も巨人も、全部あらかじめレンダリングしておきます。動かす側は軽い2Dの処理しかしていないのに、画面に出ているものは3Dの質感そのままという格好です。昔のゲーム機で、あらかじめレンダリングした絵を使って立体的に見せていたのと同じ発想で、いま同じことをやるとこんなに素直に効くのか、というのは作っていて楽しい発見でした。 カメラの動かし方でも一度失敗しています。3Dらしさを出そうとして、マスコットが動くたびに寄ったり引いたりさせたら、画面が落ち着かずゲームとして成立しなくなりました。いまは基本の画角を固定して、和音がそろった瞬間と落ちはじめた瞬間だけ、ぐっと寄るようにしています。演出は常時かけるものではなく、ここぞという瞬間に取っておくものでした。 だんだん複雑になっていく 同じ和音を延々と繰り返していると、当然ながら飽きます。そこで全体を四つの段階に分けて、集める音が三つ、四つ、五つと増えていくようにしました。途中で調も変わるので、それまで白い鍵盤しか出てこなかったところに黒い鍵盤(♯の音)が混ざりはじめます。 背景は、草地から始まって、空、雲の上、成層圏と上がっていき、最後は宇宙です。星がだんだん見えてきて、最終ステージを抜けると宇宙に到達してクリア。全部で28ステージあります。 上に行くほど手強くなるのは音のほうも同じで、最初の三和音は素直な形をしていますが、四つ五つと重なると鍵盤の上での間隔がぐっと広がります。指が届かない、ではなく、傾けて渡りきれない、という形で難しさが出るのが面白いところでした。 邪魔をしにくる巨人 そこそこ登ると、画面の横から巨人がのっそり出てきます。えびふりゃを食べようとしている人間で、フォークを構えて横から突いてきます。 この巨人がいちばん手こずりました。最初は顔だけが上から降りてくる形にしていたのですが、それだと避けようがなくて理不尽なだけ。体を付けて、横からゆっくり出てくる形に作り直しました。それでも当たり判定がちぐはぐで、体に触れてもすり抜けるのに口に入ると即死する、という納得のいかない状態が続きました。 最終的には、当たり判定を目分量で置くのをやめて、レンダリングした絵そのものから輪郭を読み取って作るようにしました。そのうえでルールを整理して、体と腕は硬い壁として押し返され、危ないのは突き出しているフォークの先と、開いた口の中だけ。頭のてっぺんは踏めるようにして、踏まれた巨人はのけぞって画面の外へ倒れていきます。下から腹を突き上げれば体力ゲージが減って、三発で倒せる。 避けるだけの障害物にせず、こちらから倒せる相手にしたのには理由があって、大きな体が足場の前を塞いでしまうと、どうやっても先に進めない場面が生まれてしまうからです。踏めば消える、突き上げれば削れる、という逃げ道を用意しておけば、その心配がなくなります。 速くなったのは、手を動かす部分だけだった このゲームは、コードのほとんどをAIに書かせています。近ごろ Vibe Coding と呼ばれる作り方で、前回の3D化と同じく、私は「こうしてほしい」「それは違う」と言い続けていただけです。実装の速さでいえば、もう人間の出番はほとんどありません。 ただ、丸ごと頼めば同じものが出てくるかというと、それは違いました。素直に頼んだときにAIが持ってきたのは、踏むと音が鳴って得点が入る、あのつまらない案のほうだったのです。上から顔だけ降ってくる理不尽な巨人も、動くたびに寄って画面を壊すカメラも、最初はそういう案が出てきて、私が違うと言って捨てています。 だから、人間の役割は選別だ、という言い方はかなり当たっていると思います。AIがあれこれ出してきて、人間が通す・通さないを決める。ただ、それだけでもない気がしていて、画面の横軸を鍵盤にするという一手は、出てきた候補から選んだものではありませんでした。あれは選別ではなく持ち込みです。 もう少し正確に言うなら、人間が持ち込んでいるのは判断基準のほうなのだと思います。何を良しとし、何を却下するかの物差し。物差しがあるから捨てられるし、ときにはその物差し自体が新しい案を生む。選別しているように見えるのは、その物差しが外から見えたときの姿にすぎません。 そしてその物差しがどこから来たかというと、経験からです。ミソシが咄嗟に出てこないという体感がなければ、あの一手は思いつかなかった。えびふりゃを長いあいだ描いてきていなければ、主役がいなかった。前回わざわざ立体にしていなければ、遊びたいとすら思わなかった。手を動かす部分が一瞬になった一方で、こちらは相変わらず一瞬になっていません。 自分ひとりの痒みのために作れる時代 このゲームは、お金の話でいえば筋の悪い企画です。ミソシを覚えたい人がどれだけいるのか、私にも分かりません。 大きな予算をかけて作るなら、投資を回収しなければならないので、どうしても広い客層に向けて作ることになります。誰にとっても分かりやすいものが残り、私ひとりの半端な痒みに合わせたゲームは、そもそも企画として成立しない。これは誰が悪いという話ではなく、単に採算の構造がそうなっているというだけのことです。 ...

公開: 2026年7月23日 · Toshihiko Arai