凄すぎ…「Gemma 4×Claude Code活用術」、API料金ゼロでAIエージェント制作の全手順(3/3)

Webブラウザで「AIを動かす」ための必須ツールとは

　Webブラウザ上でAIを動かすには、量子化で小さくするだけでは足りない。AIを動かすエンジンが必要だ。それが「WebGPU」だ。GPUはもともとは高度なグラフィクスを描くための機能だが、現在は高度な計算やAIを動かすのにも使われている。それをWebブラウザで動くWebアプリからも利用できるようにするのが、WebGPUだ。

　2025年11月にはChrome、Edge、Safari、Firefoxの主要ブラウザがWebGPUに対応した。

　もう1つ重要なのはファイルフォーマットだ。AIの標準的なモデル構造として「ONNX」（Open Neural Network Exchange、オニキス）がある、ファイル拡張子は.onnxだ。生成AIをONNXフォーマットにしておけば、対応したプラットフォームに載せて動かすのが簡単になる。

　ONNXフォーマットのAIをWebブラウザ上で動かす仕組みには、「ONNX Runtime Web」や「Transformers.js」があって、ONNX形式のAIモデルをWebGPUで動かすことができる。

【実践編】「VTuber風」対話型AIを作ってみた

　ここまで説明したように、Webブラウザ上でAIを動かすアプリを作ることは、もはやそれほど難しくない。

　Claude Codeなどのバイブコーディングエージェントに「Gemma 4 E2BとONNX Runtime Webを使って、Webブラウザ上でAIと会話できるサービスを設計して実装して」と依頼すれば作ってくれる。ポイントは、AIをいくら使ってもAPI料金がかからないことだ。AIの知識や知能はフロンティアクラスには遠く及ばない。しかし、目的を絞って必要な知識を与えれば充分使えるAIになるのではないか。

　仮説ばかりでは面白くないので、実際に自分で作ってみた。当初は英会話サービスを作ろうとしたが、2段階のハードルがあった。1つは十分な英会話教材と英会話を教えるための知識が必要なこと。もう1つは、英会話以前に日本語でも楽しく会話できる「会話力」だ。そこで、非常に限定的なGemma 4 E2Bの知性で、楽しい会話を続けられる仕組みを作った。

　会話相手として楽しくするためには、見た目も声も大事だ。AIの見た目はVTuberでよく使われる「Live2D」を使用した。音声発話には「Piper-plus」を使用した。Webブラウザ上で無料で利用できるほぼ唯一の日本語TTSだ。本体60～70MBに辞書を足して百数十MBで動く。人気が高いVOICEVOXなどの音質には及ばないが、はるかに小さなサイズで実用レベルの自然な発声を実現している。

　完全無料で運営するために、アプリの本拠地となるWebページはCloudflareを使った。無料枠が大きいのでよほど巨大なアクセスがこない限り運用費用がかかる心配はない。

　金曜の夜に着手して土日の2日で作って月曜の朝には最初の公開版が動いた。攻撃を想定したセキュリティチェックまで行った。やってみて分かったことは以下だ。


　公開URLはhttps://neartomo.funだ。

参入するなら今？「ブラウザ型AI」をすぐ始めるべきワケ

　Webブラウザで動く独立AIサービスはまだポピュラーとは言えない。利用できるPCやスマホの種類も限られる。初回のモデルロードに時間がかかるのも弱点だ。しかし、API料金がかからずにAIが利用できるのは魅力だ。最初は、上位機種を持つパワーユーザー向けにサービスを提供して、事業が軌道に乗ったら利用者を問わないクラウドAI版を作る、というロードマップでも良いだろう。

　Gemma 4 E2B/E4Bは画像や音声を認識できるマルチモーダルだ。Webブラウザからカメラへのアクセスを許可すれば、AIに画像認識させられるし、WebARと組み合わせても面白いかもしれない。

　可能性は無限だと思う。この分野が必ず成功する保証もないが、チャンスがあったらチャレンジすべきだ。