# Alt Text Generator

> 画像を選ぶだけで alt 用の短い説明文、詳しい説明、画像内の文字を自動生成。英語で出力、Chrome の翻訳で日本語にも。画像は送信せず、モデルは一度だけ取得。

- URL: https://bytescope.dev/ja/alt-text-generator/
- Locale: ja · Also: [en](https://bytescope.dev/en/alt-text-generator.md) · [zh-Hant](https://bytescope.dev/zh-Hant/alt-text-generator.md)
- Runs: ブラウザ内で動きます。画像はアップロードされません。モデルファイルは huggingface.co から一度だけダウンロードし、ONNX Runtime のスクリプトは cdn.jsdelivr.net から読み込みます。
- Requires: Any modern browser. Uses WebGPU where the browser has it and falls back to WebAssembly on the CPU, which is much slower (about 18 seconds per image for a short description and about 25 seconds for text in the image). The model file is downloaded once from huggingface.co and the ONNX Runtime script is loaded from cdn.jsdelivr.net; the images themselves are never uploaded.
- Updated: 2026-09-08

## What it does

### 一枚ごとに出てくるもの

まず短い代替テキストが一文出ます。文か単語の区切りで 125 文字以内に収めてあるので、そのまま `alt` 属性に使えます。残りの二つは必要なときだけオンにしてください。モデルをもう一度回すぶん時間がかかるからです。一つは `<figure>` のキャプションや詳細説明ページ向けの長い説明、もう一つは画像に写っている文字（Florence-2 の OCR タスクで、改行は残りません）。どの欄も書き換えられ、ワンクリックで `alt="…"` をコピー、一括ならファイル名・代替テキスト・説明の CSV で保存できます。ブログ記事の十数枚なら、ドラッグ一回とダウンロード一回で済みます。

### ブラウザの中で動くから、モデルは一度取るだけ

画像説明文の自動生成には Microsoft の Florence-2-base-ft（MIT ライセンス）を Transformers.js で動かしています。初回は huggingface.co からモデルを取得します——WebGPU が使えれば約 218 MB、使えなければ約 277 MB——が、ブラウザのキャッシュに残るので二回目からはモデルのダウンロードなしで始まります。実行に使う ONNX Runtime のスクリプトは cdn.jsdelivr.net から読み込みます。画像はタブの外に出ません。アップロードもアカウントも不要で、サーバー側に記録が残ることもありません。代わりに差が出るのは速さです。WebGPU なら短い説明は一枚あたり 1 秒ほど、画像内の文字は 4 秒ほど。使える GPU がないと CPU で動くことになり、同じ一枚に短い説明で 18 秒ほど、画像内の文字で 25 秒ほどかかります。だからページには実際に使っているデバイスを表示し、50 枚を並べる前に分かるようにしてあります。

### 説明文はどれくらい当たるのか

写真 20 枚で短い代替テキストを生成し、人ではなく別の AI モデルに採点させました。CPU 版（GPU のない環境で動くのはこちらです）ではそのまま使えるものが 16、手直しが必要なものが 4、写っているものを取り違えたものは 0。WebGPU 版ではそのまま使えるものが 16、手直しが必要なものが 3、取り違えたものが 1 でした。使える下書きではありますが、完成品ではありません。Florence-2 は物の名前を間違えたり人数を数え違えたりしますし、その写真が記事の中で何を伝えたいのかは知りません。「青い棒グラフ」と呼んだ図が、実は売上の落ち込みを示すために置かれているかもしれないのです。写っている人が誰かも分からず、推測もしません。名詞はおおむね合っている出発点として受け取り、文脈に合う言い方に書き直してください。

### 出力は英語、翻訳は別の一手

モデルが書くのは英語だけです。日本語と繁体字中国語のページでは、Chrome にブラウザ内蔵の Translator があれば、ボタン一つで各下書きを翻訳できます。翻訳は英語の横に並べて表示し、英語を置き換えることはしません。機械の説明文をもう一段機械で訳すわけで、そこで新たに誤りが入りうるからです。Translator が使えない環境ではその旨を表示し、英語だけを残します。それでも手で書き直す下書きとしては十分使えます。中国語や日本語のスクリーンショットから文字を読み取りたいなら、それらの文字向けに作られた OCR ツールのほうが向いています。

### モデルには書けない代替テキスト

代替テキストは「何が写っているか」ではなく「その画像が何を伝えているか」を書くものです。飾りの画像は `alt=""` と空にしてスクリーンリーダーに読み飛ばさせる。グラフなら色ではなく読み取れる結論を書く。商品写真なら「〜の画像」ではなく商品そのものを書く。125 文字という慣例があるのは、長い代替テキストを途中で区切ったり止めたりするスクリーンリーダーがあるからで、それ以上の詳細はキャプションや本文に書くべきものです。詳しい説明の出力はそのためにあります。生成ツールは空欄を埋めるところまで。ページに合う一文を決めるのはあなたです。

## Limits

Does not check that its descriptions are right: the model can name the wrong object or miscount people, does not know what your article is trying to say, and does not recognise who people are. It writes English only, and the translation buttons need Chrome's built-in Translator API.

## FAQ

### 生成される代替テキストは正確ですか？

だいたい近いところまで来ますが、保証はありません。写真 20 枚を人ではなく別の AI モデルに採点させたテストでは、CPU 版ではそのまま使えるものが 16、手直しが必要なものが 4、違うものを説明したものは 0。WebGPU 版ではそのまま使えるものが 16、手直しが必要なものが 3、違うものを説明したものが 1 でした。それでも物の取り違えや人数の数え違いは起きますし、その画像がページで果たす役割までは分かりません。下書きは全部読んでください。

### 画像はどこかにアップロードされますか？

いいえ。Florence-2 は Transformers.js でブラウザの中で動きます。通信が発生するのは初回のモデル取得（huggingface.co から。ブラウザがキャッシュします）と、実行に使う ONNX Runtime のスクリプト（cdn.jsdelivr.net から）です。画像はタブの中にとどまり、閉じれば何も残りません。

### なぜ英語でしか出力されないのですか？

Florence-2-base-ft は英語のキャプション生成で学習されたモデルで、他の言語は安定して書けません。日本語・中国語のページでは、Chrome 内蔵の Translator が使えるときに各下書きを翻訳できます。翻訳は英語の横に表示して見比べられるようにしてあります。機械の説明文を翻訳すると、誤りが入る場所がもう一つ増えるからです。

### 代替テキストはどれくらいの長さにすべきですか？

`alt` 属性は 125 文字程度までにするのが広く使われている目安です。長い文を切ったり分割したりするスクリーンリーダーがあるためで、それ以上の詳細はキャプションや本文に回します。このページの短い出力は、文か単語の区切りで 125 文字に収めています。純粋な飾りの画像は空の `alt=""` にしてください。

### 写っている人物が誰か分かりますか？

分かりません。「マイクを持った女性」のように一般的な言い方で説明するだけで、名前を特定することはありません。その人が誰かが画像の意味に関わるなら、自分で書き足してください。

### 自分のパソコンだととても遅いのはなぜですか？

ブラウザが WebGPU 経由で使えるグラフィックカードがないと、モデルは WebAssembly で CPU 上を動くことになり、短い説明で画像一枚あたり 18 秒ほど、画像内の文字で 25 秒ほどかかります。GPU があれば、それぞれ 1 秒、4 秒程度です。使っているデバイスはページに表示されます。詳しい説明や画像内の文字をオンにすると、それぞれでモデルがもう一度動くので、枚数が多いときはオフのままにしてください。

### CSV には何が入っていますか？

完了した画像ごとに一行で、ファイル名・代替テキスト・詳しい説明の三列が、追加した順に並びます。キャンセルした画像や未実行の画像は含まれません。普通のカンマ区切りファイルに UTF-8 の BOM を付けてあるので、日本語のファイル名も Excel で正しく開けます。ページ上で編集した内容がそのまま反映されます。値が =、+、-、@ で始まる場合は、表計算ソフトが数式として実行しないよう先頭に ' を付けます。

## Related tools

- [Image to Text](https://bytescope.dev/ja/image-to-text.md) — 写真から印刷された文字を読み取ります。中国語・日本語に強いツールです。
- [Compress Image](https://bytescope.dev/ja/image-compress.md) — アップロード前に写真を目標のファイルサイズまで小さくします。