AIゲーム開発の基礎知識｜面白さを言語化して的確に設計する方法と、フレーム数の基礎 〜AIを使ったゲームの作り方 Vol.6-2〜

これまでの回は、こちらです。

前回のvol.6では、AIで作ったゲームを面白くするために、何を見ればいいのかを書きました。操作への反応、当たったときの手応え、結果の分かりやすさ、そしてこの先が見えるかどうか、という話でしたよね。ただ、公開してから読み返してみて、正直に言うと物足りなさが残りました。

何を見ればいいのかは書けていても、どの数字をいくつからいくつに変えたら、どう感じが変わるのかを、1つも見せていなかったからです。そこで今回は番外の続き、6-2として、実際にAIでブロック崩しを作り、面白くなるまで手を入れ、さらにオリジナルのルールを1つ足して、1本の作品として完成させるところまでを、全部見せます。

今回の目的は、ゲームを作ったことがない初心者の方でも、ありもののゲームをベースにして、そこに自分なりの要素やルールを1つ足し、人に遊んでもらえる1本の作品を完成させることです。

vol.6で、最初は真似から入っていいと書きましたが、真似して作ったものに自分のルールを1つ足すところまでやって、はじめてそれは「自分の作品」になります。今回は、その一番小さな完成までの道のりを、ブロック崩しで最初から最後までたどっていきます。

今回の記事は、次のツールと環境で作っています。同じものを用意すれば、この記事でやったことを、そのまま自分の手でたどれるはずです。ただ、AIは同じ指示を渡しても毎回少しずつ違うものを作りますし、モデルが新しくなれば結果も変わっていきますから、細かいところまで同じにならなくても気にしないでください。

この記事には、ふだん聞き慣れない言葉がいくつか出てきます。どれも本文の中でも説明しますが、先にざっくりと知っておくと、ぐっと読みやすくなると思います。

今回は、次の流れで進めていきます。

先にひとつだけ、お断りしておきます。今回はブロック崩しという簡単なゲームなので、思いついたプロンプトをその場で入力していく程度の進め方で作っています。

ただ、もっと遊びごたえのある、そこそこの規模のゲームを最後まで作り切るなら、この進め方のままでは、途中で手に負えなくなってしまいます。作ったファイルの変更の記録をGitHub（ファイルの変更履歴を残して、いつでも前の状態に戻せるサービス）で管理しておくことや、あとから変えたくなる要素やゲームの設計そのものを、1か所で管理して調整できる作りにしておくことを、作り始める前に設計しておいたほうがいいんです。

そのためのおすすめの事前設計の手法については、また後日の記事で書いてみたいと思います。

序章｜まずは道具をそろえる。Claudeのアプリを入れて、作る場所を用意する

この記事は、読みながら自分の手でも同じブロック崩しを作れるように、章の中に「プロンプト①」のような囲みを置いています。その前に、AIにゲームを作ってもらうための道具をそろえておきます。使うのは、Anthropic社のAI「Claude」に、パソコンの中のファイルを直接作ったり直したりしてもらえる「Claude Code」という道具です。チャットの画面にプログラム（コード）を出してもらって、それを自分でコピーして保存する手間がいらないので、今回のように何回も作り直すときにとても楽なんですね。

① Claudeの有料プランに入る

Claude Codeは、Claudeの無料プランでは使えません。まず、ブラウザでClaudeのサイト（https://claude.ai）を開いてアカウントを作り、有料のProプラン（月20ドル、2026年10月時点。日本円での金額は、為替や税によって変わります）に申し込んでおきます。開発者向けの、使った分だけ料金を払う契約（Console）でも使えますが、初めての方はProプランのほうが分かりやすいと思います。

ただ、この記事はClaude Codeを使って書いていますが、最初から高いプランに入る必要はありません。CodexのようにChatGPTの安いプラン（たとえばGoプランは月8ドル）でも使える道具があり、ライトなゲームであれば十分に作れますから、まずはそうした格安のプランで、少ない金額のお試しを何回かやってみることをおすすめします。お金に余裕がある方であれば、最初からCodexのProプランや、Claude Codeを申し込んでもいいと思います。繰り返しになりますが、AIでゲームを作るときは何回も作り直すことになるので、まずは慣れるまで、やり方をイメージで覚えることが大事なんです。

② 使い始める前に、最低限のルールを決めておく

Claude Codeは、パソコンの中のファイルを読んだり書いたり、命令を実行したりできる道具です。便利なぶん、使い方を間違えると、自分の作品や大事な情報を危ない目にあわせてしまうこともあります。ですから、使い始める前に、次の5つだけは必ず守ってください。

設定の項目の名前は、アップデートで少し変わることがあります。見つからないときは、Claude Codeの入力欄に「学習に使わせない設定はどこにありますか」と聞けば、答えてくれます。

③ Claudeのデスクトップアプリを入れて、作る場所を用意する

Claude Codeは、Claudeのデスクトップアプリの中にある「Code」というタブから使います。ふつうのアプリと同じように、ボタンを押してフォルダを選ぶだけで使えるので、パソコンに詳しくなくても大丈夫です。

まず、公式のページ（https://code.claude.com/docs/en/desktop-quickstart）を開き、「Download for macOS」を押してアプリをダウンロードします。ダウンロードしたファイルを開いてインストールしたら、Finderの「アプリケーション」フォルダからClaudeを起動して、◆①で作ったアカウントでログインしてください。

次に、ゲームを置くための場所を作ります。Finderを開いて、左側の「書類」などを選び、メニューの「ファイル」から「新規フォルダ」を選ぶと、新しいフォルダができるので、名前を「breakout」にしておきます。この記事で作るゲームのファイルは、全部このフォルダの中にできていきます。

フォルダができたら、Claudeのアプリに戻って、画面の上の真ん中にある「Code」のタブを押します。そこで「Local」を選んでから「Select folder」を押し、さきほど作ったbreakoutフォルダを選んでください。これで、AIがbreakoutフォルダの中で、ファイルを作ったり直したりできるようになります。もし「Code」を押したときにアップグレードを求められたら、まだ有料プランに入れていないので、◆①に戻って申し込んでください。

④ Claude Codeの使い方の基本

使い方は、ふつうのチャットとほとんど同じです。画面の下にある入力欄にプロンプトを貼り付けて、送信すれば、AIが作業を始めます。入力欄でEnterキーを押すと、その時点で送られてしまうので、途中で改行したいときは、Shiftキーを押しながらEnterキーを押してください。この記事のプロンプトは、コピーしてそのまま貼り付ければいいので、自分で改行する場面はあまりないと思います。

送ったあとは、AIが考えたり、ファイルを作ったりしている様子が、画面に次々と表示されます。数分かかることもあるので、終わるまで待ってください。途中で「この変更を反映してよいですか」のように確認を求められたら、内容を見て「Accept」を押せば先に進みます。間違えて送ってしまったときや、途中で止めたいときは、入力欄の横にある停止ボタンを押せば止められます。

作ってもらったゲームは、Finderでbreakoutフォルダを開いて、ファイルをダブルクリックすれば、ブラウザで遊べます。この記事と同じChromeで開きたいときは、ファイルを右クリックして「このアプリケーションで開く」からGoogle Chromeを選んでください。終わるときは、アプリを閉じるだけで大丈夫です。続きをやるときは、アプリを開いて「Code」のタブを押し、画面の左側に並んでいる前の会話を選べば、また始められます。

⑤ この記事のプロンプトの使い方

このあとの章には、「プロンプト⓪」から「プロンプト⑦」までの、全部で8つの囲みが出てきます。出てきた順に、囲みの中の文章をコピーしてClaude Codeに貼り付けていけば、最後に完成品のブロック崩しができあがります。1行目の「プロンプト①」のような見出しは、コピーしなくて大丈夫です。囲みの中に（　）で書いてあるところは、説明どおりに中身を入れ替えてください。（　）の説明の行は、そのまま送りません。作るファイルの名前は、迷わないように、次のように全部決めてあります。

AIは同じプロンプトでも毎回少しずつ違うものを作るので、画面の見た目や、つまみの数などが記事と違っていても、気にしないでください。途中で困ったときのことは、Ⅻにまとめています。

⑥ ターミナルに慣れている方は、ターミナルでも使える

パソコンに慣れている方は、デスクトップアプリの代わりに、Macの「ターミナル」というアプリからClaude Codeを使うこともできます。ターミナルは、文字を打ち込んでパソコンに命令を出すためのアプリで、「command」キーを押しながら「スペース」キーを押し、「terminal」と打ってEnterキーを押すと開きます。開いたら、次の1行を貼り付けてEnterキーを押すと、Claude Codeのインストールが始まります。

終わったら、ターミナルを開き直して「claude --version」と打ち、「2.1.296 (Claude Code)」のように番号が出てくればインストールは完了です。「command not found」と出たら、ターミナルを開き直すか、インストールの最後に英語で表示された案内にある1行を貼り付けて実行してください。そのあと、次の3行を1行ずつ打てば、breakoutフォルダを作って、その中でClaude Codeが起動します。

初めて起動したときは、英語で画面の色の好みやログインの方法を聞かれ、ブラウザでログインしたあと、「このフォルダを信頼しますか」という意味の質問が出るので、「Yes」を選んでください。ターミナルでは、Enterキーを押すとすぐに送られてしまうので、何行もある文章は、先に「テキストエディット」で組み立ててから貼り付けます。止めたいときはEscキー、終わるときは「/exit」と打ちます。次の日は、ターミナルで「cd breakout」と「claude」の2行を打てば、続きから始められます。Windowsの場合や、うまくいかないときは、公式の手順（https://code.claude.com/docs/en/quickstart）に、画面ごとの説明が載っています。

Ⅰ｜まずはベースのゲームを、一言で作ってもらう

まずは、ベースになるブロック崩しを、何も考えずにAIに頼んでみました。頼んだのは、vol.2でも紹介した、いちばん短いこの一言です。

手を動かしている方は、序章で用意したClaude Code（デスクトップアプリの「Code」のタブ）の入力欄に、この囲みの文章を貼り付けて送ってください（あとで比べやすいように、ファイル名だけ足してあります）。1分ほど待つと v0.html ができるので、Finderでbreakoutフォルダを開き、v0.html をダブルクリックすると、ブラウザで遊べます。

この一言だけで、すぐにブラウザで遊べるブロック崩しが出てきました。バーはマウスで動きますし、ボールはちゃんと跳ね返って、ブロックに当たれば消えて、点数も入ります。全部消せば「CLEAR!」と出て、スペースキーでやり直せる。遊ぶぶんには、どこにも間違いはないように見えますし、これだけで十分「ゲーム」になっているわけです。

ところが遊んでみると、これがすぐに飽きてしまうんです。バーのどこで受けても、ボールはいつも同じ角度で返ってくるので、狙って打つことができません。ブロックは音もなくふっと消えるだけなので、当てたという実感もありませんし、ボールの速さも最初から最後まで変わらないので、終盤になっても緊張感が生まれないんです。vol.6で書いた「整っているけど面白くない」が、まさにこの状態です。

実際に遊んでみた感想としては、まあ見てのとおりのブロック崩しです。単調で、ただボールを落とさないというだけのルールですが、一応ゲームとしては成立しています。ただ、エフェクトもSEもないので、快感の要素はまったくありません。まあ、手始めとしてはこんなものでしょう、というのが正直なところです。

ただし、AIは同じ一言でも、頼むたびに違うものを出してきます。日を改めて、まっさらな状態からもう一度同じ一言で頼んでみたところ、今度は端で受けると角度が変わり、ブロックを壊すたびに少しずつ速くなる作りになっていました。それでも、音や手応えは何もなく、ボールの動かし方も、このあとⅡで説明する落とし穴を抱えたままでしたから、何が付いてくるかはその時次第でも、面白さの要になる部分は抜け落ちやすい、と考えておくのがいいと思います。

そして、この一言のプロンプトで作ったブロック崩しのプログラム（AIが書いたコード）を読んでみると、見過ごせない落とし穴が1つ見つかりました。遊ぶパソコンによって、ボールの速さが倍も変わってしまう作りになっていたんです。これを説明するには、先に「フレーム数」の話をしておく必要があるので、次のⅡでじっくり書いていきます。

Ⅱ｜「フレーム数」とゲームの速さの関係を、先に知っておく

一言のプロンプトで作ったゲームのプログラムを読んで見つかった落とし穴は、AIでゲームを作るなら必ず知っておいてほしい話です。いきなりボールの話をするよりも、先に「フレーム数」の基本を知っておいたほうが、ずっと分かりやすくなります。

① フレーム数とは、1秒に描くパラパラ漫画の枚数のこと

ゲームの画面は、パラパラ漫画と同じで、少しずつ違う絵を1秒に何十枚も描き直すことで、動いているように見せています。この1秒あたりの枚数を「フレーム数」または「フレームレート」と呼び、「60fps（1秒に60枚）」のように書きます。もう1つ、画面そのものが1秒に何回描き直せるかを「リフレッシュレート」と呼び、「60Hz」のように書きます。ふつうのパソコンのモニターは60Hz、つまり1秒に60回描き直せる画面ですが、MacBook Proの画面は最大120Hz、ゲーム用のモニターには144Hzや240Hzのものもあります。そして、ブラウザで遊ぶゲームは、この画面が描き直せる回数に合わせて、ゲームの絵も描き直すのが基本なんです。つまり、同じブロック崩しでも、遊ぶ人の画面によって、1秒に60枚描かれたり、120枚描かれたりするわけです。

② フレーム数は、機械やゲームによって変わる

フレーム数が変わるのは、パソコンだけの話ではありません。Nintendo Switchでも、30fpsで動くゲームもあれば60fpsで動くゲームもあり、どちらにするかは、本体ではなくそれぞれのゲームの作り手が決めています。広い世界やきれいな景色を見せたいゲームは30fps、アクションや対戦のように操作への反応が大事なゲームは60fps、という選び方が多いですね。Switch 2では携帯モードの画面が120Hzに対応していますし、PS5のゲームでは「画質優先」と「フレームレート優先」を遊ぶ人が選べるものも珍しくありません。1つのゲームをいろいろな機種で出すときも、機種ごとにフレーム数が違うのはふつうのことで、パソコン版では、遊ぶ人が設定画面で自分で選べるようになっているものが多いです。

③ フレーム数が高いほど、機械の負担は大きくなる

わざわざフレーム数を変えるのは、フレーム数が高いほど、機械の負担が大きくなるからです。機械は1フレームごとに、キャラクターや敵の位置を計算し、当たり判定（ボールがブロックに当たったかどうか）などのルールを計算し、画面全体の絵を描く、という作業をやり直しています。1枚の絵にかけられる時間は、30fpsなら約0.033秒、60fpsなら約0.017秒で、120fpsになると約0.008秒しかありません。つまり120fpsでは、30fpsの4倍の回数、同じ作業をこなさなければいけないわけです。料理で言えば、1時間に30皿作るか、60皿作るかの違いで、60皿作りたいなら、手の速い料理人（性能の高い機械）を用意するか、料理を簡単にする（絵を軽くする）しかないわけです。

ですから作り手は、機種の性能と、そのゲームで何を優先したいかを考えて、「絵を豪華にして枚数を抑えるか」「絵を少し簡単にして枚数を保つか」を選んでいます。そして、機械が目標の枚数の絵を描き切れなくなると、実際に1秒に描ける絵の枚数が落ちて、遊んでいる人には「重い」「カクつく」と感じられます。ノートパソコンやスマホでは、フレーム数が高いほどバッテリーの減りが早く、本体も熱くなりやすいので、スマホのゲームに、30fpsと60fpsを設定で選べるものが多いのも、このためです。

④ 一言のプロンプトで作ったゲームは、ボールの速さが遊ぶ機械で倍変わる

ここで、Ⅰで一言のプロンプトで作ったブロック崩しに、話を戻します。AIが書いたプログラムを読んでみると、このブロック崩しは、ボールを「1フレームで3px」動かす作りになっていました。1回絵を描き直すたびに、ボールを横に点3個分、縦に点3個分ずつ動かす、という意味です。①で書いたとおり、ブラウザのゲームは、画面が描き直せる回数に合わせてゲームの絵を描き直すので、ふつうのパソコン（60Hz）なら横に1秒で180px、MacBook Pro（120Hz）なら横に1秒で360px進むことになり、同じファイルなのに、遊ぶ機械によってボールの速さが倍も違ってしまうんです。

なぜ速くなってしまうのかは、太鼓の達人のようなリズムゲームで考えると、とても分かりやすくなります。仮に、流れてくる太鼓を「画面の絵を1回描き直すごとに、太鼓を4px左へ動かす」という作りにしたとしましょう。画面の絵を1秒に60回描き直すパソコンなら、太鼓は1秒に240px進んで、曲の拍ぴったりに叩く位置へ届きます。ところが、画面の絵を1秒に120回描き直すパソコンでは、同じ「1回4px」が1秒に120回くり返されるので、太鼓は倍の速さで流れてきてしまいます。音楽のほうは、どのパソコンでも時間どおりに流れますから、太鼓だけが曲より先に届いてしまい、100個の太鼓があったとしても、曲の半分の時間で全部流れ終わってしまうわけです。

つまり、速くなってしまう理由は、太鼓の動きを「画面の絵を1回描くごと」を単位にして設計している、言いかえれば「フレームで管理」しているからです。画面の絵を描く回数が倍になれば、太鼓の動きも倍になってしまいます。反対に、画面の絵を描く回数が違っても変わらないルールにしたいなら、「1秒に240px流す」のように、秒で管理すればいいわけです。こうしておけば、画面の絵を1秒に60回描くパソコンでは1回4pxずつ、120回描くパソコンでは1回2pxずつ太鼓を動かして、どちらも1秒後には同じ240px進むので、太鼓はいつも曲の拍どおりに届きます。違うのは、太鼓の流れ方のなめらかさだけです。

一言のプロンプトで作ったブロック崩しで起きていたのも、まったく同じことです。ボールの動きが「画面の絵を1回描くごとに3px」で設計されていたので、画面の絵を描く回数の多いパソコンでは、ボールが倍の速さで飛んできてしまったんですね。

ここで怖いのは、この「フレームで管理する」作りを、AIが誰にも頼まれずに、自分で選んでいたことです。私が頼んだのは「ブロック崩しを作って」の一言だけで、ボールをどう動かすかは何も伝えていません。

それでも、画面の絵を1秒に60回描くふつうのパソコンで遊んでいるかぎりは、ふつうに動いているように見えますから、フレームのことを知らない人は、プログラムを読んでも気づけませんし、気づけなければ直しようもありません。そのままいろいろなパソコンやゲーム機向けに公開したら、「機械によって難易度が違うじゃないか」と言われても、作った本人には原因が分からない、ということが起きてしまうわけです。

vol.6で書いた、知らないうちにAIが数字を決めて書き込んでいた失敗と、まったく同じ構図ですね。しかも、この記事の試作では、まっさらな状態から作り直したときも、同じようにフレームで管理する作りになっていた一方で、ⅩⅢで紹介するCodexは、最初から秒で管理する作りにしていました。AIがたまたま正しく作ってくれることもありますが、毎回そうなる保証はないので、作り手が知ったうえで、指示しておく必要があるんです。

そして、ブロック崩しは、この「秒で管理する」考え方を身につける練習に、うってつけの題材です。というのも、ブロック崩しには、ひとりでに飛んでいくボールと、プレイヤーが動かすバーという、動き方の違う2つのものが必ず出てくるからです。ボールの速さはもちろん、キーボードの左右でバーを動かすなら、そのバーの速さも「1秒に何px」で決めておく必要がありますし、このあとⅣの指示文に入れる、当たった瞬間にゲームを一瞬止める時間（ヒットストップ）や、画面が揺れる時間、点滅の速さも、すべて秒で管理するものです。

ちなみに、マウスでバーを動かす場合は、バーがマウスのある位置にそのまま移動するだけなので、画面の絵を描く回数の影響は受けません。自分で動くもの、プレイヤーが動かすもの、時間で決まる演出がひととおりそろっていて、しかもゲーム全体が小さいので、どこが秒で管理されているかをAIに確かめさせながら覚えるには、ちょうどいい大きさなんです。

⑤ 「1フレームで何px」と「1秒で何px」では、重くなったときの結果も変わる

そして、この2つの作り方の違いは、機械が重くなったときにも効いてきます。たとえば、キャラクターを「1フレームで4px」動かす作りと、「1秒で240px」動かす作りを比べてみると、こうなります。

昔のゲーム機で、敵がたくさん出てくるとゲーム全体がゆっくりになる「処理落ち」という現象がありましたが、その多くは「1フレームで何px」の作りで、1秒に描ける画面の絵の枚数が落ちたときに起きていたものです。一方、「1秒で何px」の作りなら、重くなって枚数が落ちても、ゲームの速さやタイマーは狂いません。そのぶん1回あたりの移動が大きくなるので、動きがガクガクして見えるようにはなりますが、遊ぶ機械によって難しさが変わってしまうことはないわけです。

フレーム数とゲームの速さを結びつけたまま、ほかの環境に出して問題になった例もあります。2013年に出たレースゲーム『Need for Speed Rivals』のパソコン版は、ゲームの進み方が30fpsに結びついた作りだったため、30fpsに固定されて発売されました。遊ぶ人が改造してこの上限を外すと、ゲームの速さまで倍になってしまったことが、当時話題になっています。

⑥ プロのゲーム開発でも、「1秒あたり」で作るのが基本

こうした理由から、今のゲーム開発では、動きを「1秒あたり」で作るのが基本になっています。たとえば、たくさんのゲームを作るのに使われている「Unity」というゲームエンジン（ゲームを作るための専用の道具）があります。その公式の説明にも、ものを動かすときは、前の絵を描いてから何秒たったかを調べて、その分だけ動かすように書かれていて、「1フレームあたり10メートル」ではなく「1秒あたり10メートル」動かすように、と説明されています。今回の指示文に入れた1行は、プロがどの機種でも同じ手触りで遊べるようにするためにやっていることと、まったく同じ考え方なんです。

⑦ 初心者は、まず1行。できれば3つの指示を入れておく

ここまで読んで、仕組みがすっきり分からなくても、まったく問題ありません。初心者の方がやることは1つだけで、AIに頼むときに「ボールなど、動くものの速さは『1秒あたり何px』で決めてください」と1行書いておくことです。こう書いておけば、AIは画面の絵を描き直す回数に合わせて、1回あたりの動きを自動で調整してくれるので、どのパソコンで遊んでも同じ速さになり、違うのは動きのなめらかさだけになります。これはブロック崩しに限った話ではなく、横スクロールのアクションゲームでもまったく同じで、キャラクターの歩く速さや、画面がスクロールする速さ、ジャンプして落ちてくる速さ、敵が弾を撃ってくる間隔なども、「画面の絵を1回描き直すごとに何px」で作られていると、遊ぶ機械によって難しさが変わってしまいます。動くものや時間で決まるものが出てくるゲームなら、どれでも必ず入れておきたい1行です。この1行は、このあとⅣで紹介する指示文にも、Ⅺの最初に渡す設計の指示にも入れてありますから、記事のプロンプトをそのまま使ってもらえれば、それだけで防げます。

もう一歩進めて、AIへの指示に次の3つを入れておけば、重くなったときも含めて、この問題はほとんど防げます。

2つ目は、1回あたりの移動が大きくなると、本当なら当たるはずの壁やブロックを、ボールが飛び越えてしまうことがあるためのものです。今回指示どおりに作った版でも、AIが自分でこの対策を入れていました。ただし、あまりに重くなったときは、すり抜けを防ぐために、ゲームのほうをわざと少しゆっくりにする作りがふつうで、今回の版も、画面の絵を1秒に30回も描けないほど重くなると、少しゆっくりになるようにしてありました。3つ目のスイッチを付けておけば、自分のパソコンが60Hzでも、120Hzの画面で遊ぶ人と同じ状態を手元で確かめられます。ちなみに、本格的なゲームでは、ぶつかったときの跳ね返りのような物理の計算だけは、決まった時間ごとにまとめて計算する作り方（固定タイムステップ）もよく使われます。ただ、初心者のうちは、ここに挙げた3つで十分です。

⑧ 応用：横スクロールのアクションなら、右を押したときの動きはこう指示する

たとえば横スクロールのアクションゲームで、右を押したときのキャラクターの動きなら、AIへの指示はこんなふうに書いておくといいと思います。

「重力の強さ」のような難しい言葉ではなく、「何秒で最高速になるか」「何秒で止まるか」「何px跳んで、何秒で着地するか」という、自分が遊んでいて感じる言葉で数字を書いておけば、そこから必要な計算は、AIがやってくれます。そして、この数字が手触りを決めるつまみになるので、Ⅵのように触りながら決めていけばいいわけです。

Ⅲ｜ブロック崩しの面白さは、5つに分けて言葉にできる

いきなり「もっと面白くして」と頼んでも、AIはまたそれらしい平均的なものを返してくるだけです。先にやるべきなのは、そもそもブロック崩しの何が面白いのかを、自分の言葉にすることなんですね。私は、ブロック崩しの面白さは次の5つに分けられると考えています。

1つ目は、狙えることです。バーのどこで受けるかで、ボールの行き先を自分で決められるので、運ではなく、自分の腕で崩している感覚が生まれます。

2つ目は、壊れる手応えです。当てた瞬間に、音と光と画面の揺れで「当たった」が手に返ってきて、続けて壊すほど気持ちが乗っていきます。

3つ目は、裏に入る快感です。端のブロックを崩して一番上まで抜けると、ボールがブロックの裏側で跳ね回って、こちらが何もしなくても一気に崩れていきます。狙いが当たったことへのご褒美のような瞬間ですよね。

4つ目は、だんだん速くなる緊張です。上の段ほど点数が高いのに、そこに当てるとボールが速くなるので、欲を出すほど危なくなっていきます。

5つ目は、最後の1個です。残りが少なくなるほど当てにくくなって焦りますが、だからこそクリアした瞬間に、ぐっと解放されるわけです。

この5つは私の思いつきではなく、元のゲームにちゃんと作り込まれています。1976年にアタリから出た元祖の『Breakout』は、ブロックが8段で、下から黄・緑・橙・赤が2段ずつ並び、点数は下から1・3・5・7点でした。ボールは、4回当たったあとと12回当たったあと、そして橙や赤の段に当たったときに速くなり、赤い段を抜けて一番上の壁に当たると、バーが半分の長さになってしまいます。上に行くほど点数が高く、そのぶん危なくなるという緊張と、上まで抜けたときの特別な瞬間が、50年前の時点ですでに作り込まれていたんですね。

それから、この5つほど目立ちはしませんが、ブロック崩しには、ほかにも面白さが隠れています。

1つは、画面が片付いていく気持ちよさです。ブロックが減るほど画面がすっきりしていき、どこまで進んだかがひと目で分かるので、部屋の片付けがはかどっているときのような達成感があります。

もう1つは、ギリギリで拾う気持ちよさです。もう間に合わないと思ったボールを、バーの端でなんとか拾えたときの「助かった！」という瞬間は、5つのどれにも入らない、ブロック崩しならではの盛り上がりですよね。

そして、すぐにもう1回やりたくなることも大きな面白さです。1回のプレイが短く、ボールを落としたときも「今のは自分のミスだ」と納得できるので、悔しくてついもう1回遊んでしまうわけです。

ただ、今回は面白さの核に一番関わる5つにしぼって、AIへの指示を書いていきます。全部を一度に指示しようとすると、どれが効いたのか分からなくなるからです。ここで挙げた3つは、Ⅷでオリジナルのルールを考えるときのヒントにもなります。

5つが言葉になったら、それをまとめて一言にしておきます。今回のブロック崩しなら「バーの端で狙って裏に入れ、一気に崩す気持ちよさ」で、vol.6で書いた「面白さの核」、つまり、そのゲームで一番気持ちいいところを一言で言ったものが、これにあたります。

面白さの分解、調整設計の基礎はこちらもご覧ください

Ⅳ｜面白さの5つを、数字の入ったAIへの指示に書き換える

面白さが言葉になったら、次はそれを、AIが迷わずに作れる指示に書き換えます。そのときは、「気持ちよく」「いい感じに」といった言葉を、全部数字に置き換えます。

美容院で髪を切ってもらうときのことを思い浮かべてみてください。「いい感じにしてください」と頼むと、美容師さんはその人なりの「いい感じ」で切ってくれますが、それが自分の思っていた形とは限りませんよね。ところが、「前髪は眉の上1cm、横は耳が半分隠れるくらい」と伝えれば、ほぼ思ったとおりに仕上がります。AIへの指示もまったく同じで、「気持ちいい手応えにして」では伝わらなくても、「当たった瞬間に60ミリ秒（0.06秒）止めて、画面を4px揺らす」と書けば、そのとおりに作ってくれるわけです。

実際に私が渡した指示文は、Ⅲの5つをそのまま見出しにして、こう書きました。

いくつか補足しておくと、【狙える】の1行目は、Ⅱで説明した「遊ぶ機械で速さが変わる」問題を防ぐためのものです。【壊れる手応え】にあるヒットストップというのは、攻撃や衝突が当たった瞬間に、ほんの一瞬だけゲームを止める演出のことで、格闘ゲームやアクションゲームではおなじみの手法です。たった0.06秒ですが、これがあるだけで「当たった」という感触がはっきり手に残ります。

そして最後の【調整しやすさ】は、ゲームの数字を全部、プログラムの先頭にあるCONFIGという「設定のメモ欄」にまとめてもらうための一文です。こうしておけば、ボールの速さを変えたいときも、メモ欄の数字を1つ書きかえるだけで済みます。反対に、数字をプログラムのあちこちに直接書いてしまうことをハードコーディングと呼びますが、vol.6で書いた私の失敗は、まさにこれでした。AIが数字をあちこちに直接書き込んでしまったせいで、どこを直せばいいのか分からなくなってしまったんです。その経験を繰り返さないために、この一文を必ず入れています。

ちなみに、【だんだん速くなる緊張】の数字は、元祖の『Breakout』の作りを参考にして決めています。vol.6で書いたとおり、最初はありものの真似でいいわけです。

手を動かしている方は、この指示文を渡す前に、もう1つだけ準備をしておきます。AIとどう作っていくかの決まりを書いた「CLAUDE.md」というファイルを、breakoutフォルダに置いておくんです。Claude Codeは、起動するたびにこのファイルを自動で読んで、書かれた決まりを守って作ってくれます。中身はⅪで詳しく説明するので、今は、Ⅺにある囲み「最初に渡す設計の指示」の、「このフォルダでは、」から最後の行までをコピーして、次のプロンプトの（　）のところに貼り付けてください。Ⅰの一言をCLAUDE.mdより先に試したのは、CLAUDE.mdがあると、一言で頼んでも、ある程度整えて作ってくれることがあるからです。

⓪が終わったら、念のため、新しい会話を始め直しておくと、CLAUDE.mdの決まりが確実に読み込まれます。デスクトップアプリなら、「Code」のタブで新しい会話を始めて、もう一度breakoutフォルダを選び、ターミナルなら「/exit」で一度終えて、もう一度「claude」と打って起動します。

CLAUDE.mdができたら、テキストエディットに、少し上の「プロンプト②の本文（指示文）」の囲みを全部コピーし、その下に次の2行を足してから、まとめてClaude Codeに貼り付けて送ります。1行目は、Ⅴで書く「音が鳴らない問題」をあらかじめ防ぐためのもので、2行目はファイル名の指定です。

もし、AIが作る前に質問してきたら、思ったとおりに答えてもいいですし、「質問はなしで、このまま作ってください」と送っても大丈夫です。ちなみに私が試したときは、CLAUDE.mdに「作る前に質問する」と書いておいても、このように詳しい指示文を渡すと、AIはもう聞くことはないと判断するのか、質問せずに作り始めてしまいました。自分の作りたいゲームで面白さを言葉にする手伝いをしてほしいときは、「作る前に、質問だけしてください。まだ作らないでください」と、プロンプトの中ではっきり頼むのが確実です。また、CLAUDE.mdに調整画面のことを書いてあるので、この時点で、AIが頼んでいない簡単な調整画面を付けてくることがあります。それはそのままで大丈夫で、このあとⅥで、触りやすい調整画面を別のファイルとして作ってもらいます。

Ⅴ｜指示どおりに作っても、そのままでは完成しない

この指示文を渡すと、AIはしばらくして、見違えるようなブロック崩しを作ってくれました。8段のブロックが赤から黄色へと並び、ボールを当てるとカチッと一瞬止まって、画面が小さく揺れ、ブロックの色の破片が飛び散ります。続けて壊すと音がどんどん高くなっていくので、つい連続で当てたくなりますし、バーの端で受ければボールが斜めに飛ぶので、「あそこを狙おう」と考えながら打てるようになりました。

ただ、指示どおりに作ってもらっても、それで完成というわけにはいかず、自分で気づいて直したところが2つあります。

1つ目は、最初は効果音が鳴らなかったことです。というのも、今のブラウザには、ページを開いた人がクリックかキー操作をするまで音を出さない、という決まりがあります。マウスを動かすだけで遊べるゲームだと、一度もクリックしないまま遊び続けられてしまうので、手応えの要になるはずの効果音が、ずっと鳴らないままになっていたんです。そこで、最初に「クリックしてスタート」の画面を出すように直しました。プロンプト②で最後に足してもらった1行目は、この失敗から入れたものです。

2つ目は、ハードコーディングしないでと書いたのに、細かい数字が残っていたことです。ボールの速さや角度、ヒットストップの長さといった大事な数字は、ちゃんと設定にまとまっていました。ところが、キー操作のときのバーの速さや、破片の飛び方、効果音の高さといった細かい数字は、プログラムの中に直接書かれたままだったんです。これも、自分でプログラムを読んで設定にまとめ直しました。AIは指示をかなり守ってくれますが、全部を完璧に守るとは限りませんから、指示したら終わりにせず、最後は自分の目で確かめる。ここは、何度でも書いておきたいところです。

手を動かしている方は、v1.html ができたら、遊ぶ前に次のプロンプトを送って、数字の取り残しをAIに探してもらってください。CLAUDE.mdで「前の版を残す」と決めてあるので、ここからは、直すたびにファイルの番号を1つずつ増やしていきます。

Ⅵ｜触って、数字を決める

指示文に書いた数字は、あくまで出発点にすぎません。60ミリ秒のヒットストップが本当にちょうどいいのか、それとも40ミリ秒のほうが軽快なのかは、実際に触ってみないと分かりません。そこで、遊びながら数字を動かせる「調整画面」も、AIに作ってもらいます。頼み方は、こうです。プロンプト③で作った v2.html をもとにします。

できあがった tune.html を、ゲームと同じようにダブルクリックして開くと、左にゲーム、右にずらりとつまみが並んだ画面が出てきます。開いたら、まず左のゲーム画面をクリックして始めてください。つまみを触っている間もボールは動き続けるので、落としても気にせず、何度でもやり直せば大丈夫です。つまみは面白さの5つごとに分かれていて（いちばん下の「土台」は、ふだん触らなくて大丈夫です）、たとえば「壊れる手応え」のところにある「ヒットストップの長さ」を左右に動かすと、遊んでいる途中でもすぐに、ボールが当たったときの止まり方が変わります。ヒットストップや画面の揺れのオン・オフを切り替えれば、その演出があるのとないのとで、手応えがどれくらい違うのかも、その場で比べられるわけです。

これは、実際にこの指示文をClaude Codeに渡して作ってもらった画面で、つまみは全部で51本ありました。全部を触る必要はなく、最初は「最初のボールの速さ」「バーの端で受けたときの角度」「ヒットストップの長さ」「画面の揺れの大きさ」「1回で速くなる割合」くらいから触ってみるのがおすすめです（つまみの名前は、AIによって少し違うことがあります）。動かしたつまみは名前の色が変わるので、どれを触ったのかもすぐに分かります。

気持ちいい数字が見つかったら、「今の値をコピー」ボタンを押します。すると、「ヒットストップの長さ：40 ミリ秒」のように、変えた数字だけが文章になってコピーされるので、それを次のプロンプトの（　）のところに貼り付けて、AIに送ればいいわけです。調整画面で動かした数字は、その画面の中にしか残らず、AIからは見えませんから、この「コピーして渡す」ひと手間が大事なんです。

数字を決めきれないときは、プロンプト⑤の代わりに「v2.html をそのまま、v3.html という名前で複製してください」と頼んでおけば、このあとのファイル名がずれません。

そうやって、指示して、作らせて、触って、数字を直す、を何回か繰り返していくと、「整っている」が「気持ちいい」に少しずつ変わっていきます。どの数字をどの順番で触ればいいのかは、「【読み切り】ゲームを調整するための「狙い・型・つまみ」の作り方」に詳しくまとめています。

Ⅶ｜オリジナルのルールは、面白さの核を伸ばすものを1つだけ足す

ここまでで、元祖の『Breakout』を真似したベースのブロック崩しができました。ここからが、これを自分の作品にしていくところです。

──────────────────

ここから先は有料です。

この連載の有料回は、メンバーシップ「ゲーム × 仕事と人生の設計工房」（月980円）で、すべて読めます。
この記事を単品で買う（1,980円）より安く、ほかの回も、これから出る回も読めます。
https://note.com/ukyousan/membership

──────────────────