商品画像の代替テキストの書き方：メイン・色違い・詳細・使用シーン

商品ギャラリーの各画像が伝える違いを、代替テキストに反映する方法を解説。架空の画像条件に基づく記述例に加え、図表や操作用画像の扱い、自社 CMS での入力と公開ページの確認方法を紹介します。

2026-10-29 · 2026-10-29

ひとつの商品に画像が4枚あるからといって、商品名を4回繰り返す必要はありません。メイン画像は商品の全体像を、色違い画像はバリエーションを、接写は構造を、使用シーン画像は置き方や使われ方を伝えます。商品画像の代替テキスト、英語でいう product image alt text でも、その違いを残すことが大切です。

代替テキストは、ウェブページ上の画像の情報や機能を文字で伝えるものです。商品説明を丸ごと入れる欄ではありません。Shopify の解説でも、画像の役割とページ内の文脈に合わせて書くことが重視されています。

ギャラリーの各画像に、異なる役割を持たせる

まず画像を一組として見てください。「この1枚が見られなかったら、購入者は何を知る機会を失うか」と考えると、形容詞を変えるだけでなく、その画像に必要な説明を見つけやすくなります。

以下は、架空の画像条件を設定したオリジナルの記述例です。提供された写真を確認した結果ではありません。実際の画像が左欄の条件に合う場合にのみ、右欄の説明が当てはまります。

メイン画像に撮影スタジオの細部まで書く必要はありません。使用シーンも、部屋にある物をすべて列挙するのではなく、商品の配置や見せ方を理解するために必要な情報を残します。別の画像で変わるのが角度だけなら、側面、背面、開口部など、実際に追加される視点を説明しましょう。文章を変えるために、画像にない違いを作ってはいけません。

「見えること」と「商品情報で分かること」を分ける

帆布のような織り目が見えても、写真だけで綿100％とは断定できません。光沢があるからといって、本革だとも限りません。詳細画像では、織り目、縫い目、開口部、輪郭など、確認できる特徴から書き始めます。

商品情報で確認済みの素材名は、正確な識別に役立つ場合があります。ただし、現在の SKU に対応しており、その画像の説明に必要であることが前提です。防水性、耐荷重、快適性、耐久性といった性能を、販促文に書かれているという理由だけで追加しないでください。通常の静止した商品写真だけでは、これらを実証できません。

色も現在のバリエーションに合わせます。商品データが「サンド」でも、表示画像がグリーンなら、ラベルをそのまま転記する前に画像と SKU の対応を直す必要があります。生成・編集した画像には最終的な公開画像に合う説明を付けますが、実物と異なる画像の問題は、正確な代替テキストだけでは解決しません。

長さは、必要な情報を伝えられるかで判断します。すべての画像で埋めるべき共通の文字数はありません。CMS の入力上限は技術上の制限であり、目標文字数ではありません。商品種別、色、型番は画像の識別に必要なときに自然に含め、無関係な検索語や「最安」「最高」といった表現は加えないようにします。正確な説明は画像の理解に役立ちますが、インデックス登録や順位を保証するものではありません。

商品の見た目を説明するだけでは足りない画像

サイズ表や図解では、情報全体を読めるようにします。 複数行の寸法データがある画像に「サイズ表」とだけ書いても不十分です。一方で、すべての数値を長い代替テキストに詰め込む必要もありません。例えば「トートバッグの寸法図。全寸法は下の表に記載」と説明し、実際に項目名、単位、全数値を含む読み取り可能なテキストの表を置きます。画像にしかない注記や制限も、文字版に残してください。

操作用画像では、動作や移動先を伝えます。 画像だけで構成されたリンクなら、「オリーブグリーンのトートバッグを見る」のように移動先が分かる説明にします。次の画像へ進む操作には、矢印の形ではなく「次の商品画像を表示」などの名前が必要です。同じリンクやボタン内に操作を説明する文字がある場合は、要素全体のアクセシブルな名前を確認し、重複した読み上げを避けます。

純粋な装飾画像は、意図的に読み飛ばせるようにします。 商品情報を伝えず、操作機能もない画像には、空の属性 alt="" を使えます。属性が空であることと、属性そのものがないことは別です。後者では「読み飛ばしてよい画像」という意図が明確になりません。画像枚数が多いというだけで、有用な別角度や接写を装飾扱いにしないでください。

この区別は、Shopify の説明用・操作用・空の代替テキストに関する解説でも確認できます。同じ画像でも、掲載場所で役割が変われば適切な説明も変わります。

自社の CMS で、正しい画像に説明を結び付ける

商品画像を書き出してアップロードしたら、利用している CMS のメディア詳細や代替テキスト欄を開きます。画面や項目名はシステムによって異なります。ファイル名、表示用キャプション、代替テキストを同じ項目だと考えないようにしてください。

まとめて更新する場合は、メディア ID またはファイル名、SKU、ギャラリー位置、説明文を対応させた作業用メモが役立ちます。これは顧客向けに公開する付録ではなく、グリーンの説明をベージュの画像に入れてしまうような取り違えを防ぐためのものです。並び替え後も、「何枚目か」だけでなく画像自体の識別情報で確認します。

保存後は実際の商品ページを開き、色を切り替えながらギャラリーを確認してください。必要に応じて、出力された alt 属性も調べます。入力欄を空にすると空属性になるのか、属性が欠落するのか、テーマが別の文言を自動で入れるのか。管理画面で正しく入力できても、すべての表示箇所で正しく使われるとは限りません。

最後に、近くの見出し、リンク文、画像の説明を続けて読み、可能ならスクリーンリーダーでも確認します。商品と画像の違いが分かり、操作結果を予測でき、長い商品名が何度も繰り返されない状態を目指しましょう。完成させるのは入力済みの欄ではなく、公開ページで役立つ文字の代替です。