Shopifyの商品画像の代替テキスト:書き方と一括で修正する方法
公開日
他の言 語: English · Deutsch · Français · Español · Português · Italiano · Nederlands
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ヘルプ):
- 商品管理(Products)に移動し、商品を開きます。
- 画像をクリックしてメディアプレビューを開きます。
- 代替テキストを追加(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ファイルを使用する)。
- 商品をCSVにエクスポートし、手を加えていないコピーをバックアップとして保存します。
- 各画像は独自の行にあり、画像ソースの列にURL、Image Alt Text列にテキストが入っています。空欄を埋めましょう。 スプレッドシートの数式を使えば、商品タイトルとバリエーションまたは画像の位置から最初の下書きを作成でき、その後手作業で改善できます。
- 同じハンドルを持つ商品を上書きする(Overwrite products with matching handles)にチェックを入れてインポートします。
注意してください。Shopifyによると、上書きする場合、必須ではない空欄のセルは既存の値を空欄で置き換えます。変更しない列を削除したり、 セルを空にしたりしないでください。また、Shopifyはインポート時に画像URLをダウンロードして再アップロードするため、まず3〜5 商品でテストし、画像とその順序が正しいことを確認してから残りをインポートしましょう。