冷たいスイカでもかじりながら（東京の夏が始まったばかりで、すっかりスイカに夢中なんです 🍉）、ちょっとしたお話に付き合っていただけませんか？ 私たちのような小さなチームが、ある突拍子もないアイデアを、どうやって命の吹き込まれたウェブゲームへと育て上げたのか、その舞台裏をお届けします。

ここ数年のGoogle I/Oに参加された方なら、パンデミック期にGoogleの主要イベントを支えた仮想カンファレンス技術 Adventure を覚えているかもしれません。広大で、美しいイラストに彩られ、みんなでワイワイ集まれる素敵な空間でした。ただ、システムとして少し重く、一回限りのイベント向けで、運営には人間のモデレーター陣が文字通り「総力戦」で挑む必要がありました。

数ヶ月前、私とトム（Tom）はこんな問いを自分たちに投げかけ始めました。「もし、あのAdventureを全く新しい形で再定義したらどうなるだろう？」 単発のカンファレンスではなく、開発者がお堅いドキュメントを読む代わりに、「バイブス・コーディング（vibe coding）」 やゲームプレイを通じて生成AIの原則を学べるような、居心地の良いレトロな世界を作れないだろうか？

それが AIventure の始まりの火花でした。ここからは、私たちが実際にこれをどうやって形にしていったのか、その軌跡をお話しします。

ステップ 1：Gemini Canvasでの落書きとプロトタイピング

どんな素晴らしいゲームも、すべてはプロトタイプから始まります。AIventureの開発では、最初から複雑なエンジンコードをガリガリ書き始めたわけではありません。まずはGeminiの中で、コンセプトをあれこれいじくり回すところからスタートしました。

私たちが求めていたのは、画面を左右に分割したUIレイアウトでした。UIパネルや全体の配置を管理する高機能なフロントエンドフレームワーク（Angular）のなかに、実際のゲームエンジンとしてレトロなキャンバスを描き出す Phaser.JS を組み込むという構成です。これは、前回のI/Oのデモで作った「Living Canvas」と同じアプローチですね。

まずは様々なスタイルでシンプルな学習用パズルゲームを作ってみました。そして最終的に、見下ろし型（トップダウン）のレトロダンジョンというスタイルに落ち着きました。私たちが目指した世界の「バイブス（雰囲気）」に、これが一番しっくりきたからです。この時、トムが「昔のAdventureの精神とビジュアルを復活させたらどうだろう？」という素晴らしいアイデアを持ってきてくれたおかげで、世界観にパシッと一本、芯が通りました。

Gemini Canvas で作成した初期プロトタイプのスクリーンショット

ステップ 2：部屋のデザイン（バイブス・コーディングとエージェントロボット）

土台となるロジックが動くことを確認すると、トムと私はさらに踏み込んだパズルの仕掛けをブレストし始めました。AIを単なる「鍵と鍵穴」のような単純なギミックにはしたくありませんでした。現代のLLM（大規模言語モデル）が持つ、あの魔法のようなワクワク感をちゃんと見せたかったのです。

そうして生まれたのが、私たちお気に入りの2つの部屋です。

1. バイブス・コーディングの部屋（The Vibe Coding Room）： プレイヤーに「AI支援によるUIデザイン」という概念に触れてもらいたいと考えました。この部屋に入ると、ゲーム内でiFrameのタブが開きます。プレイヤーが 「食べるボタンと寝るボタンしかない、ニワトリのためのToDoアプリを作って」 とプロンプトを投げると、AIがその場でウェブページを爆速で構築。プレイヤーはゲーム環境のなかで、自分のコードと画面のアップデートを即座に確認できます。

2. エージェント・パズル（The Agent Puzzle）： 自然言語の指示を受け取り、Phaserのグリッド世界を実際にトコトコ動いて実行してくれる、小さなロボットのNPCキャラクターを登場させました。プレイヤーが 「行ってスイッチを切り替えてきて」 と言えば、モデルはツール呼び出し（Tool-calling）と推論を使って、その指示を具体的かつ段階的なゲーム内のアクションに分解して実行します。

オープンモデルのファミリーである Gemma（ジェンマ） は、軽量でありながら非常に優秀で、なにより自分好みにいじれる「チューニングのしやすさ（tunability）」が魅力的です。個人の趣味プロジェクトからエンタープライズ向けの本格的なアプリまで、幅広く活躍してくれます。ただ、エコシステムが大きくなるにつれて、私も自分で何度も同じ質問を繰り返していることに気づきました。

• 私の制約にぴったり収まる正確なモデルサイズはどれだろう？
• Gemmaを使って、やりたい「XYZ」を実現するアプリを作るにはどうすればいい？
• チームで使うために、Google Cloudのプロダクション環境にGemmaモデルをデプロイする方法は？

こうした悩みを解決するために、私たちは gemma-skills という「生きたリポジトリ」を立ち上げました！これは、開発者（人間）もAIエージェントも、迷うことなくGemmaモデルを使って素敵なアプリを構築できるように、厳選・構造化された開発者向け「スキル（Skills）」のコレクションです。

中身がどうなっているか、さっそくのぞいてみましょう！

リポジトリの心臓部： gemma-dev

このリポジトリの中心にあるのが、最初のメジャーなスキルである gemma-dev です。これは設計図として機能するスキルファイル（SKILL.md）で、AIエージェントがGemmaを使った開発における最新の機能、モデルサイズ、ベストプラクティス、そしてリソースを素早く発見できるように設計されています。

急進化するエコシステムに追いつくために

Gemmaのエコシステムは動きが早く、新しいモデルやライブラリ、ベストプラクティスが常に誕生しています。Geminiのような基盤LLMを使っている開発者にとって、この目まぐるしいリリースにAIアシスタントのワークフローを完璧に同期させるのは、よくある課題でした。基盤モデルは膨大で固定されたデータセットで学習されているため、急速に進化するフレームワークの「最新のニュアンス」をその日のうちに自動でキャッチアップできるわけではないからです。そのため、開発中に次のような場面に直面することがあります。

• バージョン移行のジレンマ: 自分のプロジェクトではもうGemma 4の最新機能を使う準備ができているのに、汎用的なAIアシスタントは使い慣れた標準（Gemma 2や3など）を繰り返し提案してしまう。
• 最新ライブラリとのズレ: 最適化された最新のパッケージではなく、少し古いAPIパターンを勧められてしまう。
• 次世代機能の統合: マルチトークン予測（MTP）や特殊なフォーマットといった最先端の実装ディテールを完璧にこなすには、それに特化したコンテキストが必要です。

gemma-skills リポジトリは、まさにこの隙間を埋めてくれます。「生きた」ベストプラクティスと構造化されたスキル文書を開発ワークフローに直接取り込むことで、AIアシスタントが、今日利用可能な最もモダンで効率的、かつ信頼性の高い実装パターンにいつでもアクセスできるようになります。

Antigravityと一緒にこのリポジトリを使う方法

これらのスキルは、特定のツールに依存しないように作られています。GeminiからClaudeまで、あらゆる開発ワークフローやエージェントツールに組み込むことが可能です。クリーンなテンプレートとして使う場合でも、AIアシスタントに装備させる場合でも、手軽に始められる方法として Antigravity CLI（agy）が用意されています。

1. gemma-dev スキルのインストール: gemma-dev フォルダを、お使いのエージェントのスキルフォルダにコピーします。

2. セッションを開始する: ターミナルで agy を実行して、インタラクティブなAntigravityセッションを起動します。そこからは、Gemmaエコシステムについて気軽に質問してみてください。agy は gemma-dev スキルを活用するため、最も正確で最新のテクニカルガイダンスを受け取ることができます。

3. 素敵なものを形にする: インフラのあれこれはAIが自律して処理してくれるので、皆さんはクリエイティブな作業に集中できます。お気に入りの音楽をかけて、淹れたてのコーヒーを用意して、さあ、ものづくりを始めましょう！

Gemma Skills でビルドする

プロンプトの例: GradioとGemmaを使ってスマートホームシミュレーターを作って。家電操作の遅延を最小限にするために、Gemmaへのダイレクトな音声入力を使用して。

🐢 キャンバスに話しかける

もしあなたが私と似たような世代なら、初めての「プログラミング」体験は、まぶしいブラウン管（CRT）モニター上の小さな三角形だったかもしれません。FORWARD 100と打ち込むと、小さなカメが画面上に線を引いていくのを見つめていたあの時間。それはまさに魔法でした。自分でコンピューターを動かしているという実感があったからです。（参考: LOGO）

最近、私は Turtle-Gemma というAIプロジェクトを通じて、この魔法に再会しました。現代のAIの世界で、あの頃のワクワク感をそのまま蘇らせてくれるプロジェクトなんです。

コマンドをわざわざ入力する代わりに、ブラウザでマイクのボタンをクリックして「赤い星を描いて」と話しかけるだけ。ほんの数秒後には、AIエージェントがLogoのコードを書き、それを実行して、デジタルキャンバスにあなたのリクエストを描き出してくれます。

単に楽しいおもちゃのプロジェクトというだけでなく、これは現代のAI「エージェント」が実際にどう動いているのかを理解するための、最も効果的な方法でもあります。少し甲羅の中をのぞいてみましょう。

🛠️ すべてをつなぎ合わせる

いくつかの異なる技術を組み合わせて、シームレスなひとつのループにつなぎ合わせる時の、あの独特な達成感。Turtle-Gemmaがやっているのはまさにそれです。

アーキテクチャを見てみると、とても美しくてシンプルなパイプラインになっています。

1. 入力: Gradioのウェブインターフェースが、音声やテキストのリクエストを受け取ります。
2. 思考: GoogleのGemmaモデルがその入力を受け取り、エージェントとして機能します。
3. 描画: カスタムビルドの「ヘッドレス」なカメのエンジン（turtle_engine.py）がエージェントからの指示を受け取り、PIL（Python Imaging Library）の画像上に絵を描きます。

一人のクリエイターとして、私はこのアプローチが大好きです。未来を感じさせるものを作るのに、大げさなエンタープライズ向けのスタックなんて必要ないんだと思い出させてくれますからね。クリーンなPython環境、オープンモデル、そしてシンプルなUIライブラリ。これだけあれば、口に出した思考を一枚の画像に変換できるんです。

💭 AIが考える様子を眺めて、「ツール呼び出し（Tool Calling）」の謎を解く

最近AI界隈をチェックしている方なら、「エージェンティック・ワークフロー（Agentic Workflows）」や「ツール呼び出し（Tool Calling）」といった言葉を耳にしたことがあるでしょう。なんだか重々しくて難しそうに聞こえますよね。通常、これらはAIがデータベースにクエリを投げたり、JSONを解析したり、天気APIを取得したりといった、強力だけれども目に見えないタスクを指すことが多いです。

Turtle-Gemmaは、そんなツール呼び出しの過程を可視化してくれる、最高に心地よいビジュアライザーなんです。

Gemmaに「赤い星を描いて」とお願いしたとき、モデルは単に生の画像ファイルを出力するわけではありません。必要な手順を考えて、与えられた「ツール」を使わなければならないのです。ここでのツールとは、文字通り move_turtle()、turn_turtle()、set_pen_state()、set_pen_color() の4つだけです（参考: turtle-gemma/config.py）。

AIが声に出して推論していく様子を観察できます。

• 「ユーザーはタートルグラフィックスを使って赤い星を描きたいようだ。星は多角形であり、通常は前進と特定の角度での回転を繰り返すことで描画される。」
• ツール呼び出し 1: set_pen_color("red")
• ツール呼び出し 2: move_turtle(100)
• ツール呼び出し 3: turn_turtle(144)
• （これを5回繰り返す）

LLMにキャンバス上での物理的で連続した手順を出力させることで、抽象的だったAI推論の「ブラックボックス」が完全に視覚化されます。もしAIがハルシネーション（幻覚）を起こしたり論理を間違えたりしても、無言でコードがクラッシュするわけではありません。その代わり、完璧な星ではなく、少し歪んだ奇妙な星ができあがるのです。まさに、モデルがリアルタイムで考えている様子を目の当たりにしているわけです。

😋 幸せなアクシデントを楽しむ

もちろん、これは2D空間をナビゲートしようとしているAIなので、常にすべてが完璧にいくわけではありません。でも、そこがまた面白いところなんです。

プロンプト: draw a x-mas tree（クリスマスツリーを描いて）

クリスマスツリーをお願いしても、AIが幹を描くのを忘れてしまい、下から緑色の線が1本だけ飛び出した奇妙な三角形になってしまうこともあります。またある時は、自分の現在の向きを少し勘違いして、おかしな線を引いてしまうことも。

こうした小さな「間違い」が、なんだかとっても愛おしいんですよね。LLMは決して間違えない魔法の脳みそではなく、言葉を幾何学にマッピングしようと一生懸命に頑張っている推論エンジンなんだと気づかせてくれます。

🏖️ 砂場で遊んでみよう

私たちは、メールを書いたり、サーバーのデバッグをしたり、スプレッドシートを解析したりといった真面目な作業にAIを使うことに多くの時間を費やしています。Turtle-Gemmaは、AIを使ったプログラミングが、ただの楽しい遊びであってもいいんだと教えてくれる素晴らしいリマインダーです。

プロンプト: draw a gangnam style（カンナムスタイルを描いて）

ツール呼び出しが実際にどう動くのか見てみたい方、あるいは単に言葉から形が生まれる喜びを体験してみたい方は、ぜひリポジトリをクローンして、Gradioアプリを立ち上げ、試してみてください。強くおすすめします。

💎 鉱石の採掘からインサイトの発掘へ

Core Keeper（コアキーパー） の地下バイオームを探索しているときでも、スモールビジネスの複雑なスプレッドシートと格闘しているときでも、「情報過多」は私たちのラスボスです。

RAG（検索拡張生成、Retrieval-Augmented Generation） システムは、AIに専用のガイドブックを渡すようなものです。一般的な学習データに頼るのではなく、ゲームのWikiや研究ノート、法的な契約書といった「あなた独自のデータ」を参照することで、ピンポイントで正確な答えを出してくれます。

ここでは、Gemma 3 4B と EmbeddingGemma を使って、プライベートなローカルナレッジベースを構築する方法をご紹介します。

🛠️ 「クラフト」ステーション（技術スタック）

これを作るにあたって、「ローカルファースト」のアプローチをとります。つまり、データがあなたのPCから外に出ることは決してないということです。秘密基地の座標（あるいは大切なクライアント情報）を安全に保つには完璧ですね。

• 頭脳（LLM）: gemma3:4b - Googleのコンパクトで非常に効率的なモデルです。
• 司書（エンベッダー）: embeddinggemma - 検索できるようにデータを「インデックス化」する特化型モデルです。
• サーバー: Ollama - 自分のPCでこれらのモデルを動かすためのエンジンです。
• インターフェース: AnythingLLM - チャット画面のような見た目ですが、文書保存などの面倒な作業をすべてこなしてくれる使いやすいアプリです。

メモ：2026年のローカルAIの最高の魅力の一つは、ツールが「プラグアンドプレイ」であることです。技術的なスキルに合わせて、サーバーとUIを自由に組み合わせて使うことができます。たとえば、Ollamaの代わりにLM Studioを使ったり、AnythingLLMの代わりにOpen WebUIを使ったりすることも可能です。色んなツールを試してみてください！

📖 ステップ1：素材を集める

まずは、「信頼できる情報源（Source of Truth）」を特定しましょう。

• ゲーマーなら: ボスの攻略法やクラフトのレシピをまとめるために、Core Keeper Wiki を使ってみましょう。
• プロフェッショナルなら: PDFのフォルダやプロジェクトのログ、あるいは専門的なウェブサイトなどが該当します。

⚙️ ステップ2：ワークショップの準備（Ollama）

（ちょっとしたヒント：このような4Bモデルをスムーズに動かすには、約8GBのVRAMがあると良いですよ！）

Ollamaをダウンロードして、ターミナルで以下の2つのコマンドを実行し、「モデル」をダウンロードしてください。

# Download the language model
ollama pull gemma3:4b

# Download the embedding model
ollama pull embeddinggemma

🖥️ ステップ3：インターフェースの設定（AnythingLLM）

AnythingLLMを開き、以下の手順に従ってモデルを連携させます。

GoogleのAIニュースを追っていると、「Gemini（ジェミニ）」 という名前も聞くし、「Gemma（ジェンマ）」 という名前も聞きますよね？ 名前があまりにも似ていて、まるで双子の兄妹みたいだし、一体何が違うのか首をかしげたくなることがあります。

技術的に言えば、GeminiはGoogle DeepMindが開発した巨大なマルチモーダルAIモデル群で、GemmaはGeminiと同じ技術で作られた軽量化されたオープンモデルです……が！

こんな説明だと堅苦しいですよね？ そこで私はいつも、周りの人にこの二つの違いを説明するとき、ラーメンに例えているんです。今日はその「美味しい」例え話を皆さんにもお届けしますね。

Gemini（ジェミニ）：大企業が運営する高級ラーメン専門店

まずGeminiは、Googleという巨大企業が直接運営している最高級ラーメンレストランだと考えてください。

私たちがこのラーメンを食べるにはどうすればいいでしょうか？ 直接そのお店（gemini.google.com）に行くか、出前を頼む必要があります。厨房の中でどんな秘伝のスープを使っているのか、火加減はどうしているのか、私たちが見ることはできません。

でも、席に座りさえすれば、プロのシェフが最高の材料とノウハウで作った完璧なラーメン一杯が、目の前にサッと提供されます。私たちはただ美味しく楽しむだけでいいんです。味と品質は、その会社が誇る最高レベルが保証されています。

Gemma（ジェンマ）：家に持ち帰れる名店の袋麺

一方で、Gemmaはそのお店が出している家庭用袋麺です。

お店で出される出来立てのラーメンほど豪華ではないかもしれません。でも重要なのは、あの有名店の同じレシピと技術を元に作られているという点です。おかげで、袋麺の中でも圧倒的な美味しさを誇ります。

何より最大の魅力は、無料で家に持ち帰れること。自分のコンピュータにダウンロードさえすれば、ネットが切れてもいつでも調理できます。

この「袋麺（Gemma）」の本当の面白さは、家に持ち帰ってから始まります。（Gemma model fine-tuning）

• 好みを尊重（LoRA Fine-tuning）： 基本の味も素晴らしいですが、自分の好みに合わせてネギを刻んで入れたり、卵を落としたりすることもできます。特定の分野に特化するように、ちょっとしたチューニング（味付け）をするわけです。
• 新しい創造（Full Model Tuning）： いっそのこと、麺やスープを使ってラポッキ（ラーメン＋トッポギ）やプデチゲ（部隊鍋）のような、全く新しい料理に作り変えてしまうことだって可能です。

Geminiというお店では決まったメニューしか食べられませんが、Gemmaという袋麺なら、皆さんが好きなように味を変える自由が与えられているわけですね。

Gemmaverseに行けば、こうした様々な美味しい試みを見ることができますよ。

でも、注意点もあります！

もちろん、袋麺を作るにはいくつか準備が必要です。

1. 自分だけのキッチン： ラーメンを作る鍋と火力の強いコンロ、つまり高性能GPUを積んだコンピュータが必要です。
2. 調理器具： お玉や箸といった道具、つまりフレームワークやツールといった環境が整っていなければなりません。
3. 料理の腕前： 何より一番大事なのは、水をどれくらい入れて何分茹でるべきかを知っている料理（開発）の知識が必要だという点です。料理が全くできないと、美味しい袋麺も「絵に描いた餅」になってしまうかもしれませんから。

まとめると

• Gemini（ジェミニ）： 「面倒なことは抜きで、Googleシェフが作ってくれる一番美味しいラーメンを今すぐ食べたい！」😋
• Gemma（ジェンマ）： 「自分の鍋を使って、自分の口にぴったり合う自分だけのラーメンを直接作ってみたい！」🧑‍🍳

さて、GeminiとGemmaの違い、少し身近に感じられましたか？ 快適にサービスを楽しみたいならGeminiを、自分だけのAIをDIYしてみたいならGemmaを選んでみてください。

今日も皆さんのキッチン（PC）で、美味しいコーディングができますように！

4コマ漫画の裏話

今回の記事と一緒にご紹介した4コマ漫画、いかがでしたか？

実は、この漫画が誕生するまでにはちょっとした裏話があるんです。皆さん、Google JapanのX（Twitter）で誕生した、あのかわいいChromeのキャラクターを見たことはありますか？

あの子を見ているうちに、ふと「うちのGeminiとGemmaにも、あんなキャラクターがいたらいいのになぁ」と思ったんです。そこで、少し恥ずかしいですが、私の拙い画力を総動員して、まずはとても簡単なラフを描いてみました。

（本当に「簡単」なラフですよね？あはは😅）

次に、この不格好なキャラクタースケッチとおおよそのストーリーを持って、「ナノバナナ」という愛称がついているGeminiの画像生成機能のところへ行きました。「この子たちを使って、こんなストーリーの4コマ漫画を描いて！」とお願いしたんです。

そうしてAIの力を借りて素敵な絵が完成しましたが、最後に重要な作業が残っていました。私のブログは3ヶ国語で運営されています。

世界中の読者の皆さんにこの可愛い子たちの物語を楽しんでもらえるよう、各言語に合わせて吹き出しのセリフを翻訳・修正して、最終的な漫画を完成させました。

楽しんでいただけたら嬉しいです！