top of page
自習ノートのロゴ

教室で挑戦！生成AIで「バイブコーディング」ゲームづくりを体験しよう

― Google AI Studioで学ぶ“コードを書かないプログラミング” ―

はじめに


生成AIの登場で、「コードを書かずにアプリを作る時代」がすでに教育現場にも到来しています。

特にGoogleが公開している 「AI Studio」 は、作りたいアプリの概要をプロンプトとして入力することで、Webアプリを自動生成できるツールとして注目を集めています。

これを活用すれば、プログラミング初心者の小学校高学年のクラブの時間や中高生、そして教員自身が、対話的にゲームを作る体験を通じて生成AIの仕組みと可能性を楽しく学ぶことができます。

本記事では、ゲーム作りを通してプロンプトの作成方法などのAIの基礎を、「サンタクロースのキャッチングゲーム」作成動画を例に、教育現場での導入ポイントや実際の手順をわかりやすく解説します。


目次


1. Google AI Studioとは

Google AI Studio は、Geminiモデルを使ってテキストの指示（プロンプト）から直接アプリを構築できる生成AI開発環境です。

画面上で「Build your ideas with Gemini」と表示される入力欄に、作りたいアプリの内容を日本語または英語で入力すると、プロンプトを生成してくれます。


生成されたアプリはプレビューで即時実行でき、保存して再編集することも可能です。難しい環境構築は不要で、ブラウザさえあれば動作する点が教育現場でも大きな魅力です。


2. バイブコーディングとは？


バイブコーディング（Vibe Coding） とは、AIや自動生成ツールを活用して、コードを書かずにアプリを作るアプローチです。

「指示（プロンプト）」の工夫で動作を変化させることが中心になるため、従来の「文法暗記型」ではなく、思考力・言語力・創造力を総合的に育てる教育として注目されています。


バイブコーディングの教育的効果


  • AIとの「対話」で、論理的思考＋説明力を育てる

  • 自分のアイデアを自然言語で形にする経験

  • 「失敗→修正→再生成」という試行錯誤の楽しさ

3. 教室での導入準備とAI Studioの基本操作


AI Studioの操作は非常にシンプルです。まず教員がAI Studioにログインし、「Chat with models」 からGemini 2.5 Proを選択します。


基本操作の流れ


チャット画面を開きプロンプトを入力する

ゲームを作成するプロンプトは英語がいいので、生成したものを「英語にして」と付け加えることで英語のプロンプトになります。

ゲーム画面を日本語化したい場合は「UI を日本語にして」を追加して再生成。（UI＝見た目のことです。ユーザーインターフェースと読みます）→ これにより、ゲーム内のテキスト（スコア・ボタン表示など）が日本語になります。

ビルドとプレビュー

  • 左のバーから「Build」を選び画面を切り替え、プロンプトをはりつけ。

  • 「Build」ボタンを押すとAIがReactコードを自動生成。

  • 数十秒でゲームが完成し、ブラウザ上でプレイ可能に。

保存と機能追加

  • タイトル横の鉛筆マークで名前をつけて保存。

  • 追加機能（BGM・難易度・スコア表示）はチャット欄に戻り指示を追加。追加プロンプトをBuildの続きにいれることで再生成します。


4. 実践：キャッチングゲームを作ってみよう

ここでは、Google AI Studioを使って実際に「サンタクロースのプレゼントキャッチゲーム」を作ってみましょう。

まず、AI Studioのチャット欄に次のように入力します。 

google ai studioのビルド機能を使ってreactでwebアプリのキャッチングゲームを作りたいです。
内容はサンタクロースが落とすプレゼントを女の子が拾うゲームです。
google ai studioのビルド機能のベストプラクティスに沿ってbuild機能でキャッチゲームを作るための詳細なプロンプトを作成してください。

これを入力すると、AIが自動的に「英語のプロンプト」を生成します。ここで多くの先生や生徒が「英語か…ちょっとハードル高いな」と感じるかもしれません。でも安心してください。AI Studioでは、「再度英語に修正して」と日本語で指示するだけでOKです。

たとえば次のように入力します： 

UIが日本語になるように英語のプロンプトで再度出力してください。

するとAIが、UI（画面の文字表示）が日本語のままで、構文的に正しい英語のプロンプトを自動的に再生成してくれます。つまり、ユーザー自身が英語を書く必要はなく、「AIに英語に直してもらう」という形で自然に英語の仕組みに触れることができるのです。

この仕組みは、英語プロンプトの壁を感じている先生や子どもたちにとって、非常に優しいステップです。「自分の日本語の指示をAIが英語に変えてくれる」体験を通して、AIとの対話に対する心理的ハードルを下げることができます。


生成された英語プロンプトをコピーして「Build」欄に貼り付けて実行すれば、Reactベースのゲームがわずか数十秒で完成します。ゲームでは、矢印キーで女の子を左右に動かし、落ちてくるプレゼントをキャッチします。画面上のボタンやスコア表示は日本語になっており、生徒たちにとっても親しみやすいインターフェースです。


💡 教育的ポイント

  • 「英語を使う」のではなく、「AIに英語を作ってもらう」という体験を通じて、生成AIリテラシー＋英語活用意識を同時に育てられる。

  • 言語の壁があるからこそ、「AIを道具として頼る」経験が生まれる。これは生成AI時代に求められる自然な姿勢でもある。


5. ゲーム完成後の学びを広げる工夫

完成したら、それで終わりではありません。以下のような探究型の活動に発展させましょう。


1. 班での相互評価

  • 各班が作成したゲームをプレイし合い、面白かった点・改善点を話し合う。

  • 「どんなプロンプトで違いが出たか」を比較し、AIとの対話設計力を学ぶ。


2. プロンプトリライト体験

  • 例：「もっと速く落ちるように」「雪を降らせたい」「音をつけたい」「ほかのゲームも作りたい」→ 生徒が自ら条件を変更して再生成。自然言語プログラミングの理解を深める。


3. 学習記録（ポートフォリオ化）

  • 作成したアプリのスクリーンショット、プロンプト履歴をまとめ、生成AIとの創造過程を記録。→ 情報活用能力やメディアリテラシー教育にもつながる。


6. 教員が押さえておきたいポイント

AI Studioを授業で使う際は、次の3点を意識することで、より効果的な学びにつなげられます。


7. ScratchとReactの教育的比較表

8. まとめ：AIと共に「創る力」を育てる授業へ

生成AI時代の学びでは、「自分で考え、AIに伝え、結果を検証する力」が求められます。バイブコーディングを通じたゲームづくりは、その最初の一歩として最適です。

Scratchで論理構造を学び、AI Studioで自然言語による開発を体験することで、子どもたちは 「思考と言葉がプログラムを動かす」 という実感を得られるでしょう。


教員自身も、AIと共に学び、創り、教える姿を見せることが、次世代の「生成AIリテラシー教育」を育む最良の教材になるのです。


今回はこれで終わりです。次回もお楽しみに！

＜自習ノートについて＞

当社では教育機関向けの生成AI導入支援サービスも提供しています。

生成AIの導入からその効果的な活用方法、さらに継続的なパフォーマンス分析・改善までを一気通貫でサポートします。

最近開催した生成AI導入セミナーでも、多くの教育現場の方々からご好評いただきました。これからのAI活用にご興味のある方は、ぜひこちらのリンクよりお問合せください。


自習ノートのサービスについての詳細や、お問い合わせはこちらのリンクからどうぞ。それでは、また次回の記事でお会いしましょう！


 
 
 
bottom of page