2020年9月6日（日）に WordCamp Ogijima 2020 がオンラインで開催されます。
2年前の WordCamp Ogijima では実行委員として参加し、明日からできるデザイン・コンテンツのアクセシビリティ入門 2018 というショートセッションで登壇もさせてもらいました。
今年は参加者としてお気楽に楽しもうかなと思っていたところ、実行委員の村上直子さんから「グラフィックレコーダーとして参加しませんか？」とお声がけいただきました。
実ははじめにお話をいただいた時、「私はグラレコはできません」と辞退するつもりでした。この記事では、そこから「やります！」に到るまでのエピソードと、グラフィカルな情報の代替テキストについて考えたことを書いてみます。
グラレコからグラレポへ
「グラレコとは」問題
グラフィックレコーダーとしての参加に尻込みした理由のひとつに、自分が描くものをグラレコと呼んで良いのかという不安がありました。
グラフィックレコーディングとは、短く一言で言うと『人々の議論/対話を図や文字や絵を組み合わせたグラフィックを用いてリアルタイムで可視化する手法のこと』。
最近よくあるグラフィックレコーディングへの誤解の考察。
会議やミーティング、あるいはカンファレンスやワークショップなど、さまざまな立場の人たちが集まる場所で行われる議論をグラフィックで可視化することで、より良い対話をもたらし、課題解決に導く手法です。
Graphic Recorder ―議論を可視化するグラフィックレコーディングの教科書
リアルタイムで可視化され、対話を促進する、というところが「グラフィックレコーディング」のポイントだと思っています。
一方、私が描けるのは次のようなものです。
一見グラレコっぽく見えますが、iPad でせっせと修正・編集しながらまとめるのでリアルタイム性はほぼありません。また、誰かの対話のためというより自分のための覚書といった面が強いです。これを「グラフィックレコーディングです！」と言ってしまってマサカリが飛んでこないか怖かった、というのが正直なところでした。
イベントでの役割から再命名
WordCamp Ogijima ではそんな小心者の不安に先回りして、便宜的に「グラレコ」と呼んでいた企画について、イベント内での役割や目的を参加メンバーで確認し、呼び方を再考する機会を設けてくださいました。
今回のオンラインイベントでは、一方通行なセミナー形式の配信をするだけでなく、参加者同士がより多方向に関われるようにとワークショップや座談会形式のコンテンツが用意されています。
それらがマルチトラックで進行するため、最後に全てのコンテンツをみんなで振り返れるものを作ろう！というのが、このイベントでの「グラレコ」の役割です。そして、リアルタイムで議論を可視化するのが目的ではなく、その場で起こった楽しさを後で共有し振り返るのが目的ということも確認されました。
そこから「現在進行形 -ing ではなくて記録や報告が目的なら、“レポート”はどう？」というアイデアに賛成が集まり、晴れて「グラフィックレポート（略してグラレポ）」という呼び名が誕生しました。グラレコに近い語感もありつつ、セミナーやカンファレンス開催後の「参加レポート」としてもイメージがしやすく、ぴったりのネーミングだと思います。
何より、参加者の不安を受け止めて解決方法を一緒に考えてくださった皆さんに心強さを感じました。
初心者・チャレンジ大歓迎！
こうして WordCamp Ogijima 実行委員4名＋7名のグラフィックレポーターが集結しました。
グラフィックレコーダーとして既に経験や実績のある方ばかりかと思いきや、今回が初挑戦！という方も複数いらっしゃいます。私は先のサンプル含めて4枚しか描いたことがなかったので心配していましたが、顔合わせミーティングで「初心者・チャレンジ大歓迎」のムードに背中を押されて参加を決めました。
できることを持ち寄って
グラレコの経験を活かして難しそうなテック系コンテンツを視覚化してくれる方、語学力を活かして英語コンテンツを視覚化してくれる方。それぞれが得意なことを持ち寄って理解を深めあい、ひとつのものを作ることは、とても WordPress コミュニティらしい姿だなと思います。
グラフィックレポートの代替テキスト
もうひとつ、私が参加を躊躇していた理由が「代替テキストどうする問題」です。
蚊帳の外を作りたくない
1枚の画像に情報をまとめたコンテンツに注目を集める力や拡散力があることは、SNSの流れを見ても明らかです。情報を図解することで、内容を直感的に分かりやすく伝えることができます。ただしその画像に代替テキストが入っていなければ、画像を見れない人には伝わりません。
今回のグラフィックレポートの企画は、同じ会場にいられない参加者同士が一緒に話したり振り返るために描かれるものです。みんながグラレポを見ながら盛り上がっているのに、画像を見られない人が蚊帳の外になってしまうという状況を作りたくありませんでした。
私が持ち寄れるもの
とはいえ、私も「グラフィックレポートの代替テキストかくあるべし」という正解を持ち合わせているわけではありません。
実行委員の村上さんに「代替テキストについても考えたい…」とふわっと相談したところ、すぐにグラレポ企画の Slack チャンネルに投げかけてくださいました。グラフィッカーの方々にも予想以上に好意的な反応をいただけて、魅力的なコンテンツを作れる方に代替テキストのことを知ってもらえただけでも参加したかいがあったなと思いました。
せっかくなので、グラフィックレポートの代替テキストを書く参考になりそうなことを以下に挙げてみます。
代替テキストとは
画像などのテキストではないコンテンツと同等の情報を提供するテキストのことを代替テキストといいます。HTML の img 要素の属性名から、Alt（おると）テキストと呼ばれることもあります。
代替テキストは、例えば次のように情報をユーザーに伝えます。
- 画像が読み込まれない場合に表示される
- スクリーンリーダーに読み上げられる
- 点字ディスプレイで点字に変換される
代替テキストに書くこと・書かないこと
alt は「代替内容」なので、画像の代わりにその文字を置いてみても違和感がない内容にします。
<img>要素のalt属性の入れかた | Accessible & Usable
その画像が置かれる目的や文脈によって適切な代替テキストは異なります。
例えばこの記事のアイキャッチ画像のように、画像の目的が単なる装飾やイメージで、画像がなくても情報が伝わるなら代替テキストは空で構いません。
一方「これをグラレコで使います！」という文章と合わせて写真を掲載するなら、それがどんなものかを代替テキストに書く必要があります。
グラフィックレポートがコンテンツの主役で、画像1枚だけを掲載するなら、そこに含まれる情報を詳細に代替テキストに含めるのが望ましいでしょう。
グラレポにキャプションがついていたり、本文で内容が説明されていれば、重複する内容を代替テキストに入れる必要はありません。
代替テキストにしか含まれない情報があるのも、今度は画像を見ている人が蚊帳の外になってしまうので適切ではありません。画像から読み取れない情報を加えるなら、本文やキャプションに書くのが良いでしょう。
図解の視点を活かす
図解が分かりやすいのは、要素の関係性を視覚的に補うことで冗長な説明を省き、要点にフォーカスしながら全体像を把握しやすくできるからだと思います。
時系列や因果性を表す場合は矢印を使ったり、同じ種類の情報には同じ色を使う、重要度をサイズで表現する…などなど、グラフィッカーさんには無意識のうちに情報を取捨選択し、関係性にふさわしい表現ができる方も多いのではないでしょうか。
代替テキストを書くときはその視点を活かして、視線を誘導した順にテキスト化したり、ビジュアルに置き換えた情報を言葉にするつもりで書くと書きやすいかもしれません。
Twitter で画像に代替テキストを入れる方法
ツイート内の画像にも代替テキストを入れることができます。スマホなら画像の上に表示される「+ALT」ボタンから、PCなら「説明を追加」リンクから代替テキストを設定できます。
代替テキストの事例が読めるリンク
- alt属性の良い事例(つけ方・書き方)｜情報バリアフリーポータルサイト
…大量の代替テキストの事例が読めます - altはつけるだけじゃなくて – 実践アクセシブルHTML 第一回
…代替テキストの具体的なサンプルは「適切なalt属性とは？」の章 - 学術文献を原本とする視覚障害者等用のテキストデータ製作における代替テキスト製作に関する仕様書 ver.2020.1
…代替テキストとその考察が面白いです
Alt のために発信を止めないで
あれこれ書きましたが、代替テキストを書くのが大変だから情報量を減らしたり、発信をやめてしまうのは本末転倒ですよね。
“ウェブに載るだけで圧倒的にアクセシブル” というフレーズに私はいつも勇気をもらっています。有益なコンテンツがウェブに載ることで、遠く離れた場所にいる人にも、その時その場にいられない人にも、想像を超えたたくさんの人にも情報を届けることができます。
必要な情報があることが伝われば、周りの人に説明を求めることもできます。伝えたいことには、たとえ不完全でも何か手がかりをつけて受け手に渡してあげるのが大事なのだと思います。
おたのしみに
WordCamp Ogijima 2020 当日、私は2つの枠でグラフィックレポートを描かせてもらいます。
10:10〜10:50 「島暮らし」って生きていけるの？ 〜地方で生きる生活と仕事〜
中村恭子さん & 西川真理子さん
12:00〜12:20 ランチタイム・ライトニングトークス（前半）
Atsushi Ando さん & mt8さん, わたりさん, カワセミデザイン舎さん, 高橋 修さん
430枚（！）のチケットは既に完売していますが、当日はSNSのハッシュタグ #WCOgijima で出来上がったグラレポや現場の盛り上がりが見られるはずです。
どうぞお楽しみに！
こんなグラレポができました
WordCamp Ogijima 2020 公式サイトで、当日のグラフィックレポートとセッション動画がセットで見られます。