AIで画像のaltを作る前に|装飾・説明・リンクで書き分ける

AIと考える画像のalt:画像の役割から言葉を選ぶ

この記事の要約

  • altは、写っているものだけでなく、そのページで何を伝えるかに合わせて書きます。
  • 装飾画像、説明に必要な画像、画像だけのリンクでは、書く内容が変わります。
  • AIには前後の文章と使う目的も渡します。写真から分からないことや、読めない文字の推測は使いません。

画像を扱えるAIに、写っているものを説明してもらう。でも、その説明をそのままブログのaltに使ってよいかは別の話です。

同じ写真でも、飾りとして置くのか、形を説明するのか、別のページへのリンクにするのかで役割が変わります。公式ガイドをもとに、何を書くかと、AIへの頼み方を整理します。

目次

その画像は何のために置くのか

altは、画像を見られないときに必要な情報や機能を伝える文章です。写っているものを全部並べるより、「画像がなくなると何が伝わらないか」を考えます。

W3C WAIのalt判断木では、画像内の文字やリンクの機能、前後の文章との関係からaltを決めます。飾りの画像や、周りの文章と説明が重なる画像は、altを空にする場合もあります。

AIへ画像を渡す前に、次の3点を用意します。

  • 画像を置く目的:飾り、形や手順の説明、リンクなど
  • 前後の文章:すでに文章で説明していること
  • リンクの有無:画像を押したときの行き先と、同じリンク内の文字

同じカップ写真で、altを書き分ける

白いカップの写真を例に、使い分けてみます。ここからは説明用の例で、AIの出力や、著者が使った商品の記録ではありません。

1.記事の雰囲気を添えるだけなら、空のalt

作業場所の選び方を説明する記事で、冒頭にカップ写真を添えるとします。雰囲気を出すための写真で、形や色は説明に関係せず、画像にリンクもない。この場合は、altを空にする方法があります。

alt=""

空のaltを設定することと、alt属性を省くことは別です。写真なら何でも装飾にするのではなく、そのページで何に使っているかを見ます。

2.形を説明するなら、特徴を短く書く

持ち手の形を説明する記事なら、同じ写真でも書くことが変わります。たとえば「持ち手が大きく、指を通す部分が広い白いカップ」とすると、説明したい形が伝わります。

alt="持ち手が大きく、指を通す部分が広い白いカップ"

もちろん、その形が写真で確かめられることが前提です。「握りやすい」「疲れない」といった使用感は、写真だけでは分かりません。WAIの情報を伝える画像のガイドも、使う目的や前後の文章に合う情報を伝えるよう案内しています。

3.画像だけのリンクなら、行き先や行動を伝える

カップ写真だけを「カップの選び方」という記事へのリンクにする場合は、行き先を伝えます。見た目を詳しく説明するより、押すと何を読めるかが大事です。

alt="カップの選び方を読む"

ただし、同じリンクの中に「カップの選び方を読む」という文字もあるなら、目的はその文字で伝わります。画像のaltは空にして、同じ説明を繰り返さない方法があります。

WAIの機能を持つ画像のガイドでも、この違いが説明されています。画像だけのリンクなのか、文字と一緒のリンクなのかを見て決めます。

AIには、画像と前後の文章を渡す

画像と一緒に、前後の文章と使う目的も渡します。読めない文字を想像で埋めないよう、依頼文にも入れておきます。

ブログ画像の代替テキスト案を作ってください。
画像:[使用できる画像を添付]
記事の主題:[主題]
掲載目的:[装飾/説明/リンクなど]
直前・直後の本文:[文章]
画像内の文字:[正確に分かる文字。不明なら不明]
画像のリンク先:[なし、または正確な行き先と目的]
同じリンク内の文字:[なし、または表示する文字]

まず、画像なしでも情報や操作が伝わるか整理してください。
次に、alt案を一つと、その内容にした理由を示してください。
空altが適切と考える場合は、その理由を示してください。
画像から分からない製品名・使用感・効果を加えないでください。
読めない文字は推測せず、確認が必要な点として残してください。

前後の文章と続けて読んでみる

できたaltを、前後の文章やリンク内の文字と続けて読んでみます。長さだけでなく、次の3点を見ます。

  • 同じ説明を繰り返していないか:本文、キャプション、同じリンク内の文字と重ならないか。
  • 必要な情報があるか:説明に必要な形や、リンクの目的を省いていないか。
  • 写真から分からないことを足していないか:ブランド名や使い心地、効果を想像で書いていないか。

図やグラフなど、短いaltでは伝えきれない画像もあります。必要な説明は本文にも書き、長い一文に詰め込まないようにします。

WordPressで設定したら、公開ページも確かめる

WordPress.comのサポートには、altの設定手順があります。セルフホストのWordPressでは、テーマやブロック、編集方法によって操作する場所が違うので、同じ画面とは限りません。

設定したら、公開ページの画像にも反映されているか確かめます。開発者ツールなどで、その画像のimg要素にあるaltを見ると、入力した内容との違いを確認できます。

設定が合っていても、それだけで説明が十分とは限りません。前後の文と一緒に読み、必要な情報やリンクの目的が伝わるかも確かめます。

画像を作る方法は、アイキャッチの背景と文字を分ける制作例にまとめています。見出し入りの画像も、本文と同じことを伝えるのか、別の情報を持つのかを見てaltを決めます。

公式情報の確認日:2026年10月25日。依頼文は編集上の提案です。AIの性能や、読み上げソフトでの使いやすさを測ったものではありません。

よかったらシェアしてね!

コメント

コメントする

目次