商品写真の代替テキストをAIに任せると、何が伝わらなくなる？見た目・購入判断・操作を分ける方法

内容確認：2026年10月15日。実際の公開日：2026-10-15。

商品写真の代替テキストをAIへ丸ごと任せると、その画像を掲載する目的、商品を区別する特徴、押したときの行き先が抜ける一方、材質や性能など写真だけでは分からないことが追加されるおそれがあります。写真の下書き説明を作る補助には使えますが、最終的な説明はページの文脈と確認済みの仕様へ照合します。

「青いボトル」という文章が、あるページでは十分な手掛かりになり、別のページでは足りないことがあります。商品一覧で隣にも青いボトルが並ぶなら区別できません。注ぎ口の形を見せる写真なら、その特徴が消えています。画像だけのリンクなら、何を開くのかが分からないかもしれません。

代替テキストは、写真に写るものをすべて列挙する文章でも、商品仕様を全部入れる欄でもありません。画像がその場所で伝える情報や機能を、画像を見ない状況でも受け取れるようにする文章です。AIの画像説明をそのまま貼る前に、何の代わりを用意しているかを考えます。

この記事の商品の名称、仕様、写真の構図、AI風の文例、読者の会話はすべて説明用の架空設定です。実際の商品写真をAIへ読ませた実験、支援技術利用者への取材、売上や識別率の測定結果ではありません。写真を定義した文章をもとに、適切な説明の考え方を比べます。

内容確認日：2026年10月15日。

代替テキストは、誰のどんな問いに答える文章ですか？

商品写真を見る人は、同じ画像から別の情報を得ます。外観を知りたい人、違う商品と比べたい人、詳細ページを開きたい人、使い方を確かめたい人です。画像を見ない状況でも、その場所で必要な情報や機能にたどれるかを考えます。

W3CのImages Tutorialは、画像の用途、文脈、内容に応じて代替テキストを決めることを説明しています。説明は作成者が掲載目的から判断します。画像単体の自動認識だけでは、ページ上での役割まで決まりません。W3C WAI：Images Tutorial

「何が写るか」と「何が分かる必要があるか」は違う

写真に、商品、机、花、小皿、背景の壁が写っているとします。商品詳細のページで伝えたいのが持ち手の形なら、背景の花を詳しく書く必要はないかもしれません。反対に、セット販売の内容を示す写真なら、小皿が付属品か撮影小物かを区別する必要があります。

AIが見える物を正しく列挙しても、購入者の問いに答えられているとは限りません。「商品に含まれるか」「どのタイプか」「何を示す写真か」は、写真以外の文脈も必要です。

三つの問いを分ける

この表はこの記事の編集上の整理です。商品仕様を代替テキストだけへ隠すことを勧めるものではありません。容量、材質、使える環境、付属品などの購入判断に必要な情報は、画像を見る人にも見ない人にも読める本文へ置きます。

読み上げだけを想像しすぎない

代替テキストは、音声で読む状況だけに関係するものではありません。画像の情報を文字として扱えることが大切です。本文の情報も、見出しや表、操作の名前を含めて受け取れる形にします。

W3CのWCAG 2.2達成基準1.1.1の解説は、非テキスト情報に同等の目的を果たす代替を用意する趣旨を説明しています。解説資料は、達成基準を理解するための説明です。本記事の文例を使っただけでサイト全体が基準に適合するとは言えません。W3C：Understanding SC 1.1.1 Non-text Content

架空の商品を、三枚の写真で説明してみる

架空の小さな雑貨店で、「青い持ち手付きボトル」を紹介するとします。実物の商品や写真はありません。どの情報がどの材料から言えるかを比べるため、商品仕様と写真の構図を先に定義します。

説明用の仕様メモ

架空商品名：持ち手付きボトル・青
色：青
公称容量：500mLという架空設定
本体：金属製という架空設定
ふた：持ち手付きのねじ式ふたという架空設定
販売単位：ボトル本体とふたの一組
付属しないもの：撮影用の小皿、布、花
未設定：保温・保冷性能、食洗機可否、重量、保証条件

容量や材質は写真から読んだ結果ではありません。この架空設定で商品仕様として与えた情報です。未設定の性能を、写真がそれらしく見えることから補いません。

三枚の構図メモ

ここでは、構図メモを見た目の事実として扱う練習をします。実際には、撮影した画像を人が見て、仕様と合っているかを確認する段階が必要です。

三枚へ同じ説明を入れると、何が消えるか

すべての画像へ「持ち手付きボトル・青」と入れると、商品名は分かります。しかし、P2で口の形を見せる目的、P3が付属品の紹介ではないことが説明できていません。単に写真の枚数が分かるだけになりやすいものです。

一方、すべてへ仕様を詰め込むと、商品名、容量、材質が繰り返され、画像ごとの情報を探しにくくなることがあります。三枚の画像で何が違うかを先に決め、既に本文にある仕様と、写真で追加する情報を分けます。

AI風の説明を、どこから疑えばよいですか？

次は、問題を示すために人が作ったAI風の説明です。実際のAIの出力ではありません。

高級ステンレス製の軽量な保温ボトル。清潔でおしゃれな青色のデザインで、500mLの飲み物を長時間冷たく保ちます。付属の小皿と一緒に毎日の暮らしを豊かにします。

自然な販売文に見えますが、この架空仕様から言えない内容が混ざっています。「高級」「軽量」「保温」「長時間冷たく」「付属の小皿」は根拠がありません。「清潔」も、外観だけから衛生状態を確認した表現としては使えません。

語句ごとに材料へ戻す

「全部間違っている」と一括で捨てるより、見た目、仕様、主観、推測へ分けます。使える情報を残し、根拠のない情報を消し、置くべき場所へ移します。

推測を弱い言い方にしても、根拠は増えない

「軽量そう」「保温できそう」と変えると、断定は弱まります。しかし、購入者が性能の手掛かりとして受け取る可能性は残ります。代替テキストで写真の代わりに伝える必要がある情報なのかを先に確認します。

光の反射があるから金属の特定素材、厚そうだから丈夫、ふたがあるから漏れない、といった推測は避けます。見た目にある形や位置と、仕様の性能を区別します。

写真にない「使い心地」を追加しない

「持ちやすい」「手に馴染む」「安心して使える」は、外観だけでは確かめられません。販売文の主張として扱う場合も、何を根拠に言えるかを別に確認します。

本記事は、商品の広告表現の法的判断をするものではありません。ここでは代替テキストへ、見た目の説明と根拠のない評価を混ぜない編集を扱います。

同じ写真でも、掲載場所で代替テキストは変わりますか？

変わります。画像がページへ加える情報や機能が違うからです。一つの画像ファイルへ一つの説明を永久に固定するより、掲載する場所と周囲の文章を確認します。

W3CのInformative Imagesは、代替テキストで伝える意味は画像の逐語的な描写と同じとは限らず、画像を情報として扱うかどうかは掲載理由によって判断すると説明しています。W3C WAI：Informative Images

商品一覧で、画像だけがリンクになっている場合

画像を押すと商品詳細へ進むのに、リンクの中には画像しかないとします。代替テキストは、何の商品についてどこへ進むかを分かるようにします。

この架空例なら、「持ち手付きボトル・青の詳細」といった名前が候補です。写真の机や影を詳しく描写しても、リンクの目的を伝える役には立ちにくいものです。

W3CのFunctional Imagesは、リンクやボタンの画像では、見た目より、起こる操作や行き先を伝えることを説明しています。画像だけか、同じリンクの中に文字もあるかで判断が変わります。W3C WAI：Functional Images

商品名の文字と画像が、同じリンクの中にある場合

同じリンクに「持ち手付きボトル・青」という文字があり、画像はそれ以上の情報を加えない設計なら、画像の代替テキストを空にすることが候補になります。リンクの名前は文字で分かります。

ただし、商品名が画像の横にあるだけで、実際には別のリンクになっている場合は同じ条件ではありません。「見た目で近い」と「同じ操作の中にある」を分けます。使う販売システムの構造で確かめます。

空にする判断は、商品写真を重要でないと決めることではありません。その場所で、既に文字が同等の役を果たし、画像が新しい情報を加えるかどうかの判断です。

商品詳細で、持ち手の形を伝える場合

P1を、商品名と仕様の下へ置き、持ち手を見せたいとします。説明案は「ふたの上に弧状の持ち手が付いた青いボトル」です。この架空の構図から言える特徴を残しています。

本文に同じ外観の説明が既に十分あるなら、重複する扱いを再検討できます。逆に本文に「持ち手あり」としかない場合、形を購入者が比較するために写真を使っているなら、画像の情報を伝える必要があります。

開口部の写真で、構造を補う場合

P2の説明案は、「ふたを外したボトルと、持ち手付きのふたを並べた状態」です。口の細かな形を実際の写真で見せたいなら、その特徴を人が確認して追加します。

ここでは画像が存在しないため、「口径は何mm」「片手で洗える」などの値や使い心地は追加できません。構造が見えることと、実際に使えるかは別です。

雰囲気だけの背景として使う場合

P3を、既に商品情報があるページの雰囲気用背景として置き、画像から新しい情報を伝えない場合は、装飾として扱う候補です。その判断は掲載者が目的と周囲の本文で決めます。

同じP3でも「付属品の一覧」として見せるなら、装飾ではありません。そもそも小皿が付属しない設定なので、写真の見せ方と本文を直す必要があります。代替テキストだけで、見える人が受ける誤解を帳消しにはできません。

空のaltと、説明の入れ忘れはどう違いますか？

HTMLの画像に alt="" を指定することと、alt属性を付けないことは同じではありません。この記事は実装を詳しく教える記事ではありませんが、販売システムで「空欄」を選んだときの結果に関係する違いです。

W3CのDecorative Imagesは、情報を加えない装飾画像で空のaltを使うこと、alt属性を省略すると一部のスクリーンリーダーではファイル名などが通知される場合があることを説明しています。W3C WAI：Decorative Images

架空のHTML例

次は役割の違いを示すだけの独自例です。実際の販売システムの生成HTMLを確認した例ではありません。

<!-- 情報を伝える画像 -->
<img src="bottle-front.jpg" alt="ふたの上に弧状の持ち手が付いた青いボトル">

<!-- 同じリンクの文字で目的が分かり、画像が情報を追加しない設計 -->
<a href="/products/example-bottle/">
  <img src="bottle-front.jpg" alt="">
  <span>持ち手付きボトル・青</span>
</a>

<!-- 画像だけのリンク -->
<a href="/products/example-bottle/">
  <img src="bottle-front.jpg" alt="持ち手付きボトル・青の詳細">
</a>

ここで示すURLは説明用です。実際の購入先ではありません。同じ画像でも、役割が違えば代替テキストの扱いを変えています。

販売システムの「空欄」がどう出力されるかを確認する

管理画面で説明欄を空にすると、空のaltになるのか、alt属性が省略されるのか、商品名が自動入力されるのかはシステムによって違います。欄の見た目だけでは決まりません。

設定の説明や生成されたページで確かめます。公開前に確認できるプレビューや練習用ページがあるなら、その環境で行います。「入力欄を空にしたので装飾扱いにできた」とは、確認前に言えません。

情報の欠落を、空のaltで隠さない

何を書けばよいか分からないから空にするのは、装飾の判断とは違います。商品識別、写真ごとの特徴、操作の目的が画像にしかないなら、代わりの情報が必要です。

とくに、色の違いだけで商品を選ぶボタンや、写真だけで付属品の違いを示す場合は、画像を無視しても必要な情報を受け取れるかを点検します。空のaltを入れるだけでは、購入の操作全体を解決したことになりません。

写真から言えることと、仕様から言えることをどう分けますか？

AIへ写真を渡す前に、根拠を三つの置き場へ分けます。見た目の情報、確認済みの仕様、まだ分からないことです。下書きの一文ごとに、どこから来たかを記録できると確認しやすくなります。

写真の情報

色、形、配置、写っている部分、前後の関係などが候補です。ただし、撮影条件や画像処理で色が変わることもあり、写真だけで正式な色名を決めないようにします。商品の色名が「青」なら、その名称を仕様から確認します。

「写真では持ち手がある」「構図メモではふたが外れている」という観察と、「この商品は持ち手付きとして販売する」という仕様も別です。別モデルの写真を誤って使った可能性があるなら、画像と商品IDの対応を確認します。

仕様の情報

容量、寸法、重量、材質、対応条件、付属品、取扱方法などは、確認済みの商品の一次資料へ戻ります。自社の商品なら、自社の確定した仕様です。仕入れ品なら、メーカーや取引先の正式な仕様を確認します。

商品が変わったり型番が違ったりすると、同じような写真でも仕様が違う場合があります。URLだけでなく商品ID、版、確認日を残す方法があります。AIが似た別の商品から値を補わないよう、使ってよい材料を限定します。

未確認の情報

未確認は、AIに埋めさせる空欄ではありません。「写真の説明には入れない」「必要な購入条件なら担当者へ確認する」という次の作業につなぐ状態です。

本記事の架空ボトルでは、保温・保冷性能、食洗機可否、重量は未設定です。AIが自然な文章にするために補っても、その文は採用しません。商品仕様がないことと、性能がないことも同じではありません。「保温しない」と反対の断定へ変えないでください。

根拠表を作る

写真の中へ商品仕様を描き込んである場合も、画像以外に読める文字として重要な情報を置く方法を考えます。AIに画像内の細かい文字を読ませた場合は、読み取り内容を一次仕様と照合します。

AIへの依頼は、どの順番で作ると確認しやすいですか？

一度に完成したaltを作らせるより、観察、役割、候補、照合を分ける方法があります。次の文はこの記事で作った例で、実際のモデルの出力を保証しません。

依頼1：写真の観察だけを整理する

商品写真の説明の下書きを準備します。
まず、画像に見える特徴だけを短く整理してください。
見えること、読み取れないこと、推測になりそうなことを分けます。
材質、容量、重量、性能、付属品は写真だけから確定しません。
写真に文字があれば読み取り候補を出し、未確認と示します。
この段階では販売文や代替テキストの完成稿を作りません。

実画像を使う場合に、画像がAIへ正しく届いていることも確認します。画像がない状態で、ファイル名だけから見た目を作らせないようにします。本記事の練習では構図メモを使うため、「写真の観察を実施した」とは記録しません。

依頼2：ページの文脈を渡す

この写真は、商品詳細ページでふたの持ち手の形を伝えるために置きます。
直前の本文：商品名、青という色名、公称容量の説明。
直後の本文：商品仕様表。
写真はリンクやボタンではありません。
周囲の本文にある情報をすべて繰り返さず、
この写真が追加する見た目の情報を候補にしてください。
根拠がない材質や性能を追加しないでください。

「商品写真のaltを作って」だけでは、この情報がありません。文脈を渡す段階では、実際のページと同じ文章、機能、順序を確認します。AIがページ構造を推測した文脈を、正式なものにしません。

依頼3：候補と理由を出す

代替テキストの候補を二つ出してください。
各候補について、残した特徴、省いた情報、省いた理由を書いてください。
文章に含めた内容が「画像」「商品仕様」「ページ機能」のどれを根拠にするか示します。
仕様に未設定の事項は、候補へ入れません。
空のaltが適切と判断する場合は、同じ情報が周囲にある場所を示してください。

短い方を自動で採用しません。長い方が詳しいから良いとも限りません。必要な特徴が残り、ページの情報と矛盾せず、画像ごとの役割に合っているかを見ます。

依頼4：下書きを監査する

この下書きを画像の構図、商品仕様、掲載場所へ照合してください。
未根拠の属性、仕様との矛盾、リンク目的の欠落、不要な繰り返しを列挙します。
指摘には該当する語句と根拠を付けてください。
確認できないことを反対の断定へ変えないでください。
元の画像やページにない事実は追加しません。

同じAIに監査させても、同じ思い込みを繰り返す可能性があります。最後は人が画像と仕様、ページの実際の機能へ戻ります。AIの自己点検は、外部の根拠確認の代わりではありません。

三枚の説明案を、どう書き直せばよいですか？

次の比較は、架空の写真構図に対して人が作った説明案です。読みやすさや識別の成功率を実際に測ったものではありません。

P3の修正を一つへ決めないのは、掲載場所がまだ固定されていないからです。雰囲気用の背景なら空のaltが候補。使用場面を情報として見せるなら、その場面の説明を考えます。付属品が誤解されそうなら、見える本文にも「小皿は撮影小物です」と明記する方法を検討します。

P1で商品名を繰り返す必要があるか

商品名が直前に一度あるから、必ず省いてよいとは限りません。画像だけをたどる場合や、複数商品の比較に使う場合の文脈もあります。一方、同じ商品名を三枚すべてへ長く入れると、特徴の違いを探しにくくなることもあります。

このページで、画像の位置と周囲の文章から商品の対応が分かるかを確認します。必要なら名称を短く添えます。名称を省くかどうかを、一律の文字数で決めません。

P2で「洗いやすさ」を伝えたいなら、写真以外の材料が必要

店側が洗いやすさを伝えたくて口の写真を撮っても、口が写っているだけで実際の洗浄のしやすさを確認したことにはなりません。正式な取扱方法や実際の使い方の確認が必要です。

画像の説明には見える構造を残し、使い方や条件は本文に置きます。写真の説明を販売文へ変えると、観察したことと主張することが混ざります。

P3は、写真そのものの編集も候補になる

小皿を目立たせた構図が、販売セットに見える場合。代替テキストの修正だけでなく、撮影小物を減らす、販売内容を別の写真で明示する、本文に付属品を一覧にする方法もあります。

画像を見る人が誤解し、見ない人には正しい説明をする状態より、双方へ同じ販売内容を伝える設計を目指します。代替テキストの仕事を、画像の誤解を全部補修する役へ広げすぎないようにします。

色違い、サイズ違い、セット商品では何を点検しますか？

同じ商品を複数の写真で見せるだけでなく、似た商品を並べる場合は、区別の手掛かりが必要です。「ボトル」「シャツ」「セット」といった名前だけでは選べないことがあります。

色の正式名と、選択状態を分ける

写真の青が「ネイビー」という正式な色名の商品なら、色の選択肢ではその名称を使います。色の丸い見本だけで選ばせる場合、丸が何色の商品を選ぶ操作か、現在どれが選ばれているかを文字や実装でも伝える必要があります。

画像のaltへ「青い丸」と書いても、何を選ぶかは分かりにくいものです。写真の説明と、選択ボタンの名前と状態を分けて考えます。実装の具体的な方法は販売システムの仕様を確認します。

写真の大きさから、商品のサイズを推測しない

二つの商品を同じ大きさでトリミングした写真では、実寸が分かりません。手に持った写真でも、手の大きさを基準に正式な寸法を確定できません。

寸法は仕様として本文へ置きます。写真は「大きさを比較するため、二つを横に並べた」など、その構図で伝えたい関係を説明できます。写真に目盛りがある場合も、読み取りを実寸の一次資料へ照合します。

販売セットと撮影小物を区別する

セット商品では、どれが含まれるかを本文の一覧で示します。写真に袋、台、飾り、包装が写っていても、全部が付属するとは限りません。AIの画像認識だけで販売内容を決めさせないようにします。

画像の説明にも必要な情報を残しますが、数量と品目の確定情報は商品仕様に置きます。「写真のとおり」だけに依存すると、見え方や撮影の事情で誤解が生じやすくなります。

中古品や一点物は、その個体の情報へ戻す

中古品の傷や一点物の模様など、写真が個体の違いを示す場合は、一般の商品名だけでは足りないことがあります。どこにどんな状態があるかを人が確認し、本文にも状態の説明を残します。

AIが小さな傷を読み落としたり、反射を傷と取り違えたりする可能性があります。写真の質、角度、拡大で確認できる範囲を考え、見えない箇所の状態を推測しません。実際の商品の確認者が責任を持って判断します。

長い情報は、altへ全部入れるべきですか？

必要な情報を落とさないことと、長い説明を一つのaltへ詰めることは同じではありません。図、比較表、使い方、複雑な商品の構造は、本文で詳しく説明する方法もあります。

W3CのComplex Imagesは、複雑な情報を伝える画像について、短い説明と詳しい説明を組み合わせる方法を扱っています。重要な内容を画像だけに残さず、読める形で届けるための考え方です。W3C WAI：Complex Images

短い入口と、長い本文を分ける

たとえば、三つのサイズを比較する図に、寸法、用途、価格が描かれているとします。短い説明で「三サイズの比較図」と識別し、本文の表で各サイズの寸法と条件を読めるようにします。

短い入口だけで情報を消すのでも、すべての値をaltへ押し込むのでもありません。図を見た人が得る重要な関係を、本文の比較にも残します。「詳しくは画像」とだけ書くと、代わりの情報になりません。

購入に必要な条件は、見える本文へ置く

容量、サイズ、注意事項、販売数量、付属品は、写真を見ている人にも必要な情報です。altへだけ入れ、普通の本文には出さない設計は、双方の情報を違わせる原因になります。

画像に入っている文章が本文にはない場合、まずその内容を読める文字へ移せるか考えます。W3CのImages of Textは、画像内の文字を使う場合の代替や、可能なら文字自体を使う考え方を説明しています。W3C WAI：Images of Text

detailsに入れる場合も、入口を分かるようにする

長い構造の補足や撮影の説明を折りたたむ場合、何が中にあるかを具体的に示します。「詳細」だけより、「ふたと本体の構造を文章で確認する」といった入口が分かりやすい候補です。

購入前に必ず読むべき条件を折りたたむかどうかは、別に判断します。読む人が見つけられるか、操作できるか、閉じた状態で重要な制限が分かるかを確認します。情報を短く見せるためだけに、必須条件を深い場所へ隠しません。

文字数の一律上限を作らない

「altは必ず何文字以内」という編集上の目安を設ける場合も、必要な情報を落とす理由にはしません。画像の目的が単純なら短く、複雑なら本文の補足へ分けます。

本記事では、すべての環境で同じ長さまで読まれるという数値を提示しません。支援技術や閲覧方法、実装で体験が変わるためです。使う環境で、必要な情報へたどれるかを確認します。

画像を見ない読者の確認は、どう計画しますか？

ここからは未実施の確認計画です。画像を隠して読む試行は、画像なしの情報の不足を見つける方法にはなりますが、視覚障害のある人やスクリーンリーダー利用者の体験を再現したことにはなりません。その違いを明記して行います。

比較の材料を揃える

自分の商品の写真を三枚選び、使用許諾と入力してよい範囲を確認します。写真ごとに、掲載場所、役割、周囲の本文、商品仕様、未確認事項を記録します。

人が作った説明とAIの下書きを、そのまま比較する前に、どちらも根拠のない性能を掲載しない状態へ点検します。実際の購入者に誤った商品情報を見せる必要はありません。練習用ページや架空商品で試せます。

比較する条件を明確にします。「AIか人か」だけでは、材料の量や作業時間が違っているかもしれません。同じ写真と仕様、同じ掲載目的、同じ確認基準を渡し、違いを記録します。

読者へ渡す問い

確認者は、自分が気づいたことを自由に伝えられるようにします。正解を当てる試験として扱わず、ページのどこで分からなくなったかを知るための試行にします。

協力者への説明と参加の範囲

実際の成人の協力者へ依頼する場合は、目的、内容、時間の目安、記録する情報、途中でやめられることを説明し、任意で参加してもらいます。本人の障害や生活事情を、必要もないのに詳しく尋ねる必要はありません。

支援技術を使う人へ確認を依頼するなら、本人が普段使う方法を尊重します。設定を勝手に変えず、本人の都合と参加条件を相談します。一人の結果を「この利用者層はこう感じる」と一般化しません。

この文章は参加の設計案です。実際の募集や聞き取りを行った記録ではありません。実施する際は、その範囲と結果を別に残します。

記録する内容

「識別できた率」を計算する場合は、対象数と問いを固定し、実施した記録だけで数えます。少数の確認は、その試行で分かった改善材料です。すべての商品や利用者での成功率にはしません。

順序による影響を考える

最初に手書き版を読んだ人が、次のAI版で商品を識別できても、前の説明を覚えていた影響かもしれません。順番を変える、別の写真を使う、同じ内容を続けて読ませないなど、比較条件を考えます。

厳密な研究を行うわけでなくても、何を比べて何が混ざったかは記録できます。良い結果だけを取り出さず、違いが分からなかった箇所も残します。

実装したページでは、何を確認すればよいですか？

文章の下書きが良くても、保存した内容がページへ反映されていなければ届きません。画像と文字の組み合わせ、リンクの名前、写真の切り替えを、実際のページで確認します。

管理画面の入力と、表示ページを照合する

どの商品へどの写真を登録し、どの説明が入ったかを記録します。保存後に別の写真へ流用されていないか、テンプレートが商品名で上書きしていないか、古い説明が残っていないかを見ます。

画像を差し替えたとき、代替テキストも自動で新しくなるとは限りません。旧モデルの持ち手の説明が、新モデルの写真へ残る場合も考えられます。本文、写真、仕様、説明の四つを一緒に更新します。

操作の名前と実際の動作を合わせる

「画像を拡大」と書いたリンクが商品詳細へ移動するなら、名前と動作が違います。「購入する」と説明した写真が単なる写真切り替えなら、同じ問題があります。

操作を実行する前に、何が起こるかが分かるかを確認します。購入を実際に完了して試す必要はありません。練習用環境で、操作の対象と行き先を確かめます。

写真一覧の順序と、選択を確かめる

三枚の写真を切り替える画面なら、「正面」「ふたを外した状態」「使用場面」などの違いが分かるかを見ます。「画像1」「画像2」だけでは、選ぶ理由が分からない場合があります。

番号は順序を知らせる材料になりますが、内容を伝える代わりにはなりません。現在の選択や、拡大画面を閉じる操作についても、画像のaltだけでなく画面全体で確認します。

mobileで写真が切り抜かれる場合

PCでは持ち手が見えても、mobileでは切り抜かれて見えない場合、同じaltがその画像の情報を表しているかを考えます。別の画像を出すのか、同じ画像の一部を隠しているのかで確認の対象が違います。

購入者が比較するために必要な特徴なら、mobileでも写真と本文の両方から分かるようにします。見た目を整える都合で必要な部分が消えたまま、代替テキストだけに残す設計は再検討します。

コード確認と、利用の確認を分ける

altが存在することは、一つの確認です。その文章が役割に合うか、周囲で重複しすぎないか、操作が分かるかは別の確認です。自動検査で欄があることを確認できても、商品の意味や仕様の根拠まで分かったとは限りません。

静的な確認、実際の画面の操作、支援技術での確認を、それぞれ何を見たか分けて記録します。本文の説明だけから、実装済みサイトの適合を宣言しません。

SEO用の単語を、代替テキストへ増やしてもよいですか？

代替テキストには、画像の目的に必要な商品名や特徴を入れます。「人気」「おすすめ」「最安」「ランキング」など、画像の説明に不要な宣伝語を増やすと、伝えるべき情報が見つけにくくなる可能性があります。

本記事は、検索順位やAI回答への引用率を測る実験ではありません。代替テキストを整えれば売上や検索順位が上がると保証しません。読者が商品と操作を理解するための文章として評価します。

商品名は、必要な識別として使う

商品名を入れること自体が悪いわけではありません。画像だけのリンクなら、商品を識別する名称が必要になる場合があります。詳細ページの写真ごとに長い正式名称を繰り返すかは、文脈で判断します。

検索されそうな別商品の名称を入れたり、写真にない機能を加えたりしないようにします。自分の商品がどんなものかを正しく伝えることから始めます。

宣伝文は、読み手が判断できる場所へ置く

ブランドが伝えたい思いや、商品に込めた意図は、見える本文に書けます。外観の事実と主観的な評価を分けると、読み手もどの情報を判断材料にするか考えやすくなります。

「高級感のあるデザインを目指した」という制作意図と、「高級素材を使用した」という仕様の主張は違います。AIが両者を混ぜる場合、どちらの意味かを確認して編集します。

更新する商品写真を、どう管理するとよいですか？

小さな店でも、一枚の画像を複数の場所へ使うと、説明が食い違う場合があります。商品ID、画像ID、掲載場所、説明の版を短い一覧で管理する方法があります。

一枚の画像ではなく、掲載場所ごとの記録を持つ

この表も独自の管理案です。すべての店に同じ項目数を要求するものではありません。写真を変えたとき、何を見直すべきかを分かるようにするための記録です。

AIの下書きを、公開済みの文章と区別する

AIの候補、確認中、採用、掲載済みという状態を分けます。確認前の候補が、商品の一括更新で公開欄へ入らないようにします。

公開済みなら、どの文章をどこへ載せたかを残します。修正した場合は、その理由と対応する仕様を記録します。AIとの会話にだけ理由を残すより、商品管理の一覧へ要点を転記すると、次の担当者が確認しやすくなります。

写真の用途が変わったら、説明も変える

詳細ページの構造写真を、広告の背景へ使う場合。商品一覧の画像を、写真だけの拡大ボタンへ変える場合。役割が変わったら、同じaltをコピーしてよいか再確認します。

画像ファイルが同じことは、説明の役割が同じことを保証しません。サイトのリニューアルや販売システムの変更でも、周囲の文章と操作を見直します。

読み手と販売者の、架空の確認会話

次の会話は、画像に依存している情報を見つけるために作った架空例です。実際の利用者の発言や評価ではありません。

読み手：「青いボトルが二つあります。違いは何ですか。」

販売者：「一つは持ち手付きで、もう一つは持ち手なしです。一覧の文字には違いを書いていませんでした。」

読み手：「写真の説明が両方『青いボトル』なので、どちらの詳細を開くのか分かりません。」

販売者：「商品名とリンクの名前に、持ち手の違いを入れて確認します。」

読み手：「机の写真には小皿もあります。セットなのですか。」

販売者：「小皿は撮影小物です。販売内容を本文へ明記し、写真の見せ方も見直します。」

読み手：「AIの説明には、長く冷たいとありました。」

販売者：「その性能は確認していません。写真から補った文章なので削除し、仕様へ戻ります。」

この会話では、代替テキストだけでなく、商品名、販売内容、写真の配置、仕様の根拠まで見直しています。画像の説明が不足したとき、答えをaltの文字数だけで探さないための例です。

よくある質問

AIが作った画像説明を、そのままaltへ貼ってもよいですか？

画像説明は下書きとして使えます。掲載場所、周囲の本文、リンクやボタンの機能、商品仕様へ照合してから採用します。写真から言えない材質や性能、付属品を追加していないかも確認します。

商品写真は全部、詳しく説明した方がよいですか？

全部を同じ詳しさにする必要はありません。写真が伝える役割で決めます。構造や違いを示す写真には必要な特徴を残し、同じ情報が既に文字で十分ある装飾画像は空のaltが候補になります。

写真の背景や小物も書きますか？

そのページで伝える情報に関係するなら書く候補です。雰囲気用の背景なら、すべてを列挙する必要はないかもしれません。販売内容と誤解される小物は、見える本文でも付属しないことを明らかにする方法を考えます。

容量や材質をaltへ入れてはいけませんか？

一律に禁止ではありませんが、根拠と役割を確認します。購入判断に必要な仕様は見える本文にも置きます。写真から容量や素材を推測せず、確認済みの一次仕様に基づいて扱います。

空のaltは、アクセシビリティを下げるのですか？

情報を加えない装飾画像では、適切な方法になる場合があります。説明欄の入れ忘れや、情報を伝える画像の説明を消すこととは違います。空のaltと属性の省略も区別し、ページ上で何が出力されたかを確認します。

商品名の横に画像があれば、画像の説明は空でよいですか？

同じ情報が十分伝わり、画像が情報を追加しないかを見ます。画像と商品名が同じリンクの中にあるか、画像だけで別の操作ができるかでも判断が変わります。見た目の近さだけで決めません。

何文字にすると読み上げやすいですか？

すべての画像と環境に共通する一律の最適値は、この記事では提示しません。短い説明で必要な役割を果たせるか、長い情報を本文へ分けるかを判断します。実際の閲覧方法で、商品と操作を理解できるか確認します。

画像を隠して読めば、視覚障害のある人の体験が分かりますか？

画像なしで情報が不足する箇所を見つける補助にはなります。その人の生活や支援技術の使い方を再現したことにはなりません。実際の利用者へ確認する場合は任意の参加と普段の閲覧方法を尊重し、少数の結果を一般化しません。

この文章を採用すれば、WCAG適合になりますか？

この記事の文例だけでサイト全体の適合は確認できません。画像の目的、実装、操作、周囲の本文などを含めた確認が必要です。実施した確認の範囲と未実施の範囲を分けて記録します。

本文の三枚は、実際にAIで比較した写真ですか？

違います。商品と写真の構図を人が定義した架空例です。AI風の文例も人が作りました。読者確認の手順は未実施の計画です。実際の結果を記録するときは、商品、材料、実施日、条件を明示します。

最初の一枚は、写真の目的を一文にする

一枚の写真を選び、「この画像は、この場所で、読者へ何を伝えるために置いているか」を一文にします。商品名、仕様、周囲の文章、押したときの動作を確認し、写真が追加する情報だけを整理します。

AIには見た目の候補と文章案を出してもらい、人が根拠と役割へ照合します。材質や性能は一次仕様へ戻し、未確認を推測で埋めません。詳しい購入条件は本文にも置き、操作には目的が分かる名前を付けます。

良い代替テキストを考えると、商品写真が何のためにあるのかも見えてきます。写真を見ても見なくても、同じ商品について必要な情報へたどれるページを、一枚ずつ確かめていきます。