アクセシビリティ：商品画像のAltテキストパターン
公開日 June 8, 2024
Altテキストとは何か、そしてなぜ重要なのか？
代替テキスト（または「altテキスト」）は、HTMLコードに埋め込まれた画像の書面による説明です。それには3つの重要な目的があります：
- アクセシビリティ： スクリーンリーダーは視覚障害のあるユーザーにaltテキストを読み上げ、画像の内容を理解できるようにします。
- SEO： Googleのような検索エンジンはaltテキストを使用して画像の内容を理解し、商品画像がGoogle画像検索でランク付けされるのに役立ちます。
- 壊れた画像： 画像の読み込みに失敗した場合、ブラウザは代わりにaltテキストを表示し、ユーザーにコンテキストを提供します。
eコマースサイトにとって、よく書かれたaltテキストは単なる技術的な要件ではなく、より良い顧客体験と高い検索可視性のためのツールです。
優れた商品Altテキストの構成要素
良いaltテキストは簡潔でありながら説明的です。視覚的に情報を得る人が画像から得るのと同じ情報を伝えるべきです。
従うべき簡単なパターンは次のとおりです： [商品名] - [ショットの種類] - [主要な詳細]
含めるべき主要な要素：
- 商品の特定： 商品が何であるかを明確に述べます。公式の商品名を使用してください。
- ショットの種類： 白い背景ですか？ライフスタイルショットですか？特徴のクローズアップですか？
- 重要な詳細： 色、素材、質感、または強調されている特定の機能などの主要な視覚情報を記載します。
- コンテキスト： 商品が使用されている場合、その行動を説明します（例：「岩の多いトレイルでスエードのハイキングブーツを履いている人」）。
避けるべきこと：
- 「〜の画像」または「〜の写真」で始めること： スクリーンリーダーはすでにそれが画像であることをアナウンスします。
- キーワードの詰め込み： キーワードを羅列するだけではいけません（例：
alt="ブーツ 靴 ハイキング 安い 今すぐ購入"）。これはアクセシビリティとSEOの両方に悪影響を及ぼします。 - 空のままにすること： 空の
alt=""属性はスクリーンリーダーに画像を無視するように伝えます。純粋に装飾的な画像の場合にのみこれを行いますが、商品写真はそうではありません。
実用的なAltテキストのパターンと例
以下は、さまざまな種類の商品写真にすぐに使えるパターンです。
1. 標準的なスタジオショット（白背景）
これは最も一般的な商品画像です。目標は商品を明確に説明することです。
- パターン：
[角度]から見た[商品名]。 - 例：
alt="正面から見たNeatForge断熱コーヒーマグ。" - 良い例：
alt="黒いフリップトップの蓋が付いた12オンスのステンレススチール製トラベルマグ。" - 悪い例：
alt="マグ"
商品に複数のカラーバリエーションがある場合は、具体的に記述してください。
- 例：
alt="フォレストグリーンの「エクスプローラー」バックパック。"
2. ライフスタイルまたはコンテキストショット
この画像は使用中の商品を示しています。コンテキストは商品自体と同じくらい重要です。
- パターン：
[人物/設定]が[商品名]を使って[行動]している。 - 例：
alt="丸太の上で休んでいるハイカーが、NeatForge断熱コーヒーマグから飲んでいる。" - 良い例：
alt="「Pro-Type」メカニカルキーボードでタイピングしている人の手のクローズアップ、RGBバックライトが見える。" - 悪い例：
alt="キーボードを持つ人"
3. クローズアップ/ディテールショット
この画像は、特定の機能、素材、または質感を強調しています。
- パターン：
[商品名]の[特徴]のクローズアップで、[詳細]を示している。 - 例：
alt="「Pro-Type」キーボードの編組USB-Cケーブルのクローズアップで、強化されたコネクタを示している。" - 良い例：
alt="「エクスプローラー」バックパックのステッチ入りレザーロゴのディテールショット。" - 悪い例：
alt="ロゴ"
4. スケールまたは比較ショット
この画像は、商品のサイズ感を示すために、商品を別の物体の隣に示しています。
- パターン：
[商品名]が[一般的な物体]の隣に示されており、そのサイズを示している。 - 例：
alt="ミニ「ポケットドローン」がスマートフォンの隣に示されており、そのコンパクトなサイズを示している。"
最終チェックリスト
商品リストを保存する前に、各画像についてこの簡単なチェックリストを確認してください：
- altテキストは画像を正確に説明していますか？
- 商品名に言及していますか？
- 簡潔ですか（理想的には125文字未満）？
- 専門用語やキーワードの詰め込みはありませんか？
- 画像が見えなかった場合、altテキストはそれが何であるかを明確に伝えますか？
良いaltテキストを書くことは、アクセシビリティとSEOにおいて大きな利益をもたらす小さな努力です。これを商品リスティングプロセスの一部として標準化することで、すべてのユーザーにとってより良い体験を創造します。
Advertisement