AIで画像の代替テキスト案を作る｜altを空にする判断まで練習
架空の体験教室ページに載せる写真を例に、AIへ渡す材料、コピーできる依頼文、悪い回答の直し方、altを空にする判断、掲載後の確認まで説明します。
この記事でわかること
# AIで画像の代替テキスト案を作る｜altを空にする判断まで練習
この記事は、ホームページへ写真を載せる担当者が、AIを下書き係として使いながら代替テキスト（alt）を決めるための実践ガイドです。
最後まで進めると、架空の「木のスプーン作り体験」ページにある3枚の画像について、文章を書く・空のaltにする・本文で詳しく説明するのどれを選ぶか判断できる状態になります。AIサービスの種類は問いません。画像を外部サービスへ送れない場合は、見た目を文章で伝える方法でも進められます。
今回使う架空例と完成条件
例にするのは example.com/workshop/ に載せる木工体験の案内です。事業内容・料金・写真の設定は、すべて説明用の架空例です。
- 対象：初めて木工に参加する人
- 内容：木のスプーンを1本作る体験
- 写真A：彫刻刀でスプーンを削る手元
- 写真B：机に並んだ完成品3本
- 画像C：見出しの横に置く葉の飾り
完成条件は、3枚すべてに長い説明を付けることではありません。各画像について、次のどれかを選び、理由を1行で説明できれば完了です。
- 情報を伝える短いaltを書く
- 装飾として alt="" にする
- 図表などの詳しい内容を本文にも書く
1. 画像だけでなく「このページでの役割」を決める
W3Cの判断ツリーは、画像に文字があるか、リンクやボタンとして働くか、現在の文脈で意味を持つか、装飾だけか、という順で考えます。写真に何が写っているかだけでは決まりません。
たとえば写真Aが作業工程の説明に置かれるなら、「彫刻刀で木のスプーンのくぼみを削る手元」のように、工程を理解するための情報を残します。一方、同じ写真がページ上部の雰囲気づくりだけに使われ、すぐ近くの見出しで内容が十分伝わるなら、空のaltが適切な場合があります。
画像がリンクやボタンになっている場合は別です。見た目ではなく「予約フォームを開く」のように、押した結果を伝える必要があります。複雑なグラフや手順図は、短いaltだけに全情報を詰め込まず、本文や表にも同じ情報を用意します。
AIへ渡す前の材料メモ
写真Aについて、次の4項目を先に書きます。
| 項目 | 今回の記入例 |
|---|---|
| 掲載ページ | 木のスプーン作り体験の流れ |
| 画像の見た目 | 作業台の上で、手が彫刻刀を持ち、木のスプーンのくぼみを削っている |
| 直前の本文 | 「講師と一緒に、くぼみから少しずつ削ります」 |
| 画像の役割 | 道具の持ち方ではなく、削る工程の様子を補う |
個人の顔、名札、住所、予約番号、管理画面、未公開の商品情報などは材料へ入れません。画像をAIへ直接渡す場合は、利用するサービスのデータ取扱いと、写真を外部へ送ってよい権利・同意も確認します。送れない写真は上のように言葉で説明します。
2. コピーして使える依頼文
次の依頼文をコピーし、角括弧の中だけを自分の画像に合わせて置き換えます。
~~~text
Webページの画像に付ける代替テキスト案を考えてください。
あなたの役割は下書き係です。最終判断は人が行います。
【掲載ページ】
[木のスプーン作り体験の流れ]
【画像の見た目】
[作業台の上で、手が彫刻刀を持ち、木のスプーンのくぼみを削っている]
【直前・直後の本文】
[講師と一緒に、くぼみから少しずつ削ります]
【この画像を置く目的】
[削る工程の様子を補う。道具の詳しい持ち方を教える画像ではない]
次の順で回答してください。
- 情報を伝える画像／装飾画像／機能を持つ画像／複雑な画像のどれか
- 推奨するalt。空が適切なら alt="" と書く
- その理由を1文
- 判断に足りない情報
見えていない物、効果、感情、技術レベルを推測しないでください。
検索語を並べたり、「画像」「写真」という語を機械的に付けたりしないでください。
~~~
AIに写真自体を渡したときも、掲載ページ・周囲の本文・目的は省かないでください。W3Cは、画像の使われ方と文脈によって代替テキストを決めると説明しています。
3. 回答は「分類・alt・理由・不足情報」で読む
次は、上の依頼に対して期待する形を示したWebのしるべ編集部作成の回答例です。実在するAIサービスの出力ではありません。
~~~text
- 分類：情報を伝える画像
- alt案：彫刻刀で木のスプーンのくぼみを削っている手元
- 理由：本文だけでは伝わりにくい、削る工程の様子を補っているため
- 判断に足りない情報：この画像がリンクとして使われるか不明
~~~
この形なら、人は元の材料と1行ずつ照合できます。ただし、AIが「情報を伝える画像」と分類しても、その写真がページの飾りとして置かれただけなら採用しません。
採用前に確かめる4点
- 写っている事実と一致しているか
- 周囲の本文をそのまま繰り返していないか
- 画像の役割に必要な情報だけか
- リンクやボタンなら、見た目ではなく行き先・動作が伝わるか
Google Search Centralも、altをページの文脈に合った有用な内容にし、キーワードの詰め込みを避けるよう案内しています。altは検索語を並べる場所ではありません。
4. 悪い回答を見つけて、追加入力で直す
写真Aに対し、次の案が返ったとします。
~~~text
初心者でも簡単に最高の木工作品が作れる人気教室の写真
~~~
これは採用しません。写真から確認できない「初心者でも簡単」「最高」「人気教室」を追加し、実際の工程も伝えていないためです。次のように追加入力します。
~~~text
前の案には、材料にない「初心者でも簡単」「最高」「人気」が追加されています。
これらを削除してください。
画像から確認できる「彫刻刀」「木のスプーン」「くぼみを削る手元」だけを使い、
工程が伝わる短いaltを1案出してください。
変更した言葉と理由も示してください。
~~~
修正後に「彫刻刀で木のスプーンのくぼみを削っている手元」となっても、そのまま掲載せず写真と見比べます。実際には紙やすりを使っていた、スプーンではなく小皿だった、という違いがあれば人が直します。
Googleは、生成AIの出力には不正確さがあり得るため、公開前に手作業で事実確認すること、確認対象には画像の代替テキストも含まれることを明記しています。
5. 空のaltは「書き忘れ」と違う
画像Cの葉の飾りが情報を増やさず、見出しの内容を視覚的に整えるだけなら、alt="" を選びます。空の値は、支援技術に読み上げさせないという明示的な設定です。alt属性そのものを削除すると、環境によってはファイル名が読まれる場合があります。
~~~html
<img src="leaf-decoration.webp" alt="">
~~~
一方、完成品3本の形の違いを選ぶために写真Bを載せるなら、装飾ではありません。「完成した木のスプーン3本。左から丸形、細長形、浅い形」のように選択に必要な差を伝えます。写真のすぐ下の文章ですでに同じ差を説明しているなら、重複を避けるため空のaltを検討します。
管理画面に「代替テキスト」欄がある場合、空欄が alt="" として保存されるか、alt属性なしになるかはシステムごとに異なります。公開ページでHTMLを確認できない場合は、制作担当者へ「装飾画像として読み上げ対象外にしたい」と伝えてください。
6. 3枚を完成させ、公開後に確認する
今回の架空例は、次のように完成させます。
| 画像 | 判断 | 掲載内容 |
|---|---|---|
| 写真A：削る手元 | 情報を伝える | 彫刻刀で木のスプーンのくぼみを削っている手元 |
| 写真B：完成品3本 | 形の比較に使うなら情報を伝える | 完成した木のスプーン3本。左から丸形、細長形、浅い形 |
| 画像C：葉の飾り | 装飾だけ | 空のalt |
公開後は、管理画面の入力欄だけで終わらせず、実際の公開URLを開きます。画像が表示されること、本文との組み合わせが正しいこと、画像をリンクにした場合は目的地が正しいことを確認します。可能ならブラウザーの開発者ツールやアクセシビリティ検査でaltの値も確認します。
完了判定
- 画像ごとに、情報・装飾・機能・複雑のどれかを判断した
- alt案を写真と周囲の本文に照らして確認した
- AIが足した未確認の効果・感情・実績を削除した
- 装飾画像は空のaltとして実装されることを確認した
- 複雑な図の情報を短いaltだけに押し込まず、本文にも用意した
- 公開URLで画像・文章・リンク先を確認した
自分だけで掲載判断が難しいとき
画像の目的整理からページへの配置、公開後の確認までまとめて相談したい場合は、同じ運営者のWeb制作サービス SITE PORT も選択肢です。以下は機能や成果を保証する案内ではなく、構成の完成例と編集イメージを確認するためのページです。
AIで下書きを早くしても、ページ内での画像の役割を決めるのは人です。まずは1ページの3枚だけを対象に、材料メモ、AIの案、人の修正、公開後の確認を一周させてください。
出典・確認情報
確認日：2026-10-13 ／ 公式情報の要点と編集部の提案を整理しています。価格・機能・条件は変更される場合があります。
W3C WAI：画像のalt判断ツリーW3C WAI：装飾画像の扱いGoogle Search Central：画像SEOのベストプラクティスGoogle Search Central：生成AIコンテンツのガイダンス
