Issue 駆動でスペシャリストの意図を届ける、AI 実装のアクセシビリティ向上

Transcript

1. Issue 駆動で スペシャリストの意図を届ける AI コーディングエージェントによる アクセシビリティ向上 2026.09.05 アクセシビリティカンファレンスCHIBA2026 株式会社Gaji-Labo 高橋 利明
2. こんにちは！ Gaji-Labo です！ 2
3. 主な取引先実績 3
4. 自己紹介 高橋 利明 株式会社Gaji-Labo フロントエンドエンジニア ⚫ フロントエンドエンジニアとしてプロジェクト リードを担当 ⚫ AIワークフローによる開発の整備を得意として います ⚫ 現在はアクセシビリティスペシャリストと共に プロジェクトに貢献中 4
5. 自己紹介 Soichi Masuda（masuP9） 株式会社Gaji-Labo 開発プロセスデザイナー / アクセシビリティスペシャリスト ⚫ 開発プロセスにアクセシビリティを組み込む仕事を しています ⚫ 最近はもっぱらAI使ってアクセシブルなUIを作る ことを考えてます 5
6. AI が書くコードを 信用できますか 6
7. まず2つの事実 事実1 コーディングエージェントは、 一定水準のコードを出力してくれる React習熟度ベンチ 第14回（https://zenn.dev/uhyo/articles/react-profession-bench-14） 事実2 AIでデリバリー速度は大幅に上がった 7
8. まず2つの事実 事実1 コーディングエージェントは、 一定水準のコードを出力してくれる 「AI は間違うから信用できない」 https://zenn.dev/uhyo/articles/react-profession-bench-14 React習熟度ベンチ 第14回（https://zenn.dev/uhyo/articles/react-profession-bench-14） という声もある 事実2 AIでデリバリー速度は大幅に上がった 8
9. この中で 間違ったことのない者だけ AIに石を投げなさい 9
10. AIは「興味ないけど頑張ってる人」 ⚫ AI は「興味ないけど頑張ってる人」が間違うくらいには 間違う ⚫ そのレベル感で早く・大量に作れる時代になった 10
11. AIは「興味ないけど頑張ってる人」 ⚫ AI は「興味ないけど頑張ってる人」が間違うくらいには 間違う ⚫ そのレベル感で早く・大量に作れる時代になった アクセシビリティの専門家は何をする？ 価値は薄まったのか？ 11
12. AI ワークフロー以前の話 後付けの アクセシビリティ向上に なぜ苦労していたのか 12
13. 技術がなかったから 13
14. 技術がなかったから 違います 14
15. アクセシビリティに 興味をもてないチームは うまくいかない 15
16. なぜ興味を持てないか 01 02 03 自分ごとになりにくく メリットが実感しづらい コストや手間から 優先度を上げきれない 構造として興味の リソースを割きづらい 16
17. その結果起こる負のスパイラル 興味を 向けられない 意図が 共有されない 壊れる 後付けになる 17
18. ここから始める必要があった 興味を向ける状態 を作って 専門家の意図 を浸透させる 18
19. 専門家の価値 意図を持ち込むこと 19
20. AIワークフローでやるべきこと 意図 を AI が選べる 選択肢 に変える 20
21. 正しいコピペコーディングは 間違わない 21
22. なにをやっているの？ ⚫ AIワークフローでプロダクト価値そのものへの貢献に フルスイング ⚫ 品質の一環としてアクセシビリティを製品に組み込み、 ワークフローに乗せる 22
23. なにをやっているの？ ⚫ AIワークフローでプロダクト価値そのものへの貢献に フルスイング ⚫ 品質の一環としてアクセシビリティを製品に組み込み、 ワークフローに乗せる AI を使って専門家の力を チーム全体にエンパワーメントする 23
24. 品質の一環として組み込むとは • アクセシビリティのための工程を増やさない • Issue → 実装 → レビュー の流れに自然に乗せる 24
25. プロジェクトの前提と目的 前提 目的 ⚫ アクセシビリティはデザインシ ステムで担保 ⚫ その担保をAIの実装ワークフロ ーに乗せる ⚫ 専門家の判断はワークフローの 部品として整備する AI がデザインシステムを使ってくれるかが鍵 25
26. Issue駆動 のAIワークフロー 26
27. なぜ Issue から指示を出すのか ⚫ 実行前に自分orチームでレビューできる ⚫ リポジトリに残って改善のための記録にできる AI が出力する Plan を前にずらして チームの資産にする 27
28. Dynamic Workflows による スキップしない実装 28
29. table コンポーネント作成 issue で検証を回す A. a11y 指示のある Issue をそのまま渡す B. WCAG 2.0 準拠、デザインシステムの使用など 抽象的な指示を追加 C. 品質基準の原則と検証経路タグ、 具体手段のドキュメント参照指示を追加 29
30. 効果的でなかったパターン A そのまま B 抽象指示 振る舞いを維持する指示により キーボードで操作できない状態に フォーカスリングが表示されない状態 も継承 存在しないトークンを使用 issue の具体に従ったため 望まない結果になった 30
31. うまくいったパターン 渡し方の改善 実現された品質・検証 原則そのものは変えず、都度 ⚫ テーブルセマンティクス 参照するように渡し方だけ変えた ➔ Dynamic Workflows が呼ぶ subagent に伝わらなかった コンテキストが伝わるように なった ⚫ キーボードの Enter を検証する テスト ⚫ 空状態の表示 ⚫ 正しい focus トークンの使用 31
32. 専門家の知見 をフローに乗せて 確実に実装させる 32
33. はっきりした不足 1. デザインシステムそのものの穴 2. lint による判定の精度向上 3. AI が読むリファレンスに基準を整理 33
34. はっきりした不足 1. デザインシステムそのものの穴 2. lint による判定の精度向上 3. AI が読むリファレンスに基準を整理 どの工程にも専門家の知見が必要 34
35. 変わるもの、変わらないもの AI でデリバリー速度は変わる スペシャリスト が生み出す 価値 は変わらない 35
36. これから専門家は何をする？ 価値は薄まった？ 36
37. これから専門家は何をする？ いいえ 価値は薄まった？ 37
38. 2つのレイヤーに分けて考える ⚫ 速さ ＝ AIが変える ⚫ 質 ＝ 専門家が仕組みにのせて担保する 38
39. 変わるもの、変わらないもの スペシャリストの価値は チームとコードに 意図 が 乗る流れを 設計 することへ 39
40. フローは進化し続けています スライド作成時からの差分は 交流会などでお話ししましょう 40
41. https://www.gaji.jp/ 41
42. プロダクトの課題を一緒に解決します。 最適な技術と、適切な手段で。 Gaji-Laboはフロントエンド開発者と UI デザイナーが チームメンバーとして参画するスタートアップ支援の会社です。 フロントエンド開発やUIデザインなどの専門技術の提供を軸に、 成長支援のためのチームワークの提供を一番大切にしています。 42