誰でも使えるデザインとは？ といったタイトルで 勉強会を実施した話

Transcript

1. 誰でも使えるデザインとは？ といったタイトルで 勉強会を実施した話
2. 勉強会の概要 • 外部のデザイナー‧ディレクターの⽅向けに実施した勉強会。 ◦ アクセシビリティをキッカケに繋がりを広げる ▪ アクセシビリティについて教える事だけではなく、弊社の制作に対するスタンスや社内にどん な⼈が居るか‧その熱量はどんな感じかを知ってもらいたかった。 ▪ （私だけがやっていて、「社内の⼈はまだまだでは？」と思われる時もあるので） • 勉強会は2部構成 ◦ 第1部：⾃⼰紹介‧会社紹介‧レクチャー（70分） ◦ 第2部：ワークショップ（60分） • ワークショップの題材選定理由 ◦ JIS,WCAGに基づいたチェックを⾏う機会があるが、チェックリストをクリアするだけでは、使いや すいと思えない部分や、「もっとこうした⽅がいいのに」とか「そもそも誰も使えないんじゃ」み たいに思うこともしばしば。 ◦ ユーザーに憑依するようなイメージで、ユーザー視点でサイトを⾒てみて、課題感を探してみる機 会を作ってみた。 • 内容をかいつまんで紹介します
3. ワークショップ 「困りごとの可能性」がどこに潜んでいるか？ サイトを様々な⼈の視点で⾒てみる。
4. 本⽇の場について 参加いただいたみなさんと⼀緒に アクセシビリティの理解を深めるために オンラインホワイトボード     を使います！
5. 「困りごとの可能性」を意識する 情報設計フェーズ ＊抜粋 UI‧ビジュアルデザインフェーズ ＊抜粋 SKでは各制作⼯程でチェック項⽬を設けています。
6. チェックリストの項⽬を「ただクリアすること」だけに集中しがちですが、 そもそも「なぜその項⽬が追加されたのか？」を知らないまま対応している ケースもあります。 チェックリストが⽣まれるキッカケとなる 「困りごとの可能性」を意識してみましょう。 「困りごとの可能性」を意識する
7. 情報を覚えておくのが苦⼿な⼈ 情報を振り返りつつ閲覧している 利⽤者の例 苦⼿なコンテンツの例 記憶負荷が掛かるコンテンツ ⽿が聞こえない⼈ 動画は字幕を⽤いて閲覧している 利⽤者の例 苦⼿なコンテンツの例 ⾳だけ提供されるコンテンツ ⾊の違いが判別できない⼈ テキストや形で情報を判断している 利⽤者の例 苦⼿なコンテンツの例 ⾊だけで違いを伝えているコンテンツ 「困りごとの可能性」を意識する 引⽤：https://ja.wikipedia.org/wiki/%E5%AD%97%E5%B9%95 引⽤：http://www.kitaguchi-p.jp/about.html 引⽤：https://accessible-usable.net/2013/03/entry_130309.html
8. 動くものに⽬が⾏ってしまって、 集中が出来ない⼈ 余分な情報を隠す⼯夫をしている 利⽤者の例 苦⼿なコンテンツの例 動き続ける＋⽌められないコンテンツ 指が震えてしまって細かな操作 が出来ない⼈ キーガードで操作する箇所以外を押せ なくしている 利⽤者の例 苦⼿なコンテンツの例 ボタンのサイズが⼩さかったり、近す ぎるコンテンツ サイトの閲覧に時間がかかる⼈ 視線制御で操作している 利⽤者の例 苦⼿なコンテンツの例 勝⼿に情報がかわってしまうコンテンツ 「困りごとの可能性」を意識する https://www.digital.go.jp/assets/contents/node/basic_page/field_ref_res ources/08ed88e1-d622-43cb-900b-84957ab87826/53f76eaa/20240329_intr oduction_to_weba11y.pdf 引⽤：https://www.kz-yogu-plaza.net/2022/09/29//⼿の震えがあっても-ipadが 操作できるキーガード/ 引⽤：https://shopping.yahoo.co.jp/ 引⽤：
9. マウス以外でサイトを操作‧ 閲覧する⼈ キーボードで操作している 利⽤者の例 苦⼿なコンテンツの例 リンク‧ボタン‧⼊⼒欄の操作時に⽀障 があるコンテンツ 視⼒が低い⼈ 拡⼤鏡で画⾯を４００％拡⼤して 利⽤している 利⽤者の例 苦⼿なコンテンツの例 要素が離れていたり、右側に配置され ているコンテンツ ⽬が⾒えない⼈ スクリーンリーダーを利⽤している 利⽤者の例 苦⼿なコンテンツの例 マークアップが適切ではないコンテンツ 「困りごとの可能性」を意識する 引用：https://qiita.com/ymrl/items/11e78cd6fbfdae39de84 引用：https://azukiazusa.dev/blog/fucus-trap-accessible-modal/ 引用：https://www.amazon.co.jp/
10. ワークショップについて チェックでは、駒瑠市〜アクセシビリティ上の問題の体験サイト〜を使います。 意図的にアクセシビリティ上の問題を仕込んだサイトが⽣成されるため、 さまざまな問題点を体験することが可能です。 コンテンツの中に「困りごとの可能性」が沢⼭潜んでいます。 たくさん⾒つけてみて、みんなで共有をしてみましょう！
11. ワークショップの流れ 各グループからの共有 ワークショップ グループで感想共有 • ワークショップの中で気 になった事や、他にも気 になったことがあれば良 い機会なのでぜひ質問く ださい！ 質疑応答 グループ グループ 全体 全体 • 再びグループに 分かれて、感想を共有する • 各グループ司会の⽅からワーク 中の様⼦や話題に上がった事を 簡潔に共有する • 「困りごとの可能性」を ⼝頭で共有する • 付箋に書き溜めていく 20分 10分 10分 10分 色の違いが判別できない人 色が薄くて読みづらそう
12. 「困りごとの可能性」を 探して付箋を貼っていく 各グループ
13. 各チームの代表1名が 「困りごとの可能性」を共有 全体
14. 質疑応答 全体
15. 感想を共有しあう 各グループ
16. ご清聴ありがとうございました！ アクセシビリティを意識する 機会になっていただけたら幸いです。 ⽇々の業務の中で、 取り組んでみてください！
17. 勉強会の結果 • ⼤盛況？とまではいかないかなと思いつつ、「成功」とはいえそう。 ◦ 質疑応答では沢⼭ご質問いただいた。 ◦ オフライン開催だったので、勉強会後の会話が途切れない状況が続いていて、互いの事を知る機会 にもなったと感じた。 • 今回は困りごとを探す形でしたが、「じゃあ、どうやって解決させる？」はやっていないので、そのあ たりもワークショップに出来ると学びも良い感じになるかも。 要検討。
18. 勉強会の結果‧今後 • ⼤盛況？とまではいかないかなと思いつつ、「成功」とはいえそう。 ◦ 質疑応答では沢⼭ご質問いただいた。 ◦ オフライン開催だったので、勉強会後の会話が途切れない状況が続いていて、互いの事を知る機会 にもなったと感じた。 • 今回は困りごとを探す形でしたが、「じゃあ、どうやって解決させる？」はやっていないので、そのあ たりもワークショップに出来ると学びも良い感じになるかも。 要検討。 • ご清聴ありがとうございました！