ITの知識ゼロでアプリを作ってみた！
ChatGPTに相談しながらGeminiで脱出ゲームを作ってみました🎄今回は初めてCursorも触ります。
「猫屋敷からの脱出」のゲームを作ろう🚪
【はじめに】
私の好きなスマホゲームがのひとつが脱出ゲーム。これまでいろんな制作者のゲームをダウンロードして楽しんできました。自分でも作ってみたいと考え、まずはChatGPTに相談してみました。
【使用するアプリ】
今回はChatGPTに相談しながらGeminiにコードを書いてもらいます。
また、エンジニアさんから「ライブラリを知っておくと便利だよ⭐︎」と聞いたのでライブラリも使ってみます。ブラウザで表示するために必要なCursorも初めてダウンロードしました。
1.「ライブラリとは」
まずはChatGPTにライブラリについて教えてもらいます。なんぞや・・・
（なるほど！みんなが使える部品！なんとなく理解）
2.「ゲームでアニメーションをつけるには？Geminiで脱出ゲームを作りたい」
アニメーションに使えるライブラリも教えてもらう。
アニメーションのライブラリでおすすめされたGSAPを使ってみることに。
前記事ではエラーが起きたので、アプリ制作についても先にChatGPTに相談。最初のプロンプトはこれを使うにゃ。
3.「あなたは脱出ゲームの謎制作者です。部屋ごとにテーマを持たせ、観察・視点・順番・音を使った謎を考えてください。難易度は徐々に上げてください。」
まずは脱出ゲームの内容を考えてもらいます。
(ステージ4まで色々考えてくれた！)
4.「「猫屋敷からの脱出」という脱出ゲームにしたいので、それに猫の要素を加えてほしい」
やっぱり猫の要素は入れたいので考えてもらう。
（猫の設定になった🐈かわいい）
5.「そのゲームのアプリを作りたい。GSAPで作ってくれる？」
さっそくアプリにしてもらいます。覚えたてのGSAPを指定してみる！
コードを書いてもらった！前回はGemini上で表示されたけど、GSAPは違うみたい🥺
6.「コード書いてもらったけど、ブラウザで見るにはどうすればいいの？」
「ブラウザで見る」方法が分からないので、ChatGPTに聞いてみる
7.「カーソルでコードを貼り付けて表示させるには？手順を細かく教えて」
最近よく耳にするCursorが気になってたので使ってみる。細かい手順を教えてもらう。
↓この手順でやってみるお
①任意の場所にフォルダを作る。
②作成したフォルダを開く
③左のフォルダ名をクリックして出てくる 📄＋（New File）をクリック
③HTMLコードを貼り付ける
④保存する
⑤最初に作成したフォルダにファイルが書き出されるので「このアプリケーションで開く」で対応しているアプリで開く。私はGoogle Chromeにしました。
見れたーーーーーー！！！！！
↓完成したアプリ
(わくわくわく・・・)
（お部屋が出てきた！シンプルなのにアニメーションの展開が気持ちいい！）
（おお！鍵が開いたよ🔑）
脱出成功！！！
【まとめ】
今回はライブラリ・Cursorを始めて使用しました。ChatGPTに教えてもらいながら制作から表示までできて嬉しいです♪
そして、完成度の高い脱出ゲームを作っている方々を、改めてすごいなぁと感じました🥺
Geminiで脱出ゲーム作ってみた！
— なるる軍曹(田上成美)🦖 (@naruchip1) December 17, 2025
猫要素も足してもらって「猫屋敷からの脱出」になりますた🐈
シンプルだけどちゃんと出来てうれしい！ pic.twitter.com/1h1OE2okEn