Chrome for Developers が Build new features using built-in AI in Chrome（2026-05-26）で、ブラウザに組み込まれた AI 機能群を整理しました。LanguageModel（Prompt API）/ Summarizer / Translator / LanguageDetector / Writer / Rewriter といった API を通じて、端末内で動く軽量モデル Gemini Nano に対して、要約・翻訳・言語判定・分類・下書き生成を「サーバーを立てず、LLM API に課金せず、入力データを外部に送らず、オフラインでも」実行できるようになりつつあります。モデルはブラウザが初回に一度ダウンロードするだけで、以降は端末内で完結します。
受託 Web 制作の現場では、「顧客サイトに AI 機能を載せたいが、サーバー課金が読めず、入力データの外部送信もしたくない」という相談が増えてきました。要約ボタン・翻訳・問い合わせ分類・下書き補助といった「あると嬉しい AI 機能」は、サーバー型 LLM API で組むと従量課金が利用量に比例して膨らみ、個人情報や社外秘を外部 API に送る設計が稟議で止まるという壁にぶつかります。受託で Web 制作を支える立場では、これは 「最新の AI が使えるか」ではなく、「サーバーコストとプライバシーの制約を回避しつつ、未対応ブラウザのフォールバックまで含めて、運用できる AI 機能を引き渡せるか」を設計に組み込む課題だと捉えています。これまで モダンCSSのネイティブ機能を受託で使う（GH Media） で扱った ネイティブ機能の取り込み方針、ローカルファーストWebアーキテクチャ（GH Media） で扱った 端末内で完結させる設計と接続して、本記事では 「端末内AI機能実装支援」を 受託パッケージとして整理します。
なぜ「いま」ブラウザ組み込みAIなのか
| 観点 | サーバーAI（LLM API） | ブラウザ組み込みAI（端末内） |
|---|---|---|
| コスト | 利用量に比例した従量課金 | 推論はゼロ円（端末側で実行） |
| プライバシー | 入力を外部 API に送信 | データが端末から出ない |
| レイテンシ | ネットワーク往復が必要 | 端末内で完結し低遅延 |
| オフライン | 不可（要通信） | モデル取得後はオフライン可 |
| インフラ | サーバー / 鍵管理が必要 | サーバー不要 |
| ブラウザ対応 | どこでも動く | 対応ブラウザ / 端末が前提 |
つまり 「LLM API を叩く」ことと「サーバーコストとプライバシーの制約を回避した AI 機能を届ける」ことは別物であり、受託でも 「端末内で動く機能を本命に据え、未対応環境はサーバー AI にフォールバックし、運用できる状態で引き渡す」ことが品質の前提になりました。これにより 「課金が利用量に比例しない AI 機能」「入力を外に出さない AI 機能」を成果物として保証できます。一方で 「どこでも動く」のはサーバー AI 側の強みなので、両者は対立ではなく組み合わせて使います。
組み込みAI APIでできること
① Prompt API（LanguageModel）で汎用的に指示する
LanguageModel は、自然言語のプロンプトを Gemini Nano に渡せる汎用 API です。問い合わせ内容の分類、構造化データの抽出（JSON スキーマ指定）、簡単な質問応答などに使えます。利用前に availability() でモデルの状態（available / downloadable / downloading / unavailable）を確認し、未取得ならダウンロード進捗をユーザーに伝えるのが定石です。
// 擬似コード（実際の引数は仕様に追従して確認すること）
if ('LanguageModel' in self) {
const status = await LanguageModel.availability();
if (status === 'unavailable') {
// 未対応 → サーバーAIへフォールバック
return await fallbackToServerAI(input);
}
const session = await LanguageModel.create({
monitor(m) {
m.addEventListener('downloadprogress', (e) => {
console.log(`モデル取得中: ${Math.round(e.loaded * 100)}%`);
});
},
});
const result = await session.prompt(
`次の問い合わせを「請求」「技術」「その他」に分類して: ${input}`
);
return result;
}② Summarizer / Writer / Rewriter で文章を扱う
Summarizer は本文の要約や見出し・メタディスクリプション生成、Writer は指定したタスクに沿った新規文章の生成、Rewriter は既存文の言い換え・調整に使えます。いずれも availability() → create() → 実行の流れは共通で、create() 時にダウンロード進捗を監視できます。
// 擬似コード: 端末内で記事本文を要約する
if ('Summarizer' in self) {
const summarizer = await Summarizer.create({
type: 'tldr',
length: 'short',
monitor(m) {
m.addEventListener('downloadprogress', (e) => {
updateProgressUI(e.loaded);
});
},
});
const summary = await summarizer.summarize(articleText);
renderSummary(summary);
}③ Translator / Language Detector で多言語化する
LanguageDetector で入力言語を判定し、Translator で端末内翻訳ができます。クラウド翻訳 API を呼ばずにブラウザ内で翻訳が完結するため、課金と外部送信を避けたい問い合わせフォームやヘルプ表示に向きます。対応言語ペアは availability() で事前確認します。
受託で提供する「端末内AI機能実装支援」5フェーズ
フェーズ 1: 棚卸し・診断（1 週間）
- 顧客サイトに載せたい AI 機能（要約 / 翻訳 / 分類 / 下書き）の洗い出し
- サーバー AI で組んだ場合の想定課金・データ送信リスクの試算
- 対応ブラウザ要件・端末要件の確認
- 成果物: AI 機能候補リスト + 端末内実装可否レポート
フェーズ 2: 設計（1〜2 週間）
- 端末内 AI に寄せる機能とサーバー AI に残す機能の切り分け
- 未対応ブラウザ向けフォールバック方針の決定
- モデル未ダウンロード時の UX（進捗表示・遅延・代替）設計
- 成果物: 実装方針書 + フォールバック設計書
フェーズ 3: 実装（2〜4 週間）
availability()分岐・モデル取得進捗 UI・各 API 呼び出しの実装- 出力品質のばらつきを吸収するプロンプト・後処理の作り込み
- 未対応環境向けサーバー AI フォールバックの実装
- 成果物: 実装済み機能 + 実装標準ドキュメント
フェーズ 4: 検証・引き渡し（1 週間）
- 対応 / 未対応ブラウザ・端末での挙動とフォールバックの検証
- 出力品質・プライバシー（送信有無）の確認
- 成果物: 検証レポート + 保守手順書
フェーズ 5: 継続保守（継続）
- ブラウザ・モデル対応状況の定点観測
- フォールバックの段階的撤去判断
- 新規 AI 機能の追加実装
受託向け実装標準セット
| 用途 | 推奨 | 避ける |
|---|---|---|
| 機能本命 | 端末内 API（Prompt/Summarizer 等） | サーバー AI に全依存 |
| 対応判定 | availability() で事前分岐 | 機能検出なしで直接呼ぶ |
| モデル取得 | downloadprogress で進捗表示 | 無言で固まらせる |
| 未対応環境 | サーバー AI フォールバック | 未対応ブラウザ放置 |
| 出力品質 | プロンプト + 後処理で安定化 | 生出力をそのまま表示 |
| プライバシー | 送信有無を明示・文書化 | 「端末内＝常に非送信」と誤認 |
どの案件に必要か / 不要か
| 必要な案件 | 優先度が低い案件 |
|---|---|
| 入力に個人情報・社外秘を含む AI 機能 | 機密性が低く公開前提のデータ |
| 利用量が読めず課金を抑えたい | 利用がごく少量で課金が軽微 |
| オフライン / 低遅延が要件 | 常時オンライン前提で遅延許容 |
| AI 機能を多数の顧客に横展開したい | 単発・短命なキャンペーン |
| サーバー運用を増やしたくない | 既にAI基盤があり問題が出ていない |
受託契約に書く6つの条項
| 条項 | 内容 | 顧客が確認すべきこと |
|---|---|---|
| 対象範囲 | 実装する AI 機能の種類 | 要約/翻訳/分類の境界 |
| 対応ブラウザ | 端末内 AI を保証する範囲 | 未対応端末の割合 |
| フォールバック | 未対応時の挙動 | サーバー AI 利用の可否・費用 |
| プライバシー | データ送信の有無 | 送信される条件の明示 |
| 出力品質 | 品質の前提と限界 | 生成物の責任分界 |
| 継続保守 | 対応状況の監視 | 運用費用 |
価格モデル — 端末内AI機能実装パッケージ
| プラン | 金額 | 対象 | 内容 |
|---|---|---|---|
| 診断 | 20 万円〜 | 1 サイト | AI 機能候補 + 端末内実装可否レポート |
| 標準実装 | 80 万円〜 | 中規模 | 主要 AI 機能の実装 + フォールバック |
| 本格対応 | 160 万円〜 | 大規模 | + 複数機能の作り込み + 品質検証 |
| Lite 保守 | 3 万円〜 / 月 | 小規模 | 対応状況監視 + 軽微修正 |
| Standard 保守 | 10 万円〜 / 月 | 中規模 | + フォールバック撤去判断 + 新規実装 |
顧客側 ROI 試算（AI機能を多用するサイト想定）
| 項目 | サーバーAI（LLM API） | 端末内AI中心で実装 | 差分 |
|---|---|---|---|
| 推論課金 | 利用量に比例して増加 | 端末側でゼロ | 従量課金の圧縮 |
| データ送信 | 外部 API へ送信 | 端末内で完結 | プライバシーリスク低減 |
| サーバー運用 | 鍵管理・スケール対応 | フォールバック分のみ | 運用負荷の軽減 |
| レイテンシ | ネットワーク往復 | 端末内で低遅延 | 体験の改善 |
| 年間効果 | — | — | 課金圧縮 + 送信リスク低減 |
診断（20 万円〜）だけでも、「載せたい AI 機能が、どこまで端末内に寄せられ、サーバー課金とデータ送信をどれだけ減らせるか」を可視化できること自体に価値があります。サーバー型 LLM API の従量課金は、利用が伸びた瞬間にコスト構造を直撃します。
ハマりやすい5つの落とし穴
落とし穴 1: モデル未ダウンロードを考慮しない
初回は大きなモデル取得が走り、availability() が downloadable を返します。downloadprogress で進捗を出し、取得中は代替表示にします。
落とし穴 2: 未対応ブラウザを放置する
端末内 AI は対応ブラウザ・対応 OS が前提です。未対応環境はサーバー AI へフォールバックする設計を最初から組み込みます。
落とし穴 3: 出力品質のばらつきを生で出す
軽量モデルゆえに出力が揺れます。プロンプト設計と後処理（整形・検証）で安定化し、生出力をそのまま見せません。
落とし穴 4: フォールバック設計を後回しにする
「端末内で動くからサーバー不要」と決め打つと、未対応端末で機能が消えます。サーバー AI 併用を前提に分岐を設計します。
落とし穴 5: 「端末内＝常に非送信」と誤解する
フォールバックでサーバー AI を呼べばデータは送信されます。どの条件で送信されるかを明示・文書化し、プライバシー表記と齟齬を出しません。認証や保存と組み合わせるなら パスキー導入で進めるパスワードレス認証（GH Media） も併読してください。
90日アクションプラン
| 週 | アクション |
|---|---|
| Week 1 | 載せたい AI 機能の棚卸し + サーバー課金試算 |
| Week 2 | 端末内 / サーバーの切り分け + フォールバック方針決定 |
| Week 3〜6 | 各 API 実装 + 進捗 UI + 品質安定化 |
| Week 7 | 対応 / 未対応ブラウザ・端末での検証 + 手順整備 |
| Week 8〜13 | 対応状況ウォッチ + フォールバックの段階撤去 |
まとめ — 「LLM API を叩く」から「制約を回避して引き渡す」へ
Chrome の組み込み AI が実用域に入ったことは、Web の AI 機能の作り方を「サーバー型 LLM API に従量課金する」から「端末内で動かし、必要な時だけサーバーに頼る」へと押し進めます。受託で Web 制作を支える立場では、端末内 AI を本命に据え、未対応環境のサーバー AI フォールバックを設計し、プライバシーと品質を明示して引き渡す 「端末内AI機能実装支援」が、サーバーコストとプライバシーの制約を回避した AI 機能を届ける主力サービスです。アクセシビリティまで含めて作り込むなら Webアクセシビリティ実装ガイド（GH Media） も参照してください。
弊社では診断 / 標準実装 / 本格対応 / Lite / Standard の各段階で本パッケージを提供しています。「AI 機能のサーバー課金を抑えたい」「入力データを外部に送らずに AI を載せたい」「未対応ブラウザのフォールバックまで含めて引き渡してほしい」というご相談は お問い合わせフォーム からお気軽にどうぞ。
Sources
- Build new features using built-in AI in Chrome（Chrome for Developers 2026-05-26）
- The Prompt API（Chrome for Developers）
- Summarize with built-in AI（Chrome for Developers）
- Built-in AI APIs（Chrome for Developers）
- モダンCSSのネイティブ機能を受託で使う（GH Media）
- ローカルファーストWebアーキテクチャ（GH Media）
- パスキー導入で進めるパスワードレス認証（GH Media）
- Webアクセシビリティ実装ガイド（GH Media）
