Shopifyの商品画像の代替テキスト:書き方と一括で修正する方法

2026年10月17日時点のShopifyヘルプセンターの内容に基づいて確認しています。

多くのShopifyカタログには、代替テキストのない商品画像が何百枚もあります。見落としやすい項目です。画像が見える買い物客は、代替テキストがないことに 気付かないからです。このガイドでは、代替テキストの目的、商品写真向けの書き方、そして何も壊さずにカタログ全体に入力する方法を 解説します。

代替テキストとは何か、何のためにあるのか

Shopifyは代替テキストを、「メディアアイテムを説明するテキストであり、商品説明の重要な一部」と説明しています。画像が読み込めない場合に表示され、 「支援技術が視覚障害のある顧客に画像を説明するためにも使用されます」 (Shopifyヘルプ:メディアに代替テキストを追加する)。

利用しているのは次のような人やサービスです。

  • スクリーンリーダーを使う買い物客。 これが主な理由です。代替テキストがないと、スクリーンリーダーは画像があることを伝えるか、 ファイル名を読み上げることしかできません。Webアクセシビリティの標準であるWCAGは、意味のある画像に代替テキストを求めています。
  • Google。 Googleは、代替テキストは「画像に関するメタデータを提供するうえで最も重要な属性」であり、 画像を理解するために代替テキストを「コンピュータビジョンのアルゴリズムやページのコンテンツとともに」使用していると述べています (Google検索セントラル:画像SEO)。
  • AIショッピングチャネル:おそらく言われているほどではありません。 AIプラットフォームが使用する商品情報としてShopifyが挙げているのは画像であり、代替 テキストそのものではありません(AIプラットフォーム向けに商品を最適化する)。また、 Agenticセクションのリスティング品質シグナルが評価するのは画像のカバー率です。代替テキストがChatGPTでのランキングに影響すると書かれた ShopifyやOpenAIのドキュメントは見つかっていません。代替テキストは人とGoogleのために書きましょう。AIへの効果はあくまでおまけであり、書く理由ではありません。

商品画像の代替テキストの書き方

Shopifyのアドバイスは「代替テキストは簡潔で説明的にしてください」です。上限は512文字ですが、「125文字以下が推奨されます」。

ほとんどの商品写真に使えるパターンは次のとおりです。

何の商品か + その画像ならではの特徴

  • メイン画像:分かりやすい言葉で書いた商品名と、目に見える主な属性(カラー、素材、スタイル)。
  • バリエーション画像:写っているバリエーションを書く(「フォレストグリーン」)。
  • 別アングル:そのビューで他の画像にない何が分かるかを書く(「ジップポケットが見える背面」)。
  • ライフスタイル写真:役立つ範囲でのみシーンを説明する(「街中でジーンズと合わせた着用例」)。

例:

画像不十分な例より良い例
メイン写真IMG_4432.jpgオーガニックコットン クルーネックTシャツ フォレストグリーン
2枚目のアングルTシャツオーガニックコットンTシャツ、ロゴプリント入りの背面
ディテール写真緑 Tシャツ 安い Tシャツ 最高 Tシャツ オーガニック TシャツTシャツのリブ襟とダブルステッチのクローズアップ
サイズ表の画像サイズ表サイズ表はページ上に実際のテキストで掲載しましょう。画像のままにする必要がある場合は、代替テキストに寸法を含めます。
装飾用の区切り線装飾空のままにする(テーマ画像のみ。下記参照)

どの場合にも当てはまるルール:

  • 「〜の画像」「〜の写真」で始めないでください。 スクリーンリーダーはすでに画像であることを伝えています。
  • キーワードを詰め込まないでください。 Googleが挙げている悪い例は犬に関するキーワードの羅列で、詰め込みは「ユーザーエクスペリエンスを損ない、 サイトがスパムと見なされる可能性がある」と警告しています。
  • 商品のすべての画像に同じテキストを繰り返さないでください。 5枚の画像がすべて「Voyager boot」だと、スクリーンリーダーの利用者は 2枚目から5枚目の画像から何も得られません。
  • 文字を含む画像: その文字が近くに実際のテキストとしても表示されていれば、繰り返す必要はありません。表示されていない場合は、その文字を代替テキストに含めます (W3Cの代替テキスト判断ツリー)。
  • 装飾用の画像で情報を何も加えないものは、alt属性を空にします。商品写真が装飾用であることはほとんどありません。

方法1:1枚ずつ入力する

デスクトップの場合(Shopifyヘルプ):

  1. 商品管理(Products)に移動し、商品を開きます。
  2. 画像をクリックしてメディアプレビューを開きます。
  3. 代替テキストを追加(Add alt text)をクリックし、テキストを入力して、代替テキストを保存(Save alt text)をクリックします。

Shopifyモバイルアプリでは、商品を開き、画像をタップし、情報(Information)をタップして、テキストを入力して保存します。売れ筋上位20商品にはこの方法で十分です。 これらの商品には、いずれにしても手書きのテキストを用意する価値があります。

方法2:Shopifyの代替テキストの提案

Shopifyのメディアエディターは、「まだ代替テキストがない画像に代替テキストを提案する場合があります」。Shopifyによると、提案は「画像の内容を説明するために AIを使用して生成されます」(Shopifyヘルプ:メディアエディター)。 提案を承認すると、ファイルに保存されます。それでも1枚ずつの作業であり、AIによる説明は目に見えるものを説明するため、 「緑のシャツを着た人」ではなく、実際の商品名とカラーが書かれているか確認しましょう。

方法3:CSVインポート(一括、無料)

Shopifyの一括編集ツールは画像の代替テキストに対応していませんが、商品CSVなら対応しています。Shopifyの代替テキストのページには「代替テキストはCSV ファイルでアップロードすることもできます」と書かれています(Shopifyヘルプ:CSVファイルを使用する)。

  1. 商品をCSVにエクスポートし、手を加えていないコピーをバックアップとして保存します。
  2. 各画像は独自の行にあり、画像ソースの列にURL、Image Alt Text列にテキストが入っています。空欄を埋めましょう。 スプレッドシートの数式を使えば、商品タイトルとバリエーションまたは画像の位置から最初の下書きを作成でき、その後手作業で改善できます。
  3. 同じハンドルを持つ商品を上書きする(Overwrite products with matching handles)にチェックを入れてインポートします。

注意してください。Shopifyによると、上書きする場合、必須ではない空欄のセルは既存の値を空欄で置き換えます。変更しない列を削除したり、 セルを空にしたりしないでください。また、Shopifyはインポート時に画像URLをダウンロードして再アップロードするため、まず3〜5 商品でテストし、画像とその順序が正しいことを確認してから残りをインポートしましょう。

方法4:アプリとAPI

  • 開発者は、Admin GraphQL APIの 0 mutationを使って代替テキストを設定できます。このmutationは「画像やその他のメディアの アクセシビリティ説明」を更新します。
  • アプリを使えば、同じことを管理画面内から行えます。開示:私たちのアプリSurfacedは、代替テキストのない商品画像を見つけ、 あなた自身のデータから入力します。商品タイトルに加えて、画像がバリエーションに属する場合はバリエーション名、追加画像の場合はビュー番号を使います。 あなたが書いた代替テキストを上書きすることはありません。各変更はプレビューでき、すべての変更が記録され、元に戻すこともできます。無料プランには月25件の修正が含まれます。

このようなテンプレートベースのテキストは一貫性があり正確ですが、あくまで出発点です。売れ筋商品については、各アングルに実際に何が写っているかを説明するよう 編集しましょう。

テーマ画像も忘れずに

テーマのバナー、スライドショー、コレクションの画像は、テーマエディターで別途設定します (Shopifyヘルプ:テーマ画像に代替テキストを追加する)。 文字が画像に埋め込まれたヒーローバナーは、よくあるアクセシビリティ上の抜け漏れです。メッセージを代替テキストに入れるか、さらに良いのは、画像の上に実際のテキストとして配置することです。

チェックリスト

  • すべての商品画像に125文字以下の代替テキストがある
  • バリエーション画像にバリエーション名(カラー、柄、素材)が書かれている
  • 「〜の画像」、キーワードの羅列、商品の画像間での同一テキストがない
  • 重要な文字を含む画像(サイズ表、成分表示など)は、その文字がページ上または代替テキストにある
  • 売れ筋上位20商品は、すべてのアングルに手書きの代替テキストがある
  • テーマのバナーとスライドショーの画像に代替テキストがある
  • カラーやスタイルのバリエーションごとに専用の画像がある(それがないと、AIアシスタントは「緑のもの」を表示できません)

代替テキストは、同時に整えておきたい商品項目の1つにすぎません。次は商品カテゴリーを一括で設定する(英語) とGTINバーコードを追加する(英語)に進みましょう。無料のAI対応度チェッカーを実行して、 代替テキストやその他の公開商品データを抜き打ちチェックできます。

出典