画像の代替テキストを、AIに書かせるときの注意

• 代替テキストは、画像が見えない人のための説明
• 見たままを書かせると、文脈に合わない
• 何のために載せた画像かは、こちらが伝える

画像の代替テキストを空のままにしていた。入れることにしたが、何を書くか迷ったので整理した。

何のためのものか

まず役割を確認した。

• 画像が表示されないとき、代わりに表示される
• 読み上げる機能を使う人に、内容を伝える
• 検索エンジンが、画像の内容を把握する手がかりにする

2つ目が本来の目的だ。検索対策のために書くものではないと理解してから、書く内容が変わった。

見たままを書かせた失敗

画像を渡して「説明して」と頼むと、こうなった。

• 写っているものを網羅的に書く
• 色や構図まで細かく書く
• 長くなり、読み上げると延々と続く

3つ目が問題だ。読み上げる人にとって、長い説明は苦痛になる。

文脈を伝える

何のために載せた画像かを伝えると、適切になった。

この画像の代替テキストを書いてください。

- 記事の内容：（テーマ）
- この画像を載せた理由：（何を示したいか）
- 文字数：50字以内

見たままの描写ではなく、
この文脈で何を伝えるべきかを書いてください。

2つ目が最も効く。同じ画像でも、載せた理由によって書くべき内容が変わる。

画像の種類で分ける

すべての画像に同じ書き方をしなくてよい、と分かった。

• 内容を伝える画像 — 何が写っているか説明する
• 手順の画面 — どこをどう操作するか書く
• 装飾だけの画像 — 空にする

3つ目が意外だった。装飾の画像に説明を付けると、読み上げの邪魔になる。空にするのが正しい。

長さの目安

実際に読み上げてみて、長さを決めた。

• 50字程度。読み上げて数秒
• 100字を超えると長く感じる
• 詳しい説明が要るなら、本文に書く

3つ目が原則だ。重要な情報を、代替テキストだけに書かない。

自分で書く部分

任せきりにできない部分がある。

• 画面の写しで、どこを見てほしいか
• 図で、何を示しているか
• 記事の文脈でどう位置づくか

1つ目は特にそうだ。画像を見ただけでは、どこが重要か分からない。

やらないほうがよいこと

調べていて、避けるべきとされていることも分かった。

• 検索語を詰め込む
• 「画像」「写真」と書き出す。読み上げる側で分かる
• すべての画像に、同じ文言を入れる

3つ目は、空にするより悪い。意味のない説明が繰り返されることになる。

既存の画像への対応

過去の記事の画像も、空のままだった。

• 全部やろうとすると終わらない
• 読まれている記事から順に手を付ける
• 新しく載せるものは、必ず書く

3つ目を習慣にすれば、これ以上は増えない。過去の分は、少しずつ進めている。

確認の仕方

書いた後、確認する方法も決めた。

• 画像を非表示にして、文章だけで意味が通るか見る
• 読み上げる機能で、実際に聞いてみる
• 長すぎないか、不要な繰り返しがないか見る

1つ目が簡単で効果的だ。画像が無くても記事が成立するかが分かる。

ファイル名も見直した

代替テキストを整えるついでに、ファイル名も直した。

• 生成したままの名前は、意味を持たない文字列になっている
• 内容が分かる英字の名前に変える
• 日本語のファイル名は避ける。URLが読めない形になる

3つ目は実害があった。日本語のファイル名は、URLで符号化されて長い記号列になる。共有したときに、何の画像か分からない上にリンクが壊れやすい。アップロードする前に名前を変える、という一手間を習慣にした。

やってみて分かったこと

代替テキストを書くようになって、副次的な効果があった。

• 何のために載せた画像か、自分で説明できないものがあった
• 説明できない画像は、そもそも不要だった
• 画像の枚数が減り、記事が軽くなった

2つ目が思わぬ収穫だった。説明できない画像は、飾りでしかない。

まとめ

• 代替テキストは、検索対策ではなく読む人のためのもの
• 見たままを書かせると、長く文脈に合わないものになる
• 載せた理由を伝えると、適切な内容になる
• 装飾だけの画像は、空にするのが正しい
• 画像を非表示にして、文章だけで通じるか確認する