SECTION 01
まず、ページでの役割を確認する
代替テキストは、画像を見ることができない場合にも、その内容や役割を伝える文章です。商品を紹介する写真なら伝えたい特徴を、画像だけのリンクやボタンなら移動先や操作を表します。
飾りのためだけに置く画像には、空のalt属性（alt=""）を使う場合があります。画像の見た目だけでは決めず、周りの文章やリンクの有無まで確認してください。
INSIGHTS / AI Web制作
AIで画像の代替テキストを作る｜用途を伝える確認メモ
AIで画像の代替テキストを作るときは、画像だけでなく、掲載箇所や周りの文章、リンク先も渡します。コピーして使える4つの欄と架空の椅子の例で、案を確認する方法を紹介します。
SECTION 02
コピーして使う4つの欄
最初の3欄を画像と一緒にAIへ渡し、4欄目に案と確認結果を残します。画像から分からない材質や性能は補わず、不明な点として挙げてもらいます。
- 画像と掲載箇所：［対象の画像／ページ名／見出しや配置場所］
- 画像の役割・伝えたいこと：［特徴の説明／操作の案内／装飾など］
- 近くの文章・リンク先：［見出しや説明文／画像がリンクか／移動先や操作］
- AIの案と確認結果：［代替テキスト案または確認事項／採用・修正・不採用／理由］
SECTION 03
同じ椅子の写真を、二つの場所で使う例
以下は説明用の架空の例です。写真には、青い座面と背もたれ、肘掛けのない椅子が1脚写っているものとします。材質、座り心地、耐久性は分かりません。
- 商品紹介で使う：見出しは「椅子A」。写真にリンクはなく、本文には色や肘掛けの説明がない。形と色を伝える目的で、案「青い座面と背もたれの、肘掛けのない椅子」を採用する。「座り心地のよい布製の椅子」という案は、写真で確認できない内容を含むため採用しない。
- 読み物の飾りに使う：「休憩時間の過ごし方」という記事で、雰囲気を添えるためだけに置く。写真にリンクはなく、本文も椅子の特徴を説明していない。この掲載意図を担当者が確認し、alt=""を採用する。alt属性自体は省略しない。
SECTION 04
実際のページと照らして仕上げる
採用前に、案を画像、周りの文章、リンク先と照らします。同じ画像を別のページへ移すときも、その場所での役割を確認し直します。
- 画像で確認できない特徴や、確認していない効果を足していないか。
- 周りの文章をそのまま繰り返さず、画像で伝える必要がある情報を表しているか。
- 画像だけのリンクやボタンなら、移動先や操作が分かるか。同じリンク内の文字で目的が伝わる場合も、画像が別の情報を加えていないか確認する。
- グラフや図の情報を短いaltだけに詰め込んでいないか。必要な数値や関係、説明は本文や表などにも用意する。