AIシステムDesign SystemをAI-readyにする方法
AI生成プロトタイプは、ドキュメント化されていない設計上の決定やハードコードされた値が原因で頻繁に失敗します。AtlassianのHardik Pandyaは3レイヤーのアプローチを提示します。スペーシングルールや色の選択、コンポーネント使用ガイドラインを定義する構造化されたMarkdown specファイル、AIをアドホックな値ではなく名前付き変数のセットに制限するtoken layer、そしてハードコードされた逸脱値をスキャンするauditスクリプトです。無料FigmaプラグインのFigmaLintは、tokenの監査、切り離されたインスタンスの検出、インタラクティブ状態の欠落やアクセシビリティの問題確認を支援します。デザインシステムが更新されるたびにsyncルーティンが更新が必要なspecファイルにフラグを立て、AIが常に最新のspecを参照できるようにします。Atlassian、IBM Carbon、CMS、Nordhealthの実例がAI-readyなデザインシステムの具体像を示しています。
Read Articlearrow_forward Article · AIデザインREAD TIME: 8m
AIが生み出した四つのDesign職（現時点）
「AIデザイン」という言葉は、話す相手によって全く異なる意味を持ちます。NNGのSarah Gibbonsは4つの明確な方向性が出現したと説明しています。Claude Codeなどのツールでワークフローを加速するAIを使ったデザイン、ClaudeやCursorのようなAI-nativeプロダクトやNotion AIのような既存製品のAI機能インターフェースを構築するAI製品のデザイン、自律エージェントがコンテンツを解析・行動できるよう構造化するAIエージェントのためのデザイン、そしてMLエンジニアと協力してモデルの動作・評価基準・拒否原則を定義するAI自体のデザインです。それぞれ異なるスキルと成功指標を必要とします。現在ほとんどのデザイナーは最初の2つの領域で活動しており、エージェントインフラやモデル動作の領域に経験を持つ人はほとんどいません。
READ_FULL_LOGarrow_forwardArticle · コンプライアンスREAD TIME: 6m
NFBが期限延長を巡りDOJ・HHSを提訴：ADA Title II・Section 504 Compliance Programへの影響
2026年5月21日、全米盲人連盟（NFB）は、DOJとHHSがADA Title IIおよびSection 504のデジタルアクセシビリティ期限を1年延長した暫定最終規則に異議を申し立てる連邦訴訟をメリーランド連邦地方裁判所に提起しました。NFBは、両機関が行政手続法が要求する公開予告とパブリックコメントを経ずに、裁判所が厳しく解釈する「緊急例外」条項を濫用したと主張しています。DOJはTitle IIの期限の4日前に、HHSは大規模受領者のSection 504準拠当日に期限を延長しました。NFBが勝訴すれば元の期限が復元される可能性があり、準拠作業を一時停止した組織は残り時間が非常に少なくなる恐れがあります。Dequeは訴訟の結果にかかわらず、WCAG 2.1 A/AAの改善作業を継続し、進捗を記録することを推奨しています。
READ_FULL_LOGarrow_forwardArticle · アクセシビリティREAD TIME: 5m
HTMLのContext-aware Heading
新しい実験的なHTML属性headingoffsetにより、タグ名を変更せずにすべての子孫要素の見出しレベルをオフセットできるようになります。section要素にheadingoffset="1"を設定すると、すべてのh1の子要素がアクセシビリティツリーでh2としてレンダリングされ、ネストされたheadingoffsetコンテナはオフセットを累積してh3以下を生成します。companion属性のheadingresetを使うと、特定のコンテナがこのアルゴリズムから除外されます。:heading(3) CSSの疑似クラス（現在Firefox Nightly限定）は、タグに関係なく計算されたレベルでスタイリングを可能にします。この機能は、開発者がエディターやCMS作成者によるコンポーネントの配置コンテキストを制御できないコンポーネントベースのアーキテクチャやweb componentで特に有用です。現在Firefox NightlyのフラグのみでAndは利用可能です。
READ_FULL_LOGarrow_forwardArticle · UXリサーチREAD TIME: 6m
UXのためのBehavioral Economics
行動経済学は心理学と経済学を組み合わせ、ユーザーが行動を意図しながら実行できない理由をUX実践者が理解するのを助けます。本記事はIrrational Labsの3B Framework（Behavior、Barriers、Benefits）を、ジム会員登録の離脱という具体的な問題に適用しています。行動マップはホームページへの訪問から最終送信ボタンのクリックまで、ユーザーが実際に踏むすべてのステップを記録します。各ステップで「このジムは自分向けか？」という低い自己関連性、プラン比較時の価値の不明確さ、解約条件に対するコミットメント不安といった心理的障壁を特定します。ソーシャルプルーフ、フレッシュスタート言語、即時の節約感といったメリットも同様にマッピングされます。COM-B、Fogg Behavior Model、EASTなどの補完的モデルも参考として紹介されています。
READ_FULL_LOGarrow_forwardArticle · SDKREAD TIME: 13m
Nutrient Web SDKがHeadless化 — Design SystemとAI Agentのために
Nutrient Web SDKは、2つの異なる意味でheadlessとして提供されるようになりました。デザインシステムチームのために、完全なslotシステムがビューアのすべてのコンポーネントをアドレス指定可能にします。ツールバー、アノテーション、署名、コンテンツエディター、ドキュメント比較、測定、検索、すべてのモーダルとパネルを非表示にする、部分的にカスタマイズする、または独自コンポーネントで完全に置き換えることができます。Slot名とパラメーターの形状はバージョン管理された公開コントラクトであり、アップグレード時に静かに壊れるCSSクラスのオーバーライドとは異なります。ui: { preset: "minimal" }オプションはすべてのchromeを削除して純粋なcanvasだけを残します。AIエージェントのために、インク、テキストマークアップ、ページ編集（挿入・削除・回転・並び替え）、署名キャプチャ、ナビゲーションを含むすべてのビューア機能がプライベートメソッドなしにpublic APIでアクセス可能です。AX（agent experience）という新しい内部ベンチマークがTypeScriptコンパイル、静的API解析、実ブラウザ実行を通じて毎リリースごとにこれを検証します。
READ_FULL_LOGarrow_forwardArticle · アクセシビリティREAD TIME: 10m
Digital Accessibility Technologyの概要
この包括的なリファレンスは、支援技術を2つの大きなカテゴリーに分類しています。デバイスからユーザーに情報を届ける出力方法と、ユーザーがデバイスにデータを送る入力方法です。出力技術には、視覚的テキストを超えた意味論的情報を伝えるスクリーンリーダー、40-80セルストリップのrefreshable点字ディスプレイ、空間レイアウトや地図のためのtactileグラフィックディスプレイ、画面拡大器が含まれます。入力技術には、個人に合わせて調整されたsip-and-puffデバイス、ジャイロスコープ式ヘッドマウス、完全麻痺でも最後の入力手段となることが多いeye gazeトラッキング、マイクロスイッチベースのスイッチコントロールデバイス、片手使用に適したコーディングキーボード、手の震えがある人向けの拡張キーボード、フットペダル、磁石を使ったtongue driveシステム、深度センサーによるジェスチャー認識などが含まれます。
READ_FULL_LOGarrow_forwardsummarizeDigest_Summary
今週のデザインシステムカテゴリはAIワークフローへの対応準備が中心でした。AtlassianのHardik Pandyaは3レイヤーのAI対応フレームワークを提示しました。スペーシング・色・コンポーネントガイドラインを定義する構造化Markdown specファイル、AIの出力をアドホックな値ではなく名前付き変数に制限するtoken layer、プロトタイプのハードコードされた逸脱をスキャンするauditスクリプトです。無料FigmaプラグインのFigmaLintはtokenの監査、切り離されたインスタンスの検出、インタラクティブ状態の欠落とアクセシビリティの問題を自動チェックします。デザインシステム変更時に更新が必要なspecファイルにフラグを立てるsyncルーティンにより、AIエージェントが常に最新のspecを参照できます。Atlassian・IBM Carbon・CMS・Nordhealthの実例がAI-readyなシステムの具体像を示しました。
NNGのSarah GibbonsはAIが生み出した4つのデザイン役割を整理しました。AIを使ったデザイン（Claude Codeなどのツール活用）、AI製品のデザイン（Claude・Cursor・Notion AIなどのインターフェース構築）、AIエージェントのためのデザイン（エージェントが解析・行動できるようコンテンツを構造化）、そしてAI自体のデザイン（MLエンジニアと協力してモデルの動作・評価・拒否原則を定義）です。大半の実践者は現在最初の2つの役割にのみ従事しており、エージェントインフラとモデル動作設計スキルのギャップが拡大しています。また実験的なHTML属性headingoffset（現在Firefox Nightlyのみ）はタグ名を変更せずに子孫要素の見出しレベルをオフセットでき、CMS駆動のコンポーネントアーキテクチャの構造的課題を解決します。
Nutrient Web SDKは2方向のheadlessサポートを開始しました。すべてのビューアコンポーネント（ツールバー・アノテーション・署名・モーダル）をCSSの脆弱性なしにアドレス指定・置換できるバージョン管理されたslotシステムと、AIエージェントがインク・テキストマークアップ・ページ編集・署名キャプチャをプライベートメソッドなしに操作できる完全公開APIサーフェス（新しいAX内部ベンチマークで検証済み）です。Irrational Labsの3Bモデル（Behavior・Barriers・Benefits）を適用した行動経済学フレームワークも、広範なユーザビリティ修正の構造的代替として紹介されました。
Key Takeaways- デザインシステムをAI対応にするには3つのレイヤーが必要です。Markdown specファイル（意図とルール）、閉じたtoken語彙（アドホックな値を禁止）、ハードコードの逸脱を検出するauditスクリプト。FigmaLintがFigma側をカバーします。
- NNGは4つのAIデザイン役割を定義しています。多くのチームは最初の2つ（AIを使ったデザイン、AI製品のデザイン）にしかいませんが、エージェントインフラとモデル動作の役割が急速に拡大するスキルギャップです。
- NutrientのAXベンチマークはLLM生成コードをTypeScriptコンパイル・静的API解析・実ブラウザ実行で検証してhallucination率を測定します。SDK チームが毎リリースでエージェント対応性を検証する具体的なモデルを示しています。
