「『誰もが使える』デザインを生み出すために」 伊原 力也 WP ZoomUP #14 　レポート

4/6（土）に行われたオンラインWordPress勉強会『WP ZoomUP』の第14回は、freee株式会社のIA/UX担当、伊原力也さんさんをスピーカーにお迎えしてアクセシビリティについてのセッション回をおこないました。

WP ZoomUPは月に2回。スペシャリストを招いて話してもらう「セッション回」と関連する内容についてワイワイみんなで話し合う「座談会」を一度ずつ開催しています。

WP ZoomUP の概要、参加方法、運営者情報はこちらにまとまっています。

開催概要

• 2019/4/6（土） 21:00〜23:00
• 最大参加人数：約81人
• connpassイベントページ
• Togetter（ツイートまとめ #wpzoomup）
• スピーカー 伊原力也

動画

当日の資料

当日の資料「WP ZoomUP #14『誰もが使える』デザインを生み出すために」です。

UDトークとSli.do

今回はアクセシビリティについてのセッション回ということで、UDトークというコミュニティ支援（会話書き起こし）アプリを使って文字での配信にも挑戦してみました。
また音声での読み上げに対応しているSli.doを使って質問を集めました。

記念撮影

終了時に、参加者の皆さんと最後に記念撮影をしています。皆さまありがとうございました！

WP ZoomUP の今後をフォローしよう！

• Twitter をフォローする
• Connpass のグループに参加する
• Facebook グループに参加する
• Facebook ページをフォローする
• Youtube のチャンネル登録をする

【次回予告】#15 WP ZoomUP 【緊急開催】Re:『誰もが使える』デザインを生み出すために

4/6に開催された「#14 WP ZoomUP 『誰もが使える』デザインを生み出すために」はご参加いただいた皆さまからも大変ご好評をいただきましたが、内容が盛り沢山だったこともあって終了後の質疑応答の時間を充分に取ることができませんでした。

セッション中に「Sli.do」からいただいた質問や、Twitterのハッシュタグ #wpzoomup からいただいた質問などまだまだお答えできていない質問が多くあります。

スピーカーの伊原さんから「ではひたすら回答する回をやりましょうか！」と心強いお言葉をいただきましたので、急遽「#15 WP ZoomUP 【緊急開催】Re:『誰もが使える』デザインを生み出すために」を開催することが決定いたしました！！

※ デザインに関わる方、デザインに興味がある方、もちろん 4/6 にご参加いただけなかった方どなたでもご参加いただけます

2019/4/12（金）

▼参加登録
https://wpzoom.connpass.com/event/122843/

【次次回予告】#16 WP ZoomUP WordPressなんでも話そう会 （座談会）

WPZoom UPは月に2回「セッション回」と「座談会」を交互に開催していますが、最近座談会がセッション寄りになり、アンケートで「もっと質問したかった・話したかった」というご意見をいただいておりました。

そこで今回は特にテーマを設けずに、質問や困りごとを持ち寄ってワイワイ話す会にしたいと思います。 WordPressに関することならなんでも大丈夫！ 質問や困っていること、素朴な疑問、こんなこと教えてあげたい！など、気軽に持ち寄ってお話ししましょう！ どんどん聞けて話せて参加できる場になればと思います。

2019/4/23（火）

▼参加登録
https://wpzoom.connpass.com/event/122845/

それでは、またお会いできることを楽しみにしています！

チャットログ

20:53:32  miurasayoko : 【 手をあげてください 】
 見るだけ参加になっていて、動画音声参加に変わりたい方は手をあげてください！
 運営で音声参加に変えます。
 20:53:38  ケミ Kmix-39 : こんばんはー。見るだけです（笑
 20:54:39  miurasayoko  : ケミさんこんばんは。ありがとうございます！
 20:54:53  miurasayoko  : 【 運営より 】
 現在、参加者の皆様が揃うのを待っています。
 21時3分頃には始める予定ですので、もう少しお待ちくださいね。
 次回から21時の時間通りのを目指しますので、よろしくお願いします。
 20:57:09  miurasayoko  : 【 手をあげてください 】
 見るだけ参加になっていて、動画音声参加に変わりたい方は手をあげてください！
 運営で音声参加に変えます。
 20:57:11  有道 近藤  : こんにちは。よろしくお願いします(((o(ﾟ▽ﾟ)o)))
 20:57:34  村上 直子  : 有道さんこんばんは！よろしくお願いしますー！
 20:59:29  miurasayoko  : 【 運営より 】
 現在、参加者の皆様が揃うのを待っています。
 21時3分頃には始める予定ですので、もう少しお待ちくださいね。
 次回から21時の時間通りのを目指しますので、よろしくお願いします。
 【 手をあげてください 】
 見るだけ参加になっていて、動画音声参加に変わりたい方は手をあげてください！
 運営で音声参加に変えます。
 21:00:52  miurasayoko  : 【 動画配信について 】
 本編の録画はYouTubeにアップし、チャットと共にレポートブログにも掲載いたします。
 21:00:53  Toshiyuki Honda  : まだ、ご飯食べてます。
 21:02:38  村上 直子  : 本田さんごゆっくり！
 21:04:37  yuko morikawa  : ?
 21:05:35  miurasayoko  : 【 sli.do 参加 】
 https://www.sli.do/
 21:06:22  miurasayoko  : 14wpzoomup
 21:06:55  miurasayoko  : 「POLLS」タブ
 21:06:57  晴信 太田 : 参加者に入れてください
 21:07:32  miurasayoko  : 太田さん、お待たせしました！
 21:08:02  Shinichi Nishikawa : https://www.facebook.com/wpzoomup/videos/
 21:08:09  Shinichi Nishikawa : Facebook もできたよ！
 21:10:14  miurasayoko  : 【 手をあげてください 】
 見るだけ参加になっていて、動画音声参加に変わりたい方は手をあげてください！
 運営で音声参加に変えます。
 21:11:39  Yukihira : アクセシビリティーへの造詣を深めたいため
 21:15:49  miurasayoko : 【 WP ZoomUP 】
 ●Twitter
 https://twitter.com/WPZoomUP
 ●Fbグループ
 https://www.facebook.com/groups/1901906396782839/
 ●Fbページ
 https://www.facebook.com/wpzoomup/
 ●Youtube
 https://www.youtube.com/channel/UCzG2FqDp9MxxExrJHi1NFKQ
 ●ウェブサイト
 http://wpzoomup.sakura.ne.jp/staging/
 21:16:57  miurasayoko : 【 フィードバック 】
 セッションアイディア募集フォーム
 https://goo.gl/forms/TTVxcHsp4KoXEAWB2
 登壇者募集フォーム
 https://goo.gl/forms/gQVzjJDN2lT04qnN2
 イベント改善提案フォーム
 https://goo.gl/forms/XGPF0q99HXDYX2Zp2
 21:19:14  村上 直子  : すみません、辻さん音が聞こえてないそうです
 21:20:31  Shinichi Nishikawa : 入り直したりしても無理かなぁ。
 21:21:14  Toshiyuki Honda : \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\[
 21:21:16  晴信 太田 : UDトークってなんですか？
 21:21:24  Katsutoshi Tsuji  : 聞こえましたー！
 21:21:34  さいき ひろき  : 後ほどご案内します。
 21:21:34  Shinichi Nishikawa : お、よかった。
 21:21:40  さいき ひろき  : よかった！
 21:21:45  村上 直子  : https://service.udtalk.jp/redirect.php?token=68OZoTFyH4rN6xu2%2FXJpMpKreU5kEYT%2F%2FG4EAy9DTCxF08qdSA4jfYfJVZlgUhZw%0D%0AuAh7G0lcYofxE63pBAtCYf%2BqSEM5n6%2FkUaC9f5%2B%2B%2BckkpvmC45nqcyjDAt%2Bgdg4S%0D%0A1w8%2Bd63M7Xwvu14M2U40XsZs0gwiInbdMeazMDY96XO%2BGBRLBusA1dK%2F3tHZ%2BLAD%0D%0A2fP0WQzxFGQ7GvIzbHBn8BxKqeJHVqYmpOSp3IgYPO8L7rU17mYEQwnWAWCRokNh%0D%0A6hnCSXCvTN%2FbRmkiC720kwVR%2FdAUQfd%2FpyjNaKIamcQ%3D
 21:22:24  Atsuko Murashige  : https://app2.sli.do/event/8jmtnpiv/live/polls
 21:22:30  Yamamoto Tatsuo  : UDトークって？http://udtalk.jp/about/
 21:22:43  Rikiya Ihara  : 音声をリアルタイム文字起こししてくれるツールですね＜UDトーク
 21:22:58  Rikiya Ihara  : 額賀さんと村上さんが誤記修正をしてくれています
 21:23:37  Rikiya Ihara  : 音が聞けない状況や環境に居る方はご利用いただけると便利かもしれません。
 21:24:56  Shinichi Nishikawa : UDトークのリンク http://bit.ly/wpzoomup14ud でもいけます。
 21:25:02  miurasayoko : 【 伊原さん Twitterアカウント 】
 https://twitter.com/magi1125
 21:25:08  miurasayoko : 【 本日の資料 】
 https://paper.dropbox.com/doc/WP-ZoomUP-14--AatxjTObx2LGpWMJBMXWTTYXAg-cLbMS6PectM3fZIizVvcM
 21:25:09  たあ : まさにUD
 21:25:18  cuttlefish : 岡山の後楽園でお花見いいですよ
 21:26:04  miurasayoko 終了 cuttlefish、すべてのパネリスト : 後楽園、お花見行きたいです^ ^
 21:27:49  miurasayoko : ・URLでトークに参加する
 https://service.udtalk.jp/redirect.php?token=68OZoTFyH4rN6xu2%2FXJpMpKreU5kEYT%2F%2FG4EAy9DTCxF08qdSA4jfYfJVZlgUhZw%0D%0AuAh7G0lcYofxE63pBAtCYf%2BqSEM5n6%2FkUaC9f5%2B%2B%2BckkpvmC45nqcyjDAt%2Bgdg4S%0D%0A1w8%2Bd63M7Xwvu14M2U40XsZs0gwiInbdMeazMDY96XO%2BGBRLBusA1dK%2F3tHZ%2BLAD%0D%0A2fP0WQzxFGQ7GvIzbHBn8BxKqeJHVqYmpOSp3IgYPO8L7rU17mYEQwnWAWCRokNh%0D%0A6hnCSXCvTN%2FbRmkiC720kwVR%2FdAUQfd%2FpyjNaKIamcQ%3D
 21:28:11  mai  : slidoのcodeを教えていただけますでしょうか？
 21:28:33  さいき ひろき  : 「14wpzoomup」です！！
 21:28:35  miurasayoko : 【 sli.do 参加 】https://www.sli.do/
14wpzoomup
「POLLS」タブ
 21:28:59  mai  : ありがとうございますmm
 21:29:04  越智  : スライドもUDトークも画面共有されてます
 21:34:54  Shinichi Nishikawa : あとは字の大きさのことも思うかな。
 21:36:10  たあ : チェックツール最近color contrast analyserが好き
 21:37:54  YASU HIKO  : 結局実現できないこととかありますよね
 21:38:41  YASU HIKO  : ガイドラインが全然アクセシブルではない印象があります
 21:41:35  YASU HIKO  : あります
 21:48:14  Shinichi Nishikawa : 該当の記事。 https://webtan.impress.co.jp/e/2019/04/05/32125
 21:48:18  Shinichi Nishikawa : 植木さんの。
 21:48:58  miurasayoko : いつやったらいいのか、すごく気になります！
 21:53:41  Shinichi Nishikawa : サイトマップこちらです https://docs.google.com/spreadsheets/d/1m4nUlfQsg8mIi0MbInRxsVyZ5-jmq7MsOBVfEKnHor0/edit#gid=0
 21:55:06  aicocco : レベルが気になる、情報の重要度？
 21:56:01  sachi majima : レベル→階層じゃないですかね
 21:56:41  YASU HIKO  : サイトマップも
 22:01:48  越智  : NEWSPICSの通知ワロタ
 22:07:16  yamanoku : 中学生未満は読解のアクセシブルに対応されない…？
 22:09:16  Shinichi Nishikawa : 伝えるウェブ https://tsutaeru.cloud/
 22:19:37  Katsutoshi Tsuji : スクリーン・リーダーでも位置を理解するのは難しいですね。
 22:22:17  YASU HIKO  : おー
 22:23:33  Katsutoshi Tsuji : ランダムな文字列が読み上げられるケースは結構つらいですね
 22:25:31  yomochan : 画像の代替テキストの付け方は、いろいろ「異」見ありますね。ただ WCAGのべからず集（失敗例）に抵触しないよう、チェックは必要だと思います。
 22:25:35  sachi majima : オルトちょんちょんって alt=“” （空）か
 22:25:47  Shinichi Nishikawa : おるとちょんちょん
 22:27:30  sachi majima : 虚空
 22:27:43  Tomomi Nakatani : ハンバーガーメニューは開かない前提（よっぽど探したい情報がある人向け）ってしてるけど使えなかったら意味ないな…
 22:28:11  Shinichi Nishikawa : WP Multibyte Patch で、日本語ファイル名の画像をアップするとハッシュにするやつはアクセシブルではないという新発見。
 22:29:06  Yamamoto Tatsuo  : WAI-ARIA
 https://www.google.com/search?q=WAI-AREA&oq=WAI-AREA&aqs=chrome..69i57j0l4.320j0j7&sourceid=chrome&ie=UTF-8
 22:29:35  sachi majima : たのしいです！！！
 22:29:43  さいき ひろき  : めっちゃ勉強になってます！！
 22:29:44  Katsutoshi Tsuji : 楽しいですよ♪
 22:29:48  r360studio 森和恵  : 楽しいです！
 22:29:50  numata  : 楽しんでます！
 22:29:50  miurasayoko : 楽しいです！
 22:29:52  yamanoku : たーのしー
 22:29:52  YASU HIKO  : めっちゃ楽しんでます
 22:29:53  morike  : 楽しいですよー
 22:29:55  越智  : 楽しいです！！！
 22:30:00  村上 直子 : 勉強になります！
 22:30:00  田中良樹 : めっちゃありがたく聞かせていただいてます〜
 22:30:02  ShimiKumi : twitter盛り上がってます
 22:30:04  ケミ Kmix-39 : わーい！たーのしー！
 22:30:05  越智  : #最高のチームです！
 22:30:10  Yamamoto Tatsuo  : (^^♪
 22:30:10  づっきー  : 楽しい〜〜！！
 22:30:14  rika.w  : 興味深いでーす
 22:30:18  ai  : たのしー
 22:30:28  Toru Miki : > WP Multibyte Patch で、日本語ファイル名の画像をアップするとハッシュにするやつはアクセシブルではないという新発見。
 22:30:50  Toru Miki : ↑コアのWCAG AA にみたしないかもですね。
 22:32:23  さいき ひろき  : (´・ω・｀)
 22:36:15  Toru Miki : 入力内容の確認画面を挟むのは日本文化的な習慣のように思うんですが、アクセシビリティ的には良いプラクティスってことかな。
 22:37:10  yamanoku : https://developer.mozilla.org/ja/docs/Web/Accessibility/ARIA/ARIA_Live_Regions
 22:46:57  づっきー  : そもそも、コントラストの対比ってどうやってわかるんですか？（フォトショでわかりますか？）
 22:49:26  Shinichi Nishikawa : > 日本文化的な習慣のように思うんですが、アクセシビリティ的には良いプラクティスってことかな。 
 これ、日本の人たちはあることに慣れてしまっているので、もはや戻れない、みたいなことかな、と思いました。
 22:50:52  cuttlefish : Chrome DevToolsでもコントラスト比確認できます。https://developers.google.com/web/updates/2018/01/devtools?hl=ja#contrast
 22:51:27  Toru Miki : https://parashuto.com/rriver/tools/contrast-app-to-check-accessible-color-contrast
 22:51:32  yomochan : 赤だと、カラーブラインドの人にはめだたないんですよね。
 22:56:45  Shinichi Nishikawa : これでめくっているのは、相手の反応を見ているからいいのだなぁ。と思った。 https://www.youtube.com/watch?v=B7u6bMBlCXw
 22:57:07  Shinichi Nishikawa : 作ってる側からはユーザー見えないもんね。
 23:00:33  Shinichi Nishikawa : このままいきましょ！
 23:00:39  Yamamoto Tatsuo  : WAI-ARIA Authoring Practices 1.1
 https://www.w3.org/TR/wai-aria-practices-1.1/
 23:00:52  Shinichi Nishikawa : 11時過ぎちゃったけど。ちゃんと全体を残したいです。
 23:07:59  Shinichi Nishikawa : 制作者のためのHTML https://yuheiy.github.io/html-for-creators/
 23:13:09  yomochan : > チェックするのはあなたです！
  「キーボード操作可能にする」ところはデザインしてほしい！:-)
 23:13:18  Olein  : 途中から参加してますが、すごいためになる内容ですね。
 23:13:35  Shinichi Nishikawa : アクセシビリティの祭典 https://accfes.com/2019/
 23:17:40  yomochan : 伊原さん、皆様 ありがとうございました！
 23:17:42  YASU HIKO  : ありがとうございました
 23:17:45  mimi nari : 88888888888888888
 23:17:46  yamanoku : お疲れ様でした〜
 23:17:46  ケミ Kmix-39 : 88888
 23:17:48  Yamamoto Tatsuo  : 8888888888
 23:17:49  rika.w  : ８８８８
 23:17:50  junya : 888888888
 23:17:50  suzuki atsuko  : 88888888
 23:17:50  Katsutoshi Tsuji : お疲れ様でしたー
 23:17:50  新免祥太  : 88888888888888
 23:17:52  ai  : 8888888
 23:17:52  Toru Miki : 8888
 23:17:55  さいき ひろき  : 888888888888888888
 23:17:56  Toshiyuki Honda : ありがとうございました
 23:17:58  suzuki atsuko  : otukaresamadesita
 23:17:59  ケミ Kmix-39 : お疲れ様です。
 23:18:00  sachi majima : ありがとうございましたー！
 23:18:01  Tetsuya Yoshida : ありがとうございました
 23:18:02  morike : お疲れ様でしたー
 23:18:02  miurasayoko : 88888888888888888
 23:18:06  r360studio 森和恵  : 8888888888888888888
 23:18:08  ShimiKumi : ありがとうございました！
 23:18:08  cuttlefish : 神戸ではないですが東京で4月17日にAMP Conf 2019があります。
 WordPress用のAMPプラグインのセッションもあるのでぜひお越しください(YouTube生配信もあります)
 https://www.ampproject.org/amp-conf/
 23:18:09  mamiline6 : ８８８８８８
 23:18:11  yamanoku : 乾杯
 23:18:12  KOTOBUKI TAIRA  : ありがとうございました！
 23:18:14  TomoyaMatsumoto : おつかれさまでした！とても為になりました！
 23:18:18  miurasayoko : 【 第13回アンケート 】
 ぜひアンケートよろしくお願いします^ ^!
 https://forms.gle/hSXakuY176vd25cUA
 23:18:26  miurasayoko : 【 次回予告 】
 15 WP ZoomUP WordPressなんでも話そう会 〜質問・困っていること〜（仮）
 4/23（火）
 https://connpass.com/event/122845/
 23:18:29  さいき ひろき  : 【 フィードバック 】セッションアイディア募集フォームhttps://goo.gl/forms/TTVxcHsp4KoXEAWB2登壇者募集フォームhttps://goo.gl/forms/gQVzjJDN2lT04qnN2イベント改善提案フォームhttps://goo.gl/forms/XGPF0q99HXDYX2Zp2
 23:18:30  Shinichi Nishikawa : Amp conf 僕もいきます！
 23:19:17  さいき ひろき  : アンケート
 23:19:19  さいき ひろき  : https://forms.gle/hSXakuY176vd25cUA
 23:19:45  miurasayoko : 【 次回予告 】
 15 WP ZoomUP WordPressなんでも話そう会 〜質問・困っていること〜（仮）
 4/23（火）
 https://connpass.com/event/122845/