商品画像のAltテキスト戦略：SEOとECアクセシビリティを両立する実装ガイド

商品画像のAltテキストは、SEOとアクセシビリティの両方に直結する要素です。とはいえ現場では「何を書けばいいかわからない」「全部に入れる時間がない」と後回しになりがちです。結論としては、すべての画像に完璧なAltを書く必要はありませんが、「商品を選ぶ判断材料になる画像」だけでも、短く具体的なAltを入れるだけで検索流入とユーザー体験の両方を改善できます。今日から実装できるルールを決めて運用することが重要です。

ここでは、Shopifyストア運営者が現場で回せるレベルに絞って、どの画像にAltを付けるべきか、何を書けばよいか、NG例とOK例、そしてShopifyでの設定方法までを整理します。最後にRecoBoostを使う場合の活用ポイントも一段落で紹介します。

なぜAltテキストが重要なのか：SEOとアクセシビリティの役割

Altテキスト（代替テキスト）は、本来「画像が見えない状況で、その内容を文字で伝える」ためのものです。視覚に障害のあるユーザーはスクリーンリーダーでAltテキストを読み上げて商品情報を得ますし、通信環境が悪く画像が表示されない場合もAltがテキストとして表示されます。ECアクセシビリティの観点では、商品選びに関わる画像にAltがないと、そもそも商品比較ができない状態になってしまいます。

検索エンジンも画像の中身を完全には理解できないため、Altテキストを手がかりに「この画像は何の商品か」を判断します。Googleは公式ガイドラインで、画像検索の最適化として「画像と関連性の高い、簡潔でわかりやすいAltテキスト」を推奨しています。画像検索からの商品流入は業種によっては全体の数％〜10％程度になることもあり、特にアパレルやインテリアなど「見た目」が重要な商材では無視できません。

一方で、Altテキストはキーワード詰め込みの場所ではありません。Googleも、キーワードの羅列はスパムとして評価を下げる可能性があると明示しています。SEOとアクセシビリティの両立という観点では、「検索エンジンのため」ではなく「画像が見えないユーザーに、何の画像かを一文で説明する」という視点で書くことが最も安全で、結果的にSEOにもプラスになります。

どの画像にAltを書くべきか：優先順位の付け方

すべての画像にAltテキストを個別に書き込むのは現実的ではありません。特に商品点数が多いストアでは、運営コストが大きくなり、途中で更新が止まるリスクが高くなります。そこで、まずはAltを書くべき画像に優先順位をつけるのがおすすめです。

• 必須：商品詳細ページのメイン画像（ファーストビューの大きな商品画像）
• 重要：色・柄・ディテールが異なるバリエーション画像（色違い、背面、素材のアップなど）
• 余裕があれば：トップページやコレクションページのキービジュアル（特定商品を示している場合）
• 原則Altなし（空Alt推奨）：単なる装飾的なアイコンや背景画像、意味を持たない罫線・図形

例えばアパレル商品の場合、1商品あたり10枚の画像があっても、ユーザーが購入判断に使うのは「全体がわかる1〜3枚」と「ディテールがわかる2〜3枚」程度です。その5〜6枚にAltを書くルールに絞るだけでも、作業量を半分以下に抑えながら、SEOとアクセシビリティの効果はほぼカバーできます。

また、ロゴや飾りのアイコンなど、内容がページ本文で補われている純粋な装飾画像には、スクリーンリーダーで読み上げられないよう空のAlt（alt=""）を設定する考え方もあります。Shopifyのテーマによっては装飾画像にAltを設定できない場合もありますが、その場合はできる範囲で「商品情報に関わる画像を優先する」という運用方針をチーム内で共有しておくと混乱が減ります。

良いAltと悪いAlt：NG例とOK例で理解する

Altテキストでよくある失敗は「短すぎて情報が足りない」か「長すぎてキーワードだらけ」のどちらかです。実務上は、全角30〜50文字程度を目安に、一文で画像のポイントを説明する形にすると運用しやすくなります。

• NG例1：alt="Tシャツ, Tシャツ通販, メンズTシャツ"（キーワード羅列で内容がわからない）
• NG例2：alt="商品画像"（何の画像かわからない）
• NG例3：alt="画像: 白いTシャツの商品画像です。オンラインストアで販売中の人気商品で…"（冗長で「画像:」「商品画像です」は不要）
• OK例1：alt="メンズ白Tシャツを正面から写した画像。クルーネックと胸ポケット付き"
• OK例2：alt="ライトグレーのスウェットパンツの後ろ姿。ゴムウエストとバックポケット付き"
• OK例3：alt="オーク無垢材のダイニングテーブルとチェア3脚のセットをリビングに配置した様子"

ポイントは、実際に画像が見えない人に電話で説明するとしたらどう伝えるか、という発想で書くことです。「何の商品か」「どう写っているか」「購入判断に必要な情報は何か」を優先し、「画像」「写真」「〜の画像です」といった言葉は省いてかまいません。スマートフォンの画面読み上げ機能で実際にチェックしてみると、長すぎるAltがどれだけストレスになるか体感できます。

ShopifyでのAltテキスト設定と運用ルールづくり

Shopifyでは、管理画面から商品画像ごとにAltテキストを設定できます。商品管理画面で該当の商品を開き、画像をクリックすると「代替テキストを編集」という項目が表示されます。ここにAltテキストを入力し保存すれば、テーマが標準的な構造になっている限り、商品ページのimgタグにalt属性として反映されます。

ストア全体でAltを整備するには、場当たり的に書き足すのではなく、あらかじめ簡単なルールとテンプレートを決めておくと効率が上がります。おすすめは「商品タイプごとの型」を用意する方法です。例えば次のような形です。

• アパレル（メイン画像）：【ターゲット＋アイテム＋色＋特徴＋写し方】
  例：alt="レディースの黒いマキシワンピース。Vネックとウエストリボンが正面から見える画像"
• 家具（メイン画像）：【素材＋アイテム＋サイズ感＋設置シーン】
  例：alt="ウォールナット材のローテーブルをソファ前に置いたリビングの全体イメージ"
• アクセサリー（ディテール）：【アイテム＋材質＋デザインの細部＋角度】
  例：alt="シルバーの細いリングのアップ。表面に小さなねじり模様が入ったデザイン"

このようなテンプレートをGoogleスプレッドシートなどで共有しておくと、担当者が変わってもクオリティを揃えやすくなります。また、商品マスタの項目名やタグをそのままAltにコピペするのではなく、「実際の見え方」を補足する言葉（正面／側面／着用イメージ／使用シーンなど）を足すことで、画像検索とアクセシビリティのどちらにも有効なテキストになります。

ECアクセシビリティの観点で押さえておきたいポイント

Altテキストはアクセシビリティ対応の一部に過ぎませんが、商品画像に関しては影響範囲が大きい要素です。特に、色やデザインの違いで商品を選ぶストアでは、バリエーション画像のAltを整備しておくかどうかで、利用できるユーザー層が大きく変わります。

例えば、カラーバリエーションをサムネイル画像のみで切り替えるUIの場合、Altが「赤」「青」だけだと、どの商品（シャツなのかパンツなのか）が変わるのかがわかりません。「メンズシャツの赤色」「メンズシャツの青色」とするだけでも、スクリーンリーダー利用者にとっての理解度が大きく変わります。また、セールバッジなどが画像に埋め込まれている場合、Altに「セール」「30％オフ」などの情報を入れておかないと、視覚情報だけに頼る形になってしまいます。

運営チーム内で「Altテキストは、画像だけに含まれている重要情報をテキストでも必ず伝える」という方針を決めておくと判断しやすくなります。Shopifyテーマの構造やアプリによっては、ボタンやインタラクティブな画像にもAltやaria-labelが関係してくるため、アクセシビリティに関心の高いユーザーからのフィードバックがあった場合には、テーマ開発者や制作会社とも連携して改善を検討するとよいでしょう。

RecoBoostならこう活かす：レコメンド画像のAlt整備

RecoBoostを使っているストアでは、「おすすめ商品」や「関連商品」セクションにも商品画像が多く表示されます。ここでAltが抜けていると、せっかくのレコメンドが一部ユーザーには伝わりません。基本方針はシンプルで、RecoBoostのレコメンド枠でも「商品詳細ページのメイン画像と同じAltテキストを使う」ことです。Shopifyの商品画像にしっかりAltを入れておけば、RecoBoost側で同じ画像を呼び出した際にも、そのAltがそのまま活かされます。まずは商品ページのAlt戦略を整え、レコメンド枠には「商品ページと同じ画像・同じAltを使う」ことを意識するだけでも、SEOとアクセシビリティの両面でムダのない運用ができます。

Altテキストは、画像1枚ごとの小さな設定ですが、数百・数千の商品に積み上がるとストア全体の検索流入とアクセシビリティを支えるインフラになります。完璧を目指すより、「優先度の高い画像に、短く具体的なAltを書く」というルールを決め、運営チームで継続的に回していくことが現実的な最適解です。