トークンDesign Token Workflow Part 18：DTCG Color ModuleにおけるColorの仕組み
このシリーズの第18回は、DTCG Color Moduleを深く掘り下げ、構造化されたカラートークンが生のhex文字列より優れている理由を解説します。このスペックでは、各カラーをcolorSpace（sRGB、OKLCH、HSLなど）、0〜1に正規化されたcomponents、オプションのalpha、レガシーhexフォールバックを持つtyped objectとして定義します。著者は2026年のオーサリングスペースとしてOKLCHを強く推奨しており、Material Design 3・Carbon・Parityの採用事例を挙げています。Style Dictionaryのtransform例を通じて、カラーramp自動生成・ビルド時のWCAG AA/AAA準拠テキストカラー導出・単一トークンから複数プラットフォームへの出力方法を実践的に示しています。
Read Articlearrow_forward Article · ガバナンスREAD TIME: 10m
Design System Workflowの構築：RitualとTemplate
この実践的なガイドは、理論を超えてデザインシステムチームが実際に機能するための具体的なリチュアル、テンプレート、ガバナンス構造を解説します。貢献提案用のRFCテンプレート、固定スケジュールで会議する4〜6名のDesign System Council、構造化されたSlackチャンネル、そして組織の記憶として機能するArchitecture Decision Recordを取り上げます。ドキュメント化は完了の定義の必須条件として扱われ、文書が完成するまでコンポーネントはリリースされません。著者は監査・設計・パイロット・改善・ローンチ・四半期ごとの反復という段階的な実装プロセスと、codemodを含むマイグレーションガイドによる変更管理の方法も説明しています。
READ_FULL_LOGarrow_forwardArticle · AIエージェントREAD TIME: 8m
Open Design System Format：Design SystemをAgentへ渡す
Sascha BeckerはOpen Design System Format（ODSF）を紹介します。これはGoogleのOpen Knowledge Format（OKF）のstrict profileで、デザインシステムをコーディングエージェントが読めるmarkdown・HTML・CSSの自己完結型バンドルとしてパッケージングします。エージェントがUIを生成する際、ブランドカラーがわずかに異なったり間隔がずれたりと「もっともらしいが間違った」結果を出し続ける原因は、生成時点でデザインシステムの機械可読形式が利用できないためです。OKSFは各トークンをfrontmatterに一度記述してCSS custom propertiesとして機械的に投影し、説明と実行可能な値を常に同期させることでこの問題を解決します。Claude Code・Cursor・Codex・Windsurf向けのodsf skillがバンドル全体のトークン編集のripple-checkを自動化します。
READ_FULL_LOGarrow_forwardArticle · アクセシビリティREAD TIME: 3m
ARIA、Anti-pattern、そしてあなた
David BushellはLLMにARIA Authoring Practices Guide（APG）を直接参照させてアクセシブルなUIコードを生成する増加傾向に対して鋭い警告を発しています。APGはブラウザや支援技術の実装全体にわたってARIAスペックが機能することを示すために設計されたものであり、プロダクションサイトのベストプラクティスガイドではありません。このガイド自体のマークアップにはdiv role="button"の例が含まれており、実際のコードには絶対に使うべきでないものです。WebAIM Millionの研究を引用し、ARIA使用の増加がアクセシビリティエラーの増加と相関していることを指摘します。W3CのARIA使用の第一規則は明確に述べています: 必要なセマンティクスを持つネイティブHTML要素があるなら、それを使うべきだと。
READ_FULL_LOGarrow_forwardArticle · モノレポREAD TIME: 11m
MonorepoでScalable Design Systemを構築
Vineeth PawarはTurborepoを使ったマルチパッケージデザインシステムの構築手順を解説します。パッケージを階層的なはしご構造で整理し、基盤にtokens、その上にprimitives・layouts・screens・navigatorsを配置します。tokensパッケージはcolors・spacing・typographyのtyped TypeScript定数をエクスポートし、primitivesパッケージはそれらを消費してvariantとsizeプロップを持つButtonなどのReactコンポーネントを作ります。turbo.jsonはtokensがprimitivesより先にコンパイルされるようにビルドパイプラインを構成します。Microsoft Fluent UI・IBM Carbon・Shopify Polaris・Atlassian Atlaskit・MUIが実際の事例として紹介されます。単一製品チームやリリースサイクルが大きく異なるケース、異種言語スタックなどmonorepoが適さない場合も率直に説明されています。
READ_FULL_LOGarrow_forwardArticle · アクセシビリティREAD TIME: 5m
読字障害のある人のためのDesign
TetraLogicalのGrace Snowは、難読症・過読症・失読症など読み取り障害のある人々のためのコンテンツとUIのための実践的なデザインガイドを提示します。この記事は六つの具体的な領域を取り上げます: 学術的な表現より平易な言語の使用、左寄せと70〜80文字の行長による読み取りフローの最適化、ブランドフォントより明確な字形と大きなx-heightを重視するタイポグラフィ、Hemingwayなどのツールで9〜11歳レベルの読みやすさを目標とすること、初出時の略語の展開、デジタルリテラシーが低いユーザー向けのアイコン併用と明確なリンクラベルです。包括的な読み取りデザインは第二言語の読者や急いでいるユーザーなど全員に有益で、編集者・コピーライター・デザイナーの共同責任であることを強調しています。
READ_FULL_LOGarrow_forwardArticle · コンポーネントREAD TIME: 3m
spartan/ui 1.0を発表
約3年間の慎重なアルファ期間を経て、spartan/uiが安定版の1.0をリリースしました。55以上のプロダクション対応Angularコンポーネントをsignals基盤で構築し、zoneless対応・SSR対応をデフォルトで提供します。ライブラリの核心となるアーキテクチャは二層分割構造を維持しています: spartan/ui/brainはARIA・キーボードナビゲーション・フォーカス管理を管理された依存関係として処理し、spartan/ui/helmはスタイリングレイヤーを消費者プロジェクトに直接コピーすることで、ライブラリと戦うことなく完全な所有権とカスタマイズを実現します。1.0リリースでは、ソート・フィルタリング・選択機能を持つData Table・Sidebar・Calendar・Date Picker・Carousel・Autocomplete・Pagination・Breadcrumbを追加し、元の30コンポーネントからほぼ倍増しました。MITライセンスで、インフラはZeropsがスポンサーしています。
READ_FULL_LOGarrow_forwardsummarizeDigest_Summary
今週のデザインシステムは、カラートークン標準、ガバナンス、AIエージェントがシステムを読めるようにする新たな課題に焦点を当てました。DTCG Color Moduleシリーズ(第18回)は、Material Design 3、IBM Carbon、Parityの採用事例を挙げて2026年のオーサリングカラースペースとしてOKLCHを強く推奨しました。知覚的に均一なlightnessのステップにより、自動化されたcolor ramp生成が安定するためです。Style Dictionaryのtransform例を通じてcolor ramp自動生成、ビルド時のWCAG AA/AAA準拠テキストカラー導出、単一トークンから複数プラットフォームへの出力方法を実践的に示しました。
Sascha BeckerはClaude Code、Cursor、Codex、WindsurfなどのAIコーディングエージェントが読めるmarkdown・HTML・CSSのバンドルとしてデザインシステムをパッケージングするOpen Design System Format(ODSF)を紹介しました。核心的な洞察は、生成時点で機械可読なデザインシステムが存在しないため、エージェントがもっともらしいが誤ったUIを継続的に生成するというものです。spartan/uiは3年間のアルファ期間を経て1.0をリリースし、signals基盤で構築された55以上のAngularコンポーネントをzoneless対応・SSR互換で提供します。ARIAロジックとスタイリングを分離するbrain/helmの2層アーキテクチャを採用しています。
2本のガバナンス記事がこの週を締めくくりました。デザインシステムのリチュアルに関する実践的なガイドはRFCテンプレート、4〜6名のDesign System Council、構造化されたSlackチャンネル、Architecture Decision Recordを取り上げ、コンポーネントリリース前のドキュメント化を必須ゲートとして設定しました。Turborepoモノレポのウォークスルーはtokens・primitives・layouts・screens・navigatorsを階層化する方法をMicrosoft Fluent UI・Shopify Polaris・IBM Carbonの実例を引き合いに示しました。
Key Takeaways- DTCG Color ModuleのOKLCH優先のtyped tokenオブジェクトはMaterial Design 3やIBM Carbonが採用しており、ビルド時のWCAG AA/AAAテキストカラー導出と信頼性の高い自動color ramp生成を可能にします。hex文字列では実現できない機能です。
- Open Design System Format(ODSF)はAIエージェントUIの核心的な問題を解決します。エージェントが誤った色や間隔でUIを生成する原因は生成時点で機械可読なデザインシステムが存在しないためで、OKSFはトークンをCSS custom propertiesに機械的に投影されるfrontmatterとしてバンドルします。
- spartan/ui 1.0のbrain/helm分離アーキテクチャ、つまりARIAとキーボードロジックを管理された依存関係として、スタイリングをコンシューマープロジェクトにコピーする方式は、アクセシビリティ保証を維持しながらライブラリロックインを回避する実践的なアーキテクチャパターンです。
