【実演】AI用語クイズゲームをAIで作ってみた！Gemini×Cursorでバイブコーディング！

今回は、AIキャンプで作成した「AI用語当てゲーム」アプリを、実際のプレイ画面つきで紹介します。前半ではゲームの動きと学習効果を確認し、後半ではGeminiやCursorを使った作り方をわかりやすく解説します。生成AIの基礎用語を楽しく学びながら、初心者でもアプリ作成の流れをつかめる内容なので、ぜひ最後までご覧ください。

▼目次
0:00 はじめに
0:52 入門編のゲームプレイ
4:51 Gemini Canvasでゲーム開発
7:58 Cursorでゲーム開発

▼文字起こし

こんにちは、AIキャンプの中村です。今回はですね、こんな感じのAI用語当てゲームみたいなアプリをAIで作ってみましたので、こちらを紹介していきたいなと思います。ちょっとBGMがうるさいので消しますね。ということで、今回は生成AIに関する用語を学べる、ちょっとしたゲームというかアプリみたいなものを作りました。これがなかなかいいクオリティにできて、特にAI初心者の方がいろんなAI用語を学ぶことができるということで結構好評だったので、これを紹介していこうかなと思います。前半はこのゲームを実際にやってみて、後半は作り方の紹介をさせていただきます。では、ゲームをプレイしていきましょう。まずは「入門編」「初級編」といっぱいあるんですけど、入門編からいきたいなと思います。よーし始めるよ！ということでゲームが始まりましたね。今真ん中に画像が表示されたと思うんですけど、ちょっとした演出として画像を表示しています。右下には私たちAIキャンプの公式キャラクター、AIあおいさんの画像を載せながら、生成AIに関する問題と四択クイズがあるという感じになっています。ちょっと解いてみましょうか。「やったね！」「やったね！」「違うよ」「違うよ」「やったね！あと半分頑張って」「違うよ」「違うよ」「お疲れさまでした。基本の用語は抑えておきましょうね」ということです。いかがだったでしょうか。こんな感じで楽しくクイズ感覚でやることができるということですね。ちょっとBGMなしで喋りながら、もう一個ぐらいやってみようかなと思います。音声やBGMをオフにできたり、私たちAIキャンプのホームページへのボタンを押せば弊社のホームページに飛んだりしますし、「遊び方」というページから遊び方を確認することもできます。「AIキャンプのAI用語当てゲームへようこそ」いいですね。BGMをオフにして、初級編の2番なんかをやっていこうと思います。よーし始めるよ！問題をちょっとやってみましょうか。「ステップ・バイ・ステップでと指示し思考過程を書かせる手法のことを……」Chain of Thoughtですね。「やったね！」ということで、正解を選択するとピコンという効果音とAIあおいさんの声が2つ鳴るようにしています。逆に間違えてみると「違うよ。ブブー違うよ」みたいな感じになってくれるということですね。AIあおいさんがちょっと驚いた顔になってますね。「違うよ」「違うよ」問題がちょうど中盤に差し掛かると、演出として真ん中に画像が出てきます。「やったね！頑張って」こんな感じで私たちAIキャンプのAIあおいさんの画像が出て、ポンポン楽しくやることができるということです。「やったね！」「違うよ」最後の問題解いてみましょう。「やったね！」そうすると「お疲れさまでした。基本の用語は抑えておきましょうね」ということで、正答率とともにAIあおいさんのメッセージが出て終わりということになっています。こんな感じのゲームですね。すごく単純なゲームなんですけど、ポチポチ押すだけで楽しくAIのことを勉強することができるので、初心者の方に慣れていただくのもいいですし、私たちAIキャンプの研修の前とかにこういうのを受けていただくと、例えば「生成AIとRPAって何が違うの？」みたいな質問をたくさんいただくんですけど、こういう基礎知識をしっかりとカバーした上でAIの学習ができますので、こんなのもやってみるといいかなと思います。今回のクオリティとしては、とりあえず大体50問ぐらいでこんな感じにしたんですけど、こだわろうと思ったらキャラクターを変えたり、自分のスコア表示機能をつけてどんどん学習させたりとかもできるようになると思います。私のAIキャンプの研修のサポートという意味では、このぐらいでも十分かなと思いますので、受講者の皆さんに利用していただきながら、私たちの研修とともに楽しんでいただく、みたいなことがやれるんじゃないかと思います。こちらのゲームは概要欄にURLを公開しておきますので、やりたい方はやっていただけると面白いかなと思います。この後、実装方法を紹介させていただきます。それでは、実際に今のようなアプリケーションを作る方法を紹介させていただきます。やり方としては大きく「超初級編」と「実用編」ということで二段階で紹介させていただきます。まず一番簡単なのは、GoogleのGeminiとか、あとClaudeとかのツールを使って、ここで「アプリ作りたいです」と話しかけるだけで実際に作ることができます。さらにこだわる場合は、私の場合はCursorというツールを使っているんですけど、開発に特化したツールを使っていただくといいかなと思います。まずはちょっとGeminiでやっていきたいと思うんですけど、Geminiの場合はこのツールのところで「キャンバス」というものを押していただいて、ここでアプリの作りたい内容を相談すると、クイズを作ってくれます。「生成AIに関する5問クイズみたいなものを作ってください。それぞれ4択クイズで、ものすごく初歩的なもので大丈夫です」ということで、もうこんな感じで全然大丈夫なので。こだわる場合はプロモード、思考モードという上位モデルを使っていただくといいと思うんですけど、今回はデモなので簡単にやっていきましょう。そうすると、Webアプリっぽいコードがこうやってだーっと書かれて、簡単な5問クイズをAIが作ってくれるということになります。あっという間にできましたね。じゃあやってみましょうか。「AIという言葉の正式名称は……アーティフィシャル・インテリジェンス」いいですね。次の問題へ。「自然な会話ができる生成AIツール……」ChatGPTだと思うんですけど、ちょっと間違えていきましょうか。ちょっと間違えると「ChatGPTですよ」みたいなことも言ってくれています。いいですね。ハルシネーションとか、代表的な問題が出てきているかなと思います。これでクイズができますので、このGeminiのチャット上でこんな感じで簡単なクイズを作っていただくといいかなと思います。このクイズはさらにプロンプトで「もっとリッチなデザインにしてください」「あと正解したら効果音が鳴るようにしてください」こんな感じで、このアプリをこんな風に変えてください、というのを話しかけてあげれば、Geminiの方がいろいろ考えて作ってくれます。もちろん限界はあるんですけど、ある程度簡単なものであればこれでもう全然やることができるわけですね。じゃあバージョンアップしたのでこれもやってみましょうか。「AIという言葉の正式名称は……」あ、今聞こえましたか？ピヨンってなりましたね。いいですね。間違えたときも音になりますね。ということで、ちょっとシンプルな効果音でしたけど、こんなことも作ってくれるということになります。ちなみに、これは「コード」という右上のボタンを押していただくと、このプログラムのコードを確認できますので、これを他の場所に貼り付けて表示することも可能です。また、個人のGoogle Geminiのアカウントであれば、右上の共有ボタンから「共有」を押していただくと、簡単にリンクとして他の方にも遊んでいただけるものができますので、こんなのを使ってみるといいかなと思います。ということで、Gemini上で簡単なアプリを作るというのが1個目の方法でした。続いて、より本格的なアプリを作るということで、今回このCursorを使って作っていきたいなと思います。先ほどのGeminiとほとんど同じことができるんですけど、何が違うかというと、左側のコードを見ながら作業ができるという点と、この左側のところに自分たちの画像とか音声とかを載せて作業することができるということですね。では、またここに指示をしていきましょう。「生成AIに関する5問クイズみたいなものを作ってください。それぞれ4択クイズで、ものすごく初歩的なもので大丈夫です」と簡単な指示を出しました。そうするとまずここに問題を5問作ってくれて、回答も作ってくれていますね。これだけだとアプリにならなかったので、「ウェブアプリにしてください」という指示を打っていきましょう。このCursorのいいところは、ここで作った成果物、この問題とかの内容を自分でこうやって修正することもできるんですよね。ほら見てください。そうするとウェブアプリとして先ほどと同じようにコードを書いてくれて、今度はウェブで公開するためのHTMLを書いてくれていますね。ウェブとか作ったことある方は分かると思うんですけど、HTMLと見栄えをよくするCSSファイルで作ってくれているらしいです。この辺りの知識はあんまりなくても最低限やってくれます。これJavaScriptかな、やってくれますので、このまま待っているといいかと思います。じゃあウェブアプリ、ちょっと開いてみました。そうすると「生成AI 四択クイズ 初級」ということで、ちょっとシンプルすぎますけど、こんな感じで「再開」を押すとできましたね。ちょっとこれだと面白くないので、もう少し指示を出していきましょうか。「今のままだと面白くないので、デザインを青系統でリッチなデザインにしてください。また1問ずつ画面遷移して、正解か間違いかが分かるような演出にしてください」ということで、こんな指示を打って先ほどと同じように修正依頼をかけていきます。このCursorが先ほどのGeminiやChatGPTと違って何がいいかというと、この左側に成果物が実際にあるんですよね。なので、今からAIが修正をかけてくれているんですけど、「ここを修正したよ」というのが見て分かるので、例えば「ここの修正はちょっとやめてほしいな」とか「これはこうしてほしいな」ということを目で確認しながら作業を進めることができますので、とっても便利なわけですね。ということで、いろいろ修正してくれましたのでもう一回見てみましょうか。そうすると、ほら、青系統のかっこいい感じになりましたね。「生成AIは主に何をするAIですか？」という質問があるので押すと「正解」ということで、その場で回答が出てきてくれていますね。「自分に与える言葉……プロンプト」をポチッと押すと「正解です」という感じで。いいですね。ということで、アプリがちゃんと青系統のかっこいい感じで、一問ずつ答えが出るような感じに修正ができました。ではさらに修正していきましょう。ここにBGMを載せていきたいなと思います。私、フリー素材の「シュワシュワハニーレモン」さんという音楽をよく使うんですけど、これをこのファイル内にペタッと貼っていきます。そうするとここの音楽が使えますので、ちょっと聴いてみますか。ということで、ここに添付したBGMができましたので、これをバックミュージックとして流してみてほしいなと思います。この場合は、右下にペタッと貼り付けた状態で「この音楽をバックミュージックとして使用してください」みたいな感じでやってあげると、音楽が流れるようになると思います。あと一つ、私たちのAIキャンプの「AIあおいさん」というキャラクターがいるので、これも追加していきましょうか。「このキャラクターが画面の右下にいるようにしてください」みたいな指示も追加で打っていきたいと思います。そうすると、BGMが後ろで流れて、AIあおいさんの画像が右下にいる、そんな面白いウェブアプリになってくるんじゃないかと思います。じゃあ、ちょっと見てみましょうか。ということでやっていきましょう。BGMが再生されて、いいですね。BGMをここで再生したり停止したりすることができるようになったり、AIあおいさんの画像が右下に表示されるようになったりして、かなり面白くなったんじゃないかと思います。だいたい皆さんイメージは湧きましたでしょうか。こんな感じで話しかけながら「こういうふうなアプリにしてほしい」と言っていくと、どんどんアプリがパワーアップしていくわけですね。あとはどこまでこだわるかっていうのも皆さん次第ですので、いろいろ触っていただくとこんな感じの面白いものができてくるということになっています。「よーし始めるよ！」「やったねー！」「違うよ」ということで、いかがだったでしょうか。今回、こんな感じの実務でも使えるような、いわゆる勉強系のアプリというかゲームみたいなものも簡単に作れるということを紹介させていただきました。生成AIに関する用語は私たちもぜひマスターしてほしいと思いますので、概要欄のところにURLを置いておきます。皆さんも遊んでみてください。また、GeminiやCursorといったいろんなツールを使っていただくと簡単に開発ができるようになりますので、皆さんも真似して遊んでいただけるといいかなと思います。それでは、今回は以上です。ありがとうございました。