無料ソース付:終盤での盤面拡張リバーシ「黒白龍棋」～AIでの制作プロセス公開

フィルきぃの映画音楽作曲講座

2026年2月3日 02:19

はじめに

こんにちは。
いつもは映画監督・作曲家として、このnoteで「映画音楽作曲講座」をしている私ですが、今日は初めて見せるもう一つの顔である、ゲーム制作者としてやってきました。

この記事は、いわゆる単なる「ゲーム制作ノウハウ記事」ではありません。

プログラミングの教科書でも、
ゲームを量産するためのテクニック集でもありません。

「アイデアが曖昧な状態から、ひとつの完成形に辿り着くまでに、
AIをパートナーにしつつ、どんな思考をし、どんな判断をし、何を捨てたのか」

その過程を、できるだけ正直に残した記録です。

リバーシは初心者から上級者まで誰もが楽しめる王道のゲームですが、
私のような初心者にとっては、終盤は勝敗が見えてきて単調になりがち…。

そこで私は、オリジナルゲームとして
終盤に盤面が拡大する変則リバーシ「黒白龍棋」（英語名：Loong Reversi）を考案・制作しました。

50手以降、盤面が拡大することで世界が広がり、音楽も変わり、黒と白のコマは、黒龍と白龍との決戦へと発展します。

終盤の逆転を狙える、スリリングなリバーシ。
ルール、ゲーム構造、仕様を、
完成版ソース＋AIでの制作プロセス付きで、本日2026年2月3日、公開します。

▼PC・スマホですぐ遊べる！Webサイト版リンクはこちら

追加機能「視界制限：煙霧モード」「難易度：達人」「物語表示」も搭載

▼itch.ioからダウンロードできるWindows版はこちら

追加機能「視界制限：煙霧モード」「難易度：達人」「物語表示」も搭載

▼Steam版もリリースしています

さて、この記事では、

・実際に動く完成版ソースコード
・このゲームのルールにたどり着くまでのゲームデザインの試行錯誤
・ゲーム開発に初挑戦の非プログラマーの私が、AIをパートナーにして、どのようにゲームを作ったか

を、すべて公開しています。

“ゲームを作る”って、こうやって考えるんだ…
ゲーム開発やプログラミングに挑戦したい方や、ゲーム音楽を作曲したい方。
この記事をお読みいただき、「一段、視野が上がる体験」になればと思います。

そして、AIを「よくわからないけどすごいもの」ではなく、
「使う側の人間の判断によって結果が左右される道具」として使い、
さらには「互いにミスを認め合いながら、共通の目標に向かって並走するパートナー」に
昇華していく様子を、この記事から感じ取っていただけると幸いです。

この記事で示している、AIをパートナーにしていくプロセスは、

・要件が曖昧な仕事をどう分解するか
・相手が間違えた時にどうリカバリするか
・全体を壊さずに部分修正する考え方

など、通常の仕事にも応用できると思います。

※本記事および本ゲーム「黒白龍棋（Loong Reversi）」の内容は著作権法により保護されています。

１．ゲーム「黒白龍棋」の世界観・物語

これは、狭い世界で争い続けた者たちが、
世界そのものに試される物語である。

闇に浮かぶ、狭い正方形の大地。
そこでは、黒と白の勢力が、数百年にわたり、限られた領地をめぐり、争いを繰り返していた。
どちらが正義でも、悪でもない。
どちらも己の正義を持ち、すなわち、どちらも一方から見れば、悪でもある。

狭い大地と、続く争いは、彼らの視野をも狭くしていた。
彼らは気づいていない。狭い大地の外側には、まだ見ぬ世界が広がっていることを。
そして、その世界のすぐ外では、龍たちが眠り、静かに見守っているということを。

黒と白との争いがいよいよ限界に近づいた時。
龍たちはついに目覚め、その咆哮によって、
世界の淵が、音を立てて広がり始めた。

この大地は闇の中ではなく、果てしない空に浮かんでいたということを、人々は知らされる。
そして、黒と白の龍の軍勢が、圧倒的な力を持って、争いに加わる。

龍たちは、はたして敵か味方か。それとも、この争いの裁定者となるのか。
世界の運命をかけた、最後の戦いが、今、始まるー。

２．「黒白龍棋」のルール説明

フェーズ1は通常のリバーシ（盤面サイズ：8×8）。

石が50個置かれると、盤面サイズが10×10へ拡張し、既存の盤面の進行を盤面中央では引き継いだまま、それまでの盤面の周囲1マス分が追加。音楽も変わり、フェーズ2に突入。
盤面拡張後、外周は特殊マスとなり、置いた石は「龍」マークとなり、ポイントが2点になります。

フェーズ1の8×8の段階では不利だった場合でも、
フェーズ2にて10×10への盤面拡張があることで、より戦略的になり、終盤の逆転が可能になる。
終盤は飽きがち・諦めがちだったリバーシが、最後までスリリングになる。

以下は一定の条件を満たすと（現バージョンでは石が50個置かれると）盤面サイズが拡張するプログラムコードのイメージです。
このゲームの、最も肝の部分です。

if (stoneCount >= 50 && !expanded) {
// 特定の条件を満たすと（石が50個以上になったら）
expandBoard(); // 盤面が拡張する
}

３．このゲームの制作の動機（映画音楽作曲講座からの発想）

私は映画監督・作曲家として、
このnoteや、動画講義サイト「udemy」「コエテコカレッジ」、電子書籍「Google Play Books」「BCCKS」などで、
「映画音楽作曲講座」を展開しています。

これらの講座の中でも申し上げていることですが、映画音楽を作れることは、ゲーム音楽にも応用が利きます。

そこで、映画音楽作曲講座の番外編・一例として、ゲーム音楽を紹介したいと思いました。
ゲーム音楽を示すには、曲の変化を体感できるよう、１曲だけでなく２曲を使いたい。
さらに、曲と親和性の高い効果音もセットで紹介できると理想です。

そのためには、自作のゲームを作るのが最も自由で手っ取り早いと考えました。

しかし私は映画監督であり、作曲家ではありますが、そもそもゲーム開発者ではありません。

仕事上、業務に必要な簡易ツールをプログラミングしたことは何度かありますが、四六時中ソースコードを書くような立場ではなく、プログラムを書く時は必死に頭のモードを切り替えなければならないほどの、初心者です。
プログラムの要件定義・設計や、動作確認テストの勘どころは、ある程度持っていますが、これまで、ゲームは作ったことがありません。

なので、そんな私がゲームを作るにあたっては、ゼロからゲームを作るよりも、元々親しみのあるゲームをベースにした方が受け入れられやすいし、私が作れる範囲はそこまでだと考えました。

そこで、シンプルで著作権の問題がないゲームとして選んだのが「リバーシ」でした。

「リバーシ」とは？

・19世紀にイギリスで考案されたボードゲーム

・8×8の盤上で黒と白の石を交互に置き、相手の石を挟んで自分の色にひっくり返す（＝リバースする）

・最終的に石の数が多い側が勝者となる

・中国語では「黑白棋（ヘイバイチー）」と呼ばれる。
　※「棋」は、将棋の「棋」と同じ、駒という意味ですね。

リバーシの場合、盤面の石の数に応じてBGMを切り替えれば、２曲の音楽を自然に使えると考えました。

しかし、私は個人的に、リバーシに対しては、昔からある想いがありました。

「ゲーム初心者は、対人戦でも対CPU戦でもなかなか勝てない。
いつも終盤には諦めてしまい、飽きてしまう。
何とか最後までスリリングに楽しめて、『まだ逆転できるかも』という希望を持てないか？」

そんな折、流行りのオープンワールドRPGをプレイして気づきました。

オープンワールドRPG（ロールプレイングゲーム）は、自分が主人公の役割を演じ（ロールプレイ）になり、敵を倒したり、宝物を探索したりしながら、世界のどこまでも自由に（オープンワールド）冒険していける、コンピューターゲームのジャンルです。

「主人公になって世界を探索する感覚を、リバーシでも再現できないか？」

もし盤面が、プレイの進行に応じて広がるとしたら――

・世界が広がる感覚が出せる
・これまでの対戦状況を逆転できるチャンスになる

すぐに、「進行に応じて盤面が拡張するリバーシ」の先行事例や特許を調べました。結果は、ありがたいことに「ナシ」。

おお！これはオリジナルゲームとして世に出せる、と確信しました。

とはいえ、リバーシは誰もが知る、あまりにも有名すぎる、シンプルなゲームです。
いくら改造しても、単純なゲームとして販売するだけでは、おそらくインパクトは弱い。

そこで、開発には生成AIを活用し、AIとの共同作業による制作プロセスを記事として公開することにしました。

つまり、「ゲームそのもの」を売るのではなく、
「ゲーム制作の考え方」「驚かせ方」「生成AIの活用法」といった独自の価値を届けよう、と考えたのです。

４．さっそくダウンロードして遊んでみよう！

この「黒白龍棋」（無料版）は、以下の6ファイルで構成されています。

・HTML＋JavaScript＋CSS：統合1ファイル（ゲーム本体）
・BGM・効果音：音声ファイル4つ
・画像：1ファイル

以下より、ダウンロードしたzipファイルをPCに解凍し（Windowsの場合、zipファイルを右クリック→「すべて展開」）、できたフォルダ内の

loongreversi.html

をブラウザで開くだけで、すぐに遊ぶことができます。

▼こちらよりダウンロードできます

loongreversi_v20260207.zip の解凍後のファイル構成

・loongreversi.html　…ゲーム本体
・bgm1.mp3　…フェーズ1用のBGM
・bgm2.mp3　…フェーズ2用のBGM
・stone.mp3　…通常の石を置いた時の効果音
・stone_loong.mp3　…龍石を置いた時の効果音
・picture.jpg　…フェーズ2で表示される背景画像

このゲームは、別サーバーへの通信や外部ライブラリの参照は一切なし。
ログ解析用のタグも含まれていません。
PCがオフラインでも、そのまま遊べます。

スマホでも遊べますが、ZIPの解凍やHTML実行にはある程度の知識やツールが必要です。
「スマホでZIPを解凍してHTMLを実行する方法」などを調べた上で試してみてください。

また、現バージョンではスマホで実行した場合、BGMや効果音は鳴らない仕様になっています（スマホの場合、セキュリティ上、再生ボタンをもうけるなどしてBGMを鳴らす必要があるため）
PCで遊んでいただくと、BGMや効果音もお楽しみいただけます。

５．リバーシというゲーム選定と設計思想

(5-1)なぜ、数あるゲームの中からリバーシを選んだのか

リバーシ、チェス、将棋、囲碁。
これらはすべて、ルールそのものは著作権の対象外であり、
誰でも自作して販売することができるゲームです。

その中で、私は「リバーシ」を土台として選びました。

理由は、単に好きだからではありません。
むしろ、ゲームとして“余白”が最も大きいと感じたからです。

・駒は黒と白の2種類しかなく、能力差がない
・駒が成る、持ち駒を投入する、といった複雑な要素がない
・盤面が比較的コンパクトで、プレイ時間が短い
・ルールが非常にシンプルで、説明がほぼ不要

これらの特徴は、
「そのまま遊ぶ」ためではなく、
「拡張し、改造する」ための土台として、非常に優秀です。

実際、リバーシは少ないコード量で実装できるため、
試行錯誤やテストを高速に回すことができます。

つまり、
ルールの説明に時間をかけることなく、
少しだけ追加した独自ルールだけを覚えれば、
すぐに『黒白龍棋』を遊べる。

この点が、私がリバーシを選んだ最大の理由です。

そして、リバーシは駒が黒と白の二種類しかなく、
戦いの物語を想像力で自由に補える点も魅力だと感じました。

そんな折、リバーシが中国語で「黒白棋（ヘイバイチー）」と呼ばれることを知り、
中国のイメージとファンタジー要素を組み合わせ、「龍」を登場させるのがぴったりだと感じました。

こうして、リバーシの無限のイメージの余白を埋め、神秘的で壮大な世界観を表現するために、
タイトルは「黒白龍棋（ヘイバイロンチー、こくびゃくりゅうき、くろしろりゅうき）」としました。

黒と白の戦いは単なるゲームではなく、
龍たちが見守る広大な世界の中で、プレイヤーの手によって物語が紡がれる。
それが、「黒白龍棋」が目指す、新しいリバーシの体験です。

(5-2)どんなゲームにしたかったのか

そもそも、リバーシ愛好家の方々の情熱は別格です。

でも、愛好家ではない方にも、毎日やりたくなるほどの中毒性を持たせるのは、リバーシを改造しても、おそらくほぼ不可能に近い。

だから「黒白龍棋」は、たまにスキマ時間に手を伸ばしたくなる、思い出した時に遊びたくなる――そんな絶妙な距離感を意識しました。

ここまでで、
このゲームが「どんなものか」と、
なぜこの形に落ち着いたのかは、
ある程度伝わったと思います。

この先の６章以降では、
実際にどんな試行錯誤をし、
どんな判断基準でルールや構造を決め、
どうやってAIと一緒に形にしていったのかを、
もう一段、踏み込んで書いています。

そのため、この先の内容は、
・自分でもAIを使って何かを作り切りたい人
・途中で破綻した経験があり、「次はやり切りたい」と思っている人
以外には、あまり向いていません。

完成したゲームを眺めたいだけの方や、
結果だけを知りたい方にとっては、
ここまでで十分だと思います。

「同じことを自分でもやってみたい」
「AIとの付き合い方を、一段高めたい」
そう感じた方だけ、続きを読んでもらえたら嬉しいです。

Overview in English (英語での概要説明)

This section provides a concise English overview of the game concept
and its core mechanics, for reference and disclosure purposes.

Loong Reversi:
A Reversi Variant with Dynamic Board Expansion During Gameplay

This document is a public disclosure of an original abstract strategy game
titled "Loong Reversi", created by Factory Digital Entertainment, Hironov Yazaki.

The purpose of this publication is to disclose the core game rules and
mechanics as prior art, preventing later patent claims on the same concept.

Loong Reversi is based on the standard game of Reversi played on an 8×8 board.
The game introduces a phase-based structure in which the board size expands
dynamically during gameplay.

Phase 1:

Initial board size: 8×8
Standard Reversi rules apply
When the total number of stones on the board reaches 50,
the game transitions to Phase 2

Phase 2:

Board size expands from 8×8 to 10×10
The original 8×8 board is repositioned at the center of the new board
A one-cell-wide outer ring is added around the original board

Special Outer Cells ("Loong Cells"):

Located on the outer ring of the expanded board
Available only in Phase 2
Stones placed on these cells count as 2 points instead of 1

The winner is determined by the total score after the game ends,
with Loong Cells providing additional strategic value.

This disclosure was first published on 3 February 2026.
The author asserts authorship of the original concept and its implementation
at the time of publication.

６．ルール・ゲームデザインを決めるまでの９つの試行錯誤

(6-1)フェーズ数を2段階に抑えた理由

当初は、数十手ごとに盤面がどんどん拡張していく構想もありました。

しかし、盤面が広がるほど、プレイヤーが打つ手も増え、プレイ時間が飛躍的に長くなってしまいます。

時間制限を設ければ短縮できますが、それはリバーシ本来のルールから逸脱してしまう。

そこで、まず3段階のフェーズにしてみましたが、最終的に12×12マス（144マス）となり、通常の64マスの2倍以上の手数が必要に。
これでは、繰り返しプレイするには辛すぎます。

そこで、最終的にフェーズは2段階に抑え、最終盤面は10×10マス（100マス）にしました。

これで「世界が広がる楽しさ」と戦略性を保ちつつ、サクッと終わる気持ちよさも残せます。

64マスから100マスに増えたことで操作の手数は約1.5倍になりますが、演出や龍石ルール、逆転の可能性により、体感的には苦にならないバランスになっています。

(6-2)盤面の拡張タイミングを石が50個置かれた時にした理由

実は、開発の後期まで、盤面は石が「60個」置かれたタイミングで拡張していました。最終的な仕様とした50個よりも、当初は10個多かったのです。

その間、私はバグを取るために「置ける石を打ちまくる」単調なテストを繰り返していました。

そのせいで、私は「プレイヤーは実際には熟考しながら石を置くのだ」という当たり前の感覚が、麻痺してしまったのです。

反省して初心に帰り、プレイヤー目線で改めてテストすると、60個での盤面拡張では、逆転のチャンスが少ないことに気づきました。

かといって、個数を減らして40個などの早いタイミングで盤面を拡張してしまうと、序盤の読み合いの面白さが薄れ、「なんで突然拡張するの？」という違和感が生まれます。

そこで、AIと数学的に吟味した結果、48〜52個が最適範囲と判明。

というわけで、ルール説明上もキリがよい、50個に設定しました。

50個の石が置かれた瞬間というのは「戦況が見えてきた頃」であり、「逆転の可能性をまだ信じられる」タイミング。

ここで盤面が広がるのが、最もドラマチックだと考えたのです。

(6-3)盤面の拡張を10×10の正方形にした理由

開発初期は、盤面の拡張方向をランダムにしたり、最終的には世界地図のような形に広がる構想もありました。

しかし、フェーズ数が増えすぎ、プレイヤーに与えられる驚きも最初の一度だけになりかねません。
これでは「一発屋ゲーム」になってしまうと判断し、不採用に。

最終的に、拡張はシンプルに正方形の10×10盤面に限定しました。

(6-4)黒と白以外の駒の色を増やさず、龍石の追加のみにした理由

リバーシの魅力は、黒と白のシンプルさです。

その魅力を損なわずに、世界観と戦略性を広げるため、特別な駒として「龍石」を追加しました。

しかも龍石のベースは黒と白の石なので、ルールとしても自然に受け入れられます。

(6-5)龍石の置き場所を拡張盤面の外周のみにした理由

龍石を内周にも置くと、龍の存在感が人に近くなってしまい、距離感が曖昧になり、世界観が崩れます。

龍は世界の外側から大地を見守る存在であり、最後の手段として人間たちの争いに介入します。
ただし、自分たちの領域である外周は保持したままです。

外周の龍石が内周の通常石を一気にひっくり返せば、まるで龍が一直線に炎を吐き、戦場を焼き尽くすイメージも生まれます。

(6-6)龍石のポイントを2点にした理由

龍石のポイントを1点にしてしまうと、龍と人との区別が曖昧になってしまいます。

一方で3点以上にすると、龍が強くなりすぎてしまい、勝敗のきっかけがフェーズ2の盤面拡張後に偏りすぎてしまう。

そこで、2点に設定しました。

これにより、龍の強さを十分に表現しつつ、ドラマチックな逆転の可能性も残せます。
このバランスは、AIと数学的に相談した上で決定しました。

(6-7)持ち駒や攻撃アイテムの概念を設けなかった理由

当初は、龍石を手元に保持して任意のタイミングで使える攻撃アイテム構想もありました。

相手の手を止めるアイテムの案なども検討しましたが、攻撃アイテムを持たせると、あたかも龍が人間の操作下にあるように見えてしまい、世界観が崩れてしまいます。

また、持ち駒の概念を加えると将棋に近くなり、戦略が複雑化してルールが覚えにくくなる。

そこで、本来のリバーシのシンプルさを保ちつつ、拡張盤面と外周の龍石だけで深みを出す方針にしました。

外周にしか置けない龍石は、ゲーム性の面白さを提供しつつ、龍が世界の守護者であることを直感的に伝えます。

(6-8)試合記録や解放要素、トロフィーをあえて採用しなかった理由

「黒白龍棋」の主軸は、対戦の駆け引きです。

成績やトロフィーは“飾り”であり、ゲーム体験そのものを重くしてしまう可能性があります。

まずは駆け引きそのものの面白さを届けたいと考えました。

また、実装には進捗やスコアの保存、デバイスごとのテスト、ローカル記憶領域を使用することによるセキュリティ対策が必要で、開発コストも膨大になります。

BGMの解放要素などの夢はありますが、今回は見送り。
将来的にはアップデートで追加する候補として温めています。

(6-9)ネットワーク対戦を採用しなかった理由

オンライン対戦は魅力的ですが、膨大な開発コストとセキュリティ対応が必要です。

まずは、ローカルでの駆け引きを楽しんでもらうことを優先しました。

また、ランキングも簡単には作れません。

なぜなら、「黒白龍棋」は得点に上限があるため、単純なランキングでは正当性が怪しくなるのです。

このため、もしもランキングを作るならば、得点×試合時間×勝利数といった複数軸の掛け合わせが必要になります。

しかし、そうすると、プレイヤーの納得感も薄れてしまうでしょう。

こうして余計な装飾をそぎ落とし、プレイヤーの駆け引きに集中できるよう設計されたのが、『黒白龍棋』です。

戦略と逆転のドラマ、そして龍の存在感――ルールと世界観が互いに補い合う設計を、ゲームデザインとして目指しました。

７．ゲームの処理フローとソースコードの見かた

(7-1)ゲームの処理フローについて

◆ゲームの全体フロー

◆上記の全体フローの中の特定のタイミングで呼び出される、その他の各処理群

【ア】盤面描画更新処理（draw() が呼ばれたときの内部処理）

※ draw() は、「ゲームの状態を画面に反映するための共通処理」であり、
盤面や石の状態が変化したあとに必ず呼ばれます。
・プレイヤーが石を置いた直後
・ターン終了時
・フェーズ2拡張後
など、状態が変化したタイミングで都度呼び出されます

draw()
├─ 盤面描画 (通常セル or 外周セル)
├─ 石の候補描画 (canPut)
├─ 石描画
│ 　　 ├─ 通常石 (drawNormalStone)
│ 　　 └─ 龍石 (drawLoongStone)
└─ パーティクル描画 (updateParticles)

【イ】CPU思考処理

※ cpuTurn() は、
・ゲーム開始時にCPU先手の場合
・プレイヤーの手番終了後、CPUの番になった場合
に呼び出されます。

cpuTurn()
├─ 有効手をリストアップ (canPut)
├─ 難易度別評価
│ 　　 ├─ easy: 置ける数＋石数
│ 　　 ├─ medium: 1手先を読む
│ 　　 └─ hard: 角や危険マスを重視
└─ 最も高評価の手を選ぶ -> putStone

【ウ】フェーズ2への切替処理

※ フェーズ2への切替処理（10x10盤への拡張イベント）は、
石数が50個以上になった瞬間に一度だけ発生します。
通常のターン処理（endTurn）の途中で割り込む形で実行されます。

animateExpandBoard()
├─ フェーズ2フラグ expanded = true
├─ BGM切替
├─ 龍目覚め演出 (drawLoongAwakening)
└─ 盤面拡張 (expandBoardCore)
　　├─ 新しい10x10配列作成
　　├─ 古い盤面を中央にコピー
　　└─ 描画更新 →【ア】盤面描画更新処理へ + ターン続行

【エ】パス判定処理

endTurn()
├─ ターン切替 turn *= -1
├─ 次の手が無い?
│ 　　 ├─ 1回目: pass -> showPass() -> 再度 endTurn
│ 　　 └─ 2回目: endGame()
└─ 次の手があれば draw + updateInfo

【オ】効果音 & パーティクル（粒子の演出）処理

putStone()
├─ createParticles() -> パーティクルを配列に追加
├─ animateStoneEffect()
│ 　　 ├─ 石の拡大アニメ
│ 　　 └─ 効果音再生 (石 or 龍石)
└─ animateFlips() -> 反転アニメ

(7-2)ソースコードの見かた

ダウンロード・解凍したファイルのうち「loongreversi.html」を、メモ帳などのテキストエディタで開いてみてください。

または、「loongreversi.html」をブラウザで実行した後、ブラウザ画面内を右クリックして「ページのソースを表示」をクリックしてみてください。

これで、ソースコードをご覧いただけるはずです。

このソースコードの中で、

　←HTML用のコメント

/* ～ */　←CSS(スタイルシート)用のコメント

//　←JavaScript（プログラム処理）用のコメント

のように書かれている部分は、コメント（プログラムの処理そのものではない、補足説明のための解説文）です。

このゲームのソースコードには、いたるところに、かなり丁寧に細かく、
一般的な実装コードよりコメントを多めに記述しています。

先ほどのゲーム処理フローと併せて、これらのコメントを手掛かりにご覧いただくと、
なぜその処理が必要か、どのように動くかを理解しやすくなると思います。

８．AIでゲームを作り終えるまでの指示（プロンプト）の書き方と判断記録

※この章は、汎用的なプロンプト集を提供するものではありません。
実際にどのような判断で指示を出し、修正・切り捨てを行ったかの記録です。

(8-1)この「黒白龍棋」のプログラムを生成するためのAIへの指示（プロンプト）

以下の指示を、ChatGPTやGeminiなどの生成AIに伝えれば、
おそらくほぼ１発で、「黒白龍棋」のHTML＋Javascript＋CSSの統合1ファイル用のソースコードを生成してくれるはずです。

生成されたソースコードを、メモ帳などのテキストエディタに貼り付け、「test.html」など適当な名前のHTMLファイルとして保存し、そのファイルを実行すれば、すぐにテストができるでしょう。

ただし、AIの種類によって、または同じAIでも生成のたびに、微妙に異なるソースコードが生成されるはずです。

特にゲームの見た目の見栄えや、石のアニメーションなどの演出の部分は、緻密に指示しないと、その時にAIがどのように捉えるかが曖昧になり、異なる生成結果になるためです。

また、ソースコード内に使用する「変数」（英語の様々なプログラム部品の名称）も、緻密に指定しない限り、AI側で無難な名称に勝手に命名するためです。

そして、生成されたコードは、残念ながら、必ずすべてが正常に動作するとは限りません。
むしろ、うまく動作しないことの方が圧倒的に多いと思っておくべきでしょう。

AI自身は、特に今回私が使用した無料プランの場合、原則としてプログラムのテストは行ってくれず

（もしも負荷の大きいプログラムだったり、セキュリティ上の穴があるプログラムの場合、AIのサービス自体に損傷を与えかねないため、AI自身は有料プランなどでテスト機能に特化したAIサービスでない限り、原則としてプログラムを実行してのテストはしてくれず、理論上の確認までしかしない）、

ある程度理論的ではありますが、
「おそらく動くだろう」という推測でソースコードを生成するため、
間違うことが頻繁にありうるのです。

＝＝＝＝＝完成版の１発生成用のプロンプト例：ここから＝＝＝＝＝

あなたは熟練したHTML5ゲーム開発者です。
以下の仕様を「1つのHTMLファイルだけ」で完全に実装してください。
外部ライブラリは禁止、Canvas APIのみ使用してください。

【ゲーム概要】
・タイトル：黒白龍棋（Loong Reversi）
・日本語UI
・リバーシをベースにした対戦ゲーム

【基本仕様（フェーズ1）】
・8×8盤面で開始
・黒が先手
・合法手のみ配置可能
・挟んだ石は全方向で反転
・置ける場所には半透明のガイド表示
・連続パスでゲーム終了

【フェーズ2（拡張盤面）】
・盤上の石が50個以上になった瞬間に突入
・盤面を10×10に拡張し、既存盤面は中央に移動
・外周マスは「龍マス」とし、2ポイント
・内側マスは1ポイント
・フェーズ2突入時に演出とBGMを切り替える

【スコア】
・ゲーム終了時、マスの点数合計で勝敗判定
・同点は引き分け

【UI】
・Canvasで盤面描画
・現在の手番とスコア表示
・PASS時は全画面オーバーレイ表示
・ルール説明モーダルあり
・BGM ON/OFFボタン

【演出】
・石設置時のパーティクルアニメーション
・反転アニメーション
・フェーズ2突入時「龍、目覚める」の覚醒演出
・龍マスの石は発光し「龍」の文字を表示

【音】
・フェーズ1 / フェーズ2 用BGM（audioタグ）
　フェーズ1：bgm1.mp3
　フェーズ2：bgm2.mp3
・通常石 / 龍石用の効果音
　通常石：stone.mp3
　龍石：stone_loong.mp3

【対戦モード】
・2人対戦
・CPU対戦（CPUは白を担当）

【CPU難易度】
easy（初級）：
・ひっくり返せる石数とマス点数のみで評価

medium（中級）：
・easy評価 + 1手先で相手の最大得点を予測して減点

hard（上級）：
・medium評価 + 以下を考慮
・角は高評価
・外周は加点
・角隣接マスは大幅減点

【実装要件】
・すべて1ファイルHTMLで完結
・可読性の高い構造
・コメントは日本語
・即ブラウザで実行可能な完成形

完成コードのみを出力してください。

＝＝＝＝＝完成版の１発生成用のプロンプト例：ここまで＝＝＝＝＝

(8-2)上記の完成版プロンプトの優れている点

・AIへの「お願い」ではなく、文章化した「設計書」を伝える形になっている点

・冒頭に「あなたは熟練したHTML5ゲーム開発者」というように、AIに対しておまじない（暗示）をかけている点

→　このおまじない文により、AIは無限の可能性の中から、選択肢の幅を限定・吟味してくれやすくなります。
極端な言い方をすれば、無駄なジョークなどを踏まえず、正確な出力をしてくれやすくなります。

・1つのHTMLファイルにJavascript、CSSもまとめている点

→　本来の作り方としては、ゲームのルール説明、フェーズ1、フェーズ2をそれぞれ別のHTMLファイルにしたり、
Javascript部分を「.js」ファイル、CSS部分を「.css」ファイルに分けて生成するなどもできるのですが、
それではバグが発生しやすくなり、修正もしにくくなるので、あえて1ファイルにまとめています。

今回の開発対象がリバーシというシンプルなゲームであるが故に、幸いにもこの手法を採用できました。

・外部ライブラリ禁止＆Canvas APIのみにしている点

→特にアニメーションやデザインの描画、BGM、背景画像、表示フォントについて、本来は外部のサーバー内に置かれている無料のJavascriptライブラリや音楽ファイル、画像ファイルなどを都度読み込んで実行するようにすることもできますし、そうすることでソースコードをより少なくできる可能性もあるのですが、

その分だけ別途その都度通信が発生し、処理も重くなり、著作権の問題も発生しやすくなり、仕様変更が困難になり、バグが発生しやすくなり、修正も困難になるおそれがあり、デメリットの方が多いので、この手法としました。

(8-3)完成版プロンプトに至るまでの試行錯誤

実は上記の完成版プロンプトは、私がゼロから書いたものではなく、
AIとの数百回に及ぶ対話と、私自身による数百回に及ぶテストによって、
試行錯誤の末に完成したプログラムをAIに解析させ、AIによって作らせたプロンプトを、私が監修したものです。

今の私なら、すでにプログラムを完成させてこの記事を書いているくらいですので、
上記の完成版プロンプトに近いものをゼロから書けるかもしれませんが、

開発の開始当初は、ゲームのルールも完全に決まっていない状態でしたし、
複雑なプロンプトにしてしまうと、ゲームが動かない場合にどこから修正すべきかが分かりにくくなりますので、
極めてシンプルなプロンプトから始めました。

(8-4)AIと格闘しながら開発をやり切った１週間の日記

ここでは、ゲームの完成に至るまで、どのようにAIとやり取りしていったのか、

・AIを使った個人ゲーム開発の進め方
・AIが得意なこと／苦手なこと
・長期開発で破綻しないための指示の出し方

を、1週間の実体験をもとに、日記形式で紹介します。

【１日目：基本部分を気軽に開発】

私の場合、PCでFirefoxブラウザを開き、AIチャットボットのサイドバーから無料版のAIチャットを起動しました。
（終了する時は、ブラウザを閉じれば、それまでのAIとのやり取りは消滅・リセットされます。）

私の最初のAIプロンプト入力内容：
「HTML5＋Javascript＋CSSで1ファイルにまとめて、リバーシを作って。」

AIの回答：
「じゃあ HTML5 + JavaScript + CSS を1ファイルに全部まとめたリバーシを用意するね。
人 vs 人（ローカル対戦）で、合法手チェック＆石の反転まで実装してあるよ。
そのまま .html として保存 → ダブルクリックで動くよ。」

→　100行くらいのソースコードが瞬時に生成されたので、テキストエディタに貼り付けて「reversi.html」のように保存し、ブラウザで実行してテストプレイしました。

これでリバーシとして遊ぶことはできますが、CPU対戦はなく、見栄えも必要最小限で、石がひっくり返るアニメーションもなく、音も鳴りません。

ブラウザのウィンドウサイズを変更すると表示が崩れたりしますので、スマホ向きではありません。

勝敗の表示すらもありません。

石が打てない状況の時に手番をパスする処理もないため、その時は先に進めなくなります。

【２日目：開発順序を優先づけし、トライ＆エラーを繰り返しながら実装】

１日目の結果を受けて、次に進むべき方向性は、以下の４つです。

Ａ：手番のパス時の処理や勝敗表示など、リバーシとしての基本機能を完成させる
Ｂ：画面サイズ変更など、様々なプレイ環境での見栄えを成立させる
Ｃ：石がひっくり返るアニメーションや効果音など、演出面を磨く
Ｄ：「黒白龍棋」の最大の特長である、フェーズ2の盤面拡張の概念を追加する

さて、この４つは、どの順序でAIに実装させるべきでしょうか？
もちろん、Ａ～Ｄの４つを全てに１度で実装させるように指示することもできます。

ここで、ゲームデザイナーとしての設計のセンスが試されます。

正解というものはないのですが、私は以下のように考えました。

まず、Ａ～Ｄの４つを全てに１度で実装させるのは避けるべきだと考えました。
これは一見楽に見えるが、テストプレイではＡ～Ｄを一度に検証しなければならない。
Ａ～Ｄの全てで複数のバグが同時多発的に出る恐れが高く、
完成までの道のりが長くなる恐れがある。

なので、優先順位としては、以下の順序としました。

Ａ：まず、パス時の処理や勝敗表示など、リバーシとしての基本機能を完成させる

理由）リバーシ自体は極めてポピュラーなゲームなので、
AIは基本機能を完成させる知識を十分に持っていると思うため。

↓

Ｄ：次に、「黒白龍棋」の最大の特長である、フェーズ2の盤面拡張の概念を追加する

理由）盤面の拡張を行うということは、ゲームの途中で盤面のサイズや描画が大きく変わるということでもある。
なので、もしもこのＤよりもＢを先に実装してしまうと、せっかく調整したＢの処理を、あとでＤに合わせて作り直さねばならず、バグの温床になるおそれがある。

↓

Ｂ：それから、画面サイズ変更など、様々なプレイ環境での見栄えを成立させる

理由）先にこのゲームの肝となるＤの処理が出来上がっていれば、それも踏まえてこのBにて見栄えを調整することができるため。

↓

Ｃ：最後に、石がひっくり返るアニメーションや効果音など、演出面を磨く
※ただし、このCは３日目に持ち越し

理由）本来のゲームの機能とは切り離して考えることができる、付加価値的な要素のため、３日目に持ち越し。

上記の私が決めた優先順位に基づき、AIへの指示とテストプレイを繰り返しながら、Ａ→Ｄ→Ｂを１つ１つ前に進めていきました。

Ａ→Ｄ→Ｂの具体的な手順は、以下のようになりました。

①1日目の結果のソースをAIに丸ごと伝えて解析させ、ソースを隅々まで理解しなおさせる
②ＡのAIへの指示⇔生成結果のテストプレイ　を10回ほど繰り返し、Ａの処理を完成

③ ブラウザを起動しなおしてAIを起動しなおし、前回の②の完成ソースをAIに丸ごと伝えて解析させ、ソースを隅々まで理解しなおさせる
④ＤのAIへの指示⇔生成結果のテストプレイ　を10回ほど繰り返し、Ｄの処理を完成

⑤ ブラウザを起動しなおしてAIを起動しなおし、前回の④の完成ソースをAIに丸ごと伝えて解析させ、ソースを隅々まで理解しなおさせる
⑥ＢのAIへの指示⇔生成結果のテストプレイ　をＰＣとスマホで計10回ほど繰り返し、Ｂの処理を完成

もちろん、テストプレイが細かく成功するたびに、後戻りできるよう、その時点での最新のソースコードは私の手元にファイルの名前を変えて保存していきます。

さて、ここで注目いただきたいのは、手順③⑤の「ブラウザを起動しなおしてAIを起動しなおし、前回の完成ソースを丸ごと伝えなおして解析させる」を必ず挟んだ方が良いということです。

実は当初、私はこの手順を挟まずに進めていたのですが、AIは多数のやり取りを重ねていくと、一時的に記憶しておく情報が増えすぎてしまい、
記憶が混乱し、過去の修正履歴やバグの残っているソースを誤って参照してしまい、ミスが増えやすくなります。

そう、AIも、人間とは違う意味で「疲れる」ので、休憩させて気分をリフレッシュさせてあげる必要があるのです。

ただし、AIは人間とは「疲れ」の質が違いますので、「休憩」には時間を必要としません。ブラウザを閉じて、そのあとすぐ起動しなおせば、AIにとっての休憩はもう終わりです。

（厳密に言うと、無料プランのAIの場合、１日にやり取りできる文章量に上限があるので、あまりにも多いやり取りをすると、数時間は新しい指示を受け付けず、有料プランの購入を提案されることはありますが）

【３日目：演出面の強化と、ソースコード生成方法の見直し】

さて、3日目は、昨日からの持ち越しにした、

Ｃ：石がひっくり返るアニメーションや効果音など、演出面を磨く

を行いました。

ここは本来のゲームの機能とは切り離して考えることができる、付加価値的な要素のため、３日目に持ち越したのでした。

昨日と同様に、ブラウザを起動しなおしてAIを起動しなおし、前日の⑥の完成ソースをAIに丸ごと伝えて解析させ、ソースを隅々まで理解しなおさせました。

あとはＣのAIへの指示を出し、生成結果のテストプレイ　を計10回ほど繰り返せば、Ｃの処理も完成するだろう、と軽く考えていました。

しかし実は、ここに大きな落とし穴があったのです。

というのも、２日目の作業の結果、ソースコードは当初の100行ほどから、すでに1000行ほどに膨れ上がっていました。

ここまでソースコードが大規模になってしまうと、ちょっとした部分改訂を指示しただけであっても、
AIに丸ごとソースを生成しなおさせると、AIは全てを正確に再現できずに、
意図しない部分のソースコードが欠落してしまったり、前日にせっかく実装した機能が「なかったこと」にされてしまったりするのです。

もちろんこれは、有料プランに切り替えたり、AIへの指示の出し方を厳密にしたり、将来的なAI自体のアップデートによって改善されると思いますが、
私の場合、以下のように指示をしなおしても、全く効果がありませんでした。

・追加で指示した以外の処理はそのまま保持して！

・生成後のソースの行数をチェックして、最初に伝えたソースの行数より減っていたら生成をやり直して！

さらに困ったことに、これらの指示に対して、AIは「できません」とは言わず、あたかも完璧にこなしたかのように回答をしてきてしまうのです。

このような態度に対して、AIに対して怒りを向けても、何の解決にもなりません。

ここで頭を使って解決方法を導くのは、私たち人間の役目です。

そこで、私は考えを改め、この後の開発の手順は、以下のように変えることにしました。

・前日の終了時点での問題なく動作するソースコードをAIに丸ごと伝えなおし、解析させる

↓

・行いたい改訂指示をAIに伝え、ソースコードを丸ごと生成しなおさせるのではなく、
「現在のソースのどの部分をどのように修正すればよいかを提示して」と指示する

↓

・AIは、HTML部分、Javascript部分、CSS部分の何行目のどのあたりをどのように直せばよいか、ピンポイントに正確に提示してくれるようになる

↓

・私は、AIからのピンポイントの提示を参考に、ソースコード内を検索し、１つ１つピンポイントにソースコードの部分部分を差し替えて修正し、一通り修正が終わったらテストプレイする

特に、演出効果はタイミングや秒数の概念があり、複数のロジックが同時並行で動くので、ゲームがフリーズしやすくなるのです。

この修正方法に切り替えたことで、どんな局面でも開発を前に進められるようになりました。

【４日目：対ＣＰＵ戦のロジックの実装】

４日目は、対ＣＰＵ戦のロジックを作りこみました。

実はここまでに、ゲームの画面上ではＣＰＵの強さを初級・中級・上級の３つから選択できるようにはしていましたが、
ソースコードの裏側では３つの強さに違いは全くない状態でした。

私には、リバーシのプレイヤーの強さの違いがどこにあるか、正確に説明するできるほどの知識はありません。

ただしそんな私でも、

・リバーシは四隅の角を取ると有利である
・リバーシの上級者は、打つ手の先を読めれば読めるほど、強い

ということぐらいは、子どものころから知っています。

そして、今回私が作った「黒白龍棋」は、

・四隅の角を取っていても、フェーズ2で盤面が拡張すると、外周分が増えるので、それまでの角が角でなくなる

・盤面の拡張は、このゲームの驚きの部分である。個の盤面の拡張を、あらかじめ想定しながら先の手を読むかどうかで、ＣＰＵの強さの強度が決まる

というゲーム性になることも、ゲームを考えた本人ですから、もちろん理解しています。

これらの考え方をAIに伝え、「ＣＰＵが上級であっても、人間が頭を使えばちゃんと勝てるレベルの強さ」にするように指示しました。

どんなに頑張っても人間が勝てないレベルにCPUを強くしてしまうと、ゲームとしての面白みがなくなってしまうため、あえて（偶然も含めて）勝てる余地を残しておきたかったのです。

その結果、AIからの提案を踏まえ、ＣＰＵの強さは以下のようにしました。

初級：
置いたときに増える石数を重視して手を選ぶ、シンプルな思考。

中級：
初級の評価に加え、次の相手の得点を予測し、不利になりそうな手を避ける思考。

上級：
中級の思考に加え、角や外周などの安定したマスを高く評価し、角の隣など危険なマスを避ける、より戦略的な思考。
フェーズ2突入後は、10×10に拡張された盤面の構造（角・外周・危険マス）を考慮して打ち手を判断するが、フェーズ2への突入タイミング（石数50個）そのものを先読みすることはない。

CPUの実装も、演出効果の実装と同じく、ゲーム全体として複数のロジックが同時並行で動くことになりますし、
何より、先の手を読んでその中から１手を選択する際に、判断が付かずに堂々めぐりとなり、ゲームがフリーズしやすくなります。

これも、３日目から採用した、ピンポイントでの修正方法にて、テストプレイを繰り返し、１つ１つバグを取り除いていきました。

言い訳ではありませんが、それでも、世に出ているすべてのソフトやゲームと同様に、すべてのバグが取り除けることは、おそらくないでしょう。

致命的ではないレベルの、再現性が低いバグはまだ残っているでしょうし、
今後、ＰＣやスマホ、ブラウザなどの動作環境側の仕様変更に伴い、それらのバグが致命的なバグに進展する可能性もゼロではありません。

ただ、この手法を使えば、今後も前に進めていけると思います。

【５日目：仕上げの微調整】

４日目まででほぼゲーム自体は完成しているので、５日目は細かい調整を行いました。

油断をするとAIは誤ったソースを出力してしまい、すぐにゲームが動かなくなるので、これまで通り丁寧に１つずつ、部分的な修正とテストを繰り返しました。

また、完成したファイルをローカルで実行するだけでなく、Webサーバー上に置いて、ＰＣとスマホで動作確認をしました。

【６日目：コメントの追記作業】

ソースコードには手を付けず、ソースコード内のコメントを分かりやすく追記する作業を行いました。

これも、一度にすべてをやると、AIの誤判断によってプログラムが破損する恐れがあるため、数十行ずつ、ブロックごとに分けて、AIにコメントを提案してもらい、コメント部分のみを私がソースコード内に貼り付ける形で追記していきました。

【７日目：この記事の執筆作業】

この記事を書くために、記事の骨子を私が執筆し、AIに整理・校正の案を出してもらい、それをヒントに私自身の言葉で執筆しました。

９．BGM・効果音を作る際に心がけたこと

(9-1)曲調について

フェーズ1とフェーズ2用のBGMは、長時間繰り返し聴くことになるため、以下を意識しました。

・聴いていて飽きないメロディー
・耳が疲れない音色・音数・テンポ
・フェーズ1→フェーズ2で音数・音の幅・テンポを増やし、盛り上げる

フェーズごとのイメージは以下です。

・フェーズ1：龍の存在感は抑えつつ、全体の世界観に合わせ、ポップになりすぎない曲調
・フェーズ2：龍の神秘性・壮大さを表現

また、フェーズ1とフェーズ2で調は統一しつつ、盤面の状況（プレイヤーが優勢・劣勢）によって違和感が出ないよう、長調・短調の両方を取り入れました。

「龍」つながりのアクセントとして、中国の音楽でよく使われる五音音階（ドレミソラ）も部分的に意識しました。

(9-2)曲の長さについて

ゲームの平均プレイ時間（AIによる推測）は以下の通りです。

対戦形式　フェーズ1　フェーズ2　　合計
対人戦　　　約7分　　　約8分　　　約15分
CPU初級　　約4分　　　約6分　　　約10分
CPU中級　　約5分　　　約7分　　　約12分
CPU上級　　約6分　　　約9分　　　約15分

・フェーズ1用BGMは約2分前後
・フェーズ2用BGMは約2分30秒前後

どちらもループさせることで、長時間のプレイでも自然に聞き続けられる設計です。

(9-3)効果音について

・BGMを邪魔せず、BGMの主要な音程とマッチする音作りを心がけました。

・フェーズ2の龍石の効果音は通常石のアップグレード版として、よりリッチで迫力のあるサウンドにしました。

・効果音は1ゲームで最大100回鳴ることを想定し、100回聴いても心地よい音に調整しました。

■更新履歴

2026年3月16日：
Steam版もリリースしました。

2026年3月9日：
Webサイト上で遊べるようになりました。PC・スマホにて、以下のリンクよりお楽しみください。

2026年3月1日：
視界が一定ターン消える「煙霧モード」、新難易度「達人」、「物語」表示の新機能を追加したWindowsインストール版をitch.ioにて無料リリースしました。このnote記事でのブラウザ版よりも数段進化した内容になっていますので、ぜひお楽しみください。

2026年2月7日：
英語版タイトルを「Loong Reversi」に変更し、それに伴って文中やプログロム内の表記を置換しました。
過去に露出済みの動画やプレスリリースでの差し替えは行っていませんが、今後はこちらの新表記を使用していきます。
「Loong」は中国語の「龍（ロン）」の英語読みです。
２つ並んだ「o」の文字は、リバーシの黒と白の石のイメージにもつながります。