← Back

AIで作ったHTMLゲームを投稿する

FOR CREATORS

ChatGPTやClaudeで、ゲームができた。
次は、遊んでもらう場所です。

HTMLを1つ送るだけ。サーバーの準備は要らず、審査のあと公開されます。投稿も遊ぶのも無料です。投稿にはログインが必要ですが、遊ぶだけなら要りません。遊んだ人が10人・50人・100人…になると、通知が届きます。

ゲームを投稿する AIに貼る指示文を見る
  1. 1

    AIにゲームを作らせるChatGPT・Claude・Claude Codeに、下の指示文をそのまま貼るだけ

  2. 2

    HTMLを1つ投稿するブラウザで動くHTMLを1つ。ファイルを選ぶか、コードを貼り付ける

  3. 3

    審査後に公開、フィードに並ぶ知らない人がスワイプで遊びます

動画で見る(4分33秒)

指示文のコピーから、AIでの生成・修正、投稿、フィード公開まで。実際の画面の実録でたどるチュートリアルです。

技術要件

  • 1ファイルで完結するHTML(ブラウザで動くミニゲーム)が基本です。CSSとJavaScriptは同じファイルの中に書いてください。画像や音の多いゲームは、ゲームのフォルダ(index.htmlと素材)をzipにして投稿することもできます。投稿画面が1つのHTMLにまとめ、ゲームはzipの中のファイルを通信せずに読みます。
  • 完成品は5MBまでです(zipは1つのHTMLにまとめた後、許可CDNのライブラリは埋め込んだ後の大きさ)。画像と音はまとめると約1.33倍になります。zipファイルそのものは25MBまで、古いアプリから送るHTMLは1MBまでです。
  • 外から読み込めるライブラリ(CDN)は次の5本だけです。それ以外のCDNは使えません(zipなら、ライブラリのファイルをzipに入れて使うこともできます)。原則は素のJavaScriptの利用を推奨します。
    • cdn.tailwindcss.com（Tailwind Play CDN）
    • cdnjs.cloudflare.com/ajax/libs/matter-js/（Matter.js: 2D物理）
    • cdnjs.cloudflare.com/ajax/libs/three.js/（three.js: 3D）
    • cdnjs.cloudflare.com/ajax/libs/howler/（Howler.js: 音声）
    • cdnjs.cloudflare.com/ajax/libs/phaser/（Phaser: 2Dゲームエンジン）
  • ゲームは <iframe sandbox="allow-scripts">(opaque origin)と厳格なCSPの下で動きます。外への通信(fetch など)/ eval / document.cookie は実行時に無効です(zipのゲームが、zipの中のファイルを読む fetch は動きます)。localStorageはメモリ上だけの実装に差し替わり、リロードのたびに中身が空になります。ハイスコアなどの保存には使えません。外部リンクや画面遷移(window.open / location)もブロックされます。遷移はゲーム内の画面切り替えで表現してください。
  • 固定pxや固定のアスペクト比にせず、実際の画面比に追従させてください。固定比で作ると、他の端末で黒帯や見切れが発生します。ゲームの画面の形は端末で変わりますが、スマホでもタブレットの縦持ちでも縦長です。縦長の 横4:縦5(例: 横800×縦1000)で全部が収まるように作り、縦がもっと長い画面(スマホ)では余った縦に広がるようにしてください。
  • 終わりがあるゲーム(ゲームオーバー・クリア・時間切れなど)では、終わったときに必ず parent.postMessage({ type: 'gameOver', score }, '*') を呼び出してください。スコアがあれば score に数値を入れ、スコアが無ければ score を付けずに送ります(スコアが無ければ、ランキングの無いリザルトになります)。この呼び出しはリザルト画面へ移る合図も兼ねています。PUNIPOは受け取った直後から画面を監視し、動きが止まった時点(最長1.5秒)でリザルトを重ねます。爆発や崩壊などの終了演出を見せたい場合は、演出を見せ切ってから呼び出してください。呼び出したあとは、背景のアニメーションや文字の点滅も含めて描画を止めてください。動き続けていると静止と判定できず、その1.5秒がそのまま待ち時間になります。呼び出さなくてよいのは、終わりの無いゲーム(ずっと遊べるシミュレーターなど)だけです。その場合リザルトには移らず、プレイヤーがスワイプで次へ移るまで動き続けます。再生回数はどちらでも数えられます。

投稿手順

  1. /create を開く
  2. HTMLかzipのファイルを選ぶか、コードを貼り付ける
  3. 確認の画面で、スマホでの見え方と警告を確かめる(✕ があるときは直してから)
  4. 名前と説明を入力する
  5. 送信する
  6. 審査後、フィードに公開される

AIに貼る指示文

上の技術要件をまとめた指示文(プロンプト)です。AIチャットにそのまま貼り付けてゲームを生成させてください。 

HTML5のミニゲームを1つ作ってください。以下の条件をすべて満たしてください。

- 1ファイルで完結するHTMLにすること。CSSとJavaScriptは同じファイルの中に書き、外部ファイルを読み込まないこと
- 完成したHTMLファイルは1MB以内に収めること
- 画面サイズを固定pxや固定のアスペクト比で決め打ちにせず、実際の画面の縦横比に追従させること(縦長・横長のどちらでも黒帯や見切れが出ないようにする)。縦長の 横4:縦5(例: 横800×縦1000)で全部が画面に収まるように作り、縦がもっと長い画面(スマホ)では余った縦に広がるようにすること
- スマホで指だけで遊べるようにすること(タップやスワイプで操作し、キーボードだけの操作にしないこと)
- fetch・XMLHttpRequest・evalなど、外部通信やeval系の機能は使わないこと(実行環境で無効化されます)
- localStorageは実行環境ではメモリ上だけの実装に差し替えられ、リロードのたびに中身が空になること。ハイスコアやセーブデータの保存には使わないこと
- 外部リンクや画面遷移(window.open・location での遷移)は使わないこと。フレームの外へ出る遷移はブロックされます。参考ページを見せたいときも含め、すべてゲーム内の画面切り替えで完結させること
- 終わりがあるゲーム(ゲームオーバー・クリア・時間切れなど)なら、ゲームが終わったら必ず parent.postMessage({ type: 'gameOver', score }, '*') を呼び出すこと。スコアがあれば score に数値のスコアを入れ、スコアが無ければ score を付けずに呼ぶこと。この呼び出しの直後にリザルト画面が重なるので、ゲームオーバーの演出がある場合は演出が終わってから呼ぶこと。呼んだあとは背景のアニメーションや文字の点滅も含めて描画を止めること(動き続けているとリザルトが出るのが遅れる)。終わりの無いゲーム(ずっと遊べるシミュレーターなど)なら呼び出さないこと。呼び出さなければリザルト画面には移らず、プレイヤーがスワイプで次へ移るまで動き続ける

完成したら https://punipo.com/create から投稿してください。

よくある失敗

  • 固定のアスペクト比で作ってしまい、縦長の端末で黒帯が出る。
  • 見本と盤など隣接する要素の座標をそれぞれ別々に計算してしまい、特定の画面比でだけ重なる(片方の実寸から、もう片方の位置を導出すること)。
  • fetchで外のサイトからデータを取りに行こうとする(CSPにより実行時に通信できない。データはHTMLの中に書くか、zipに入れる)。
  • HTMLを1枚だけ送ったのに、別のファイル(game.js・style.css・画像)を読んでいる。ファイルが分かれているなら、フォルダごとzipにして送る。
  • キーボードだけで操作するゲームにしてしまう(スマホにはキーボードが無い。タップやスワイプで遊べるようにする)。
  • 外部サイトを開くリンクや画面遷移を入れてしまう(window.open / location は遷移がブロックされる。ゲーム内の画面切り替えで表現する)。
  • ゲームオーバーやクリアで終わるのに、終わったときの送信(gameOver)を入れていないため、リザルトが表示されない。

次にすること

準備ができたら投稿ページからゲームを送信してください。 よくある疑問はよくある質問にまとめています。 他の投稿先と比べたい人向けに、7サイトの比較記事(Zenn)も書きました。