学習し、自分なりに噛み砕いて、書き出すブログ。

ファミリーマート公式Twitterのツイートからより良い画像の代替テキスト(alt)を考える

ファミリーマートの公式Twitterのツイートに、画像の代替テキストを改善できそうなツイートがありました。

この記事では画像の代替テキストのどういった点が惜しいのか、またどのように改善すればいいのか、私見を書きます。

※貶すつもりは全くなく、あくまでツイートを元にどういった代替テキストを書けば良いのかを考える記事です。

どのようなツイートか

ファミリーマート公式Twitterの該当ツイートを引用します。

※ツイートが削除されたのでインターネットアーカイブに残っているツイートを貼っておきます。

ツイートを一目見ただけだと、ファミからというファミリーマートで売られている唐揚げの写真が4枚並んだツイートです。

ただしツイートにもある通り、ファミからのこだわりが代替テキストに書かれていて、ツイートの画像上にあるaltボタンを押すとこだわりが見られるツイートになっています。

なぜ代替テキストの使い方が惜しいのか

4枚目のお皿の上に唐揚げがたくさん乗っている画像の代替テキストとして「食べてください」を連続して書くことは、画像と代替テキストの内容が一致せず、特定の状況・状態では正しい情報が伝わらなくなります。

また、1枚目の湯気が立ち込めた唐揚げを切った断面のドアップ画像・2枚目のファミからのパッケージ画像・3枚目の唐揚げが中央にあってドアップになっている画像は、画像で示している内容も代替テキストに書かれていますが、画像にはない情報や宣伝文句のような文章も書かれています。

画像と代替テキストの内容が一致していないのは、テキストが画像の代替という役目を果たせないことになります。

また画像にない情報や宣伝文句も代替テキストに含んでしまうと、TweetDeckや非公式アプリを使っている晴眼者は代替テキストに書かれた文章を見れず、伝えたい情報を伝えられないことになります。

そもそも画像の代替テキストとは？

画像の代替テキストはなんらかの状況・状態で画像が使えないときに、設定した代替テキストが使われます。

どういった状況・状態で代替テキストが使われるか一例を挙げます。

  • スクリーンリーダーを使っている場合に、画像の代替テキストが読まれる
  • 通信速度が遅く画像表示まで時間がかかる場合に、画像の代替テキストを表示する
  • CDNに障害が起きて画像が表示できない場合に、画像の代替テキストを表示する
  • Webブラウザーで特定の画像形式に対応していない場合に、画像の代替テキストを表示する
  • w3mやLynxなどのテキストベースのブラウザーで、画像表示に対応していない場合に画像の代替テキストを表示する
  • 検索エンジンのクローラーが、画像の代替テキストを元に画像の情報を得る

HTMLにおいては、img要素のalt属性の値に画像の代替テキストを設定します。

画像の代替テキストの書き方としてHTMLの仕様には次のように書かれています。

One way to think of alternative text is to think about how you would read the page containing the image to someone over the phone, without mentioning that there is an image present. Whatever you say instead of the image is typically a good start for writing the alternative text.

同じ部分を日本語訳されたHTMLの仕様を見てみると次のように書かれています。

代替テキストを考える1つの方法は、画像の存在があることを言及することなく、電話で誰かに画像を含むページをどのように読むかを考えることである。通常、画像の代わりにいうものは何でも、代替テキストを記述するための良いスタートである。

さてTwitterの話に戻ると、画像の代替テキストのことを「画像の説明」という言葉で説明しています。

Twitterのヘルプにある良い画像の説明を作成する方法を引用すると、「画像の説明は、目の不自由な方や弱視の方、ユーザー補助テクノロジーをご利用の方、低帯域幅の地域にお住まいの方、さらなる背景情報を求めている方の一助」向けの機能と書かれています。

Twitterの画像の説明も、HTMLのimg要素のalt属性に指定するような文言を書くことを意図していそうです。

どのように代替テキストを改善するか

ここまで書いたことを踏まえて、ファミリーマートのツイートの画像の代替テキストを考えてみます。

ツイートで何を伝えたかったのかを考える

ファミリーマートのツイートですが、製品の美味しさやシズル感を伝えたかったと推測します。

製品のストーリーを伝えることで製品開発者の熱い思いがこのツイートを見た人達に伝わって、好意的な印象を持つことで実際の購入に至ってほしい考えがあったと考えます。

こういったストーリーをTwitterで書くには、Twitterに投稿できる文字数では足りなさそうです。しかしストーリーを別途書いておく特設ページが用意できなかったのかもしれません。

そのため、altボタンを押すと見られるようにすればいいというTwitter運用担当者の工夫があったと考えられます。

また4枚目のお皿の上に唐揚げがたくさん乗っている画像の説明では「食べてください」を連続して書くことで、altボタンを押した人達を驚かせたり、クスっと笑わせたりという公式アカウントがおちゃめなことをしているというギャップを感じさせたかったと思います。

実際リプライで4枚目ホラーで草というツイートがあり、これはTwitter運用担当者が意図した反応だと考えられます。

代替テキストの改善例

というわけで、自分が考える代替テキストの改善例を書きます。まずもう一度ツイートを引用します。

※ツイートが削除されたのでインターネットアーカイブに残っているツイートを貼っておきます。

このツイートにある画像の代替テキストを書くのであれば次のようにするかもしれません。

  • 画像1枚目の代替テキストは「唐揚げの断面がドアップになっていて、断面から湯気が出ている様子」
  • 画像2枚目の代替テキストは「ファミから醤油味とファミから塩味のパッケージ」
  • 画像3枚目の代替テキストは「唐揚げが中央にあり、その唐揚げから湯気が出ている様子」
  • 画像4枚目の代替テキストは「白いお皿の上に唐揚げがたくさん乗っていて、その後ろに付け合わせの野菜がある」

電話口の相手に伝える感じだと、こんな感じで書けば伝わりそうです。

また4枚目の「食べてください」を連呼する形式を活かすのであれば、スマートフォンのメモアプリに「食べてください」とひたすら書いたものをスクリーンショットという形式で投稿して、代替テキストに「食べてください」をひたすら書く形式がありそうです。

おまけ: 自分が思う良い感じの代替テキスト

まず全農広報部【公式】日本の食を味わうのツイートが挙げられます。

画像の内容が代替テキストでも過不足無く表現されていると感じます。

他のツイートだと、にじさんじ所属のVTuberである壱百満天原サロメのツイートが挙がります。

画像の内容を全て書いているわけではないですが、漫画で伝えたいことを表現できている代替テキストで百満点ですわ～！

まとめ

代替テキストは人によって考え方にばらつきがありますし、状況によっても代替テキストの内容が変わるので、一概にこれが正解とは言いづらいものです。

ただ適切な代替テキストを設定することで、より多くの状況・状態にある人に伝えたいことを伝えられるようになります。

代替テキストを設定したことがない人は、とりあえず代替テキストを一度設定してみると面白いかもしれません。

参考リンク