輪読会を通したアクセシビリティに関する知見の取得と改善活動について

アソビューAdvent Calendar 2023の2日目の記事です。

みなさんこんにちは!

長く続いた暖かい日も終わり、本格的な冬が訪れようとしているアドベントカレンダー2日目…暖かい日差しの中お出かけをするのもいいけど、寒い季節に暖かい格好で寒空の下外に出るのも乙だなあと思っております、アソビュー株式会社でフロントエンドエンジニアをしている櫻井と申します。

今回は輪読会を通して学んだ知見をプロダクト作りに生かす取り組みについて紹介させていただきたいと思います。

はじめに

輪読会についてはこれまで何回か経験をしたことがあったのですが、アソビューに入社してからはまだなく、また自身から周りのエンジニアに声をかけて主催した経験もなかったため、この機会に新しい知識やスキルを身に着けたいと思いチャレンジしてみました。

まず、実際に輪読会を行っている会社のブログを読んで事例をキャッチアップしたり、また、今までメンバーとして参加した経験はあったためその経験を元に、輪読会を開催する目的やどのように運営をしていくかを考え、ドキュメントにまとめて明文化するところから始めました。

目的を設定する理由は、目的があるのと無いのではモチベーションが続かなかったり、なんとなくやってるような雰囲気になる可能性もあるので、輪読会といえども目的をはっきりさせることは重要だと思っています。

今回、目的を以下のように設定しました。

  1. 理解が薄い技術の理解度をチーム全員で深めて、チームの技術力を上げる
  2. エンジニアとして、学ぶ習慣を身につける
  3. チーム内外メンバーとの双方向のコミュニケーションを活発にする
  4. 技術に関する共通言語化

目的の設定に当たっては以下の記事を参考にさせていただきました。

note.relations.net

dev.classmethod.jp

以上の内容は Confluence にドキュメントとしてまとめて、メンバー内に共有するときに使ったり、後から振り返りをできるようにしました。
ドキュメントの内容は後ほどを紹介したいと思います。

輪読会について

本を選ぶ

輪読会の開催が決まったので、読み進める本を選定しました。 読みたい本があれば参加の意思を示してくれたメンバーから数冊候補を出してもらい、slack の投票アプリで気になる本、読みたい本などの視点で投票してもらいました。

slack には輪読会用のチャンネルを作って参加メンバーや興味があるメンバーに入ってもらっています。

slack上で投票アプリを使って、読みたい本に投票してもらいました。
slack上で投票アプリを使って、読みたい本に投票してもらいました。

このように、私が想像していた数以上の候補となる本を出していただきました。みなさまありがとうございました!

そして投票の結果、 Webアプリケーションアクセシビリティ ――今日から始める現場からの改善 という本に決定しました。 この本は比較的最近出版された本で、2023年2月27日に発売されました。

実はこちらの本を挙げたのは私なのですが、理由は次のセクションでお話ししたいと思います。

gihyo.jp

なぜこの本を挙げたのか

アソビューのフロントエンドエンジニアは毎週定例があり、プロダクトのフロントエンドの改善活動について議論するMTGを行っています。 様々なトピックについて議論する中で挙がったのが、社内でアクセシビリティに関する知見が少ないということでした。

また、個人的にも以前からアクセシビリティについては関心を持っており、上記の本が発売された瞬間にすでに購入していたほどでした。 そのような中で今のアソビューのプロダクトの課題として意見が出たのは何かの縁(?)かもしれないと思い、この本を候補に挙げさせていただきました。
この輪読会でアクセシビリティを学ぶねらいをまとめると以下のようになります。

  1. Webアクセシビリティに対する認識の向上: エンジニアとして、アクセシビリティの重要性を理解し実現する。この輪読会を通じて、アクセシビリティに関する知識を深め、それを実際のプロジェクトに適用する方法を学ぶ。
  2. 課題の特定と解決策の策定: 以前のMTGで挙がったアクセシビリティに関する課題を特定し、これらの課題に対する実用的な解決策を考える。
  3. チーム内での知識共有: 輪読会を通じて得た知識をチームメンバー間で共有し、全員がアクセシビリティの概念を理解する。
  4. 長期的なアクセシビリティ戦略の構築: 学んだ知識を基に、社内のアクセシビリティに関する中長期的な戦略を練る。

その背景してあるのが、

  1. 知識不足の認識: フロントエンドエンジニアが集まるMTGで、アクセシビリティに関する知識の不足が明らかになったため。
  2. アクセシビリティ課題の存在: 同じく、MTGでアクセシビリティに関する複数の課題が挙がり、これらの課題に対処し改善することがより良いプロダクトを提供することに繋がると考えられるため。
  3. 社内での意識向上の必要性: アクセシビリティは単に技術的な問題ではなく、企業としての社会的責任の一環であり、これを社内で広く認識し、取り組む必要があるため。

3つ目の社会的責任についてもう少し詳しく述べると、弊社は「生きるに、遊びを。」を会社のミッションとして掲げており、下記のプレスリリースにもあるように、車いすラグビーや子供の体験格差をなくそうという社会的課題を解決するための取り組みを行っています。
これはまさにより幅広いユーザーに誰でも利用できるアクセシブルなプロダクトを提供することは、このような社会的課題を解決する手助けとなることに繋がるのではないかと考えているからです。

www.asoview.co.jp

www.asoview.co.jp

輪読会について

それでは、輪読会についてやったことを話していきたいと思います。
輪読会を開催する目的は冒頭で述べた通りです。 その他に、輪読会の運用ルールはどうするのかをドキュメントにまとめました。すでに輪読会を経験しているメンバーはいたのですが、もう一度目的の整理と輪読会の目的やメンバーによって運用ルールは適切なものにする必要があると思いますので、改めてその点に認識合わせをするためのMTGを行いました。
下記は作成したドキュメントの例です。

作成したドキュメントの例を表示している。目的、参加者、書籍、開催頻度、準備、ルールが記載されている。
作成したドキュメントの例

  • 目的
  • 参加者対象・人数
  • 書籍
  • 開催頻度: 30分/1回/週
  • 事前準備: 事前に読むか、当日読むか
  • 開催場所: オンライン / オフライン
  • コミュニケーションツール: Slack など
  • ルール・マナー: 進行の仕方、読んだ感想、意見をどう出すか、など
  • アウトプット: 社内LTで結果を報告、テックブログに投稿、など

以上の内容でドキュメントを作成しました。

進め方

輪読会は予め決めた章、または、1章分が長い場合は数節分を輪読会開催当日までに読んでおき、Google Jamboard (※) (以降、Jamboard) に貼るスタイルにしました。
当初は開催日当日に貼っていっていたのですが、貼る作業がある分、内容を共有する時間が少なくなり、議論に割ける時間が少なくなってしまうデメリットがあったため、予め読んできて貼っておくという方法に変更しました。
なので、予め読む時間を確保しなければならないのですが、本を読むという自己研鑽の機会ということも考えればそれはそれで価値のあることだと考えてます。

今回は7人のメンバーで行い、ファシリテーター担当は私が担当しました。 Jamboard に貼った内容を元にメンバーを指名し、その内容を共有してもらい、各々の共有が終わったら質疑応答の時間を設ける形で議論していきました。
下記は実際に使用していた Jamboard です。

輪読会で使用した Jamboard の例
輪読会で使用した Jamboard の例

項目としては、

  • こんなこと学んだ
    • 読んで得た知見、新たにわかったこと、など
  • 感想/意見/その他
    • 本の内容に関する意見、感想、自身の体験を元にしてどう感じたか、など
  • こう活用(改善)できそう!
    • 今後プロダクトに取り入れられそうなこと、など

そして、最後にアソビューのプロダクトで活用できそうなものは Jamboard の「こう活用(改善)できそう!」の枠の中に移動して分類しておきました。
まとめると全体の流れは下記の通りです。

  1. ファシリテーターが開始を宣言
  2. ファシリテーターがメンバーを指名し内容を共有してもらう
  3. 共有してもらった内容について質問があれば誰でも質問してもらう
  4. プロダクトの改善に活用できそうなものがあれば分類しておく
  5. 次回読み進める箇所を決める
  6. クローズ

のように進めました。

(※ Jamboard は 2024/12/31 で提供終了予定なのでご注意ください。今後は代替ツールとして Confluence のホワイトボード機能を使っていく予定です。)

Google Jamboard の提供終了について - Jamboard ヘルプ

輪読会終了後

改善活動について

すべての章を読んだ後には実際の改善活動で生かすため、前項で分類したものを以下のようなアクセシビリティ改善リストをスプレッドシートで作りリスト化しました。
それぞれの項目は以下のようになっています。
弊社は複数のプロダクトがあるため、その分プロダクトの列を用意しています。

  • 課題
    • 輪読会で改善できそうと分類したもの
  • 優先度
    • 下のユーザーインパクトとコストを鑑みて総合的に付けた指標
  • ユーザーインパクト
    • 改善によってどれくらいユーザーに影響があるかを示す指標
    • A: 全く使えないものが使えるようになる / B: 使いやすくなかったのが、使いやすく改善される / C: 実用上支障はないものとして分類
  • コスト
    • 実装にかかる工数を示す指標
  • プロダクト①
  • プロダクト②
    :

アソビュー!のアクセシビリティを改善するぞ!リスト。
アソビュー!のアクセシビリティを改善するぞ!リスト

これらを元にアクセシビリティが対応できていないプロダクトは順次対応していきます。

ただし、ここで気をつけなければいけないことは、このリストを完全に対応することを目標にしてはいけないことです。
本質的には、幅広いユーザーに対してアクセシブルなプロダクトを提供することであって、このリストのアイテムを完璧にすることではないからです。
これはあくまでもアクセシブルなプロダクトを提供する手段にすぎないと考えています。

具体的な事例についてまだまだ書きたいことはあるのですが、後続の記事をお楽しみにしていただければと思います。

社内勉強会で報告

そして、輪読会でどのように行ったのか、今後どのような活動をするのかを共有するために、社内勉強会の場でプレゼン形式で報告を行いました。 輪読会とアクセシビリティのことを詰め込んだため1回で終わらず、2回に分けて行いました。

この報告を通して、より多くの社内のメンバーに学びや活動内容を共有できました。
定性的になってしまいますが、発表中のリアクションやチャットでの質問も多数いただき、また、新たに輪読会チャンネルに参加してくれたメンバーもいました。
何より、アクセシビリティ改善は特定のメンバーだけで成り立つものではなく、様々なチームや部門の協力が必要になるので、とにかく幅広いメンバーに知ってもらうことが重要です。

社内勉強会での発表資料の画像が表示されている。
社内勉強会での発表資料

良かったこと

輪読会

  • 部署を超えたコミュニケーションが生まれた
  • 継続して学ぶ習慣が生まれた
  • この活動を有志だけではなく、アクセシビリティについてより広く社内に共有できた

改善活動

  • 現状の課題に対して解決のアプローチ方法がわかった
  • 改善すべきことをリスト化してまとめられた
  • 輪読会の終了を待たずに、できるところから先行して改善活動を進められている

この輪読会を通して、単純に読んで終わりではなく、読んで得た知見を実際のアクションにまで繋げられていることが今回最も収穫があったのではないかと思います。
アクセシビリティはどちらかというとフロントエンドエンジニア中心の話題になることが多々あるかと思いますが、今回はフロントエンドエンジニアだけではなく、バックエンドエンジニアも参加していたこともあり、フロントエンドだけでは解決が難しいようなバックエンド視点からの意見も出たことも良かったと思います。

改善点としては、最初から最後まで基本的に私がファシリテーションをしていたのですが、全て通してやっていると意外に負荷が高いことがわかりましたので、ファシリテーションは持ち回りで行うのも良いのではないかと思います。
また、人数が増えると出した意見を共有することに時間を割くことが多くなり議論を深められない可能性もありますので、複数にグループに分けるなど極力大人数にならないようにするのが最善かと感じました。

まとめ

今回は輪読会を通してアクセシビリティを学び、それをプロダクトの改善活動に生かすことについて紹介させていただきました。

輪読会という形式をとることで様々な人とのコミュニケーションを促進することができ、一人で黙々と取り組むよりも実際に行動に移しやすかったり、考えを共有できることで効率的に活動することができるようになります。

今回は紹介させていただいたやり方で進めましたが、これは組織やチームによって変わるものだと思いますので、都度柔軟に進めていく必要があると思います。

ご興味がありましたらぜひ参考にしていただければ幸いです。

We're hiring!

アソビューではより良いプロダクトを世の中に届けられるよう一緒に挑戦していくエンジニアを募集しています。カジュアル面談もやっていますので、気になった方はエントリーのほどお願いいたします! www.asoview.com

speakerdeck.com

アソビュー!の技術情報を発信する公式アカウントもありますのでぜひフォローお願いします! https://twitter.com/Asoview_dev