はじめに

「夜のさくら」は、夜桜をテーマにした、ブラウザで遊べる落ち物パズルです。ゲームの基礎部分とデモは、OpenAIのAIコーディングエージェント「Codex」（モデルは gpt-6-sol、推論レベルは「中」）で作り、そのあとのブラッシュアップを、「Claude Code」で行いました。

デモを開く

この記事では、完成したゲームの紹介だけでなく、AIにどう指示を出し、どう確認し、どう直していったか、その過程をご紹介します。

本文中、実際にAIへ伝えた内容は、読みやすいように丁寧な言い方に整えて、次のように引用形式で示します。

それ以外の地の文では、その指示に対してAI側がどう対応したか、どういう仕組みになっているかを解説します。

夜のさくらとは

まずはゲームの概要をご紹介します。

• ブラウザのみで動作し、ダウンロードは不要
• PC（キーボード）とスマートフォン（タッチ）の両方に対応
• 落ちてくる、3枚の花びらが組み合わさったピースを、縦長の盤に積む
• 同じ色の花びらが3枚以上つながると、花が咲いて消え、連鎖すると得点が増える
• 消えた分だけ、背景の桜の木に、光る花が増えていく
• 人が操作しなくても自動で遊ぶ「AUTO」にも対応

使っている技術：画像も音声も、すべてプログラムで作る

使っている技術は、次のとおりです。

• 言語・ビルド：TypeScript（型を指定して間違いを減らせるJavaScript）と、Vite（開発用のサーバーと、公開用のファイルを作るツール）
• 描画：Canvas 2D（ブラウザの中で絵を描く標準の機能）
• 音：Web Audio API（ブラウザの中で音を作って鳴らす標準の仕組み）
• テスト：Vitest（部品ごとの動作確認）、Playwright（ブラウザを自動で操作して確認する）

画像、音声、フォントなどの外部ファイルは、1つも使っていません。花も、桜の木も、月も、BGMも、効果音も、すべてプログラムで描き、鳴らしています。

作りの工夫として、ゲームのルールは、描画や入力、時間から切り離した、独立した関数にまとめてあります。盤の更新、ピースの回転、同じ色のつながりの判定、得点、ゲームオーバーの判定などを、画面を使わずに確認できるためです。乱数も、数値を指定すると同じ展開になるようにしてあり、URLに?seed=123を付けると、同じ盤面を再現することができます。

最初の依頼：詳しい指示文を、Codexに渡す

最初に、Codexには、仕様書のような詳しい指示文を渡しました。特に重視したのは、次の点です。

このため、ルールは、よく知られた落ち物パズルとは違う形になりました。

• 盤は縦長の形で、隣り合う花が6方向になるよう、列を半マスずらして並べる
• 落ちてくるのは、3つの色の花びらが三角形に組み合わさった、1つのピース。左右の移動と、60度ずつの回転ができる
• 同じ色の花びらが、隣り合う6方向のどこかで3枚以上つながると、まとめて消える
• 消えたあとは、上の花びらが下に落ち、条件を満たせば連鎖する

指示文には、テストの条件も、あらかじめ書いておきました。ルールを独立した関数にすること、PCとスマホの両方の画面で確認すること、確認したコマンドと結果を報告することです。

続けて、画面の操作について、次のように伝えています。

Codexは、ゲームの基礎部分と、遊べるデモまでを作りました。

見た目を磨く：Claude Codeでブラッシュアップ

デモができたところで、見た目を磨く作業に入りました。ここからは、Claude Codeに指示しています。

淡く、幻想的にする

最初に直したのは、花と木の見え方です。

木については、さらに、次のように伝えました。

AIは、原因を、枝1本ごとに暗い縁取りと明るいハイライトの線を重ねていたことだと説明しました。そこで、幹と枝を、縁取りのない1色のシルエットとして1回だけ描き、全体にまとめて陰影を付ける方式に変えています。少し粗い解像度で描いてから拡大して重ねるため、輪郭が水彩のようにやわらかくにじみます。根本の霧の濃さも、大きく弱めました。

咲いた花には、ふわふわとしたグロー（光のにじみ）を付けました。

ボタンと文言を、柔らかい雰囲気にする

ボタンの形と色を変え、文字は中央にそろえ、「庭へ入る」は「つづける」に直しました。ゲーム画面の左上の状態表示や、補足の文言など、なくても伝わる表示は消しています。真ん中のゲーム画面が、スマートフォンのように見える、という指摘には、枠の表現を作り込んで対応しました。

重なると見にくい

満開に近い画面で、次のような問題が見つかりました。

AIは、実際に花びらを高く積んだ画面を作って確認し、桜色の花びらが背景の光に溶けて、輪郭が見えなくなっていることを確かめました。そのうえで、複数の対処案を比べて示しています。

• 積んだ高さに合わせて、後ろの桜を自動で淡くする（おすすめ）
• 常に桜を淡くする
• 積んだ花びらに縁取りを付ける
• 満開の演出を、盤の外に出す

おすすめの方法で進めてもらいました。積み上がりが低いうちは、今までの幻想的な見た目のままで、高く積むほど、木と花の光を弱め、盤の奥に藍色のベールをかけます。ゲームが安全なときは桜がきれいに見え、危なくなるにつれて、手前の花びらに集中できます。

連鎖の表示

連鎖したときの表示は、枠をやめて、光をまとった「2連鎖」のような文字と、咲いた花の数、得点を出す形にしました。

ゲームの終わり方

AIの説明を受けて、次のように決めています。

動きの違和感を直す

AUTOの速さと、花の動き

AIは、AUTOの動きを速くし、左右に動かすときの花の動きを、なめらかにしました。あわせて、AUTOの初期状態を、次のように変えています。

花が空中に浮いて見える

AIは、原因を、盤の作りにあると説明しました。6方向の隣り合いに合わせて、奇数列を半マス下げているため、偶数列の一番下の花は、奇数列より半マス高いところで止まります。空の列を挟んで、偶数列だけが積まれると、花の下に隙間ができて、浮いて見えていました。

そこで、盤の底に、桜の花びらが降り積もった地面を足しました。偶数列の一番下の花が、この地面の上に乗って見えます。ルールや当たり判定は変えず、見た目だけを直しています。

スマートフォンで見つかった問題

PCでは気づかなかった問題が、スマートフォンで遊ぶと見つかりました。

一時停止と、長押し

AIは、画面が見えなくなったときに、自動で一時停止する処理が原因だと説明し、この処理をやめました。あわせて、スマートフォンでの長押し、ダブルタップ、文字選択を、無効にしています。

最初の画面で、ゲームが隠れる

得点を1行にまとめ、ゲーム画面全体が、最初の画面に収まるようにしました。ゲームをしているあいだは、盤の上だけ、タッチによる画面のスクロールを止める、という作りにして、盤の外を触れば、ページをスクロールできるようにしています。

アップロードスキルについて

このゲームは、さくらのレンタルサーバーの「アップロードスキル」を使って公開しています。AIエージェントに話しかけるだけで、ドメインの設定からファイルの転送までを進めることができます。

使い方は、次の記事で扱っています。

これからAIでゲームを作る人に向けたポイント

• 最初の指示文に、守る条件を書いておくことができます。外部素材を使わないこと、有名作に似せないこと、テストと報告の方法まで、はじめに決めておくと、あとの修正が少なくなります
• ルールを、画面から切り離した関数にしておくと、確認が楽になります。乱数の種を指定できるようにすると、同じ盤面を何度でも再現することができます
• 見た目の違和感は、実際に動かして初めて分かります。花が浮いて見える、背景の光に溶けて見えにくいといった問題は、画面を見て気づきました
• 対処に迷うときは、AIに複数の案を出してもらい、比べることができます。「重なると見にくい」への対処も、案を比べて決めました
• スマートフォンでは、PCと別の問題が出ます。自動の一時停止、長押し、画面のスクロールなど、実機で触って初めて分かることがあります

公開デモ

「夜のさくら」のデモは、次のリンクから開くことができます。

デモを開く

ほかのゲームデモは、次の記事でまとめてご紹介しています。

まとめ

「夜のさくら」は、Codexで基礎部分とデモを作り、Claude Codeで見た目と細かい動きを磨いた、ブラウザの落ち物パズルです。画像や音声のファイルを使わず、花も、桜の木も、BGMも、すべてプログラムで作りました。