AIツールを使ったことがなくても、ブラウザで動く小さなゲームなら、数分でつくれます。ここでは「クリックで的を当てるゲーム」を例に、つくって投稿するまでを説明します。
1. AIツールを選ぶ
チャットで話せるAI(ChatGPT・Claude など)があれば十分です。Claude Code・Cursor のような、ファイルを直接つくってくれるツールを使うと、ファイルの保存の手間が省けます。
2. 仕様書を渡して、頼んでみる
見せっこラボで動く形でつくってもらうため、最初にAI向けの仕様書(/llms.txt)の中身を渡します。そのうえで、つくりたいものを具体的に伝えます。
上の仕様に沿って、ブラウザで遊べるゲームを1つの index.html でつくってください。
- 画面のあちこちに丸い的が出てきて、クリック(タップ)すると得点が入る
- 30秒で終わり、最後に得点を表示する
- 「スタート」ボタンで始まる
- スマホでも遊べるようにするうまく伝えるコツは、「何が起きるか」を箇条書きにすることです。見た目の好み(「ポップな色で」「ドット絵風に」)を足すのもおすすめです。
3. 手元で動かしてみる
AIが書いたコードを、index.html という名前で保存して、ブラウザで開きます。
思った通りに動かないときは、どう動いてほしいかをそのまま伝えて、直してもらいます。
的が小さすぎてスマホで押しにくいので、倍くらいの大きさにしてください。
時間が残り5秒になったら、残り時間の文字を赤くしてください。エラーで動かないときは、ブラウザの開発者ツール(F12キー)の「コンソール」に出ている赤い文字を、そのままAIに貼り付けると、たいてい直してもらえます。
4. 投稿する
- 投稿するを開き、
index.htmlをアップロードします(ファイルが複数あるときは、まとめて選ぶか、ZIPにまとめます) - タイトル・説明文・ジャンル・使ったAIツール・対応デバイスを入力します
- サムネイルは「自動で撮影」を選ぶと、作品の画面を撮影してくれます。スタート画面が寂しいときは、撮るまでの待ち時間を延ばすか、画像を用意しましょう
- 下書き保存して、プレビューで動きを確かめます
- 「投稿する」を押すと自動チェックが行われ、通過すると仮公開になります
入力する項目の決まりは投稿ガイドライン、公開までの流れは審査についてにまとめています。
5. 公開したあとに
いいねやコメントが付くと、通知でお知らせします。もらった感想を元に改良したら、ファイルを差し替えて更新できます。
気に入った作品をつくっている人をフォローすると、トップページでその人の新しい作品を見られます。ほかの人の作品を遊んでみるのも、次の作品のヒントになります。