AI + DSBradとIan Frostが語るAI + Design System
Brad FrostとIan FrostがShopTalk Showに出演し、AIがデザインシステムのワークフローをどう変えているか、そしてaianddesign.systemsで公開予定のコースについて語ります。Bradは、各プロジェクトをspecマークダウンファイルで自身のEddie Design Systemに紐付けるコンテキスト駆動モデルを紹介。コアコンポーネント、デザイントークン、レシピ、NuxtやEleventyのボイラープレートが含まれます。AIがシステムを本当に活用せず近似値を出すだけの「デザインシステムのコスプレ」問題、そしてStorybookのstoriesやTJ PitreのFigma console MCPを使って忠実度を高める方法も議論されます。デザインシステムの決定事項をコンテキストウィンドウではなくCLAUDE.mdやプロセスリポジトリに保存することが、セッション間で安定した出力を生むと指摘しています。
AI_INFOGRAPHICWatch Recordingarrow_forward Article · トークンREAD TIME: 12m
Design TokenのLinting：何を、なぜ行うか
デザイントークンはコードであり、CSSやJavaScriptと同等のlintingが必要です。本記事はトークンのlintingルールを3つのティアに分類します。コミットをブロックするcriticalルール（壊れた参照、循環依存、型と値の不一致、不完全なトークン構造）、警告を表示するqualityルール（命名規則の強制、重複値の検出、コンポーネントトークンレベルでのWCAGコントラスト検査、ダークモードの網羅性、参照深さの制限）、そして長期的な健全性のためのnice-to-haveルール（セマンティックな命名、未使用トークンの検出、スケールの一貫性）です。W3C DTCGスペックのドル接頭辞形式と一般的なツールチェーン形式の違いも整理し、lintingの概念はどちらにも同様に適用されると述べています。まず4つのcriticalルールから始めることで実際の問題の80%を捉えられるという実践的な導入パスも提示しています。
READ_FULL_LOGarrow_forwardArticle · アクセシビリティREAD TIME: 4m
HHS Section 504期限延長：変更点と組織がすべきこと
2026年5月7日付けで、米国保健福祉省（HHS）はSection 504のデジタルアクセシビリティ準拠期限を1年延長しました。従業員15名以上の組織は2027年5月11日まで、それより小さな組織は2028年5月10日までにWCAG 2.1レベルA/AAに準拠する必要があります。重要なのは、変わったのは期限のみで、適用範囲や要件は変わっていないという点です。Section 504に基づく障害を理由とした差別の禁止は今日も有効であり、アクセシビリティが不十分なデジタル体験に対しては今すぐ苦情申し立て、調査、訴訟が可能です。著者のGlenda Simsは、この延長期間を活用してユーザーポータル、予約、請求、登録フォームなどの重要な接点を優先し、調達・開発プロセスにアクセシビリティを組み込み、文書化された改善ロードマップを構築するよう推奨しています。
READ_FULL_LOGarrow_forwardArticle · UXライティングREAD TIME: 9m
UX Writing：実務家からのFAQ
NN/gのAnna Kaley講師が、Writing Compelling Digital Copyコースでよく受ける実務者からの質問を5つのテーマに整理しました。平易な言語については、ユーザーがページテキストの20〜28%しか読まないというアイトラッキングの研究を引用し、6〜8年生レベルの可読性が専門家の読者にも有効であると説明しています。トーンオブボイスについては、一貫したブランドボイスと状況に応じて変化するトーンを区別し、AIツールはトーンをおおよそ把握できるに過ぎず、繊細な瞬間に特定のオーディエンスにどう伝わるかは予測できないと警告しています。リンクとボタンのラベルについては、「Learn More」のような曖昧なテキストは、スクリーンリーダーが同じラベルを繰り返しアナウンスするためアクセシビリティの失敗になると指摘しています。AIとSEOについては、AIがより多くの検索を横取りする中で従来のトラフィック指標の信頼性が低下しているとして、タスク完了率とエンゲージメント指標への転換を推奨しています。また、AEO（answer-engine optimization）とGEO（generative-engine optimization）を、従来からコンテンツを機能させてきた平易な言語と構造の原則の延長として紹介しています。
READ_FULL_LOGarrow_forwardArticle · アクセシビリティREAD TIME: 13m
VPATとは？Accessibility Conformance Report完全ガイド
VPAT（Voluntary Product Accessibility Template）は、テクノロジーベンダーがアクセシビリティ準拠状況を開示するために記入するITIの標準フォームで、記入済みの文書は正式にACR（Accessibility Conformance Report）と呼ばれます。最新のVPAT 2.5はWCAG、Section 508、EU（EN 301 549）、INTの4つのエディションがあり、INTエディションは米国とEU双方の調達要件を満たします。ベンダーのVPATを批判的に評価する方法として、テンプレートバージョン（2.5以上）、評価日（12〜18か月以内）、監査実施者（自己評価かLevel AccessやDequeなどの独立機関か）を確認し、準拠レベルのチェックボックスよりも備考欄に注目することを推奨しています。PDFを多用するワークフローでは、WCAGだけではカバーされないPDF/UA（ISO 14289）規格の確認が必要であり、axe、Lighthouse、WAVEなどの自動化ツールは問題の約57%を検出できますが、NVDA、JAWS、VoiceOverを使ったスクリーンリーダーによる手動テストが依然として不可欠であると説明しています。
READ_FULL_LOGarrow_forwardArticle · 開発ツールREAD TIME: 13m
Polypane 29：新Network Panel、Snippet Store、Chromium 148
Polypane 29は、マルチペイン構造を考慮してゼロから設計されたネットワークパネルを搭載しています。domContentLoadedとloadのタイミング、Web Vitals、オリジンごとの接続分析、そしてペインごとのヘッダー差分をハイライトするソート可能なウォーターフォールリクエストテーブルを提供します。新しいsnippet storeではコミュニティのCSSおよびJSスニペットを閲覧してワンクリックでインストールでき、ライブCSSプレビュー機能が復活し、編集内容がすべてのペインに即座に反映されます。outlineパネルにはカスタムセレクター概要機能が追加され、[aria-live]やbutton, [role="button"]などのCSSセレクターでアクセシビリティ監査用のカラーコードオーバーレイを確認できます。Polypane Peekは子ノードの整列を含むgridおよびflexレイアウトを可視化し、ElementsパネルのA11yタブではaria-describedbyの値とlabelledby要素への参照リンクが確認できます。macOSパスキーキーチェーン統合とChromium 148ベースの更新も含まれています。
READ_FULL_LOGarrow_forwardArticle · ツーリングREAD TIME: 5m
VSCode向けCSS Property Type Validator Extensionを発表
新しいVSCode拡張機能がCSSの@property登録を検証し、入力中に互換性のないvar()の使用を即座に検出します。たとえば--surface-primaryがcolorタイプで登録されているのに、開発者（またはコーディングエージェント）が誤ってgap: var(--surface-primary)と書いた場合、ブラウザは静かに初期値にフォールバックします。この拡張機能はその不一致をネイティブな診断の波線として即座に表示します。registryFiles設定によりワークスペースレベルのレジストリファイルをサポートし、一度定義されたトークンはすべてのファイルで検証されます。v1の制限として、プレーンCSSファイルのみ対応（SCSS、Less、Vue、Svelte、JSX非対応）、自動修正なし、WebベースのVSCodeホスト非対応があります。ZedExtension、Stylelintアダプター、Biome統合がロードマップに含まれています。
READ_FULL_LOGarrow_forwardsummarizeDigest_Summary
今週はShopTalk ShowにBrad FrostとIan Frostが出演し、AIがデザインシステムのワークフローをどのように変えているかを議論することから始まりました。Bradは、AIセッションを自身のEddie Design Systemにリンクしたspecマークダウンファイル（コアコンポーネント、デザイントークン、レシピ、Nuxt/Eleventyボイラープレートを含む）に固定することが、AIが本物のシステムを活用せず近似値を生成するという根本問題への実践的な解決策だと説明しました。StorybookのstoriesとTJ Pitre作成のFigma console MCPが忠実度強化ツールとして挙げられ、デザインシステムの決定事項は一時的なコンテキストウィンドウではなくCLAUDE.mdやプロセスリポジトリに保存することが、セッション間で安定した出力を生むと強調されました。
デザイントークンワークフローの空白を埋める2本のツーリング記事も注目されました。1本はトークンlintingルールを3つのティアに体系化しています。コミットをブロックするcriticalルール（壊れた参照、循環依存、型と値の不一致）、警告を表示するqualityルール（コンポーネントトークンレベルでのWCAGコントラスト、ダークモードの網羅性、命名規則）、長期的な健全性のためのnice-to-haveルールです。W3C DTCGのドル接頭辞トークン形式と一般的なツールチェーン形式の違いも解説されています。もう1本では、CSSの@property登録を検証し、互換性のないvar()の使用——例えば--surface-primaryがcolorタイプで登録されているのにgap: var(--surface-primary)と書いた場合——を即座に検出する新しいVSCode拡張機能が発表され、ワークスペースレベルのregistryFilesサポートも備えています。
アクセシビリティ関連のコンプライアンスニュースも重要なトピックでした。米国HHSがSection 504のデジタルアクセシビリティ期限を1年延長し、従業員15名以上の組織は2027年5月11日までにWCAG 2.1レベルA/AAに準拠する必要があります。VPAT 2.5の評価ベストプラクティスを解説した記事では、INTエディションが米国とEU双方の調達要件を満たすこと、監査は12〜18か月以内であること、axeやLighthouseなどの自動化ツールは問題の約57%しか検出できないためNVDA・JAWS・VoiceOverによる手動スクリーンリーダーテストが依然必須であることが強調されました。
Key Takeaways- AIセッションを実際のデザインシステム（コンポーネント、トークン、レシピ）に紐付けたspecマークダウンに固定することが、AIの近似値生成問題への実践的な防御策です。プロンプト改善だけでは不十分です。
- デザイントークンlintingは壊れた参照・循環依存・型と値の不一致・不完全なトークン構造の4つのcriticalルールから始めましょう。これだけで実際の問題の80%を捉えられます。
- HHS Section 504の期限が2027年5月11日（従業員15名以上の組織）に延長されましたが、適用範囲と要件は変わりません。アクセシビリティが不十分なデジタル体験は今も苦情や訴訟の対象になります。
