2026.09.03 11:20 ~ 12:00 Narwhal

AI に Inclusive UI を書かせよう — Design Rules Skill で Compose UI を作り直す

UI・UX・デザイン 日本語

Claude Code や Cursor、Copilot に Compose UI を書かせてみると、画面ごとに背景色がちぐはぐだったり、エラー文言が「Invalid input」のままだったり、コントラスト不足のボタンが平然と混ざります。 Material 3 や Android Developer Accessibility、Inclusive Design の手引きも、いずれも人間が読む前提で、LLM への実装指示には粒度が足りません。 AI 向けに Skill 化された公開リソースを探しても、Web 向け (mikemai2awesome/a11y-rules など) であったり、Compose 向けでも「TalkBack + Touch Target」止まり (gecko23/android-agent-skills、aldefy/compose-skill) で、Inclusive Design まで踏み込んだ Compose Skill は見当たりません。 本セッションで提案するのが Design Rules Skill です。 Inclusive Design の原則を体系化した一例として、福岡市の「認知症の人にもやさしいデザインの手引き」を題材にしました。物理空間向けですが、根底にあるユニバーサルデザインは全ユーザーに効くため、Compose UI に翻訳できる原則が並びます。 手引きの原則を AI が読める粒度へ落とし込み、Claude Code Skill / Cursor Rules / Copilot Instructions の 3 形式で配り、素のままの Compose UI を Inclusive UI に書き換えさせる仕組みです。 セッションでは Skill の設計と、AI に書かせたサンプル Compose アプリの Before / After 実機デモをお見せします。Skill が指示する実装パターンとして、コントラスト、文字スケール、Predictive Back、semantics error などの Compose 1.8 / Android 17 機能を扱います。 TalkBack、Font Scale 200%、Accessibility Scanner で Skill を育てていく回し方も共有します。 成果物は Inclusive Design Skill pack。 AI に Inclusive UI を書かせる第一歩としてお持ち帰りください。

対象者

- Jetpack Compose で UI を実装している Android エンジニアの方 - Claude Code、Cursor、Copilot 等の AI コーディングツールを業務で使っている、または導入を検討している方 - Inclusive UI / Accessibility に興味はあるが、何から手をつけるべきか迷っている方 - 既存の公式ガイドラインを AI ワークフローに取り込みたい方 - 高齢者・認知特性のあるユーザーが含まれるプロダクトを担当している方

同じ時間帯のセッション

すべてのセッションを見る