Design System Workflowの運用・進化：Metric、Mistake、S… — 2026年 第27週 デザインシステム

今週はデザインシステムのガバナンスとアクセシビリティが中心的なテーマでした。ワークフローガイドではコントリビューション所要時間、コントリビューター数、チーム満足度（目標：5点中4点以上）、ドキュメント完成度（80〜95%）、意思決定スピード（初期フィードバック3日以内・最終決定2週間以内）、採用率という6つの測定可能な健全性指標と7つの失敗パターンが整理されました。重要な原則は新しいプロセスを追加するとき古いプロセスを削除することです。コンパニオン記事では、ブランドカラーパレットを担うdata-themeとライト/ダーク/高コントラストを担うdata-modeを独立したHTML属性として構造的に分離し、特別なケース処理なしにすべてのプロダクトが組み合わせマトリクスを自動継承するアーキテクチャが主張されました。

アクセシビリティにも厳しい目が向けられました。Smashing Magazineの分析ではAI支援開発が29行のReact サイドバーコードに10件のWCAG違反を生成し、WebAIM Million 2026スキャンでは95.9%のページに1ページ平均56.1件のエラーが検出されました。記事はアクセシビリティを運用上の能力として扱い、CI/CDにeslint-plugin-jsx-a11yとPa11yを組み込み、Radix UIやReact AriaなどのアクセシブルなプリミティブをCursor rulesやCopilot instructionsでAIコード生成を制約することを推奨しています。深い技術分析では、クリック可能なテーブル行がアシスティブテクノロジーで普遍的に誤動作することが確認されました。trにrole="button"を適用するとVoiceOverとNVDAで行がアクセシビリティツリーから消え、唯一正しいパターンはtd内にネイティブのbuttonまたはanchorをネストすることです。

今週はUX戦略とツーリングの観点も注目されました。NNGの研究はUXチームがSUSスコアなどの活動指標ではなくコンバージョン・サポートコスト・リテンションといったビジネス成果を報告すべきと強調し、Figmaの動画ではデザインモードのAIエージェントがコミュニティシェーダーをブラウザコードにエクスポートできないこと、Figma MCPサーバーとOpus 4を組み合わせたClaude Codeが最も正確な実装を提供することが明らかになりました。