商品画像の代替テキスト：空白として読まれる6つのパターン

商品画像の代替テキストは、寸法図が静かに存在しなくなる場所です。写真は問題なく表示され、寸法は48ポイントの大きな文字でそこに書かれている。それでも人間の目以外の読み手——スクリーンリーダー、検索クローラー、AI回答エンジン——が受け取るのは空白だけです。

Baymard Instituteのeコマース・アクセシビリティ調査は、その頻度を数字で示しています。eコマースサイトの55%は情報を伝える画像の中心的な内容を代替テキストで伝えておらず、64%は文字を画像の中に直接埋め込み、9%は複雑な情報を画像のみで提示しています。家具・金物・建材を扱っているなら、最後の9%はほぼ確実にあなたです。サイズ表がJPEGだからです。

以下は実際の商品ギャラリーから拾った6つの代替テキストのパターンと、それぞれが失敗する理由、そして代わりに何を書くべきかです。

商品画像の代替テキストが実際に担う仕事

商品画像の代替テキストとは、画像のalt属性に入れるテキストによる代替情報です。スクリーンリーダーが画像の代わりに読み上げる文であり、画像を見ることができないあらゆるシステムが手にできる唯一の説明でもあります。

読み手は2種類いますが、多くの出品者は最初の1種類にしか手間をかけていません。

W3CのWeb Accessibility Initiativeは、根本の問題をはっきり述べています。文字が画像に焼き込まれている場合、「画像による文字表現ではなく、CSSでスタイル指定された実際のテキストを使うことが良い設計上の慣行」であり、画像化された文字がどうしても避けられない場合、テキストによる代替情報には画像内に表示されているのとまったく同じ文字が含まれていなければなりません。JPEGに印字された寸法は製品データではありません。製品データの写真であり、人間の目以外には何も読めません。

欧州では、ここに法的な線引きも加わりました。欧州アクセシビリティ法（European Accessibility Act）——指令（EU）2019/882——は第2条(2)(f)でeコマースサービスを対象サービスとして挙げており、加盟国は2025年6月28日から適用しています。第4条(5)によりサービスを提供する零細企業は適用除外で、零細企業は第3条(23)で従業員10人未満かつ年間売上高または年間貸借対照表合計が200万ユーロ以下と定義されています。この規模を超えていてEUの消費者に販売しているなら、サイズ表のJPEGはもはやコンバージョンだけの問題ではありません。

アンチパターン1：ファイル名

alt="IMG_4821.jpg"。alt="sofa-3-final-v2-USE-THIS"。alt="chair_dim_01"。

フォルダから画像を書き出し、誰もキャプションを書かないまま一括アップロードすると、こうなります。alt属性が欠けているページでは、多くのスクリーンリーダーがファイル名の読み上げにフォールバックします。顧客は「アイ・エム・ジー・アンダースコア・よん・はち・に・いち・ドット・ジェイ・ペグ」と聞かされ、そのまま離脱します。

直し方に工夫はいりません。その写真に写っている、その商品を説明する一文を書くだけです。

アンチパターン2：キーワードの詰め込み

alt="sofa couch settee 3 seater sofa cheap sofa modern sofa living room sofa buy sofa online"。

Google自身の画像ガイドラインはこれを名指しで指摘しています。代替テキストは「画像に関するメタデータを提供するうえで最も重要な属性」であり、そこに詰め込むことは「ユーザー体験を損ない、サイトがスパムと見なされる原因になり得る」。Googleが良い例として公開しているものは4語です。alt="Dalmatian puppy playing fetch"。

誰も触れないもう一つのコストもあります。スクリーンリーダーは利用者の読み上げ速度で文字列を最後まで読み、途中で飛ばし読みはできません。同じキーワードの9回の繰り返しは、商品について何も分からないまま過ぎる9秒間のノイズです。

正しい説明を1つだけ書いてください。本当に順位を取りたいキーワードは、その中に自然に一度だけ現れます。

アンチパターン3：画像としてしか存在しないサイズ表

これが最も損失の大きいパターンで、家具・アパレル・建材では標準的なやり方になっています。寸法表をまるごと1200pxのPNGに書き出し、ギャラリーに放り込む。

W3Cはこれを複雑な画像として扱い、2部構成のテキスト代替が必要だとしています。画像を識別して長い説明の場所を示す短い説明と、「画像が伝えている本質的な情報のテキストによる表現」である長い説明。しかも長い説明は隠すのではなく、誰もが利用できる形で置く必要があります。

実務では、この「誰もが利用できる形で」がすべての答えです。12項目の寸法をalt属性に押し込もうとしないでください。表はページ上に本物のHTMLテーブルとして掲載し、alt属性はそこを指し示すだけにします。

alt="Larsenソファシリーズのサイズ表。同じ寸法は下の表に記載しています"

そして、その下に表を置きます。コストはかかりません。マークアップされた表はインデックスされ、AI回答エンジンに引用でき、翻訳でき、スマートフォンでも崩れません。9ポイントの文字が並ぶ1200pxのPNGにはできないことばかりです。標準的なソファの寸法のような参照ページがテキストとして存在しているのは、まさにこのためです。スクロールしない買い手のために画像にも寸法を入れたいなら、両方残して構いません。画像と表は競合しません。表のない画像だけが問題です。

アンチパターン4：数字ではなく写真を説明してしまう

寸法図に対してalt="grey fabric sofa in a bright living room"と書く。

これは最も気づきにくい失敗です。文としては正確だからです。ある写真を説明してはいる。ただしこの写真を説明していません。この写真が存在する理由のすべては、商品説明にない5つの寸法を運んでいることにあります。

ほぼすべてのケースをカバーする2つのルールがあります。

• 画像の仕事が「見栄え」なら、見た目を説明する。
• 画像の仕事が「情報を運ぶこと」なら、代替テキストがその情報を運ぶ。数字、単位、そして各数字が何を測ったものかを書く。

つまずくのは、同じ商品に両方の画像がある場面です。同一のソファのメイン画像と寸法図には、まったく別の代替テキストが必要です。メイン画像のaltを寸法図に貼り付ければ、「置けるかどうか」に答えられるページ上で唯一の画像を捨てることになります。

アンチパターン5：装飾画像に長文の代替テキスト

背景のテクスチャ、区切りのグラフィック、A+モジュール上部のブランド装飾。そのすべてにalt="beautiful natural oak wood grain texture background"と書く人がいます。その結果、スクリーンリーダー利用者は本物の商品画像と商品画像のあいだで、毎回3文の風景描写を聞かされます。

装飾画像には空のalt属性——alt=""——を与えます。これは支援技術に「この画像を完全に飛ばす」と伝えるものです。属性そのものを省くのとは違います。省いた場合、画像はラベルのない未知の要素になり、結局読み上げられます。空と欠落はCMS上では見分けがつかないのに、挙動は正反対です。

一つだけ明示しておく価値のある判断があります。大きさ比較のカットは装飾ではありません。商品をA4用紙と並べて撮った写真は情報の仕事をしており、その代替テキストもそう書くべきです。

アンチパターン6：12枚の画像に代替テキスト1本

一括編集ツールのおかげで、これは驚くほど簡単に起きます。商品ページのすべての画像にalt="Larsen 3-seat sofa"が入り、スクリーンリーダー利用者は同じ5語を12回聞かされ、4枚目が寸法図で、7枚目が生地のクローズアップで、9枚目が梱包箱だとは永遠に分かりません。

並び順ではなく役割で書き分けてください。寸法が売りの商品を出品する方に渡しているテンプレートがこちらです。

60秒でできる点検

まずは売れ筋の商品ページ5件でこれを回してから、他に広げてください。

• 拡張子（.jpg、.png、.webp）を含むalt属性が1つもない
• 同じ商品ページ内に、まったく同じ代替テキストの画像が2枚以上ない
• すべての寸法図の代替テキストに、数字と単位が少なくとも1つずつ入っている
• すべてのサイズ表画像に、同じデータのHTMLテーブルが添えられている
• 装飾画像はalt=""になっており、属性の欠落でも説明文でもない
• 同じキーワードを2回以上繰り返しているalt属性がない
• 代替テキストが英語だけでなく、ストアフロントの言語で書かれている
• 代替テキストの寸法とスペック表の寸法が一致している——実際に確認してください。ずれていることがよくあります

最後の項目が見つけるエラーは、他のすべてを合わせたより多いはずです。数字はいったん画像に描き込まれた時点で、元のレコードとのつながりを失い、その後のスペック改訂のたびに間違ったまま残ります。同じ失敗はフィードでも起きます。同じ理由で空のままになる項目については商品寸法の構造化データで扱っています。

引用されることとの関係

検索エンジンがalt属性をインデックスするようになって20年になります。変わったのは、他に誰が読むようになったかです。「狭い部屋に合うソファの奥行き」といった回答を組み立てるAI回答エンジンは、あなたのJPEGを開けません。使えるのはHTML内のテキスト——商品説明、スペック表、alt属性——だけです。画像にしか描かれていない情報は、そこに存在していないのと同じです。

アクセシビリティ法とも、スクリーンリーダーとも切り離した実務的な理由はここにあります。テキストとして公開した寸法だけが、引用してもらえる寸法です。

よくある質問

商品画像の代替テキストはどのくらいの長さが適切ですか

画像が示す内容が伝わる長さで、ひと息で聞ける短さです。メイン画像なら通常5〜12語程度。寸法図はもっと長くなります。数字そのものが内容だからです。おおよそ2行を超えるようなら、その画像は複雑な画像であり、短いaltとページ本文として公開した完全なデータという2部構成の扱いが必要です。

代替テキストはSEOに効きますか

効きますが、引けるランキングのレバーではなく文脈としてです。Googleは代替テキストを画像に関するメタデータの最も重要な情報源だと説明する一方で、キーワードの詰め込みをスパム行為として明示しています。画像を見られない人のために書いてください。SEO上の効果は、それをきちんとやった副産物です。

サイズ表の画像にはどんな代替テキストを書けばよいですか

本物の表を指し示す短い識別文です。たとえば「Larsenソファシリーズのサイズ表。同じ寸法は下の表に記載しています」と書き、そのうえで実際に表をHTMLで公開します。寸法の一覧をまるごとalt属性に詰め込んでも、スクリーンリーダー利用者は追えず、クローラーも行として解析できません。

装飾用の商品画像にも代替テキストは必要ですか

空のalt属性alt=""が必要です。これは属性を省くのとは違います。空は支援技術に画像を飛ばすよう伝えます。欠落は画像を未知の要素にし、結局はファイル名で読み上げられます。

欧州アクセシビリティ法は自社のオンラインストアにも適用されますか

EUの消費者にeコマースサービスを提供していて、零細企業でないなら適用されます。eコマースサービスは指令（EU）2019/882の第2条(2)(f)に挙げられており、2025年6月28日から適用されています。第4条(5)の零細企業の適用除外は、従業員10人未満かつ年間売上高または年間貸借対照表合計が200万ユーロ以下のサービス提供者が対象です。執行や罰則は加盟国レベルで定められるため、詳細は各国の国内法化の内容を確認してください。

寸法ラベルが読まれる前に切れてしまうのはなぜですか

これは別の問題ですが、根は同じで、情報がピクセルの中にしか存在していないことにあります。モールのギャラリーは各自の比率でトリミングするため、端に置いたラベルは消えます。チャネルごとのセーフエリアのルールは商品画像のアスペクト比で扱っています。

参考資料

• Baymard Institute — 「情報を伝える」画像の中心的な内容を「ALT」テキストで伝える（55%のサイトができていない）
• W3C Web Accessibility Initiative — 画像チュートリアル：画像化された文字
• W3C Web Accessibility Initiative — 画像チュートリアル：複雑な画像
• W3C Web Accessibility Initiative — 画像チュートリアル：装飾画像
• Google Search Central — Google画像検索のベストプラクティス（代替テキストの指針を含む）
• EUR-Lex — 指令（EU）2019/882（欧州アクセシビリティ法）：第2条(2)(f)、第3条(23)、第4条(5)、第31条
• 欧州委員会 — 欧州アクセシビリティ法：対象となる製品とサービス

画像1枚ずつではなく、一度で直す

上の6つのアンチパターンは、帽子を替えた同じ失敗です。寸法が絵の中に描き込まれ、機械が読める場所にはどこにも書き留められなかった。これは代替テキストを書く習慣を良くするだけでは直りません。あなたが説明しようとしている数字は、そもそも写真の上に手で打ち込まれたもので、すでにスペックからずれ始めているからです。

長く持ちこたえるやり方は、寸法のレイヤーをアートワークではなくデータとして扱うことです。商品の実際の縁に合わせて計測し、目測ではなく実測の数字にする。注記レイヤーはJPEGに統合してしまわず、編集可能なまま生かしておく。そのうえで同じソースから2つを書き出す。チャネルごとの規定サイズに合わせた注記入り画像と、スペック表やalt属性にそのまま貼り付けられるテキストの寸法リストです。これが実測にもとづく注記ツールと、商品の隣にもっともらしい数字を描くAI画像生成との違いです。前者は何を測ったかを説明でき、後者はそれを創作しています。どうせ商品ページの素材を作り直すのであれば、数字を生きた状態にする場所としてはスペックシートが適しています。買い手も自社のカタログも、読むのはその1枚だからです。