(BUSAN.SASHIMI)
terminal
Weekly Digest // DESIGN_SYSTEMS — Week 3-2026
architectureWeekly Report

Web Almanac 2025：アクセシビリティ — 2026年 第3週 デザインシステム

UI component architecture, design tokens, and semantic theming

calendar_todaysummarizeWeek 3-2026
アクセシビリティ

Web Almanac 2025：アクセシビリティ

HTTP Archiveの1,700万サイトのデータに基づく2025年版Web Almanacアクセシビリティ章によると、Lighthouseアクセシビリティスコアの中央値は2024年比1%増の85%に達しました。色彩コントラストは依然として最大の問題であり、WCAGの最低要件を満たすモバイルサイトは31%にとどまっています。2025年にはサイトの67%がデフォルトのフォーカスアウトラインを明示的に削除しており（2024年比14%増）、:focus-visibleの採用が補正策として広がっています。欧州アクセシビリティ法（EAA）が2025年6月28日に完全施行されましたが、欧州サイトのデータに劇的なコンプライアンス向上は見られず、実装の遅延が示されています。注目すべき知見として、.aiドメインが.govと.eduを除くすべてのドメインタイプを上回るアクセシビリティスコアを記録しており、AIスタートアップが最初からモダンな開発慣行を採用していることが一因と見られます。本章にはLLMがalt属性生成やコードスキャナーを通じてアクセシビリティに与える影響を扱う新しいAIセクションも含まれています。

Web Almanac 2025：アクセシビリティ
Read Articlearrow_forward
Video · Figma9:56

Claudeのアイコンが魅力的な理由 — Figmaのアニメーションアイコンコンポーネント

MDSはAnthropicのClaudeインターフェースアイコンの繊細なhoverアニメーションをFigmaのSmart Animateで再現する方法をステップごとに解説しています。ブラウザのインスペクターからSVGコードを直接取得してFigmaに貼り付け、各アイコン（new chat、chats、projects、artifacts、code）をdefaultとhoveredの2つのvariantを持つコンポーネントとして構築します。hoverアニメーションは意図的にマイクロスケールで設計されており、チャットバブルは1pxずつ広がり、フォルダーは0.5px縮小しながら紙が5°回転し、コードブラケットは1pxずつ外側に広がります。重要な構造的知見は、5つのアイコンをvariantマトリクス（合計10個: 5アイコン×2状態）を持つ単一コンポーネントに統合することで、Smart Animateがインスタンスのスワップではなく単一コンポーネント内の状態変化を検出できるようにする点です。プロトタイプ接続には「While Hovering」トリガー、Smart Animate、150ms、ease-outを使用します。

AI_INFOGRAPHIC
Claudeのアイコンが魅力的な理由 — Figmaのアニメーションアイコンコンポーネント — infographicWATCH_VIDEOarrow_forward
Video · アクセシビリティ46:40

ショッピング・デッド：ライブ動的Webコンテンツをアクセシブルに — NDC Copenhagen 2025

フィンランドの国家郵便サービスPostiでlead design systems developerを務めるDaniel Yuschickが、ゾンビテーマのe-commerceデモを使い、ARIA live regionが動的でページ更新のないWebページのスクリーンリーダー問題をどのように解決するかを実演します。核心的な知見は、ページ上のどこへでもフォーカスを移動できる視覚的な「フリーフォーム」ナビゲーションと、7〜10秒で消えるトーストメッセージに間に合わない可能性があるスクリーンリーダーの「カセットテープ」式線形ナビゲーションの対比です。live regionを作成する3つのメカニズムを解説しています: aria-live（生の属性、値: off/polite/assertive）、HTMLロール（role="alert"→assertive、role="status"→polite）、そしてカート合計などの数値更新に活用できる<output>要素です。検索結果のケーススタディでは、live regionがすべての結果を一度に流し込んでしまう逆効果の事例と、「検索結果: 7件」の見出しにプログラムでフォーカスを移動する方法がより優れた体験を提供することを示しています。

AI_INFOGRAPHIC
ショッピング・デッド：ライブ動的Webコンテンツをアクセシブルに — NDC Copenhagen 2025 — infographicWATCH_VIDEOarrow_forward
Article · UXREAD TIME: 7m

デザインエンジニアとしてAIを活用する

InterfereのDesign EngineerがAIツールに対するワークフロー優先の視点を共有しています。目標は試行錯誤を加速することであり、創造的な判断を置き換えることではありません。日常のスタックはClaude Opus 4.5を搭載したCursor、UIスキャフォールディングのためのFigma MCP、そしてLLMの学習データでは古い情報になりがちなライブラリドキュメントを最新の状態で取得するcontext7で構成されています。プロジェクト開始前にアニメーションパフォーマンス、テンプレートリテラルの代わりにcnユーティリティを使用すること、design systemの規約などをカバーするコードベースのrulesを設定し、エージェントが毎回プロンプトで説明することなく一貫したコンテキストを持てるようにしています。特にFigma MCPは複雑なマルチコンポーネント画面のスキャフォールディングを十分な速さで生成し、手動でのポリッシングとアニメーションが人間の意味ある貢献として残る転換点となりました。記事はエージェントに思考をアウトソースすることで見えない負債が積み重なるという警告と、参入障壁がかつてなく低い時代においてクラフトマンシップとUX品質が真の差別化要因になるというメッセージで締めくくられています。

READ_FULL_LOGarrow_forward
Article · キャリアREAD TIME: 8m

2026年のUX・プロダクトデザイナーのキャリアパス

Vitaly Friedmanは、UX・プロダクトデザイナーが2026年にプロジェクト間を受動的に漂うのではなく、キャリアを主体的に設計するための実践的なフレームワークを紹介しています。成功体験、懸念、委任候補業務、3つの成長優先事項を棚卸しする年次レトロスペクティブをキャリアの方向性設定の基盤として推奨しています。具体的なツールも2つ紹介されています。楽しさと自信をマッピングする20〜30分のFigmaテンプレート「UX Skills Self-Assessment Matrix」（Maigen Thomas作）と、JuniorからStaffまでの戦略・ガバナンス・体系的思考の習熟度を示すJavier Cuelloの「Design System Teamsキャリアレベル」フレームワークです。Friedmanはシニアリティをマネジメントへのステップアップと同一視する誤った前提を戒め、Jason Mesutの横移動モデルを代替として提示しています。2026年に最も注目されるスキル領域はAI体験のデザインですが、自動化ではなく人が理解・信頼・利用できるインターフェースを作ることが核心だと強調しています。

READ_FULL_LOGarrow_forward
Article · アクセシビリティREAD TIME: 2m

アクセシビリティに関するよくある誤解（シリーズ一覧）— TetraLogical

TetraLogicalが「よくあるアクセシビリティの誤解」シリーズの全記事をひとつのインデックスページにまとめ公開しました。障害、スクリーンリーダー、WCAG、アクセシビリティの実装、テストの5つのテーマを網羅しています。WCAGが実際に適用される対象や目指すべき適合レベル、スクリーンリーダーの仕組みと開発者が対応すべき事項、AIツールやオーバーレイがなぜdesign systemレベルの適切なアクセシビリティ対応の代替にならないかといった誤解を解消することを目的としています。テストセクションでは、アクセシビリティテストの責任の所在と最も効果的な手法を解説しています。世界では約13億人が障害を持つと公式に認定されており、一時的・状況的な制限を含めるとその数はさらに増えます。各テーマは詳細な個別記事へリンクされています。

READ_FULL_LOGarrow_forward
summarizeDigest_Summary

今週のデザインシステムイシューは、2つの相互補完的なテーマを結びつけます。AIツールがスキップできないアクセシビリティの地道な作業と、デザインエンジニアリングワークフローにおけるAIエージェントとの協働という新しい規律です。フィーチャード記事の2025年版Web Almanacアクセシビリティ章は1,700万サイトを分析しています。Lighthouseスコアの中央値85%という数字は継続的な失敗を隠しています。モバイルサイトの31%のみが最小色彩コントラストを満たし、67%のサイトがフォーカスアウトラインを明示的に削除しています（前年比14%増）。欧州アクセシビリティ法施行にもかかわらずコンプライアンスの急増は見られませんでした。注目すべき外れ値として、.aiドメインがアクセシビリティスコアでほぼすべてのドメインカテゴリを上回っています。

TetraLogicalの誤解シリーズとDaniel YuschickのARIA live regionに関するNDC講演が実践的な深みでデータを補完します。aria-live、role="alert"、そして活用されていない<output>要素が視覚的なフリーフォームナビゲーションとスクリーンリーダーの線形ナビゲーションの根本的なミスマッチを解決するというYuschickの核心的な洞察は、live regionより「検索結果: 7件」の見出しへのフォーカス移動が優れた体験をもたらすシナリオで具体化されます。AIツール面では、InterfereのDesign EngineerがClaude Opus 4.5搭載のCursorとFigma MCPを活用した規律あるワークフローを共有しています。

さらに2つの記事がAIとデザインの視点を鮮明にします。Vitaly Friedmanは2026年で最も求められるスキルがAI体験のデザインだと主張し、自動化ではなく人が理解・信頼できるインターフェース構築に焦点を当てます。MDSによるClaudeアイコンhoverアニメーションのFigma再現チュートリアルは、1pxのシフト、5°の回転、150ms ease-outといったマイクロスケールモーションと、すべてのアイコンバリアントを単一コンポーネントに統合する構造的洞察の精密な実践的デモンストレーションです。

Key Takeaways
  • 2025年版Web Almanacによると、アクセシビリティスコアの中央値は85%で頭打ちとなっており、モバイルサイトの69%で色彩コントラストの問題が継続しています。欧州アクセシビリティ法の2025年6月期限は測定可能なコンプライアンスの急増をもたらしませんでした。
  • ARIA live region（aria-live、role="alert"、<output>）はスクリーンリーダー/トーストメッセージのタイミング問題を解決しますが、検索結果では逆効果になる場合があります。結果見出しへのプログラムによるフォーカス移動の方が優れていることが多いです。
  • AIコーディングワークフローは、最初のプロンプトの前にコードベースのルールを設定したときに最も速く成熟します。Cursor＋Figma MCPを使用したDesign Engineerは、これにより人間の貢献がスキャフォールディングではなくポリッシングとアニメーションに移行することを発見しました。