5
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

【超絶簡単】Gemini3.0のパワーとNetlifyで人間の学習導入ハードルを一気に下げる!

Last updated at Posted at 2025-12-18

はじめに

生成AIが出てからアウトプットの速度は爆速になりました。しかし一方で今までのように技術習得のために時間を割かなくてもそれなりのアウトプットを出せるため、基礎知識が疎かになっている人も多いのではないでしょうか。

未経験でエンジニアになった頃の自分は文系脳かつ頭も悪いので、難しいドキュメントなどは最初から読めず、技術の仕組みの概要をキャッチアップする際にキャッチーなものや分かりやすい記事、動画を探したりなど苦労してました。

今回は格段に性能の上がったGemini3.0を使って技術学習におけるゲームを爆速で作り、学習の導入をキャッチーに低ハードルで開始できるようにしたいと思います。
生成AIでのアウトプットの効率化ではなく自身へのインプット側に焦点を当てた使い方を紹介できればと思います。

プロンプト

プロンプト自体は簡易的なものです。
これでもそれなりのものができます。
後述のNetlifyで利用するためにReactで作成されるのを防ぐ目的で、HTMLファイル1枚で表現してもらうようにしてます。

あなたは「ITエンジニア教育向けゲームデザイナー兼ソフトウェアアーキテクト」です。  
知見が浅いエンジニアが、楽しみながら基礎技術や考え方を自然に習得できる学習ゲームを作ってください。

### **目的**

- 初心者エンジニアでも楽しめる
    
- 1回10〜15分で遊べる
    
- "ただのクイズ"ではなく、ストーリー性・体験型・意思決定型
    
- 最終的に「技術の本質的理解」につながるものを生成する

### 作成方法

- HTMLファイル1枚で表現する
### 作成するお題

- Dockerコンテナ

### 参考URL
https://xxxxxx.xxxx

ゲーム作成

ツール選択でCanvasを選択して、先ほどのプロンプトを入れるだけで完成します。
今回Dockerコンテナの概要学習として作成されたものが下記です。

スクリーンショット 2025-11-22 14.56.20.png

地球の開発チームから渡されたアプリを火星にあるサーバーへデプロイしろとのことです。

スクリーンショット 2025-11-22 14.56.44.png

そのままデプロイを選択すると、環境差異によってデプロイできませんでした。

スクリーンショット 2025-11-22 14.56.54.png

コンテナで構築することを選択すると、Dockerfileのコマンドを選択形式で並べてDockefileを作るようです。

スクリーンショット 2025-11-22 14.57.07.png

正しくDockerfileを作成できたので、クリアのようです。

スクリーンショット 2025-11-22 14.57.21.png

もう一つ、プロキシについての学習ゲームも作成してもらいました。

スクリーンショット 2025-11-22 14.57.31.png

自身がプロキシとなってユーザーのリクエストを捌くようです。

スクリーンショット 2025-11-22 14.58.01.png

最後にリクエストの捌く精度によって評価がつけられるようです。

スクリーンショット 2025-11-22 14.58.40.png

上述のシンプルなプロンプトの一発出しにも関わらず、かなり良いアプトプットだと思います。
流石Gemini3.0です。
かなりキャッチーで概要やイメージを掴むものとして良いのではないでしょうか。

ここからGeminiとのラリーやプロンプト改良でいくらでも拡張できると思います。

デプロイ

デプロイに関しては、Netlifyを利用します。
こちらはフォルダをアップロードするだけで、静的サイトを瞬時に公開できます。
HTML1枚出力にさせたのもこのためです。

こちらに、Geminiに出力させたHTMLファイルを含めたフォルダをアップロードします。

スクリーンショット 2025-11-22 14.58.58.png

そうするとURLとパスワードが表示されますので、「該当のURL/htmlファイル名」でアクセスできます。

たったこれだけで先ほどのブラウザゲームが展開できます。
画像はアカウント作成なしでの利用なので、1時間でアクセスできなくなります。
アクセス維持をしたい場合はアカウント作成を行なって利用します。

スクリーンショット 2025-11-22 14.58.50.png

GitHubなどと連携しての更新の自動化などもできます。
メンバーにこの領域の学習をして欲しいなという時など、Netlifyを使えばチーム内でも即時展開できるのがとても良いです。

最後に

AIでアウトプットまでの道のりを短縮するのは結果に対して即効性があり、これも良いのですが、お金をもらってエンジニアをしている以上は使っている技術に対して責任を持つ必要があります。

今回はゲームを題材にしましたが、スライドでも図解だとしても同様で、開発現場ではAIでのアプトプットに目を向けがちですが、人間自身の「学習」インプットの部分でも活用できることを改めて知ってもらえると良いなと思いました。

AIが出したアウトプットや提案の良し悪しを判断できないような無責任な仕事をしないように、技術未経験としてエンジニアになってまもない方や技術知見がまだ浅いなと思う方は、ぜひ今回の方法や他の方法でも良いので、インプットに対しても道のりを短縮しつつも知識が血肉になるような方法を取り入れてみて欲しいなと思います。

5
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
5
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?