トークン Design Tokens仕様の$extensionsを理解する W3C Design Tokens Community Group の仕様には、コア標準の範囲外のメタデータを保存するための意図的なエスケープハッチである$extensionsが含まれています。チームはこれを使って、FigmaのSync ID、Style Dictionaryの変換設定、ガバナンス注釈、バージョン履歴、WCAGコントラスト比などのアクセシビリティデータを格納できます。仕様では命名の衝突を防ぐために逆ドメイン記法（例：com.yourcompany.featureName）が義務付けられています。Penpot は$extensionsを完全実装した最初のデザインツールで、Figma はSchema 2025 発表時点でもエクスポート時にextensionsを削除します。Style Dictionary 、Tokens Studio 、Terrazzo はいずれも標準でextensionsをサポートしています。主なベストプラクティスとして、スキーマのドキュメント化、extensionsのオプション性維持、バージョン管理にコミットされるトークンファイルへの機密情報の非保存が挙げられます。
Read Articlearrow_forward Video · 詳細解説 19:37
コアメンテナーAlex Rickabaughと学ぶAngular Signal Forms Angular Coreのテクニカルリード、Alex RickabauerがCodeTVのWebDevポッドキャストに参加し、Angular v21 で導入された新しいSignal Forms システムを解説しています。Rickabauerは、Angularの2つ のレガシーフォームアプローチ（テンプレート駆動型とreactive（RxJSベース））がsignalsが登場する前に設計されたため、signalsとうまく組み合わせられず、新しいシステムが必要になったと説明しています。Signal Formsはフォームの状態をリアクティブなsignalsグラフとして扱い、値、バリデーション状態、無効化フラグはすべてderived signalsとして、実際に依存するUI部分のみを更新し、全体の再レンダリングを回避します。APIは現在experimentalとしてマークされており（developer previewではない）、通常の2メジャーバージョンの安定性保証なしにリリース間で変更される可能性があります。 interopレイヤーにより、既存フォームコードから全面書き換えではなく段階的な移行が可能です。また、Angularの非推奨ポリシー（非推奨はコミュニティ主導であり、一方的ではない）と、ngModulesからstandaloneへの変換を自動化するCLI移行ツールも取り上げています。
AI_INFOGRAPHICopen_in_full close WATCH_VIDEOarrow_forward Article · アクセシビリティ READ TIME: 12m
優れた代替テキストを設計する：入門 効果的なalt textは、装飾的な画像（空のalt=""のみ必要）と情報を伝える画像（意味のある説明が必要）の明確な区別から始まります。この記事では「画像を削除する」テストを紹介しています。デザインから画像を削除したときに情報が失われる場合、alt textが必要です。リンクやボタンとして機能する画像、テキストを含む画像、ロゴは常にalt textが必要です。Awwwards などのサイトで指摘されているような、隣接するテキストラベルがないアイコンには説明的なalt textが不可欠ですが、可視のテキストラベルが推奨される解決策です。また責任の連鎖も取り上げており、画像を作成したり、ワイヤーフレームやモックアップに最初に配置した人がalt textを書くべきで、実装する開発者ではないとしています。説明の長さのバランスも重要で、有用なだけの文脈を提供しつつ、過剰にならないよう注意が必要です。
READ_FULL_LOGarrow_forward Article · アクセシビリティ READ TIME: 16m
2026年に多くのデザイナーが見落とすWebアクセシビリティ問題 Kacper Rafalskiは、2026年 においても97% のウェブサイトが基本的なWCAG 準拠に失敗している中で、持続する6つ のアクセシビリティ失敗カテゴリを調査しています。この記事は具体的な落とし穴を列挙しています。見出しレベルのスキップ（H2 →H4 ）、複数のH1 タグの使用、セマンティックマークアップなしにdivを見出しとしてスタイリングすること、スクリーンリーダーが「Site Navigation Navigation」と読み上げる冗長なARIAランドマークラベル、3:1のUI コントラスト基準 を満たさないゴーストボタン、そして自然なタブ順を壊す正のtabindex値などです。フォームについては、<label for>/idの関連付け、エラーメッセージのためのaria-describedby、無効状態のためのaria-invalidを取り上げています。DZPの内部告発プラットフォームとTransACT EdTechのケーススタディは、体系的なWCAG監査が実際にどのように行われるかを示しており、後者ではWCAG 2.1 AA 準拠が州の契約獲得の決め手となりました。実用的なツールとして、WebAIM Contrast Checker 、Color Safe 、Adobe Color の色覚シミュレーターを推奨しています。
READ_FULL_LOGarrow_forward Article · トークン READ TIME: 13m
開発者がBlueではなくPrimaryを求め続ける理由 Sascha Beckerは、開発者がセマンティックなカラーロールに至った4 段階の進化を追跡しています。一回 限りのhex値のコピー、再利用可能なコンポーネント、集中管理されたカラー変数、そして役割ベースのテーマオブジェクトです。核心的な主張は、primary、error、background.paperといった名前が色の外見ではなく、その*役割 *を表すということです。これにより、何百もの画面アノテーションを更新することなく、ブランド変更やダークモードにも安定して対応できます。Material UI を実例として、10 の全カラーロール（primary、secondary、error、warning、info、success、background.default、background.paper、text.primary、text.secondary）を説明し、テーマカラーが不透明でなければならない理由（コンポーネントがhoverやfocus状態に独自の透明度レイヤーを適用するため）と、MUIが知覚的コントラストを考慮してprimary.light、primary.dark、primary.contrastTextを自動生成する仕組みを紹介します。実際の効果：1ページのテーマ定義だけで、200枚分の画面ごとのhexアノテーションが不要になります。
READ_FULL_LOGarrow_forward Article · オピニオン READ TIME: 4m
自分たちの世界観からデザインし、構築する Martin Underwoodは、アクセシビリティが不十分 な製品は、デザイナーや開発者が自分たちの限られた世界観から構築した自然な結果だと主張しています。マウス、トラックパッド、タッチをデフォルトとし、WCAG が認識する多様な入力モダリティを無視することがその原因です。彼は自身のハイブリッドなキーボード利用方法でこれを説明しています。Tabでフォームをナビゲートし、Spaceでスクロールし、⌘+Tabでアプリを切り替え、iPhoneにBluetoothキーボードを接続することさえあります。こうした習慣から、キーボードのみに依存するユーザーが直面する障壁を部分的に理解できます。特定のウェブサイトの100人 のユーザーが入力モダリティ別にどう分布するかを示すマイクロサイトを引用し、個人の思い込みを継続的に問い直すことが、インクルーシブデザインへの唯一の持続可能な道だという呼びかけで締めくくっています。
READ_FULL_LOGarrow_forward summarize Digest_Summary
今週のデザインシステム関連コンテンツは、一つ の共通テーマに収束しました。それは「外見ではなく役割で名前をつける」ことです。今週の注目記事はW3C DTCG 仕様の$extensionsエスケープハッチを分析し、ツール固有のメタデータ、ガバナンス注釈、WCAGコントラスト比などのアクセシビリティデータをトークンに付加しながらコア仕様をクリーンに保つ方法を示しました。Penpot はこれを完全サポートする最初のデザインツールです。Figma はエクスポートでextensionsをまだ削除するため、extensions重視のワークフローを採用する前に把握しておく必要があります。
Sascha Beckerのセマンティックカラーロールに関する記事がこれを補完しました。primaryやbackground.paperのように色の役割を表す名前を使うことで、単一のテーマ定義で何百もの画面ごとのアノテーションを置き換え、全量監査なしにブランド変更にも対応できます。 Angular のSignal Formsの詳細解説はコンポーネントシステムの観点を補い、Signalsベースのフォーム状態リアクティビティモデルが完全な再レンダリングを排除しながら既存アプローチからの段階的な移行パスを提供することを示しました。
アクセシビリティはすべてのテーマを貫きました。altテキストの責任連鎖から、2026年 においても97% のウェブサイトが抱えるWCAG違反の実証的な監査まで、アクセシビリティ不足は限られた世界観で設計するチームから予測可能に生まれるという一貫したメッセージが伝わりました。
Key Takeaways DTCGの$extensionsフィールドはトークンファイルにツール固有のメタデータやアクセシビリティデータを格納するのに適した場所ですが、Figmaはエクスポートでextensionsをまだ削除するため、ワークフロー設計時に必ず考慮してください。 セマンティックカラーロール名（primary、error、background.paper）を使うことで、画面ごとのアノテーション更新なしにブランド変更やダークモードにも対応できるトークンになります。 2026年 においても97% のウェブサイトが基本的なWCAG準拠を満たしていません。見出し階層のエラー、ゴーストボタンのコントラスト不足、壊れたタブ順がもっとも多い原因です。
