【ITニュース解説】How to write good alt text for your product images

システムエンジニアを目指す上で、ウェブサイトの構築や改善に関わる機会は多い。その中で「Alt text（代替テキスト）」という言葉を聞いたことがあるだろうか。これは、ウェブサイトの画像に添えられる説明文のことで、見た目は地味だが、ウェブサイトの品質や使いやすさを大きく左右する重要な要素である。

Alt textは、ウェブサイトのHTMLコードに埋め込まれる画像の代替説明文である。普段ウェブサイトを閲覧する際、私たちは画像を目で見て情報を得ている。しかし、中には様々な理由で画像を見ることができない人もいる。例えば、視覚に障害があり、スクリーンリーダーという音声読み上げソフトウェアを使ってウェブサイトを閲覧している人々は、画像そのものを見ることはできない。また、インターネットの接続状況が悪く画像が読み込まれない場合や、テキストのみの環境でウェブサイトを見ている場合もある。このような状況でAlt textが役立つ。画像が表示されない、あるいは見えない代わりに、Alt textが音声で読み上げられたり、テキストとして表示されたりすることで、その画像が何を意味するのか、どのような内容なのかを理解できるようになるのだ。

Alt textが適切に設定されていないと、スクリーンリーダーを利用している人は画像に遭遇した際、「画像」という情報しか得られなかったり、最悪の場合、単に画像ファイル名が読み上げられたりする。これは、画像が本来伝えるべき情報を完全に失ってしまうことを意味し、ウェブサイト利用者の体験を著しく損ねる。例えば、ある製品の画像を視覚的に確認できない人が、「画像」という情報だけではその製品がどんなものか全く分からず、購入を検討することさえ難しい。しかし、もしその画像に「青い綿のシャツ、ボタンダウンの襟付き」というAlt textが設定されていれば、視覚がなくても製品の具体的な特徴を把握し、購入の判断材料にできる。このように、Alt textはウェブサイトのアクセシビリティ（誰もが情報にアクセスできること）を向上させる上で不可欠な役割を果たす。

アクセシビリティだけでなく、Alt textはSEO（検索エンジン最適化）にも貢献する。検索エンジンのクローラーは、画像を直接見ることはできない。代わりにAlt textを読み取ることで、画像の内容やそれがページ全体に与える意味を理解する。これにより、検索エンジンはウェブサイトの内容をより正確に把握し、関連性の高い検索結果として表示しやすくなる。画像が読み込まれない時の代替表示としても機能するため、ユーザー体験の維持にも役立つ。

では、具体的にどのようにして良いAlt textを書けばよいのだろうか。これにはいくつかのシンプルな原則がある。

第一に、「記述的であること」が重要だ。Alt textは、画像が何を示しているのか、そしてその画像がなぜページに置かれているのかを、できるだけ具体的かつ正確に描写する必要がある。例えば、「シャツ」と書くのではなく、「青い綿のシャツ、ボタンダウンの襟付き」のように、特徴を詳しく記述することで、受け手はより鮮明なイメージを持てる。SEOの観点から関連キーワードを含めることも有効だが、最も優先すべきは、あくまで画像の内容を真実に描写することだ。キーワードの挿入は自然な範囲にとどめ、不自然な詰め込みは避けるべきである。

第二に、「簡潔であること」も大切だ。良いAlt textは、通常、数語から一文程度の短いものである。必要不可欠な情報に焦点を当てて記述することが求められる。もし画像が複雑で多くの説明が必要な場合（例えば、詳細なグラフやインフォグラフィックなど）、Alt textではその画像の簡単な要約を述べ、より詳細な説明はページの本文に記述するのが良い方法だ。

第三に、「『〜の画像』といった表現を省く」ことを心がける。スクリーンリーダーは、そのコンテンツが画像であることを自動的にアナウンスする機能を持っているため、「〜の画像」や「〜の写真」といった表現は冗長であり、不要である。単刀直入に画像の内容を記述すれば十分だ。ただし、例外として、画像の形式そのものが重要な意味を持つ場合、例えば美術品のウェブサイトで「フィンセント・ファン・ゴッホによるひまわりの絵画」のように、絵画であることを明記するのが適切である場合もある。しかし、一般的な商品ページであれば、「青い綿のシャツ、ボタンダウンの襟付き」と記述するだけで十分であり、「青い綿のシャツの画像」は不要である。

そして最も重要な原則が、「文脈に合わせること」だ。Alt textは、単に画像に写っているものを描写するだけでなく、その画像がウェブページ上でどのような目的で使われているかを考慮して記述する必要がある。同じ画像であっても、それが使用されるページの目的によって、適切なAlt textは大きく変わる。

例えば、コーヒー豆の袋の画像があったとする。単に「コーヒー豆の袋」と記述するだけでは不十分な場合がある。もしそれがECサイトのチェックアウトページにある画像であれば、「エスプレッソ用に挽いた、250gの挽きたてアラビカ豆の袋」のように、顧客が購入内容を正確に確認できるような情報を含めるべきだ。これにより、顧客は自分が何を注文しているのかを確実に把握できる。

さらに具体的な例を挙げよう。モデルがネイビーのシャツを着て石壁にもたれかかっている写真の場合、その画像が使われているウェブサイトの文脈によって、最適なAlt textは次のように変わる。

もしその画像が「シャツの販売ページ」で使われているのであれば、Alt textは「モデルがネイビーのボタンアップシャツとダメージジーンズを着用し、石壁のそばでポーズをとっている」となるだろう。ここでは、服自体が焦点となり、顧客が知るべき情報に焦点を当てる。

同じ画像が「個人プロフィールページ」にあるのであれば、「ネイビーのシャツを着た若い男性が、石壁の前の木製の手すりにもたれかかっている」のように、人物の描写に焦点を当て、訪問者が誰についてのページを読んでいるのか理解できるようにする。

あるいは、「旅行ブログ」で使われているのであれば、「歴史的な石造りのアーチの前に立つ人物」となるだろう。この場合、人物の服装よりも背景の建造物が重要な詳細となる。

別の例として、人が犬とハイタッチしているライフスタイルの写真の場合も同様だ。

「ジャケット販売ページ」であれば、「モデルがオレンジ色のミディアムサイズのジャケットを着用し、ビーチで犬とハイタッチしている」となる。この場合、顧客が知るべき情報であるジャケットに焦点が当たる。

「犬に関するブログ記事」であれば、「砂浜で人と犬が互いにハイタッチしている」となり、人間と犬のつながりや親密さに焦点を当てる。

「旅行ブログ」であれば、「水辺の砂浜に立つ人と犬、背景には森が見える」のように、場所や雰囲気に焦点を当てることで、画像がストーリーをサポートする。

これらの例からわかるように、Alt textの「正解」は、画像の視覚的要素だけでなく、その画像がページ上で果たしている「目的」によって決定されるのだ。

Alt textの作成は、単にウェブアクセシビリティのチェックボックスを埋めるためや、検索エンジンを喜ばせるためだけのものではない。それは、ウェブサイトを閲覧する方法に関わらず、すべての顧客が情報から取り残されることのないようにするための、思いやりのある行為である。

まとめとして、効果的なAlt textを作成するための3つの黄金律を覚えておくと良いだろう。

一つ目は「明確であること」だ。画像が何を示しているのかをはっきりと伝える。 二つ目は「簡潔であること」だ。通常、短い一文で十分な情報量を伝える。 三つ目は「文脈に合わせること」だ。その画像が掲載されているページにとって最も役立つ情報を記述する。

これらのルールを意識して、自分のウェブサイトの画像をいくつか選び、Alt textを書き直してみることを勧める。単にピクセルを記述するのではなく、画像の目的に焦点を当てることで、より効果的なAlt textを素早く作成できるようになるはずだ。

適切に作成されたAlt textは、目には見えないが非常に強力な力を持つ。それは顧客を助け、SEOを支援し、ブランドへの信頼を築く。ウェブサイト上のすべての画像は、誰かを歓迎し、または逆に締め出す可能性を秘めている。Alt textを適切に利用することで、すべての利用者を歓迎するウェブサイトを目指すべきである。