AIゲームの作り方 約22分で読めます

Geminiでゲーム作成する手順【2026年】無料版のCanvasでスネークゲームを作ってみた

Geminiの無料版でも、ブラウザで遊べるゲームは作れます。入力欄の「+」からCanvasを選んで頼むと、返事の中にゲームが表示され、その場で遊べます。今回は、プログラミングの知識がない状態から、スネークゲームを5回の依頼で完成させました。コードは1行も書いていません。できたゲームは公開リンクにして、スマホやGeminiにログインしていない人にも遊んでもらえました。

この記事では、Canvasの選び方から、5回分の依頼と結果、前の版に戻す方法、公開リンクと保存のしかたまでを、実際の画面で順に紹介します。使った6つのプロンプトは、そのままコピーして使える形で載せます。

内容は2026年10月時点の記録です。Geminiの画面、使えるモデル、利用上限は変わることがあります。無料版の仕様は、記事内で紹介する公式ヘルプで最新の情報を確認してください。

この記事の目次
  1. 01無料版のGeminiで、どこまでゲームが作れるか
    1. 今回作ったもの
    2. 5回の依頼の全体像
    3. 無料版で確認しておくこと
  2. 02作る前の準備:入力欄の「+」からCanvasを選ぶ
    1. Canvasの選び方
    2. モードは「自動モード」のままでよい
  3. 031回目:スネークゲームを頼む。1回で遊べるものができた
    1. 最初のプロンプト
    2. 返事の中にCanvasの枠が出る
    3. 大きく表示する、コードを見る
    4. 遊んでみた結果
  4. 042回目:見た目を派手にする
    1. 返事は同じCanvasの中で書きかわる
    2. 遊んでみた結果
  5. 053回目:金色のリンゴ、スピード、石を足す
    1. 「ときどき」と頼むと、Geminiが数字を決める
    2. 遊んでみた結果
    3. 直しすぎたら、矢印で前の版に戻せる
  6. 064回目:効果音と一時停止を足したら、同じ画面が2つ出た
    1. 返事と追加された機能
    2. 音と一時停止は問題なく動いた
    3. 下までスクロールすると、同じ画面がもう1つあった
  7. 075回目:どこがおかしいかを具体的に書いて直す
    1. 2つとも直った
    2. 残った小さな崩れ
  8. 08公開リンクで人に遊んでもらう、ファイルで保存する
    1. 共有ボタンで公開リンクを作る
    2. スマホで開くと、画面に合わせて表示された
    3. ログインしていない人が開くと、最初に注意の画面が出る
    4. ファイルとして保存したいときは「コードをダウンロードする」
    5. 完成したゲームを遊んでみる
  9. 091回でまとめて頼む完成版プロンプト
    1. 1回で全部入った
    2. 5回版との違い:金色のリンゴが赤の代わりに出た
  10. 10ChatGPTで作ったときとの違いと、うまく頼むコツ
    1. ChatGPTで作ったときとの違い
    2. Geminiで作るときのコツ
  11. 11よくある質問
  12. 12まとめ

無料版のGeminiで、どこまでゲームが作れるか

先に結論を書くと、無料版のまま、スネークゲームを1本作り切れました。画面の右上には「アップグレード」のボタンが出ています。有料プランに入っていない状態です。

Geminiの最初の画面。中央に「何から始めますか?」と入力欄があり、右上に「アップグレード」のボタン、左下にアカウント名「AIゲームラボスタッフ」が出ている
Geminiの最初の画面。右上に「アップグレード」のボタンがある

今回作ったもの

作ったのは、スネークゲームです。ヘビを操作してエサを食べ、体を長くしていくゲームで、壁や自分の体にぶつかると終わります。

完成したゲームに入っている機能は、次のとおりです。

  • パソコンは矢印キー、スマホは画面のスワイプでヘビの向きを変えられる
  • スコア、スピード、ハイスコアが画面の上に出る。ハイスコアはブラウザに保存される
  • ヘビには目とつやがあり、エサは光るリンゴの形。食べると「+10」の文字と光の粒が出る
  • ときどき金色のリンゴが出る。5秒で消え、食べると50点
  • スコアが増えると少しずつ速くなり、100点をこえると石の障害物が3つ出る
  • 効果音と、音のオンとオフのボタン、一時停止のボタンがある

5回の依頼の全体像

作業の流れを先に表にまとめます。最初の依頼で遊べるゲームができ、そこに見た目と遊びの要素を足していきました。

回 頼んだこと 結果 遊んだ感想
1 スネークゲームを作る 1回で遊べるゲームができた 難しさはちょうどよい。見た目は地味で、盤面が小さい
2 見た目を派手にする 盤面が1.5倍になり、つやのあるヘビと光るリンゴ、食べたときの演出が入った 最初より良くなった。遊びやすさは変わらない
3 金色のリンゴ、スピード、石の障害物を足す 3つとも頼んだとおりに入った 速さもちょうどよく、石があってもまだ難しすぎない
4 効果音、一時停止、ハイスコア更新の表示を足す 3つとも動いたが、同じ画面が2つ出て、タイトルが2行に折れた 音と一時停止は問題ない。不具合が2つ出た
5 2つの不具合を直す 2つとも直った パソコンではタイトルとボタンがくっつくが、遊ぶのには困らない

作業時間は、画面を撮影しながらで、およそ1時間40分でした。遊ぶ時間と待ち時間も含まれています。このあと、5回分をまとめた完成版プロンプトも新しいチャットで1回試しました。

無料版で確認しておくこと

Geminiの利用上限とCanvasの扱いは、Googleの公式ヘルプに説明があります。2026年10月時点で、次のように書かれていました。

  • Canvasは、Googleの有料プランに入っていなくても使える機能の一覧に入っている
  • Canvasを使うには、Geminiにログインする必要がある
  • 利用上限は、プロンプトの複雑さや使うモデルと機能、チャットの長さなどから決まる。週の上限に達するまで、5時間ごとにリセットされる
  • 上限に近づくと、Geminiに通知が出る
  • 上限は変更される場合があり、有料プランに入っていない人のほうが先に制限されることがある

今回の5回の依頼と完成版プロンプト1回では、上限のメッセージは一度も出ませんでした。ただし、混み具合や使い方によって変わる可能性があります。この記事の結果が、いつでも同じになるとは限りません。

補足

上限については「Gemini アプリの使用量上限とアップグレード」、Canvasの使い方については「Canvas でドキュメントやアプリなどを作成する」で確認できます。上限の回数などの細かい数字は書いていません。数字は変わることがあるためです。

プロンプトの基本的な型を知りたい方は、先にChatGPT・Geminiでゲームを作る手順を読むと流れがつかめます。ChatGPTの無料版で同じように1本作った記録は、ChatGPTでゲーム作成する手順にまとめています。この記事で中心に扱うのは、Geminiならではの点です。

作る前の準備:入力欄の「+」からCanvasを選ぶ

Geminiでゲームを作るときは、頼む前にCanvasを選んでおきます。Canvasは、Geminiが作ったものを返事の中の枠に表示する機能です。ゲームなら、その枠の中でそのまま遊べます。

Canvasの選び方

入力欄の左にある「+」を押すと、メニューが開きます。その中の「Canvas」を選びます。マウスを乗せると出る説明は、「コードの記述、文章の作成、スライドの作成」です。

Geminiの入力欄の「+」を押して開いたメニュー。「画像を作成」「音楽を作成」の下に「Canvas」があり、横に「コードの記述、文章の作成、スライドの作成」という説明が出ている
「+」のメニューから「Canvas」を選ぶ

選ぶと、入力欄の下に「Canvas」と表示されます。この状態でプロンプトを送ります。

モードは「自動モード」のままでよい

入力欄の右にある「Gemini 自動モード」を押すと、使うモデルを選ぶメニューが出ます。無料版では、選べないモデルに鍵マークがついていました。今回は、最初から最後まで「自動モード」のままで作っています。

「Gemini 自動モード」を押して開いたメニュー。「自動モード」にチェックがつき、その下の2つのモデルに鍵マークがついている
モードのメニュー。無料版で選べないモデルには鍵マークがつく

ポイント

ゲームを作るときは、送る前に入力欄の下に「Canvas」と出ているかを確かめてください。モデルを選び直す必要はありません。

1回目:スネークゲームを頼む。1回で遊べるものができた

最初のプロンプト

最初の依頼は、作りたいゲームの名前と、守ってほしい条件を5つ書いただけです。操作のしかたとゲームオーバーの条件を書き、プログラミングは初心者だと伝えています。

ブラウザで遊べる「スネークゲーム」を作ってください。

・HTMLファイル1つにまとめてください
・パソコンでは矢印キー、スマホでは画面をスワイプして、ヘビの向きを変えられるようにしてください
・エサを食べるとヘビが長くなり、スコアが増えるようにしてください
・壁か自分の体にぶつかったらゲームオーバーにしてください
・私はプログラミング初心者です。作ったゲームの保存方法と遊び方も教えてください
スネークゲームを頼むプロンプトをGeminiの入力欄に貼ったところ。入力欄の下に「Canvas」と表示されている
最初のプロンプトを貼ったところ(送信前)

返事の中にCanvasの枠が出る

送ると、短い説明のあとに、Canvasの枠が出ました。枠の中には、ゲームの開始画面が表示されています。

Geminiの返事。英語の1文のあとにCanvasの枠があり、上に「コード」「プレビュー」「エクスポート」と共有、広げるボタンが並び、中にスネークゲームの開始画面と「ゲームスタート」のボタンが出ている
返事の中にCanvasの枠が出て、その場で遊べる

枠の上には、「コード」「プレビュー」の切り替え、「エクスポート」、共有のボタン、広げるボタンが並んでいます。それぞれの使い方は、このあと順に紹介します。

返事の中には、「I will now generate…」で始まる英語の1文がまざっていました。これから何を作るかを説明している一文です。このあとの返事でも毎回のように出ましたが、ゲームの出来には関係ありませんでした。

枠の下には、保存方法と遊び方の説明が続きます。保存方法は、コードをコピーしてメモ帳に貼り、「snake_game.html」という名前で保存する手順でした。

返事の後半。「ゲームの保存方法」としてメモ帳にコードを貼ってsnake_game.htmlで保存する手順と、「遊び方」として操作方法とルールが書かれている
返事の後半。保存方法と遊び方の説明

補足

Canvasには、コードをファイルとして保存するボタンもあります。メモ帳に貼るより手軽なので、保存したいときはそちらを使うのがおすすめです。手順は「公開リンクで人に遊んでもらう、ファイルで保存する」で紹介します。

大きく表示する、コードを見る

枠の右上にある広げるボタンを押すと、ゲームが画面いっぱいに大きく表示されます。遊ぶときは、こちらのほうが見やすくなります。

広げるボタンでCanvasを大きく表示した画面。中央にスネークゲームの開始画面と「ゲームスタート」のボタン、上に「現在のスコア」と「ハイスコア」が出ている
広げるボタンで大きく表示した開始画面

「コード」を押すと、Geminiが書いたコードが表示されます。「プレビュー」を押すと、ゲームの画面に戻ります。今回は一度もコードを書きかえていません。見るだけでも、ファイル1つの中に画面とゲームの動きがまとめて書かれていることが分かります。

Canvasで「コード」に切り替えた画面。HTMLのコードが表示されている
「コード」に切り替えると、Geminiが書いたコードが見られる

遊んでみた結果

1回目から、ちゃんと遊べるゲームができました。返事の説明によると、パソコンでは矢印キーのほかにW、A、S、Dのキーでも動かせて、スマホではスワイプのほか画面の矢印ボタンでも操作できます。ハイスコアはブラウザに保存されます。

難しさもちょうどよく、3回目のプレイで340点くらいまで行けました。ただし、見た目は地味でした。ヘビが動く盤面が小さく、まわりに大きな空きがあります。

1回目のゲームを遊んでいるところ。スコア50。緑の四角が並んだヘビと赤い丸のエサが、画面の中央の小さな盤面に表示されている
1回目を遊んでいるところ。盤面が小さく、まわりに空きが多い

ポイント

ChatGPTで作ったときは、1回目のゲームが難しすぎて、クリアできませんでした。今回は1回目から遊べたので、難しさは直さず、見た目と遊びの要素を育てる流れになりました。

2回目:見た目を派手にする

2回目は、見た目だけを直す依頼です。直す場所を5つに分け、盤面の大きさは「1.5倍くらい」と数字で書きました。最後に、速さや操作は変えないように頼んでいます。

遊んでみたら、ちゃんと動いて楽しかったです。次は見た目を、もっと楽しく派手にしたいです。次のように直してください。

・ヘビが動く四角いエリアが小さいので、今の1.5倍くらいの大きさにしてください
・ヘビ:頭に目をつけてください。体は頭から尾に向かって少しずつ色が変わるようにして、つやのある見た目にしてください
・エサ:今の赤い丸を、葉っぱのついたリンゴの形にして、ゆっくり光って目立つようにしてください
・エサを食べたとき、小さな光の粒が飛び散る演出と、「+10」の文字が浮かび上がる演出を入れてください
・ゲームオーバーのとき、画面が少しゆれる演出を入れてください
・ヘビの速さや操作など、ほかの部分は変えないでください

直したゲームを、さっきと同じように遊べる形で出してください。

数字で頼むこと、「ほかの部分は変えないでください」をつけること、1回の依頼を1つのテーマに絞ることは、ChatGPTで作ったときと同じコツです。今回もこの3つを毎回守りました。

返事は同じCanvasの中で書きかわる

返事には、変更点が5つの番号つきで並びました。盤面の拡大、色が変わるつやのあるヘビと目、光るリンゴ、食べたときの演出、ゲームオーバーのゆれです。

2回目の返事。「エリアの拡大」「ヘビのグラデーション&ツヤ」「アニメーション付きリンゴ」「エサを食べた時のエフェクト」「ゲームオーバー時の画面シェイク」の5つが番号つきで並び、下にCanvasの枠が出ている
2回目の返事。変更点が5つ並ぶ

新しいゲームは、別の枠ではなく、同じCanvasの中で書きかわりました。返事の最後には「新しいコードをそのまま上書き保存」すれば遊べる、という一文がありました。これは、ファイルに保存して遊んでいる人に向けた説明です。Canvasの変更は自動で保存されると公式ヘルプにあるので、Canvasで遊ぶだけなら保存し直す必要はありません。

遊んでみた結果

盤面が広くなり、ヘビには目とつやがつきました。リンゴはゆっくり光っています。エサを食べると、「+10」の文字が浮かび、光の粒が飛び散ります。

ヘビがエサを食べた瞬間を拡大した画面。目のついたヘビの頭のまわりに黄色と緑の光の粒が散り、「+10」の文字が浮かんでいる。右に光る赤いリンゴがある
エサを食べた瞬間。「+10」の文字と光の粒が出る

最初より見た目は良くなりました。凝ったゲームではないので、見た目はこれで十分です。遊びやすさは1回目と変わりませんでした。

3回目:金色のリンゴ、スピード、石を足す

3回目は、ゲームを面白くするための依頼です。特別なエサ、スピード、障害物の3つを足しました。スピードと障害物には数字を入れましたが、金色のリンゴの出る頻度は「ときどき」とだけ書いています。

見た目がとても良くなりました。次は、ゲームをもっと面白くするために、次の3つを追加してください。

・特別なエサ:ときどき金色のリンゴが出てくるようにしてください。金色のリンゴは5秒たつと消えて、食べるとスコアが50点増えるようにしてください
・スピード:スコアが50点増えるごとに、ヘビが少しずつ速くなるようにしてください。いちばん速くても、今の1.5倍までにしてください
・障害物:スコアが100点をこえたら、盤面に石の障害物が3つ出てくるようにしてください。石にぶつかったらゲームオーバーにしてください
・見た目や操作など、ほかの部分は変えないでください

直したゲームを、さっきと同じように遊べる形で出してください。

「ときどき」と頼むと、Geminiが数字を決める

返事には、追加した3つの機能の説明が並びました。金色のリンゴは、エサを食べたときに約30%の確率で出る、と書かれています。5秒のタイマーを示す黄色いバーも付きました。

3回目の返事。「金色のスペシャルリンゴ」は通常のエサを食べたときに約30%の確率で出現し、5秒間だけ表示されると説明されている。その下に「スピードアップ」と「石の障害物」の説明が続く
3回目の返事。金色のリンゴは「約30%の確率」で出る

「約30%」という数字は、プロンプトには書いていません。「ときどき」のようにあいまいに頼むと、Geminiが自分で数字を決めます。出る頻度にこだわりがあるときは、「3回に1回くらい」のように数字で書いておくと確実です。

遊んでみた結果

3つとも、頼んだとおりに入りました。画面の上には、新しく「スピード」の表示が加わり、1.0xから少しずつ上がっていきます。100点をこえると、盤面に石が3つ出ました。

3回目の版を遊んでいるところ。スコア180、スピード1.3x。盤面に金色のリンゴと赤いリンゴ、灰色の石の障害物3つが同時に出ている
金色と赤のリンゴ、石の障害物が同時に出ている場面

速さもちょうどよく、石があってもまだ難しすぎません。金色のリンゴは、思っていたより多く出ました。

直しすぎたら、矢印で前の版に戻せる

Canvasの枠の左上には、左向きと右向きの矢印があります。マウスを乗せると、「前のバージョン」「次のバージョン」と表示されます。

Canvasの枠の上部を2つ並べた画像。上は左向きの矢印にマウスを乗せて「前のバージョン」、下は右向きの矢印にマウスを乗せて「次のバージョン」と表示されている
「前のバージョン」と「次のバージョン」の矢印

試しに「前のバージョン」を押すと、2回目の版に戻りました。スピードの表示がない、見た目を直しただけの版です。そのあと「次のバージョン」を押して、3回目の版に進めました。

直してもらった結果が気に入らないときは、この矢印で前の版に戻せます。頼み直す前に、前の版と見比べることもできます。

4回目:効果音と一時停止を足したら、同じ画面が2つ出た

4回目は仕上げとして、効果音、一時停止、ハイスコア更新の表示の3つを足しました。効果音は、音声ファイルを使わないように書いています。

ゲームがとても面白くなりました。最後に、次の3つを追加してください。

・効果音:エサを食べたとき、金色のリンゴを食べたとき、ゲームオーバーのときに音が鳴るようにしてください。音声ファイルは使わず、画面の右上に音のオンとオフを切り替えるボタンを付けてください
・一時停止:スペースキーか、画面の一時停止ボタンで、ゲームを止めたり再開したりできるようにしてください
・ハイスコア更新:ハイスコアを更新したとき、ゲームオーバー画面に「ハイスコア更新!」と大きく表示してください
・ほかの部分は変えないでください

直したゲームを、さっきと同じように遊べる形で出してください。

返事と追加された機能

返事によると、音はブラウザの機能で作る仕組みで、エサ、金色のリンゴ、ゲームオーバーの3種類です。画面の右上には、サウンドのオンとオフのボタンと、一時停止のボタンが付きました。

4回目の返事。「サウンド効果」「一時停止機能」「ハイスコア更新表示」の3つの説明が並んでいる
4回目の返事。3つの機能の説明が並ぶ

ところが、開始画面を見ると、タイトルが「スネークゲー」と「ム」の2行に折れていました。ボタンが2つ増えて、タイトルの入る幅が足りなくなったためです。一時停止のボタンの文字も、「一時停」と「止」に折れています。

4回目の版の開始画面。上のタイトルが「スネークゲー」と「ム」の2行に分かれ、右に「一時停止」と「サウンドON」のボタンが並んでいる
タイトルが「スネークゲー/ム」と2行に折れている

音と一時停止は問題なく動いた

遊んでみると、エサを食べたときやゲームオーバーのときに音が鳴りました。スペースキーか一時停止のボタンを押すと、「PAUSED」と出てゲームが止まります。もう一度押すと再開できます。

一時停止した画面。盤面の中央に黄色い「PAUSED」の文字と「ゲームを再開」のボタンが出ている。下に、スピードとハイスコアの表示がもう1つ見えている
一時停止した画面

ハイスコアを更新してゲームオーバーになると、「ハイスコア更新!」と大きく表示されました。頼んだ3つの機能は、どれも動いています。

ゲームオーバーの画面。「GAME OVER」の上に「ハイスコア更新!」と表示され、スコアとハイスコアはどちらも150。盤面の下に、スピード1.0xとハイスコア0の表示がもう1つ出ている
「ハイスコア更新!」のゲームオーバー画面。下にもう1つ表示が見える

下までスクロールすると、同じ画面がもう1つあった

気になったのは、ゲームの下に見えていた表示です。下までスクロールすると、「スピード」「ハイスコア」と、スネークゲームの開始画面がもう1つ出ていました。上のゲームを遊んでも、下の表示は0のまま変わりません。

Canvasを下までスクロールした画面。スネークゲームの開始画面の下に、スピード1.0xとハイスコア0の表示、もう1つのスネークゲームの開始画面が続いている
下までスクロールすると、同じ画面がもう1つ出ている

補足

機能を足すと、頼んでいない別の所がおかしくなることがあります。今回も「ほかの部分は変えないでください」と書いていましたが、画面の配置が崩れました。足したあとは、ゲームの中だけでなく、画面の下のほうまで確かめてください。

5回目:どこがおかしいかを具体的に書いて直す

5回目は、4回目で出た2つの不具合を直す依頼です。まず、うまく動いた所を伝えました。そのうえで、おかしな所を「どこが」「どうなっているか」「どうしてほしいか」に分けて書いています。

音と一時停止、どちらもちゃんと動きました。ただ、気になる所が2つあるので直してください。

・ゲーム画面の下に、「スピード」「ハイスコア」「スネークゲーム」の表示がもう一度出ています。同じものが2つ出ないように、下にあるほうを消してください
・タイトルの「スネークゲーム」が2行に折り返して、「ム」だけ下の行に出ています。1行で表示されるようにしてください
・ほかの部分は変えないでください

直したゲームを、さっきと同じように遊べる形で出してください。

2つとも直った

返事では、2つの不具合について、何を直したかが説明されていました。下の重なった表示を消し、タイトルが折り返さない設定を加えた、という内容です。

5回目の返事。「重複表示の削除」と「タイトルの1行表示」の2つの修正内容が説明され、下のCanvasの枠ではタイトルが1行で表示されている
5回目の返事。2つの修正内容が説明されている

実際に見ると、下に出ていた2つ目の画面は消え、タイトルも1行になりました。

5回目の版の開始画面。タイトル「スネークゲーム」は1行で表示されているが、右の「一時停止」のボタンとくっつき、ボタンの文字は「一時停」と「止」に折れている
直った画面。タイトルは1行になった

残った小さな崩れ

よく見ると、パソコンの画面ではタイトルと一時停止のボタンがくっついています。ボタンの文字も「一時停」と「止」に折れたままです。遊ぶのには困らないので、今回はこのままにしました。スマホで開いたときは、タイトルも1行できれいに表示されています。

ポイント

おかしな所を直してもらうときは、「どこが」「どうおかしいか」を具体的に書きます。今回は「ゲーム画面の下に」「『ム』だけ下の行に」と場所と症状を書き、どちらの不具合も1回で直りました。直してほしい形を書き添えると、さらに伝わりやすくなります。

公開リンクで人に遊んでもらう、ファイルで保存する

完成したゲームは、Canvasの共有ボタンから公開リンクにできます。公開リンクは、URLを知っている人なら誰でも開けるリンクです。自分のサイトを持っていなくても、URLを送るだけで遊んでもらえます。

共有ボタンで公開リンクを作る

Canvasの枠の右上にある共有のボタンを押し、「共有」を選びます。今回は、確認の画面などは出ず、その場で「Canvas 用の共有可能な公開リンク」の画面が開きました。「リンクをコピー」を押すと、URLがコピーされます。

「Canvas 用の共有可能な公開リンク」の画面。リンクの欄はぼかしてあり、右に「リンクをコピーしました」のボタン、下にLinkedIn、Facebook、X、Redditのボタンが並んでいる
公開リンクの画面。リンクのURLはぼかしている

画面には、公開リンクは再共有できること、削除はいつでもできることなどの注意書きが出ていました。LinkedIn、Facebook、X、Redditに投稿するボタンもあります。

スマホで開くと、画面に合わせて表示された

コピーした公開リンクをスマホのブラウザで開くと、スマホの画面に合わせた形でゲームが表示されました。スワイプでヘビの向きを変えて遊べます。スマホの画面では、タイトルも1行で表示されていました。上に出ていたのはスコアとハイスコアだけで、スピードの表示は出ていません。

スマホのブラウザで公開リンクを開き、スネークゲームを遊んでいる画面。スコア80、ハイスコア20。右上に「ログイン」のボタン、下に「Gemini Canvas を試す」のボタンがある
スマホで公開リンクを開いて遊んでいるところ

公式ヘルプによると、共有されたCanvasのリンクは、ブラウザのgemini.google.comで開く仕組みです。Geminiのスマホアプリでは開けないと書かれています。

ログインしていない人が開くと、最初に注意の画面が出る

Geminiにログインしていない人の立場で確かめるため、パソコンのブラウザのシークレットウィンドウで公開リンクを開きました。すると、最初に「このアプリは別のユーザーによって作成されました」という注意の画面が出ました。

ログインしていない状態で公開リンクを開いたときの画面。「このアプリは別のユーザーによって作成されました」という注意と、「あなたの個人情報を守るために」という説明、「続ける」のボタンが出ている。左下に「一部の機能を表示するには、Google アカウントにログインする必要があります」と表示されている
ログインしていない人が開くと、最初に注意の画面が出る

注意の画面には、パスワードやお支払いの詳細などを共有しないように、という説明があります。この公開リンクを知っている人は誰でも、共有されたデータにアクセスして編集できる、とも書かれています。画面の左下には、一部の機能を表示するにはGoogleアカウントへのログインが必要、という表示も出ました。

「続ける」を押すと、ゲームが表示され、そのまま遊べました。

「続ける」を押したあと、ログインしていない状態でスネークゲームを遊んでいる画面。スコア10、スピード1.0x、ハイスコア10
「続ける」を押すと、ログインしていなくても遊べた

注意

公開リンクは、URLを知っている人なら誰でも開けます。名前やパスワードなどを入力させるゲームは作らないでください。公式ヘルプでは、作成した公開リンクは、gemini.google.comの[設定とヘルプ]から[公開リンク]を開いて削除できると説明されています。

ファイルとして保存したいときは「コードをダウンロードする」

ゲームをファイルとして手元に残したいときは、Canvasの「エクスポート」を押します。メニューの「コードをダウンロードする」を選ぶと、ゲームのファイルを保存できます。メモ帳にコードを貼る必要はありません。

Canvasの「エクスポート」を押して開いたメニュー。「Googleサイト」と「コードをダウンロードする」があり、「コードをダウンロードする」にマウスを乗せている
「エクスポート」から「コードをダウンロードする」を選ぶ

補足

今回のゲームは、画面の見た目を整える部品をインターネットから読み込む作りになっていました。そのため、保存したファイルをインターネットにつながっていない状態で開くと、画面の配置が崩れます。部品を読み込まない形で作ってほしいときは、ChatGPT・Geminiでゲームを作る手順で紹介しているように、プロンプトに「外部のライブラリは使わない」と書き足してください。

保存したファイルをインターネットで公開したいときは、ChatGPT・Geminiでゲームを作る手順に公開方法をまとめています。公開先の選び方や広告収入については、ゲームの公開先と広告収入をご覧ください。

完成したゲームを遊んでみる

5回の依頼で完成したゲームは、AIゲームラボの無料ゲームのページで遊べます。

パソコンでは、矢印キーでヘビの向きを変え、スペースキーで一時停止します。スマホでの操作は、画面のスワイプです。「ゲームスタート」を押すと始まります。

1回でまとめて頼む完成版プロンプト

5回分の要素を1つにまとめたプロンプトを用意しました。新しいチャットでCanvasを選び、1回だけ送って試したものを、そのまま載せています。4回目で崩れた画面の配置については、「重ならないように並べ、タイトルは1行で」と先に書いておきました。

ブラウザで遊べる「スネークゲーム」を作ってください。

・HTMLファイル1つにまとめてください
・操作:パソコンでは矢印キー、スマホでは画面をスワイプして、ヘビの向きを変えられるようにしてください
・基本のルール:エサを食べるとヘビが長くなり、スコアが10点増えるようにしてください。壁か自分の体にぶつかったらゲームオーバーにしてください
・画面:ヘビが動く四角いエリアは大きめにしてください。画面の上に、スコア、スピード、ハイスコアを表示してください。タイトル、一時停止ボタン、音のオンとオフのボタンは重ならないように並べ、タイトルは1行で表示してください
・見た目:ヘビの頭に目をつけ、体は頭から尾に向かって少しずつ色が変わる、つやのある見た目にしてください。エサは葉っぱのついたリンゴの形にして、ゆっくり光って目立つようにしてください
・演出:エサを食べたとき、小さな光の粒が飛び散る演出と「+10」の文字が浮かび上がる演出を入れてください。ゲームオーバーのときは、画面が少しゆれるようにしてください
・特別なエサ:エサを食べたとき、3回に1回くらいの割合で金色のリンゴが出るようにしてください。金色のリンゴは5秒たつと消えて、食べるとスコアが50点増えるようにしてください
・スピード:スコアが50点増えるごとに少しずつ速くなるようにしてください。いちばん速くても、最初の1.5倍までにしてください
・障害物:スコアが100点をこえたら、盤面に石の障害物を3つ出してください。石にぶつかったらゲームオーバーにしてください
・効果音:エサを食べたとき、金色のリンゴを食べたとき、ゲームオーバーのときに音が鳴るようにしてください。音声ファイルは使わないでください
・一時停止:スペースキーか一時停止ボタンで、ゲームを止めたり再開したりできるようにしてください
・ハイスコア:ブラウザに保存し、更新したときはゲームオーバー画面に「ハイスコア更新!」と大きく表示してください
・私はプログラミング初心者です。作ったゲームの保存方法と遊び方も教えてください

1回で全部入った

1回の依頼で、頼んだ機能がすべて入ったゲームができました。5回かけて作った版とほぼ同じ内容です。一時停止と音のボタンは、タイトルの下の段に分かれて並び、タイトルとくっつく問題も出ませんでした。遊んでみても、エラーやおかしな所は見当たりませんでした。

完成版プロンプトへの返事。Canvasの枠にスネークゲームの開始画面が出ており、タイトルの下にスコア、スピード、ハイスコアの欄、その下に「一時停止」と「音:ON」のボタンが横に並んでいる
完成版プロンプトの返事。ボタンはタイトルの下の段に並んだ
完成版プロンプトで作ったゲームのゲームオーバー画面。「GAME OVER」の下に黄色い帯で「ハイスコア更新!」と表示され、最終スコアは220点
「ハイスコア更新!」も1回で入っていた

5回版との違い:金色のリンゴが赤の代わりに出た

1か所だけ、5回かけて作った版と動きが違いました。5回版では、赤いリンゴと金色のリンゴが同時に盤面に出ます。完成版では、金色のリンゴが出ているあいだ、赤いリンゴは出ませんでした。金色のリンゴが赤の代わりに出る動きです。

完成版プロンプトで作ったゲームを遊んでいるところ。スコア90、スピード1.1x。盤面には金色のリンゴだけが出ていて、赤いリンゴは出ていない
完成版では、金色のリンゴが出るとき赤いリンゴは出ない

補足

完成版プロンプトでは、「エサを食べたとき、3回に1回くらいの割合で金色のリンゴが出る」と書きました。この書き方から、Geminiは「次のエサが金色になる」と読んだと考えられます。赤いリンゴと一緒に出したいときは、「赤いリンゴとは別に、金色のリンゴが出るようにしてください」と書くと伝わりやすくなります。同じ内容を頼んでも、書き方しだいで動きが変わるということです。

ほかのプロンプトの例を探したいときは、プロンプト集が参考になります。

ChatGPTで作ったときとの違いと、うまく頼むコツ

ChatGPTで作ったときとの違い

前回は、ChatGPTの無料版でブロック崩しを作りました。2つの記録を比べると、次のような違いがありました。

比べる点 ChatGPT(ブロック崩し) Gemini(スネークゲーム)
無料版の見分け方 左下に「無料」と出る 右上に「アップグレード」のボタンが出る
ゲームが出る場所 返事のカードを押すと、右側のパネルに開く 返事の中のCanvasの枠に出る。広げるボタンで大きく表示できる
1回目の出来 動くが、難しすぎてクリアできない 難しさがちょうどよく、そのまま遊べた
前の版に戻す方法 この記録では使っていない Canvasの矢印で前の版、次の版に切り替えられる
人に遊んでもらう方法 この記録では、ファイルを保存して公開先に置く方法を紹介 共有ボタンで公開リンクを作り、URLを送る
依頼の回数と作業時間 6回、約2時間半 5回、約1時間40分
上限のメッセージ 出なかった 出なかった

作ったゲームの種類が違うので、1回目の出来や回数をそのまま比べることはできません。ただ、その場で遊べて、リンクを送れば人にも遊んでもらえる点は、Geminiで作る大きな利点でした。

Geminiで作るときのコツ

今回の5回の依頼を通して分かったことを、4つにまとめます。

Canvasを選んでから頼む
入力欄の「+」からCanvasを選んでおくと、返事の中でそのまま遊べます。送る前に、入力欄の下に「Canvas」と出ているかを確かめてください。

あいまいな言葉は数字にする
「ときどき」と書いた金色のリンゴは、出る確率をGeminiが自分で決めました。こだわりがある所は、「3回に1回くらい」「1.5倍まで」のように数字で書きます。

おかしな所は、場所と症状を書いて頼む
機能を足すと、別の所がおかしくなることがあります。そのときは「ゲーム画面の下に」「『ム』だけ下の行に」のように、どこがどうおかしいかを書けば、直してもらいやすいです。

直しすぎたら矢印で戻す
結果が気に入らないときは、Canvasの「前のバージョン」で前の版に戻せます。頼み直す前に、前の版と見比べることもできます。

「ほかの部分は変えないでください」を毎回つけることと、1回の依頼を1つのテーマに絞ることは、ChatGPTのときと同じです。くわしくはChatGPTでゲーム作成する手順で説明しています。無料で使えるほかのツールも知りたい方は、無料・スマホでAIゲームを作る方法をご覧ください。

よくある質問

本当に無料のままで作れますか。

今回は、有料プランにせず、無料版のまま5回の依頼でゲームを完成させました。そのあと完成版プロンプトも1回試しましたが、上限のメッセージは一度も出ていません。公式ヘルプによると、利用上限はプロンプトの複雑さや使う機能などから決まり、5時間ごとにリセットされます。上限は変更される場合もあるので、詳しくはGoogleの公式ヘルプで確認してください。

Canvasが見当たらないときはどうしますか。

Canvasは、入力欄の左にある「+」を押すと出るメニューの中にあります。Canvasを使うには、Geminiにログインしている必要があります。画面の表示は変わることがあるので、見つからないときは公式ヘルプの「Canvas でドキュメントやアプリなどを作成する」を確認してください。

返事に英語がまざるのは問題ありませんか。

今回は、毎回のように「I will now…」で始まる英語の1文がまざりました。これから何を作るか、何を直すかを説明している一文です。ゲームの出来には関係なかったので、気にしなくて大丈夫です。

公開リンクを止めたいときはどうしますか。

公式ヘルプでは、作成した公開リンクは、パソコンでgemini.google.comを開き、[設定とヘルプ]から[公開リンク]を選んで削除できると説明されています。公開リンクはURLを知っている人なら誰でも開けるので、必要がなくなったら削除しておくと安心です。

作ったゲームを、自分のサイトなどで公開してもよいですか。

公開する前に、画像、音、名前、遊び方が他人の権利を侵していないかを確認してください。今回のゲームは、画像ファイルも音声ファイルも使っていません。見た目も音も、ブラウザの中でプログラムが作っています。確認する項目はAIで作ったゲームの著作権チェックリストにまとめています。

まとめ

Geminiの無料版でも、Canvasを選んで頼めば、スネークゲームを5回の依頼で作れました。1回目から遊べるゲームができ、見た目と遊びの要素を足して仕上げています。機能を足したら別の所がおかしくなりましたが、場所と症状を書いて頼むと直りました。完成したゲームは公開リンクにすれば、スマホでも、ログインしていない人でも遊べます。

ゲーム作りの全体像を知りたい方は、AIゲームの作り方の完全ガイドをご覧ください。

この記事のまとめ

  • Geminiの無料版でも、入力欄の「+」からCanvasを選べば、ゲームを作ってその場で遊べた
  • 1回目から遊べるゲームができ、見た目と遊びの要素を足して5回の依頼で完成した
  • 「ときどき」のようにあいまいに頼むと、Geminiが自分で数字を決める
  • 機能を足して別の所がおかしくなったときは、場所と症状を書いて頼むと直った
  • Canvasの矢印で前の版に戻せる。公開リンクを使えば、スマホでもログインしていない人でも遊べるが、最初に注意の画面が出る
  • 完成版プロンプト1回でも全部入ったが、書き方しだいで金色のリンゴの出方が変わった