Storybook 10.3：MCP、A11y改善、Workflow Upgrade — 2026年 第15週 デザインシステム

今週の主役はReact向けMCP統合を導入したStorybook 10.3で、AIエージェントが実際のコンポーネント・ストーリー・ドキュメント・テストに直接構造的にアクセスし、幻覚なしでプロダクションレベルのUIを構築できるようにしました。ツールセットはDev（UI状態の可視化）・Docs（コンポーネント再利用）・Test（アクセシビリティチェックによる自己修正）の3レイヤー構成です。今回のリリースでは、より型安全なCSF FactoriesフォーマットがReactを超えてVue・Angular・Web Componentsに拡張され、ARIAセマンティクス・キーボードナビゲーション・ハイコントラスト対応を含むStorybook自身のUIの大規模なアクセシビリティ刷新も行われました。エコシステムにはVite 8・Next.js 16.2・Angular 21が追加されています。

NetguruはモバイルおよびレスポンシブWeb向けの無料Figma Communityデザインシステム「Silk」の詳細ドキュメントを公開しました。Silkのトークン設計は12段階のプリミティブカラーランプの上にAccent・Neutral・Semanticエイリアスを重ねており、プリミティブを1つ変更するだけで全コンポーネントに自動反映されます。テキスト4.5:1・インタラクティブ要素3:1というWCAG 2.2 AAコントラスト基準を目標とし、すべてのトークンコレクションにkebab-case/camelCaseの命名規則を採用しています。別途、モーショントークンに関する実践的な記事では、5段階のdurationスケール（50ms–800ms）と--motion-enter・--motion-exitのようなセマンティックインテントトークンでチーム間のアニメーション差異を解消する方法が紹介されました。

デザインシステムの議論は、2つの広範なUX視点によってさらに深まりました。Nielsen Norman GroupはAIエージェントを設計する製品の実際のユーザーと位置づけ直し、セマンティックHTML・明確なラベリング・一貫したナビゲーションがアクセシビリティツリーのパース経由で明確なビジネス根拠を持つと主張しました。Wes BosとScott TolinskiのSyntaxポッドキャストでは、AIツールがCSSで一貫して低品質になる理由を分析し、モデルがグローバルルールよりローカルパッチを好み、ネイティブCSSネスティングのような機能に遅れ、Codex CLIのグラデーション強制のような隠れたシステムプロンプトがユーザーの意図を上書きすることが原因と結論付けました。