ブラウザだけでSDXL画像生成｜WebGPU拡張機能の導入と使い方

画像生成AIを試したいのに、環境構築で挫折した経験はないだろうか。

仮想環境の構築、ComfyUIの複雑なセットアップ。これらが導入の壁になっているエンジニアは多い。

そこで注目したいのが、ブラウザ拡張機能だけでSDXLを動かすという新しいアプローチだ。インストールするだけで、自分のGPUを使った完全オフラインの画像生成が可能になる。

仕組みはシンプルだ。テキストエンコーダー・UNet・VAEをすべてONNXグラフに変換し、ブラウザのWebGPUスタック上で動作させている。

対応ブラウザはFirefoxとChromeの両方。利用できるモデルは以下の2種類だ。

• SDXL-Lightning fp16：標準版（約7GBのストレージが必要）
• 4ビット量子化版：低スペックGPU向け（約3.6GB）

この記事でわかることは以下の3点だ。

• WebGPU拡張機能のインストール手順と初期設定の方法
• ブラウザ上でSDXLを動かす仕組みと技術的な背景
• 用途に合わせたモデルの選び方と動作環境の目安

WebGPU拡張機能によるローカル画像生成とは

WebGPU拡張機能を使ったローカル画像生成は、ブラウザだけで完結する新しいアプローチだ。従来のPython環境やComfyUIは一切不要。拡張機能をインストールするだけで動き始める。

開発者自身が「シンプルなローカル画像生成が欲しかった」と語っているように、このツールはセットアップの複雑さを排除することを最優先に設計されている。

従来ツールとの違い

これまでSDXLをローカルで動かすには、次のような手順が必要だった。

• Pythonの仮想環境（venvやconda）を構築する
• ComfyUIをexeインストーラーで導入し、複雑なノードグラフを設定する
• CUDAドライバーやモデルの手動配置を行う

このツールはこれらをすべてブラウザ内に集約した。コマンドライン操作はゼロだ。

動作の仕組み

技術的な核心はONNXグラフにある。テキストエンコーダー・UNet・VAEの3コンポーネントをONNX形式に変換済みだ。ブラウザのWebGPUスタックがそれを直接実行する。

処理はすべて自分のGPU上でローカル完結する。生成した画像データが外部サーバーに送信されることはない。

プライバシー面でのメリット

オフライン動作は、プライバシー保護の観点でも大きな強みになる。

• 画像データが外部に出ない：生成プロセスが端末内で完結する
• APIキー不要：クラウドサービスへの認証情報が一切いらない
• ネットワーク切断時でも動作：モデル読み込み後はオフラインで使える

業務で機密性の高い画像を扱う場合や、社内ポリシーでクラウド利用が制限されている場合に特に有効だ。

対応ブラウザとインストール先

拡張機能はFirefoxとChromeの両方に対応している。各ストアから直接インストールできる。

• Firefox版：Mozilla Add-ons（generate-ai-imagesで検索）
• Chrome版：Chrome Web Store（拡張機能ID：agcbeefcfjkldpankmceehdhbpldakae）
• ソースコード：GitHub（d0grr/generate-ai-images）で公開中

OSSとして公開されているため、コードの透明性も確認できる。企業利用でセキュリティ審査が必要な場面でも対応しやすい。

このツールが向いているケース

次のような状況に特にマッチする。

• Pythonの環境構築に時間をかけたくないエンジニア
• 画像生成をサクッと試したいデザイナーや非エンジニア職
• クラウドサービスへのデータ送信を避けたい業務用途

セットアップコストを最小化しつつ、プライバシーを守ったローカル生成を実現できる点が最大の特徴だ。

必要な環境・スペック要件

このブラウザ拡張を動かすには、いくつかの要件を満たす必要がある。事前に確認しておくことでスムーズに導入できる。

対応ブラウザ（WebGPU必須）

動作にはWebGPUに対応したブラウザが必須だ。現時点で推奨される環境は以下のとおり。

• Chrome：バージョン113以降（WebGPUがデフォルト有効）
• Firefox：バージョン122以降（about:configでWebGPUを有効化する場合あり）
• Edge：Chromiumベースのため動作報告あり（公式サポート外）

SafariはWebGPU対応が限定的なため、現状は非推奨だ。インストール前にブラウザバージョンを確認しておこう。

GPU・メモリ要件

モデルはすべてWebGPU経由でGPU上で処理される。CPUフォールバックは基本的に想定されていない。

最低限必要なGPUスペックの目安は以下のとおりだ。

• VRAM 4GB以上：4-bit版（量子化モデル）の動作に必要な最低ライン
• VRAM 8GB以上：通常版（fp16）を快適に動かすための推奨ライン
• 対応GPU例：NVIDIA RTX 3060以上、AMD RX 6700以上

内蔵GPU（Intel Iris / AMD Radeon Graphics）はVRAMが共有メモリのため、動作が不安定になるケースが多い。専用GPUの使用を強く推奨する。

ストレージ容量の比較

モデルは初回起動時にローカルへダウンロードされる。2種類のモデルでストレージ消費量が大きく異なる。

• SDXL-Lightning fp16（通常版）：約7GBのストレージが必要
• 4-bit量子化版（軽量版）：約3.6GBで済む（約半分）

ダウンロード後はオフラインで動作するため、通信環境が良い場所で初回セットアップを済ませておくのがベストだ。

通常版と4-bit版の選び方

スペックに応じた使い分けの基準を以下にまとめる。

• 通常版（fp16）を選ぶ場合：VRAM 8GB以上・高品質な出力を優先したい場合
• 4-bit版を選ぶ場合：VRAM 4〜6GB・ストレージを節約したい場合・ミドルレンジGPU利用者

4-bit版は量子化による若干の品質低下があるものの、日常的な用途では実用十分なレベルだ。まず4-bit版で試し、不満があれば通常版へ切り替える流れを推奨する。

スペック要件の早見表

• ブラウザ：Chrome 113以降 / Firefox 122以降
• GPU VRAM（最低）：4GB（4-bit版）/ 8GB（fp16版）
• ストレージ：3.6GB（4-bit版）/ 7GB（fp16版）
• ネット接続：初回ダウンロード時のみ必要

FirefoxまたはChromeへのインストール手順

この拡張機能は、FirefoxとChromeの両方に対応しています。それぞれの公式ストアからインストールできます。

Firefoxへのインストール

1. 拡張機能ページにアクセスする
   Firefox Add-ons：generate-ai-images を開きます。公式ストアからインストールするため、安全性が確認できます。
2. 「Firefoxへ追加」ボタンをクリックする
   ページ上部の青いボタンをクリックします。確認ダイアログが表示されたら「追加」を選択してください。
3. インストール完了を確認する
   ブラウザ右上のツールバーに拡張機能アイコンが表示されれば成功です。

Chromeへのインストール

1. 拡張機能ページにアクセスする
   Chrome ウェブストア：generate-ai-images を開きます。拡張機能IDは agcbeefcfjkldpankmceehdhbpldakae です。
2. 「Chromeに追加」ボタンをクリックする
   ページ右上のボタンをクリックします。「拡張機能を追加しますか？」の確認ダイアログで「拡張機能を追加」を選択してください。
3. インストール完了を確認する
   アドレスバー右横のパズルピースアイコンをクリックします。一覧に generate-ai-images が表示されれば完了です。

インストール後の確認ポイント

インストール直後は、まずモデルのダウンロードが必要です。初回のみインターネット接続が必要になります。

• モデル選択：スペックに応じて2種類から選ぶ
  • SDXL-Lightning fp16版：約7GB（VRAM 8GB以上推奨）
  • 4-bit量子化版：約3.6GB（VRAM 4GB以上で動作）
• WebGPU対応確認：アドレスバーに about:gpu（Firefox）または chrome://gpu（Chrome）と入力する。WebGPU の項目が「Hardware accelerated」と表示されていれば正常です。
• オフライン動作確認：モデルのダウンロード完了後、ネットワークを切断した状態で画像生成を試みる。問題なく生成できれば、完全ローカル動作が確認できます。

ソースコードはGitHubで公開されています。動作の詳細を確認したい場合は d0grr/generate-ai-images を参照してください。

初期設定とモデルの読み込み

拡張機能をインストールすると、最初にモデル選択画面が表示されます。選択できるモデルは現在2種類です。

• SDXL-Lightning fp16版：高画質・高精度。ストレージ容量は約7 GB
• 4-bit量子化版：GPUメモリが少ない環境向け。ストレージ容量は約3.6 GB

どちらを選ぶかは、搭載GPUのVRAM容量が判断基準になります。目安は以下のとおりです。

• VRAM 8 GB以上：SDXL-Lightning fp16版を推奨
• VRAM 4〜6 GB程度：4-bit量子化版を選択する

モデル読み込みの手順

1. モデルを選択してダウンロードを開始する
   拡張機能のポップアップ画面で、使用するモデルをクリックします。初回のみ、モデルデータがブラウザのローカルストレージにダウンロードされます。
2. ダウンロード完了まで待機する
   fp16版は約7 GBのダウンロードが発生します。回線速度によって所要時間は変わります。目安は下記のとおりです。
   • 100 Mbps回線：約10〜15分
   • 1 Gbps回線：約1〜2分
3. WebGPU上でモデルが初期化されるのを待つ
   ダウンロード後、ONNX形式のUNet・VAE・テキストエンコーダがWebGPUスタック上に読み込まれます。この初期化処理に30秒〜1分程度かかります。
4. プロンプト入力欄が表示されたら生成を開始する
   入力欄が有効化されれば、オフライン状態でも画像生成が可能です。2回目以降の起動ではダウンロードは不要で、初期化のみ実行されます。

GPUメモリ不足時の対応

生成中にブラウザがクラッシュする、または処理が止まる場合は、VRAMが不足している可能性があります。以下の手順で対処してください。

1. 4-bit量子化版に切り替える
   拡張機能の設定画面からモデルを変更します。fp16版と比べてVRAM消費量が大幅に削減されます。
2. 他のGPUを使用するアプリを終了する
   ゲームや動画編集ソフトなど、GPUメモリを占有するアプリを閉じます。ブラウザのタブも最小限に絞ると効果的です。
3. ブラウザのハードウェアアクセラレーション設定を確認する
   Chromeの場合は chrome://settings/?search=hardware を開きます。「ハードウェアアクセラレーションが使用可能な場合は使用する」がオンになっているか確認してください。

モデルの読み込みが完了すれば、以降はネットワーク接続なしで動作します。クラウドへのデータ送信も一切ありません。

基本的な画像生成の使い方

モデルの読み込みが完了したら、実際に画像を生成してみましょう。操作は非常にシンプルです。

プロンプトの入力方法

拡張機能のポップアップ画面にテキスト入力欄が表示されます。ここに生成したい画像の説明文（プロンプト）を英語で入力します。

初心者には短めの英語フレーズから始めることをおすすめします。以下は実践的な入力例です。

• a cat sitting on a wooden table, sunlight, photorealistic（木のテーブルに座る猫）
• a futuristic city at night, neon lights, cinematic（夜の近未来都市）
• a simple logo design, flat style, minimalist（シンプルなロゴデザイン）

プロンプトの末尾に画質修飾語を追加すると仕上がりが向上します。high quality・detailed・4Kなどが定番です。

推奨設定値と生成オプション

入力欄の下部に各種パラメータが並んでいます。初心者はまずデフォルト値を使い、慣れてから調整しましょう。

• ステップ数（Steps）：デフォルトは20前後。数値を上げると精細になりますが、生成時間が伸びます。初心者には20〜30が最適です。
• CFGスケール（Guidance Scale）：プロンプトへの忠実度を調整します。7〜9が標準的な範囲で、数値が高いほどプロンプトに沿った結果になります。
• シード値（Seed）：-1または空欄でランダム生成。気に入った構図を再現したい場合は、生成後に表示されるシード番号を固定してください。

生成ボタンと結果の確認

設定が整ったら「Generate」ボタンをクリックします。WebGPUで処理が走るため、GPU性能によって生成時間は異なります。

RTX 3060クラスであれば、20〜40秒程度で1枚が完成します。生成された画像は画面上にそのまま表示されます。

ダウンロードは画像を右クリック→「名前を付けて保存」で行えます。生成データはすべてローカル処理のため、クラウドへの送信は一切ありません。

初心者向けのコツ

• 最初はステップ数20・CFGスケール7の組み合わせで試す
• うまくいかない場合はプロンプトを短くシンプルにする
• 同じプロンプトでシード値だけ変えて複数パターンを比較する
• 英語が苦手な場合はDeepLなどで翻訳してから貼り付ける

活用例と便利な使い方

基本操作を覚えたら、次はプロンプトの工夫で画質を一段階上げましょう。ブラウザ拡張ならではの手軽さを活かした効率化テクニックを紹介します。

プロンプト工夫のコツ

SDXLは品質タグをプロンプト冒頭に置くと効果的です。まず土台となる構文を押さえましょう。

• masterpiece, best quality, ultra-detailed：全体の品質底上げ
• cinematic lighting, 8k resolution：写真・映像寄りの仕上がりに
• flat design, vector art：イラスト・ロゴ用途に切り替える
• 被写体→背景→スタイルの順で記述すると構図が安定する

プロンプトは短い英語フレーズをカンマ区切りで並べるのが基本です。長い英文より単語の羅列のほうが精度が出やすくなります。

ネガティブプロンプトの活用法

ネガティブプロンプトは不要な要素を除外する指示文です。入力欄に以下を貼り付けるだけで品質が大幅に改善します。

• blurry, low quality, worst quality：ぼけ・粗さを抑制
• extra fingers, deformed hands：人物の手崩れを防ぐ
• watermark, text, signature：余計な文字の混入を除去
• nsfw, bad anatomy：解剖学的な破綻を低減

これらをまとめたテンプレート文をテキストファイルに保存しておくと便利です。毎回コピペするだけで済みます。

バッチ生成での効率化

同じプロンプトで複数パターンを比較したい場合は、シード値だけを変えて連続生成する方法が有効です。具体的な手順は次のとおりです。

1. プロンプト・ステップ数・CFGスケールを固定する
2. シード値を1000・2000・3000など100単位で変えて生成する
3. 気に入ったシード値を控えておき、プロンプト調整に再利用する

ステップ数を20に絞ると1枚あたりの生成時間を短縮できます。量産フェーズでは速度優先の設定に切り替えるのがおすすめです。

オフライン環境での活用シーン

このブラウザ拡張はモデル読み込み後はインターネット不要で動作します。そのため、次のようなシーンで特に力を発揮します。

• 社内セキュリティが厳しく外部APIが使えない業務環境
• 新幹線・飛行機など移動中のオフライン作業
• 画像データを外部サーバーに送りたくない機密案件
• 自宅のWi-Fiが不安定な環境でのクリエイティブ作業

生成データはすべて自分のGPUとブラウザ内で完結します。プライバシーを守りながら画像生成を活用できる点が最大の強みです。

よくあるエラーと対処法

ブラウザ拡張でのローカル画像生成は、環境によってエラーが発生することがあります。ここでは代表的な3つのトラブルをQ&A形式で解説します。

Q1. モデルの読み込みが途中で止まる・失敗する

A. ストレージ容量の不足が主な原因です。モデルサイズを確認しましょう。

• SDXL-Lightning fp16版：約7GB必要
• 4bit量子化版：約3.6GB必要

ダウンロード先のドライブに十分な空き容量があるか確認してください。空き容量が不足している場合は不要ファイルを削除してから再インストールします。

また、ダウンロード中にネット接続が切れると破損ファイルが残ることがあります。その場合は拡張機能を一度アンインストールし、再インストールして最初からダウンロードし直してください。

Q2. WebGPU非対応エラーが表示される

A. WebGPUが無効になっているか、ブラウザが古い可能性があります。以下の手順で確認しましょう。

Chromeの場合：

1. アドレスバーに chrome://flags と入力してEnter
2. 検索欄に WebGPU と入力
3. 「Unsafe WebGPU」を Enabled に変更
4. ブラウザを再起動する

Firefoxの場合：

1. アドレスバーに about:config と入力してEnter
2. 警告画面で「危険性を承知の上で使用する」をクリック
3. dom.webgpu.enabled を検索し、値を true に変更
4. ブラウザを再起動する

ブラウザのバージョンも要確認です。Chrome 113以降、Firefox 141以降であれば標準でWebGPUが利用できます。古いバージョンは必ずアップデートしてください。

Q3. 生成中にメモリ不足エラーが出る

A. GPU VRAMが足りていない状態です。まず4bit量子化版（約3.6GB）に切り替えることを試みてください。

それでも解決しない場合は、以下を順番に試してみましょう。

• 他のブラウザタブをすべて閉じてVRAMを解放する
• GPU使用中のほかのアプリ（動画編集ソフト、ゲームなど）を終了する
• ブラウザのハードウェアアクセラレーションを一度オフ→オンで再起動する
• PCを再起動してVRAMをクリーンな状態にしてから試す

Chromeでハードウェアアクセラレーションを確認するには、chrome://settings/system を開きます。「グラフィックアクセラレーションが使用可能な場合は使用する」がオンになっているか確認してください。

それでも改善しない場合は、搭載GPU自体がWebGPUに対応していない可能性があります。chrome://gpu を開き、「WebGPU」の項目が「Hardware accelerated」になっているか確認するのが確実です。

まとめ：セットアップ不要のローカル画像生成を始めよう

このブラウザ拡張は、従来のローカル画像生成の常識を覆すツールです。仮想環境の構築も、ComfyUIの複雑なグラフ設定も不要です。

インストールからモデル読み込みまで、すべてブラウザ上で完結します。操作に詰まる場面がほとんどないのが最大の強みです。

このツールの主なメリット

• セットアップゼロ：exeインストールや仮想環境が不要
• 完全オフライン動作：モデル読み込み後はネット接続不要
• 自分のGPUで処理：WebGPU経由でローカルのGPUをフル活用
• 2モデルから選択可能：SDXL-Lightning fp16（約7GB）と4bit版（約3.6GB）
• ChromeとFirefox両対応：普段使いのブラウザで即使える

今すぐ始める手順

1. ChromeまたはFirefoxで拡張ページを開く
2. 「拡張機能を追加」をクリックしてインストール
3. 拡張のアイコンをクリックし、モデルをダウンロード
4. ダウンロード完了後、プロンプトを入力して生成開始

GPUのVRAMが少ない場合は4bit版（約3.6GB）を選びましょう。動作が安定しやすくなります。

参考リソース・公式リンク

• GitHub（ソースコード）：github.com/d0grr/generate-ai-images
• Firefox Add-ons：Generate AI Images（Firefox）
• Chrome Web Store：Generate AI Images（Chrome）

技術的な背景に興味がある方はGitHubも確認してみてください。ONNX形式のUNet・VAE・テキストエンコーダーがどう動くか、コードで確認できます。

「ローカルで画像生成したいけど、環境構築が面倒」と感じていた方に、まず試してほしいツールです。ブラウザさえあれば今日から使えます。

---

この記事は「AI自動投稿×SEO検証プロジェクト」の一環です

海外のAI活用・収益化事例を毎日自動収集し、日本語で深掘り解説しています。

• 完全自動（収集→生成→投稿）
• 毎日定刻に投稿
• Search Consoleデータによる週次改善

▶ 検証ログ（note）：進捗を見る

▶ 同じ仕組みを作りたい方：相談する