PR-223 商品画像はたくさんあるのに、alt属性を適当につけていてAIに内容が伝わっていない——画像alt属性をAIに認識されやすく生成する方法
こんな悩みはありませんか?
商品画像・サービス紹介画像が何十枚もあるのに、alt属性は空欄か「image1.jpg」のような機械的な値のまま放置している。1枚ずつ内容を確認して手入力する時間が取れず、後回しにし続けている——という状態です。
この記事でできるようになること
複数の画像をAIにまとめて渡し、内容が伝わるalt属性の下書きを一括で生成できるようになります。あわせて、どの画像にaltを書くべきで、どの画像は空にすべきかの判断基準も身につきます。
使うプロンプト
使用AI: Claude(画像を認識できるAIであればChatGPT・Geminiでも代用可)
画像をAIに渡す前の準備: 画像1点につき1枚、対象の商品・図版だけが写るようにトリミングする(Mac: Cmd+Shift+4で範囲選択、Windows: Snipping Tool)。背景に別ウィンドウや管理画面が写り込まないよう注意する。AIツールごとに1回で送れる枚数・サイズの上限は時期によって変動するため、まずは5〜10枚程度の少量でテストし、上限に達したらエラーメッセージに従って分割送信する。商品画像に人物(モデル・スタッフ・顧客)が写っている場合、顔・名札・車のナンバー・住所や電話番号が写った書類などが写っていないか送信前に必ず確認し、必要であれば黒塗り・モザイクで隠してから渡す。管理画面のスクリーンショットは会員情報・注文履歴など個人情報が写りやすいため特に注意する。
入力に必要な素材:
- alt属性を付けたい画像(複数枚。1メッセージで渡す)
- 各画像がどのページ・どの商品に使われるか(商品名・ページURLなど)
- サイトの業種・扱っている商品ジャンル
【役割】
あなたはWebアクセシビリティとAIO(AI検索最適化)の両方に詳しいアシスタントです。商品画像・サービス紹介画像のalt属性を1枚ずつ手入力する時間が取れず放置している担当者を支援してください。
【画像を受け取ったら最初に確認すること】
- 添付された画像が「前提情報」の各画像の用途の件数と一致しているか(枚数が合わない場合は先に指摘する)
- 何のスクリーンショット・画像か(商品写真か、管理画面のキャプチャ等か)が前提情報から読み取れるか
- 画像内に顔・名札・車のナンバー・住所や電話番号が書かれた書類など、個人情報と思われるものが写っていないか(写っている場合は本文で言及せず「要個人情報確認」と明記する)
# 前提情報
- 業種・商品ジャンル: 【業種・商品ジャンル】
- 各画像の用途: 【商品名やページURLなど、画像ごとの用途を箇条書きで】
- 添付画像の枚数: 【枚数】
# 出力してほしいこと(画像ごとに)
1. その画像が「装飾目的(背景・区切り線・アイコン等で情報を持たない)」か「意味のある画像(商品写真・図解・グラフ等で内容を伝える)」かを判定する
2. 装飾目的と判定した場合は `alt=""` を提案する
3. 意味のある画像と判定した場合は、以下の条件を満たすalt文を1〜2案提案する
- 40〜125文字程度で、画像に写っている内容を具体的に説明する
- 「画像」「写真」などの冗長な単語を含めない
- 商品名・型番・色・素材など画像から読み取れる固有の情報を優先する
4. 判定に自信が持てない画像は「要目視確認」と明記する
5. 個人情報と思われるものが写り込んでいる画像は「要個人情報確認」と明記し、alt案にその内容を含めない
# 出力形式
画像ごとに「画像No/判定/alt案/確認事項」を表形式でまとめてください。
出力例(形式の参考。内容はそのまま使わないこと):
| 画像No | 判定 | alt案 | 確認事項 |
|---|---|---|---|
| 1 | 意味のある画像 | 〇〇色の△△を正面から撮影した商品写真 | なし |
【品質ガード】
- 添付されていない画像の内容を推測で創作しないでください。
- alt案は画像に実際に写っている内容の範囲にとどめ、写真から読み取れない評価表現(「最高級」等)を含めないでください。実行手順
- 対象ページの画像を、上記「画像をAIに渡す前の準備」に沿ってスクリーンショットまたは元画像ファイルとして準備する
- 業種・各画像の用途をプロンプトの【】部分に記入する
- 画像とプロンプトを一緒にAIへ送信する
- 出力された表を確認し、「装飾目的」と判定された画像は本当に情報を持たないか目視で再確認する
- 「意味のある画像」のalt案を、実際のHTML・CMSのalt属性欄に反映する
結果の読み解き方
- alt案が画像の内容と一致しているか(誤認識していないか)を必ず目視で照合する。特に文字が書かれた画像(図解・スクリーンショット)は読み取り漏れが起きやすい
- 「装飾目的」判定が多すぎる場合、商品写真まで装飾扱いにしていないか確認する。逆に少なすぎる場合、本当に情報を持たない画像にまで長いalt文をつけようとしていないか確認する
- 同じ商品を複数アングルで撮った画像に、ほぼ同じalt文が並んでいないか確認する。並んでいる場合はアングルの違いが分かる表現に手直しする
注意点
- AIは画像の内容を誤認識することがあります。特に細かい文字・ロゴ・色味の判定は間違えやすいため、生成されたalt文をそのまま貼り付けず、必ず元画像と照合してから使用してください
- 装飾画像に
alt=""を設定する対応は、スクリーンリーダー利用者への配慮というアクセシビリティの原則が先にあり、AIO目的だけで判断しないようにしてください - 同じ画像を再度AIに渡しても、実行のたびに提案文言が変わります。1回の出力で確定せず、重要な商品ページは複数回試して比較してください
関連レッスン・関連パターン
- III-D7 アクセシビリティとAIOの関係
- 関連パターン: PR-227(図解・インフォグラフィックのテキスト化)
確認テスト
選択肢をクリックすると、その場で正誤と解説が表示されます。
Q1. 装飾目的の画像にalt=""を設定する対応は、スクリーンリーダー利用者への配慮というアクセシビリティの原則が先にあり、AIO目的だけで判断すべきではない。
装飾画像にalt=""を設定する対応は、アクセシビリティの原則が先にあり、AIO目的だけで判断しないよう注意喚起されている。
Q2. 画像をAIに渡す前の準備として推奨されていることはどれか。
画像1点につき1枚、対象の商品・図版だけが写るようにトリミングするよう指示されている。
Q3. alt文の文字数の目安として指示されているのはどれか。
意味のある画像と判定した場合は40〜125文字程度で画像に写っている内容を具体的に説明するalt文を提案するよう指示されている。
よくある質問
Q. 商品画像に人物が写っている場合、送信前に確認すべきことは何か。
顔・名札・車のナンバー・住所や電話番号が写った書類等が写っていないか確認し、必要であれば黒塗り・モザイクで隠す。
Q. 「装飾目的」判定が多すぎる場合、何を確認すべきか。
商品写真まで装飾扱いにしていないかを確認する。
Q. 同じ商品を複数アングルで撮った画像に同じようなalt文が並んだ場合どうすべきか。
アングルの違いが分かる表現に手直しする。