
エージェント型AIのためのデザイン:制御・同意・説明責任の実践的UXパターン —… — 2026年 第7週 デザインシステム
UI component architecture, design tokens, and semantic theming Compiled for immediate developer deployment.


Design Token管理にNotionとStyle Dictionaryを活用する
color.brand.primary)、Value、Type、Category、Description、そしてビルドに含めるトークンを制御するStatusフィールド(Draft / Review / Approved / Deprecated)が設定されます。fetch-tokens.jsスクリプトはNotion APIのページネーションを処理し、フラットな結果をStyle Dictionaryが利用できるネストされたJSONツリーに変換し、Notionのメタデータを$extensionsフィールドに保存します。push-tokens.jsスクリプトで双方向同期も可能で、Notionデータベースが常に唯一の情報源として機能します。
shadcnコンポーネントレジストリの構築方法
dashboard、status-page、web)に分割した際に生じた共有コンポーネント問題を、バンドラーやwebpackエイリアスを使わずに公開shadcnレジストリで解決した経緯を解説しています。@/エイリアス方式(アプリからのimportでエラー)、tsupバンドリング(再ビルドの遅延)、webpackエイリアスのリマッピング(@/の競合)という3つのアプローチはすべて失敗しました。最終的な解決策は、内部importをTypeScriptパスエイリアスで@openstatus/ui/*にマッピングし、公開時にtransform-imports.mjsの正規表現で@/*に変換する方式です。これによりpackages/ui内でnpx shadcn addとnpx shadcn diffがネイティブに動作し、誰でもnpx shadcn@latest addでインストールできるコンポーネントが配布されます。
ナビゲーションにARIA menuは必要?おそらく不要
menu、menubar、menuitemロールは、Google DocsのFile/Edit/Viewドロップダウンのようなアプリケーションメニューを再現するためのものであり、通常のサイトナビゲーションには適していません。これらのロールを<nav>要素に誤って適用すると、スクリーンリーダーは矢印キーによるナビゲーションを期待しますが、それを実現するJavaScriptが100行以上必要であり、実装されていなければキーボード操作が壊れてしまいます。WebAIMのデータによると、ホームページの約7%がARIA menuロールを使用しており、その4分の1以上がWAVEスキャンで検出可能なアクセシビリティエラーを引き起こしています。
デジタルトラストの構築:メンタルヘルスアプリ向け共感中心UXフレームワーク — Smashing Magazine

シニアデザイナー10人が見せるFigmaファイル整理術
ホストのJayが、Figma、Slack、Firefox、Webflow、Hexのシニアデザイナーにインタビューし、実際のFigmaファイル構成を紹介します。共通パターンとして、色分けされたステータスサムネイル付きカバーページ(緑=リリース済み、黄=進行中)、SlackチャンネルやPRDにリンクするREADMEブロック、上部の"Ready for Dev"フレームと下部の自由な探索スペースの明確な分離などが挙げられます。Firefoxチームはタイムゾーンを超えた全デザイナーが使う単一の"mobile assembly file"を採用し、サーフェス(オンボーディング、ツールバー、ホームページ)をトップレベルのセクションとして共同オーナーシップを促進しています。複数のデザイナーがFigma内に直接ガントチャートのタイムラインを埋め込み、セクションを色分け(紫vs青のワークフローパス)し、作業ファイルの軽量化のために一時アーカイブは別ファイルに移動しています。
エージェント型AIのためのデザイン:制御・同意・説明責任の実践的UXパターン — Smashing Magazine
Victor Yoccoは、エージェントAIインタラクションのライフサイクル全体にわたる6つの具体的なUXパターンを提示しています:Intent Preview、Autonomy Dial、Explainable Rationale、Confidence Signal、Action Audit & Undo、Escalation Pathwayです。それぞれのパターンには成功指標が紐づいており、たとえばIntent Previewの承認率目標は85%以上、Undoの取り消し率は5%未満、Escalationの回復成功率は90%以上とされています。エラー回復設計には「サービスリカバリーのパラドックス」が活用され、3段階のリリースロードマップ(基盤安全性→調整済み自律性→積極的委任)と、Agentic AI倫理評議会の設置も提唱されています。

シニアデザイナー10人が見せるFigmaファイル整理術
ホストのJayが、Figma、Slack、Firefox、Webflow、Hexのシニアデザイナーにインタビューし、実際のFigmaファイル構成を紹介します。共通パターンとして、色分けされたステータスサムネイル付きカバーページ(緑=リリース済み、黄=進行中)、SlackチャンネルやPRDにリンクするREADMEブロック、上部の"Ready for Dev"フレームと下部の自由な探索スペースの明確な分離などが挙げられます。Firefoxチームはタイムゾーンを超えた全デザイナーが使う単一の"mobile assembly file"を採用し、サーフェス(オンボーディング、ツールバー、ホームページ)をトップレベルのセクションとして共同オーナーシップを促進しています。複数のデザイナーがFigma内に直接ガントチャートのタイムラインを埋め込み、セクションを色分け(紫vs青のワークフローパス)し、作業ファイルの軽量化のために一時アーカイブは別ファイルに移動しています。
Design Token管理にNotionとStyle Dictionaryを活用する
このチュートリアルでは、Style Dictinaryのビルドパイプラインの前段にNotionをコラボレーション向け非技術者フレンドリーなインターフェースとして接続する方法を解説しています。Notionデータベースには、Token Path(ドット記法、例:color.brand.primary)、Value、Type、Category、Description、そしてビルドに含めるトークンを制御するStatusフィールド(Draft / Review / Approved / Deprecated)が設定されます。fetch-tokens.jsスクリプトはNotion APIのページネーションを処理し、フラットな結果をStyle Dictionaryが利用できるネストされたJSONツリーに変換し、Notionのメタデータを$extensionsフィールドに保存します。push-tokens.jsスクリプトで双方向同期も可能で、Notionデータベースが常に唯一の情報源として機能します。
shadcnコンポーネントレジストリの構築方法
OpenStatusのMaximilian Kaskeは、Next.jsプロジェクトを3つのアプリ(dashboard、status-page、web)に分割した際に生じた共有コンポーネント問題を、バンドラーやwebpackエイリアスを使わずに公開shadcnレジストリで解決した経緯を解説しています。@/エイリアス方式(アプリからのimportでエラー)、tsupバンドリング(再ビルドの遅延)、webpackエイリアスのリマッピング(@/の競合)という3つのアプローチはすべて失敗しました。最終的な解決策は、内部importをTypeScriptパスエイリアスで@openstatus/ui/*にマッピングし、公開時にtransform-imports.mjsの正規表現で@/*に変換する方式です。これによりpackages/ui内でnpx shadcn addとnpx shadcn diffがネイティブに動作し、誰でもnpx shadcn@latest addでインストールできるコンポーネントが配布されます。
ナビゲーションにARIA menuは必要?おそらく不要
Elle Smithは、アクセシビリティ分野で広く誤解されている点を明確にしています:ARIA のmenu、menubar、menuitemロールは、Google DocsのFile/Edit/Viewドロップダウンのようなアプリケーションメニューを再現するためのものであり、通常のサイトナビゲーションには適していません。これらのロールを<nav>要素に誤って適用すると、スクリーンリーダーは矢印キーによるナビゲーションを期待しますが、それを実現するJavaScriptが100行以上必要であり、実装されていなければキーボード操作が壊れてしまいます。WebAIMのデータによると、ホームページの約7%がARIA menuロールを使用しており、その4分の1以上がWAVEスキャンで検出可能なアクセシビリティエラーを引き起こしています。
デジタルトラストの構築:メンタルヘルスアプリ向け共感中心UXフレームワーク — Smashing Magazine
Kat Homanは、Teeni(ティーンの親向けアプリ)とBear Room(即時ストレス解消アプリ)での実際の製品開発をもとに、3つの柱からなるEmpathy-Centred UXフレームワークを提示しています。オンボーディングの柱では、データ収集チェックリストを検証的な言語と「夜の街」ナラティブメタファーに置き換え、ユーザーが自身の悩みを正常化できるよう支援します。感情的インターフェースの柱では、WCAG 2.2をベースラインとしながら、低刺激のアーシーなカラーパレット、オプトイン型の触覚マイクロインタラクション(プチプチ潰し)、タイピングが困難なユーザー向けの音声ファーストフローを重ねます。リテンションの柱では、罰則的なストリークを3日ごとに獲得できる「Key」エコノミーに置き換え、Keyを他のユーザーに贈ることも可能にしています。
READ_FULL_LOGarrow_forward今週のデザインシステムカテゴリはAIとUXの交差点に関する議論が中心です。Smashing Magazineの注目記事は、信頼できるエージェントAIインターフェース設計のための6つの具体的なUXパターン — Intent Preview、Autonomy Dial、Explainable Rationale、Confidence Signal、Action Audit & Undo、Escalation Pathway — を成功指標の目標値と段階的ロールアウトロードマップとともに提示しています。AIエージェントをただの機能ではなく、ユーザーが監視・取り消せる行為者として捉える最も厳密なフレームワークです。
アクセシビリティ分野では今週鋭い指摘がなされています。サイトナビゲーションにARIA menuやmenuitemロールを適用する慣習が実際に有害であることが示され、使用サイトの4分の1以上でキーボード操作のエラーが発生しています。メンタルヘルスアプリのUXも取り上げられ、オンボーディング言語・低刺激パレット・罰則的ストリークの代替という3つの柱の共感フレームワークが紹介されています。
ツーリング面では、NotionをStyle Dictionaryトークンパイプラインの非開発者フレンドリーなフロントエンドとして連携させるワークフローチュートリアルが登場します。OpenStatusはモノレポからバンドラー不要でshadcnコンポーネントを公開するインポート変換の巧みな手法を共有しています。Figma・Slack・Firefoxのシニアデザイナーによるファイル整理術の動画が今週を締めくくります。
- Smashing Magazineの6つのエージェントUXパターン、特に取り消し率5%以下を目標とするAction Audit & Undoは、信頼できるAI駆動製品機能を構築するための最も明確な公開チェックリストを提供しています。
- 通常のサイトナビゲーションにARIA menuロールを適用するのは広く見られる誤りで、スクリーンリーダーに矢印キー操作を期待させるものの、JavaScriptで実装されていなければキーボードアクセスが壊れます。
- Statusフィールドでビルドパイプラインに含まれるトークンをゲートすることで、NotionをStyle Dictionaryの前段に置き、非開発者も使いやすいトークン管理インターフェースとして活用できます。