WebNNでブラウザAIを動かしてみた

2026/08/28 Think ! FrontEnd by DMM #10登壇資料
https://dmm.connpass.com/event/397656/

1. WebNNでブラウザAIを動かしてみた 2026/08/28 Think ! FrontEnd by DMM #10 min @carrot__pyon_
2. 目次 01. 0 1. 02. 0 2. 03. 03. 04. 04. 05. 05. WebNNとは？？ なにがうれしいの さわってみた 使われることってあるのかい まとめ
3. じこしょうかい 名前 ：min（みん） 所属 ：日本大学文理学部情報科学科4年 出身 ：神奈川県 しゅみ ：ダンス・お絵描き・スペイン語 Twitterフォローしてください→
4. じこしょうかい 名前 ：min（みん） 所属 ：日本大学文理学部情報科学科4年 出身 ：神奈川県 しゅみ ：ダンス・お絵描き・スペイン語 あとでたくさんはなしたいです！！！ Twitterフォローしてください→
5. 00. 00. はじめに 私専門家じゃないです 変なこと言ってたら本当にごめんなさい 色々調べてみました
6. 01. 01. WebNNとは Web ニューラル ネットワーク (WebNN) API ブラウザ上でAIの推論を動かすためのWeb API CPU / GPU / NPU など、端末の計算資源を使ってニューラルネットワークを実行できる 新しいWEB標準 AI向けの処理に特化していて、端末ごとのハードウェア差をある程度吸収してくれる サーバーに毎回データを送らず、端末内で推論できる まだExperimental https : / / webmachinele arning . github . io / webnn - intro / https : / / le arn . microsoft . c om / ja - jp / windows / ai / directml / webnn - overview
7. 02. 02. なにがうれしいの？？？ わたしがおもいうかべるAIのつかいかた ブラウザ ↓ 自分のバックエンド ↓ OpenAI / Gemini / Claude などのAPI ↓ 結果をブラウザに返す
8. 02. 02. 通信遅延… なにがうれしいの？？？ わたしがおもいうかべるAIのつかいかた オフラインで動かねえ… ブラウザ ↓ 自分のバックエンド ↓ OpenAI / Gemini / Claude などのAPI ↓ 結果をブラウザに返す データを外に送らないと… サーバー側のコストおもい 通信量…おもい…
9. 02. 02. なにがうれしいの？？？ WebNNはこうなってる ブラウザ ↓ WebNN ↓ 端末の CPU / GPU / NPU ↓ ブラウザ内で推論
10. 02. 02. なにがうれしいの？？？ 低遅延 オフラインでも◎ プライバシー面で有利 サーバーコスト削減 通信も減らせる CPU / GPU / NPU など端末の計算資源まで使える OSのML推論スタックを経由するのでNPU(ニューラルエンジン)もつかえる
11. 03. 03. さわってみた Canvas に手書きした数字を取得 28×28 の画像データに変換 ONNX Runtime Web から WebNN を使って推論 MNISTモデルで 0〜9 を判定 https://gleeful-churros-386c87.netlify.app/ 使用するときはchrome://flags/#web-machine-learning-neural-networkを Enableに
12. 04. 04. 使われることってあるのかい とっても真っ赤（Experimentalがちらほら）
13. 04. 04. 使われることってあるのかい Microsoftが2025年5月にWebNNの記事をだしてた https://learn.microsoft.com/ja-jp/windows/ai/directml/webnn-overview 概要からチュートリアルまで幅広く説明されてた GoogleLiteRT.jsを発表（2026年7月10日） https://developers.googleblog.com/litertjs-googles-high-performance-web-aiinference/ Webブラウザ上でAIモデルを実行するためのJavaScriptランタイム WebGPU、WebNNを活用して従来のWebランタイムに比べCPU/GPU推論で最大3倍高速化 WebNNを利用する側のライブラリ / 実行基盤 いまアツいのでは？？？？
14. 05. 05. まとめ フロントからAIを使うときはクラウドのAPIを呼ぶ形をよく見ていた そういうもんだとおもってた WebNNを使うと、推論そのものをブラウザ側で持つという選択肢が出てくる 考えること増えるなあ 推論をどこで動かすか 端末性能をどう使うか オフラインやプライバシーをどう考えるか モデルの読み込みや実行コストをどう扱うか 設計対象が増えそう フロントでなんでもできちゃうなあ…
15. 05. 05. まとめ（本音） AI使ってる割にはAIのこと全然知らないや どう動いているかも正直自信ない 教養がない 猛反省 なんでそのAPI・機能があるのか今の注目はどんなもんなのか知らないや 世の流れも知らない 考察力もない 技術を常に追えるようになりたい 英語アレルギーどうにかしたい