見出し画像

イベントレポート「画像のALT即興ライティング大会」を開いたよ

みなさん、こんにちは! SmartHR所属、UXライターのaguringoです。普段は、人事労務領域の業務アプリケーションの開発(UIテキストやユビキタス言語の作成)や、アプリのユーザーさんに参照していただくヘルプページの作成をしています。

今日は、先日開催したオンラインイベントを振り返りたいと思います。よろしくお願いします!

みなさんは、TwitterやSlackで、画像の左下に[ALT]と表示されているのを見たことはありませんか? これは画像に代替テキストが設定されている場合に表示されます。
「代替テキストとは、画像を表示できない場合や画像を視認できない人がブラウザの支援技術で読み上げるために用意されたテキスト情報のこと」です。Alternative textなので、Altです。

ALTはWebのアクセシビリティを上げる手段の一つであり、職能でいうと「アクセシビリティスペシャリスト」が専門領域として担っています。そして、SmartHRには、アクセシビリティに責務を負うプログレッシブデザイングループがあります。私たちUXライティンググループも比較的珍しい組織ですが、こうした「名前だけ聞いても何する人たちなのかわからない集団」にとっては、どんな専門性でサービスの付加価値を生み出しているのかを伝える機会は貴重です。
今回は、この「代替テキスト」をテーマにアクセシビリティスペシャリストとUXライターの専門性の一部に触れてもらいました。


きっかけは社内ドキュメント

フロントエンドエンジニアとして働いていたmaihaさんが、プログレッシブデザイングループにアクセシビリティスペシャリストとしてSmartHRに入社し、書いてくれた「今日からできる!代替テキストの設定方法」という社内ドキュメントでした。

それが印象に残った状態で、maihaさんの入社noteを引用リツイートするときに思いつきを添えてツイートしたところ、話がまとまりました。(たぶん、まだその時maihaさんとちゃんと話したことなかった気がする…)

maihaさんの「アクセシビリティスペシャリストとしてSmartHRに入社しました。」のnoteに対して、大会を開催したいという意思表示を添えた引用リツイート。
プランナーというか企画職を長年やっていたので、すぐ思いつきを口にしちゃうタイプ

イベントの企画意図

思いつきをかたちにするには、それなりの言葉が必要です。ということで、サラッとまとめた企画書はこちら。

SmartHRのプログレッシブデザイングループがどんな業務を担っているのかを伝える場とする。UXライティンググループが得意とする「情報の取捨選択をしたうえで読み手に伝わりやすい文章」とはどんなものかを即興で見せる。(ただし、遊びゴコロは含める)
デジタルプロダクト開発組織において、専任チームとしては珍しい2つのグループを紹介し、興味喚起を狙う。
また、ALTの設定はインターネットを利用する人なら、誰でもすぐに始められるアクセシビリティ向上なので、その啓蒙もできたらうれしい。

代替テキスト大会企画書より抜粋

代替テキストもコンテキストが大事

イベントの内容は、わかりやすく表現すると「写真でひと言」の真面目なやつ。提示された写真に対して、適切な代替テキストをUXライターその場で書いて、アクセシビリティスペシャリストから講評を受けるというものでした。

代替テキストを書くときのポイントは主に以下になるのですが、

  • 長すぎず、簡潔か

    • 本文と同じ内容が繰り返されていないか

    • 画像の情報量が多い場合は、本文を理解するうえで必要な情報にフォーカスする

  • 主観が入っていないか

    • 見た目で判断できない形容詞が入っていないか(例:おいしかった)

大事なのは、「本文を理解するうえで必要な情報にフォーカスする」という部分。つまり、その画像が表示されている文脈や背景(コンテキスト)があってこそ、何を伝えて何をノイズとして取り除くかの判断がつきます。

イベントでは、回答のテンポを意識してこの前提を若干端折ったかたちで進行してしまったのは、反省点です。

なお、画像の代替テキストに関するガイドラインも、SmartHR Design Systemに掲載されているので、ぜひご覧ください(書籍への収録は間に合いませんでした…)

舞台裏:Google Slideの同時編集で乗り切った

さて、実際のイベントの様子は、YouTubeにアーカイブを残しているのでそちらをご覧いただくとして、大変だったのが、回答スライドをどうやって画面共有で出すか。

テンポ良く画面を切り替えるには、本来ならばキューを出す人と画面を切り替える人とMCをする人が必要ですが、今回は一人で回しました。

お題のスライドが表示され、回答用のスライドが次ページ以降に並んでいるフィルムストリップが表示されたGoogle Slideの様子
実際に使用したスライド

1つのGoogle Slideに未記入の回答用スライドを回答者分用意していて、お題のスライドを表示している間に、回答者には各自のスライドに回答を記入してもらいます。できた人からページを入れ替えて準備ができた合図をSlackの連絡用スレでもらったら、進行しました。

今回知ったのですが、Google Slideってプレゼンモードだと同時編集できないので、フィルムストリップ(ページのサムネールが並んでいるエリア)を非表示にしてブラウザを画面共有して乗り切りました。

タイムキープしつつ、画面切り替えつつ、トークを回しつつといろいろやらせてもらって、個人的にはとっても楽しい経験でした。

プロダクトエンジニアはゲーム配信して、プロダクトデザイナーはスナックやってて、うらやましかったのですが、やっと企画ができました。

今後もなにかコンテンツをお届けできたら良いなと思うので、コラボのお誘いやネタの持ち込みなどなどいただけたら、泣いてよろこびます。

チャンネル登録、高評価、よろしくおねがいしまぁぁぁぁぁす

SmartHRでは、読み上げ機能をつかってもわかりやすいライティングができるUXライターを募集しています!


この記事が気に入ったらサポートをしてみませんか?