《メディアコンテンツの伝え方 Vol.9》代替テキストのケーススタディ：写真やアート作品（2）
物の写真
次の写真は、筆者が購入した notNeutral というブランドのガラスのコーヒーカップの写真です。代替テキストはいったん「ロックグラス」としています。
前回紹介したフォーマットと照らし合わせて、代替テキストを考えてみます。
- おおまかなジャンル：ロックグラスの写真
- 写真内で着目しているもの：ローズピンクカラーと黒のスモークカラーのグラスが、グラス側面の切子面を見せるように1つずつ横になって並んでいる。
- その内容を補足する特徴：ロックグラスの口の部分は丸く、底の部分は厚く六角形になっている。
つなげると、次のようになります。
<p>
<img
src="path/to/file.jpg"
alt="
ロックグラスの写真：ローズピンクカラーと黒のスモークカラーのグラスが、
グラス側面の切子面を見せるように1つずつ横になって並んでいる。
グラスの口の部分は丸く、底の部分は厚く六角形になっている。"
>
</p>撮影者（筆者）としては、印象的な色であること、2つのグラスを横に倒していること、グラスの形状が特徴的であることを伝えたいと思いました。奥の観葉植物は写真のバランスを取るための装飾的な要素なので、代替テキストからは省いています。
グラスの色や形状をより多く代替テキストに含めたい気持ちもありますが、簡潔に書くことも大切です。ブログやSNSであれば、そうした情報は本文に記述すると良いでしょう。
上記の例では、写真のみで前後の文脈がないため、代替テキストは詳細に書いています。
動物の写真
次の写真は、筆者が撮影したヤギの写真です。次の画像の代替テキストはいったん「ヤギ」としています。
前後の文脈によって、このヤギの写真にどこまで触れているかは異なりますが、次のような代替テキストが考えられます。
<p>
<img
src="path/to/file.jpg"
alt="写真：地面に寝そべる茶色のヤギ。
首にはメイと書かれた黄色の札をぶら下げている。"
>
彩の国ふれあい牧場に行ってきました。
</p>名札が傾いていたり、ピントが合っていなかったりして名前が視認しづらい場合は、黄色い名札については触れなくてもよいかもしれません。ほかにもヤギの写真があり、それぞれ名前が写っていて、その名前がヤギの特徴を表しているという文脈があれば、名札について触れる必要があるでしょう。
「気持ちよさそうに寝ている」という雰囲気も代替テキストに含めるか悩みましたが、そう感じたのは撮影者である筆者の主観です。ヤギが本当に気持ちよさそうに寝ていたかどうかは判断できないため、代替テキストには含めませんでした。
もうひとつ、動物写真の例を挙げます。CodeGridの「認知コストとUIの使いやすさ 第1回 認知コストとは」の記事では、猫の写真が登場します。
記事の該当部分では、「経験済みの記憶と合致する対象が目に入った時は、詳細な考慮をすることなく高速に認知できる」ということを体験してもらうために、猫の写真を例にした簡単な問いかけをしています。
記事中の猫の写真の代替テキストには「写真：茶トラの小動物がフェンスに爪を引っ掛けている。」と書かれています。つまり、テキストのみで読むと次のようになります。
次の画像をみてください。何が映っているでしょうか？
写真：茶トラの小動物がフェンスに爪を引っ掛けている。
なぞなぞではありませんので、答えはシンプルに猫です。あなたは画面に映っている動物が、猫であると深く考えることなく認知することができたと思います。この代替テキストには「猫」という言葉が含まれていません。なぞなぞのようですが、前述の体験をしてもらうには、猫であることを伏せる必要があると判断したためです。では、ここで代替テキストに「猫」と書かれていた場合を想像してみましょう。
次の画像をみてください。何が映っているでしょうか？
写真：茶トラの猫がフェンスに爪を引っ掛けている。
なぞなぞではありませんので、答えはシンプルに猫です。あなたは画面に映っている動物が、猫であると深く考えることなく認知することができたと思います。猫と書かれているため、問いかけもなにもありません。猫です。しかしそれでは、「猫であることを深く考えることなく認知できる」という体験をしてもらうには、猫であることを伏せる必要があると感じました。
見たときに「どう見ても猫でしょ？」となるように、読んだときも「どう読んでも猫でしょ？」になるように、代替テキストには「猫」という言葉を含めず、猫の特徴を書くことにしました。
「茶トラ」で、「小動物」で、フェンスに「爪」を引っ掛けているという点は、猫であることを推測させる要素になると思います。もう少し猫の特徴について触れてもよいかと感じています。
もし、なぞなぞであれば、対象そのものは書かず、対象の特徴だけをより詳しく記述することになるでしょう。
写真を見ても、代替テキストを読んでも、同じ体験ができるようにすることが大事だと感じた事例でした。
AIが生成したアート
ここまでは、人物や動物、風景といった関心の対象がわかりやすい写真を扱ってきました。ここからは少し異なります。画像を作ったのがAIであり、しかもイラストや写真風ではなく、抽象的な絵だからです。
次は、AIが生成した画像です。
この画像は、「会社サイトリニューアルの検討と実際：デザイン編 第3回 AIを利用したアイキャッチ画像の作成：前編」に登場するものです。
粒子の細かい絵柄で、かつタイル状にシームレスにつながる画像を、画像生成AIを使って制作するという文脈で紹介されています。
画像生成AIが生成した 1 つのテクスチャをタイル状に繰り返し並べており、繰り返しの元になっている左上のテクスチャには、繰り返し構造をわかりやすくするために薄く赤色が塗られています。この画像の役割としては、次のようなものが挙げられます。
- 画像生成AIが生成したテクスチャをタイル状に繰り返したものであることを示す
- ひとつのテクスチャが繰り返されていることを示す
- 粒子の細かい絵柄
代替テキストは、次のとおりです。
<p>
<img
src="path/to/file.jpg"
alt="図：ラスターのサンプル画像。
1つのテクスチャ画像をタイル状に横に5回、縦に3回繰り返し並べた画像。
左上端のタイルは、繰り返しのもとになったタイルを示すために薄い赤色で色味を変えている。
繰り返されるタイルは、さまざまな多角形を組み合わせたようで、
それぞれ異なる明度差の灰色で塗られている。
モノトーンのステンドグラスのような模様。"
>
ラスター形式側の役割は、アイキャッチ画像のテクスチャ部分を担当します。
</p>テクスチャがタイル状に繰り返されている様子を示すことを優先し、そのあとにどのようなテクスチャなのかを含めています。
AI が生成したかどうかに限らず、抽象的なものは言葉で表現しづらいため、代替テキストを考えるのはなかなか難しいと感じています。
ここまでのまとめ
前回と今回では、著者の経験を交えて、代替テキストの指定について考えました。
- 写真：人物
- 写真：風景
- 写真：物
- 写真：動物
- AIが生成したアート
次回以降は、イラストやグラフなどの代替テキストの指定について考えていきます。
おまけ：確認クイズ
写真の代替テキストの記述に関する、以下の記述のうち、誤っているものはどれでしょうか？
- A. 写真に写る人物の様子が本文の文脈に影響を与える場合、代替テキストにその人物の「様子」（例：怒っている、悲しんでいる）を記述することがある。
- B. 代替テキストは、抽象的な説明から始め、段階的に具体的な特徴を記述する構成（おおまかなジャンル、着目しているもの、それを補う特徴）を意識すると、利用者が情報を理解しやすい。
- C. 同じ写真が使われている場合、その画像が記事の導入で使用されるか、記事の途中で文脈を補強するために使用されるかに関わらず、代替テキストの内容は常に同じであるべきである。
解答および解説は、次回の記事でご紹介します。一旦ご自身で考えてみてから、続きをご覧ください。
執筆
坂巻 翔大郎さん
大手ソフトウェアダウンロード販売会社、Web制作会社などで、マークアップエンジニア、プログラマ、サービス企画、ディレクターを経験。2013年、株式会社ピクセルグリッドに入社。HTML、CSS、JavaScriptなどをオールラウンドに担当。とりわけ、プログラマブルなCSSの設計、実装を得意とする。
＜過去記事はこちら＞