本文へスキップ
AI LABOAIを知って、試して、活かす

AIリテラシー

AIと考える画像の代替文：見た目の説明より、ページで果たす役割を伝える

W3C/WAIの一次指針を手がかりに、画像の目的、文脈、装飾、画像内文字の重複を分けて、AIで代替テキスト案を見直す方法を初心者向けに解説します。

AI LABO / 資料確認: 2026-10-22T06:39:00Z

AIと考える画像の代替文：見た目の説明より、ページで果たす役割を伝えるのサムネイル

画像の代替テキスト（alt）は、画像を細かく言い当てるためだけの文章ではありません。画像がそのページで何を伝え、読む人が画像を見なくても何を知る必要があるかを考えるためのものです。AIには候補を出してもらえますが、画像の目的と周囲の文章を決めるのは人です。

W3C/WAIの画像チュートリアルも、同じ画像でも使う場面で必要な代替が変わると説明しています。[1] ここでは、画像を「情報」「操作」「装飾」「画像内の文字」に分け、AIを下書き役として使う手順を紹介します。この記事だけでアクセシビリティへの完全適合を保証するものではありません。

Contents
  1. 代替文は、画像の見た目メモではなくページの情報で決める
  2. まずは四つの質問で画像の役割を分ける
  3. AIには「画像の目的」と「重ねる文字」を渡して候補を出す
  4. 画像内の文字と本文の重複を先に確かめる
  5. 公開前は、画像を見ない読み方で確認する
  6. 参考にした一次資料

代替文は、画像の見た目メモではなくページの情報で決める

最初に確認するのは「この画像がなければ、読者は何を失うか」です。たとえば鳥の写真でも、野鳥の種類を紹介する記事なら種類や特徴が重要かもしれません。一方、段落の余白を飾るだけなら、鳥の色や姿を読み上げても、内容理解にはつながりません。

WAIは、情報を伝える画像には必要な情報を短く伝える代替を、装飾だけの画像には空の alt を使う考え方を示しています。[1][2] ただし「装飾かどうか」は画像ファイル名では決まりません。同じ画像でも、記事の要点を説明しているのか、雰囲気を添えているのかで変わります。

画像の役割を、目的・周囲の文・必要な情報・確認事項に分けて考える図
図：画像の役割を分けると、AIへ渡す条件と人が確認する点を整理しやすい。

まずは四つの質問で画像の役割を分ける

画像をAIに渡す前に、次の質問へ短く答えます。答えが曖昧なら、代替文を急いで確定しません。

  1. この画像は本文のどの説明を補っているか。
  2. リンクやボタンなら、見た目ではなく何をする操作か。
  3. 近くの本文が、すでに同じ情報を伝えていないか。
  4. 画像の中の文字は、本文に同じ文字として置かれているか。

WAIの判断ツリーでは、リンクやボタンの画像は操作や行き先を、画像内にしかない文字はその文字を伝えるよう案内しています。[3] グラフや手順図のように情報量が多い画像は、短い alt だけで済ませず、本文や表で内容を読めるようにする考え方も必要です。[1]

AIには「画像の目的」と「重ねる文字」を渡して候補を出す

画像だけを渡して「altを書いて」と頼むと、AIは見た目の細部を並べやすくなります。用途、周囲の見出し、画像内の文字が本文にもあるか、長さの目安を一緒に渡します。

次は架空の例です。実在の公開ページやAIの実行結果ではありません。

目的：記事の導入に置く、紙で作った鳥のイラスト。本文は「画像の目的で代替文を決める」と説明している。画像内の見出し文字は本文にも同じ文字がある。操作要素ではない。候補は、画像に情報がある場合と装飾だけの場合を分けて示して。

この材料なら、AIの候補をそのまま採用せず、「本文の説明を補う紙の鳥のイラスト」のような情報が必要かを確認します。雰囲気だけなら空の alt という結論もあり得ます。この記事では、指定された紙鳥のサムネイルについて内容を断定しません。実際の画素と掲載文脈を人が確認してから判断してください。

画像内の文字と本文の重複を先に確かめる

画像に見出しや数値が入っているとき、見えている文字をすべて繰り返せばよいわけではありません。WAIは、同じ文字が近くに実テキストとしてある場合、重複した読み上げを避けるため空の alt を使う場面を示しています。[3] 反対に、その文字が画像内にしかないなら、読める形で本文へ置くか、代替で伝える必要があります。

AIに候補を頼むときも、「画像内の文字は本文にもある」「ロゴ名は省略しない」のように、重複と例外を明記します。ロゴ、リンク、図表などは役割が違うため、一つの定型文をすべてに流用しません。

公開前は、画像を見ない読み方で確認する

下書きができたら、画像を隠したつもりで見出しと本文だけを読みます。何の画像かが分からず困るなら、代替や本文が足りないかもしれません。反対に、本文と同じ内容を二度読まされるなら、重複している可能性があります。

AIの候補から、画像の役割・本文との重複・操作の有無を人が確認する流れの図
図：AIの候補を、画像の役割と周囲の文章に照らして人が見直す。

確認時には、画像が読めない人の利用状況を想像するだけでなく、実際のページで支援技術がどう読むかも、必要に応じて制作環境で確かめます。AIの候補、空の alt、本文での補足のどれを選ぶかは、ページごとに記録しておくと、次の画像を見直すときに理由をたどれます。

参考にした一次資料

  1. W3C Web Accessibility Initiative, “Images Tutorial”
    https://www.w3.org/WAI/tutorials/images/
  2. W3C Web Accessibility Initiative, “Decorative Images”
    https://www.w3.org/WAI/tutorials/images/decorative/
  3. W3C Web Accessibility Initiative, “An alt Decision Tree”
    https://www.w3.org/WAI/tutorials/images/decision-tree/