Sponsored
最近、ブラウザゲームを2本リリースしました。
1つ目がリバーシの Bansei Reversa。
盤星リバーサ
個性派ライバルと戦う、キャラクター対戦型リバーシPWA。
2つ目がブロック崩しの StellaBreak。
STELLA BREAK
どちらも、ちゃんと静的サイトとして作っています。
サーバー側でゲーム状態を持つわけではなく、ブラウザ上で完結する構成です。
HTML、CSS、JavaScript をビルドして配信すれば動く。
つまり、ホスティングさえあれば公開できます。
個人開発の小さなゲームとしては、このぐらいでちょうどいい。 バックエンド・DBがないので、昨今の攻撃をあまり意識しないで済むのは精神衛生上非常にいいです。
静的サイトとしてゲームを作る
Webゲームというと、ついバックエンドやDBまで考えたくなります。
ランキング機能を入れるならDBが欲しい。 ユーザーごとの進行状況を保存するなら認証も欲しい。 課金やアカウント連携まで考えると、さらに話が大きくなります。
ただ、今回作りたかったのはそこではありません。
まずはブラウザを開いたらすぐ遊べること。 インストール不要。 ログイン不要。 リンクを踏んだら、その場で遊べる。
そう考えると、静的サイトで十分です。
ゲームの状態はブラウザ内で持てばいいし、ちょっとした設定やスコアなら localStorage でも足ります。
リリースのたびにサーバーの状態を気にする必要もありません。
この「サーバーを持たないで済む」というのは、個人開発ではかなり大きいです。
運用コストが小さい。 セキュリティ面で見る範囲も小さい。 壊れ方もシンプル。
静的サイトのゲームは、作る側の精神衛生にいいです。
あと、Cloudflare Pages が CICD 面でも優秀なのでコストもかからない。これが大きい。
Codex にかなり任せた
今回おもしろかったのは、実装のかなりの部分を Codex に任せたことです。
もちろん、何も考えずに「ゲーム作って」と投げたら完成する、という話ではありません。
ただ、要件を小さく切って渡すと、普通に前へ進みます。
たとえば Bansei Reversa なら、盤面の状態管理、合法手の判定、石を裏返す処理、ゲーム終了判定、UIの調整。
StellaBreak なら、ボールの移動、衝突判定、ブロックの配置、スコア、ステージ進行、スマホでも破綻しない操作感。
こういう実装を、事前に WEB の ChatGPT で詰めて、あとは設計を渡して /goal 設定で一気に実装。
その後、実際に操作しながら細かい点を詰めていく。
時代は変わったなあと改めて思います。
昔なら、まず自分でざっくり実装して、詰まったところを検索して、サンプルコードを読み…
そこから自分のコードに合わせて直す、という流れでした。
今は違います。
Codex にリポジトリを読ませて、「この構成に合わせて足して」と言うと、既存の書き方に合わせて変更してくれます。
単にコードを生成するだけではなく、既存の構成に寄せる、ビルドを通す、必要ならテストやスクショ確認まで回す。
もはや「コード補完」ではなく、普通に開発作業を一緒に進める相手です。
image_gen を素材作成に使った
もうひとつ大きかったのが image_gen です。
ゲームを作ると、地味に素材が必要になります。
ロゴ 背景 アイキャッチ LP用のビジュアル スクショに映える画面
ここを全部自分で作るのは、なかなか重いです。
特に個人開発だと、実装はできても見た目で止まりがちです。
「最低限のUIでいいか」と妥協して、そのまま公開まで行ってしまう。 結果、触る前からちょっと寂しい印象になる。
今回はそこを Codex と image_gen にかなり寄せました。
ゲーム画面に合うビジュアルを生成し、必要に応じてサイズや配置を調整し、ページ内で使える形に落とし込む。
人間がやったのは、方向性の指定と、出てきたものの採用判断です。
ここは本当に変わったなと思います。
デザインツールを開いてゼロから作るほどではないけれど、ちゃんと見栄えは欲しい。そういう温度感の素材が、かなり現実的に作れるようになりました。
ま、見る人が見たら「生成AIだ」とわかるキャラですが。
技術検証目的を兼ねての実装なので、そこは目を瞑って欲しいものです。 炎上とか嫌なので。
StellaBreak は LP も作った
StellaBreak については、ゲーム本体だけでなく LP も作りました。
STELLA BREAK | 無料で遊べる縦持ちブロック崩し
STELLA BREAK は、魔法少女と星屑ブロックを砕く無料の縦持ちブラウザゲームです。インストールなしで今すぐプレイできます。
これも静的サイトです。
LPのメインビジュアルは image_gen を使って作りました。
ブロック崩しは、単純なゲーム画面だけだと見た目が地味になりやすいです。
ボール、パドル、ブロック。要素だけ並べると説明書っぽくなる。
そこで、LPではゲームの雰囲気が伝わるビジュアルを前面に出しました。
さらに、スクショも Codex に Playwright を使って撮らせました。
ここが地味に便利でした。
人間がブラウザを開いて、ウィンドウサイズを変えて、いい感じのタイミングでスクショを撮って、保存して、画像を差し替える。
Sponsored
この作業、1回なら大したことはありません。
でも、LPを調整するたびにやるとなると普通に面倒です。
Codex に「この画面をこのサイズで撮って、見栄えが悪ければ調整して」と任せると、実装と確認が同じ流れで進みます。
人間がやるのは、最後に見て「これでよし」と判断するところです。
AIコーディングは雑用の吸収力がすごい
AIコーディングの強さは、難しいアルゴリズムを書けることだけではないと思っています。
むしろ、細かい雑用を吸収してくれるところが強い。
CSSの微調整。 レスポンシブ対応。 ビルドエラーの修正。 画像の配置。 スクショ撮影。 LPの細かい文言調整。 リンク追加。
こういう作業は、ひとつひとつは難しくありません。
ただ、積み重なると重い（というか、面倒で途中で放置して未完成で終わる）。
しかも、個人開発では全部自分でやる必要があります。
Codex を使うと、この積み重なった作業をかなり押し流せます。
もちろん、出てきたものを鵜呑みにするのは危ないです。
ゲームのルールが正しいか。 スマホで操作できるか。 リンク先が合っているか。 静的サイトとして不要なサーバー依存が入っていないか。
最後に見るべきところはあります。
ただ、それでも体感としてはかなり違います。
「手を動かす量」が減るというより、「面倒で止まるポイント」が減る感じです。
小さく作って公開するハードルが下がった
今回の2本は、大作ゲームではありません。
でも、ちゃんと公開できる形にはなっています。
静的サイトとして配信できる。 ゲームとして遊べる。 LPも用意できる。 画像素材も作れる。 スクショも揃えられる。 トップページや Products の Games カテゴリにもリンクできる。
ここまでを、かなりAIに手伝ってもらいながら進められました。
これは単純にすごいです。
少し前なら、「ゲーム本体は作れるけど、LPと素材とスクショと導線まで整えるのはまた今度」となっていたと思います。
その「また今度」が、そのまま永遠に来ないことも多い。
AIコーディングを使うと、そこを突破しやすくなります。
おわりに
Bansei Reversa と StellaBreak は、どちらも小さなブラウザゲームです。
ただ、自分の中では「AIコーディングでどこまで手放しに近づけるか」を試す題材でもありました。
結果として、実装、画像生成、LP作成、スクショ撮影、サイトへの掲載まで、かなり一気通貫で進められました。
もちろん、完全放置で全部できるわけではありません。
でも、人間が方向性を決めて、Codex が手を動かす。
image_gen が素材を作る。
Playwright で見た目を確認する。
静的サイトとしてビルドして、そのまま公開する。
この流れは、個人開発とかなり相性がいいです。
「ちょっと作ってみたい」を、ちゃんと公開まで持っていく力がある。
AIコーディングの凄さは、そこにあると思います。
