
React向けStorybook MCP — 2026年 第13週 デザインシステム
UI component architecture, design tokens, and semantic theming Compiled for immediate developer deployment.


ADA Title II Update:分かっていること、分からないこと、今すべきこと

GenUI vs. Vibe Coding:誰がデザインするのか?

Figma VariablesでAccessibility向けFont Scalingをテスト
font-sizeとline-heightにバインドされたnumber変数を使用して、Figmaでフォントスケーリングをシミュレートする10ステップのプロセスを解説します。120%、140%、160%、180%、200%のスケール増分を対象とし、すべてのフレームにauto layoutを一貫して適用し、すべてのテキスト要素にテキストスタイルを定義する必要があります。デザイナーは画面をコピーして変数コレクションを切り替え、固定コンテナやauto layoutの未設定によるレイアウトの崩れを発見できます。ライト/ダークモードの変数セットを既に使用しているデザインシステムは、同じ切り替えパターンを適用できます。
ロービジョンの人のためのデザイン

Test IDはA11yのCode Smell
data-testid属性を使って要素を見つけることは、アクセシビリティの低いマークアップがテストスイートを通過することを暗黙的に許可するコードの臭いです。ボタンがクリック可能なdivに置き換えられても、data-testidを使用するテストは通過し続けますが、その要素はキーボードアクセスができず正しいARIAロールも持ちません。Testing LibraryやPlaywrightの組み込みクエリAPIのロールベースセレクターは、副作用としてセマンティックHTMLを強制します。getByRoleが要素を見つけられない場合、スクリーンリーダーとキーボードユーザーも見つけられないということを意味します。著者はテストクエリを自然言語のアクションとして構造化することを推奨し、セマンティックHTMLによる暗黙的なARIAロールの活用、すべてのフォームコントロールへのvisibleまたはvisually-hiddenラベルの関連付け、Testing Playgroundの活用、ブラウザDevToolsのアクセシビリティツリービューの活用などの実践的なヒントを提供しています。
新しいFigma Workflow:CodeからDesignへ、そして戻る
DesignCourseはFigmaのアップデートされたMCPサーバーとskills統合をデモし、ライブ開発サーバーとFigmaファイル間の双方向ワークフローを可能にします。Claude Codeでuse_figmaスキルを使用して、実行中のReactアプリをglobal CSSから抽出したデザイントークンでFigmaに変換し、一致するFigma変数を作成し、すべてのフレームをその変数にバインドされたauto layoutで構成します。チュートリアルはトークンレベルの双方向同期を示しています。Figmaで背景色変数を変更すると、バインドされたすべてのフレームが即座に更新され、新しいトークン(navbar-bg: white)を追加するとデザインシステムに登録されます。FigmaデザインをコードベースへUに戻すプロセスはLLMの非決定論的な性質によりre-promptが必要で、最初の試みでは背景色の変更を見逃し、削除したstrokeを黒に変換するという問題が発生しました。
React向けStorybook MCP
Storybook 10.3はReact向けのMCPサーバーを導入し、AIエージェントがコンポーネントライブラリを構造的に把握できるようにします。これにより、エージェントがデザインシステムと競合するパターンを生成するのを防ぎます。アドオンはエージェントにstory、APIドキュメント、使用例などのコンポーネントメタデータを提供し、より少ないトークンで既存コンポーネントを再利用できます。エージェントはMCPサーバーを通じてコンポーネントおよびアクセシビリティテストを実行し、エラーを自己修正するか、人間の判断が必要な場合は開発者にエスカレーションします。ライブstoryプレビューがエージェントチャットUIに直接埋め込まれるため、ツールを切り替えずにhover状態やインタラクションを確認できます。Chromaticはバージョン管理と認証を含むMCPサーバーのリモート公開をデフォルトでサポートしています。

新しいFigma Workflow:CodeからDesignへ、そして戻る
DesignCourseはFigmaのアップデートされたMCPサーバーとskills統合をデモし、ライブ開発サーバーとFigmaファイル間の双方向ワークフローを可能にします。Claude Codeでuse_figmaスキルを使用して、実行中のReactアプリをglobal CSSから抽出したデザイントークンでFigmaに変換し、一致するFigma変数を作成し、すべてのフレームをその変数にバインドされたauto layoutで構成します。チュートリアルはトークンレベルの双方向同期を示しています。Figmaで背景色変数を変更すると、バインドされたすべてのフレームが即座に更新され、新しいトークン(navbar-bg: white)を追加するとデザインシステムに登録されます。FigmaデザインをコードベースへUに戻すプロセスはLLMの非決定論的な性質によりre-promptが必要で、最初の試みでは背景色の変更を見逃し、削除したstrokeを黒に変換するという問題が発生しました。
ADA Title II Update:分かっていること、分からないこと、今すべきこと
ADA Title IIウェブアクセシビリティ規則を巡る連邦審査活動が多くの憶測を生んでいますが、現時点でコンプライアンス期限や要件に関する公式な変更は発表されていません。Dequeは確認された事実と噂を区別しています。全面撤回の可能性は低く、遅延や修正の可能性はありますが、州・地方政府が平等なデジタルアクセスを提供すべき基本的なADA義務は規則以前から存在し、スケジュール変更に関わらずDOJの調査、和解、訴訟を通じて執行されます。この記事はWCAG 2.1 AAへの準拠維持、CI/CDパイプラインでの自動化アクセシビリティテストの継続、最初からアクセシビリティが組み込まれたデザインシステムの構築を推奨しています。アクセシビリティ作業を停止しても法的リスクは減らず、むしろ増加します。重要なのは期限を追いかけることではなく、持続可能でスケーラブルなアクセシビリティ能力の構築です。
READ_FULL_LOGarrow_forwardGenUI vs. Vibe Coding:誰がデザインするのか?
Nielsen Norman Groupは、誰がデザイン決定を開始するかに基づいて、generative UI(genUI)とvibe codingを明確に区別しています。genUIではAIシステムがチェックボックス、データ可視化、明確化ウィジェットなどの視覚的またはインタラクティブな要素がテキスト応答よりユーザーに有益だと自律的に判断します。vibe codingではユーザーがソフトウェア成果物の構築を明示的に要求します。Vibe codingはAIに構造的選択のほとんどを委ねる一文のプロンプトから、3カラムレイアウト、Mapboxカスタムピン、drag-and-dropタイムライン、local storageの永続化を指定する詳細なプロンプトまで幅広い仕様スペクトラムを持ちます。GenUIは実行品質だけでなく、インターフェースが必要だという判断自体に責任を持つため、vibe codingよりも高いデザイン責任を要求します。著者らは明示的なプロンプトなしに行動とコンテキストに基づいてインターフェースを適応させるinvisible AIの概念を紹介しています。
READ_FULL_LOGarrow_forwardFigma VariablesでAccessibility向けFont Scalingをテスト
WCAG 2.2の達成基準1.4.4は、コンテンツや機能を損なうことなくテキストを最大200%まで拡大できることを要求しており、モバイルユーザーの26%がすでにデフォルトでこの機能を使用しています。この記事では、各テキストスタイルのfont-sizeとline-heightにバインドされたnumber変数を使用して、Figmaでフォントスケーリングをシミュレートする10ステップのプロセスを解説します。120%、140%、160%、180%、200%のスケール増分を対象とし、すべてのフレームにauto layoutを一貫して適用し、すべてのテキスト要素にテキストスタイルを定義する必要があります。デザイナーは画面をコピーして変数コレクションを切り替え、固定コンテナやauto layoutの未設定によるレイアウトの崩れを発見できます。ライト/ダークモードの変数セットを既に使用しているデザインシステムは、同じ切り替えパターンを適用できます。
ロービジョンの人のためのデザイン
低視力は加齢に伴う視力低下から緑内障や網膜色素変性症などの疾患まで幅広いスペクトラムをカバーし、このグループのほとんどはスクリーンリーダーではなく画面拡大やブラウザズームを使用してナビゲートします。このガイドでは7つの具体的なデザイン上の考慮事項を扱っています。見出しレベルが視覚的に構造を反映する明確なタイポグラフィ階層の維持、背景色と一貫したスペーシングによる関連コンテンツのグループ化、拡大ユーザーのためにComposeボタンなど重要なコントロールを左上に配置、200%ズームでコンテンツがはみ出さないようテキストコンテナの固定高さを避けること、コーナーの自動消去toastではなくトリガーアクションの隣に通知を配置することなどが含まれます。400%ズームでビューポートの60%を占める可能性があるstickyヘッダーとフッターは問題があり、PrintやExport機能はモバイルレイアウトから削除すべきではありません。
READ_FULL_LOGarrow_forwardTest IDはA11yのCode Smell
テストでdata-testid属性を使って要素を見つけることは、アクセシビリティの低いマークアップがテストスイートを通過することを暗黙的に許可するコードの臭いです。ボタンがクリック可能なdivに置き換えられても、data-testidを使用するテストは通過し続けますが、その要素はキーボードアクセスができず正しいARIAロールも持ちません。Testing LibraryやPlaywrightの組み込みクエリAPIのロールベースセレクターは、副作用としてセマンティックHTMLを強制します。getByRoleが要素を見つけられない場合、スクリーンリーダーとキーボードユーザーも見つけられないということを意味します。著者はテストクエリを自然言語のアクションとして構造化することを推奨し、セマンティックHTMLによる暗黙的なARIAロールの活用、すべてのフォームコントロールへのvisibleまたはvisually-hiddenラベルの関連付け、Testing Playgroundの活用、ブラウザDevToolsのアクセシビリティツリービューの活用などの実践的なヒントを提供しています。
今週のデザインシステムの議論は2つの方向に展開されました。デザインワークフローにおけるAIの役割拡大と、アクセシビリティの絶対的な要件です。Storybook 10.3はReact向けMCPサーバーをリリースし、AIエージェントがstory、APIドキュメント、使用例などのコンポーネントメタデータを構造的に認識して既存のデザインシステムコンポーネントを再利用できるようにしました。ChromaticはバージョニングとAuth付きでMCPサーバーのリモート公開をサポートしています。別途、Claude Codeのuse_figmaスキルを通じて実演されたFigmaのアップデートされたMCPサーバーとskills統合は、双方向デザイントークンワークフローを確立しました。CSSグローバル値がFigma変数として流入し、デザイン変更がコードに戻る仕組みですが、LLMの非決定論的な性質により逆方向のパスではre-promptが必要でした。
アクセシビリティも今週の重要なテーマでした。DequeはADA Title IIの状況を明確にしました。連邦の審査活動にもかかわらず公式なコンプライアンス期限の変更は発表されておらず、州・地方政府に対する基本的なADA義務は規則の修正に関係なくDOJを通じて執行可能です。WCAG 2.1 AAへの準拠を維持し、アクセシビリティをCI/CDパイプラインに組み込むことが推奨されています。Tetralogicalの低視力ユーザー向けデザインガイドは、テキストコンテナに固定の高さを設けないこと、重要なコントロールを左上に配置すること、400%ズームでstickyナビゲーションをハンバーガーメニューに変換することなどの具体的なルールを示しました。
テストとデザイン手法も注目を集めました。data-testidセレクターがアクセシビリティの問題のシグナルであるというDominik Dorfmeisterの主張と、AIがインターフェースの必要性を判断するgenUIとユーザーが成果物を要求するvibe codingの明確な区別を示したNielsen Norman Groupの分析が紹介されました。
- Storybook 10.3のMCPサーバーにより、AIエージェントはコード生成前にコンポーネントのメタデータ(story、APIドキュメント)を照会でき、AI支援開発でのデザインシステムの乖離を軽減します。
- ADA Title IIの基本的な法的義務は州・地方政府に対して規則以前から存在し、連邦のタイムライン変更に関係なく有効です。アクセシビリティ作業を停止すると法的リスクが高まります。
- data-testidセレクターはアクセシビリティの問題のシグナルです。Testing LibraryとPlaywrightのロールベースクエリは副作用としてセマンティックHTMLを強制し、アクセシビリティの低いマークアップをテスト失敗にします。