article タグ: アクセシビリティ 読了_時間: 41分
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セクションも含まれています。
Figma 9: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_インフォグラフィックopen_in_full close アクセシビリティ 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_インフォグラフィックopen_in_full close タグ: UX 読了_時間: 7分
デザインエンジニアとしてAIを活用する Interfere のDesign EngineerがAIツールに対するワークフロー優先の視点を共有しています。目標は試行錯誤を加速することであり、創造的な判断を置き換えることではありません。日常のスタックはClaude Opus 4.5を搭載したCursor 、UIスキャフォールディングのためのFigma MCP 、そしてLLMの学習データでは古い情報になりがちなライブラリドキュメントを最新の状態で取得するcontext7 で構成されています。プロジェクト開始前にアニメーションパフォーマンス、テンプレートリテラルの代わりにcnユーティリティを使用すること、design systemの規約などをカバーするコードベースのrulesを設定し、エージェントが毎回プロンプトで説明することなく一貫したコンテキストを持てるようにしています。特にFigma MCPは複雑なマルチコンポーネント画面のスキャフォールディングを十分 な速さで生成し、手動でのポリッシングとアニメーションが人間の意味ある貢献として残る転換点となりました。記事はエージェントに思考をアウトソースすることで見えない負債が積み重なるという警告と、参入障壁がかつてなく低い時代においてクラフトマンシップとUX品質が真の差別化要因になるというメッセージで締めくくられています。
タグ: キャリア 読了_時間: 8分
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体験のデザインですが、自動化ではなく人が理解・信頼・利用できるインターフェースを作ることが核心だと強調しています。
タグ: アクセシビリティ 読了_時間: 2分
アクセシビリティに関するよくある誤解（シリーズ一覧）— TetraLogical TetraLogical が「よくあるアクセシビリティの誤解」シリーズの全記事をひとつのインデックスページにまとめ公開しました。障害、スクリーンリーダー、WCAG、アクセシビリティの実装、テストの5つ のテーマを網羅しています。WCAGが実際に適用される対象や目指すべき適合レベル、スクリーンリーダーの仕組みと開発者が対応すべき事項、AIツールやオーバーレイがなぜdesign systemレベルの適切なアクセシビリティ対応の代替にならないかといった誤解を解消することを目的としています。テストセクションでは、アクセシビリティテストの責任の所在と最も効果的な手法を解説しています。世界では約13億人 が障害を持つと公式に認定されており、一時的・状況的な制限を含めるとその数はさらに増えます。各テーマは詳細な個別記事へリンクされています。
summarize ダイジェスト_要約
今週のデザインシステムイシューは、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 といったマイクロスケールモーションと、すべてのアイコンバリアントを単一コンポーネントに統合する構造的洞察の精密な実践的デモンストレーションです。
重要ポイント 2025年 版Web Almanacによると、アクセシビリティスコアの中央値 は85% で頭打ちとなっており、モバイルサイトの69% で色彩コントラストの問題が継続しています。欧州アクセシビリティ法の2025年6 月期限は測定可能なコンプライアンスの急増をもたらしませんでした。ARIA live region（aria-live、role="alert"、<output>）はスクリーンリーダー/トーストメッセージのタイミング問題を解決しますが、検索結果では逆効果になる場合があります。結果見出しへのプログラムによるフォーカス移動の方が優れていることが多いです。 AIコーディングワークフローは、最初のプロンプトの前にコードベースのルールを設定したときに最も速く成熟します。Cursor＋Figma MCPを使用したDesign Engineerは、これにより人間の貢献がスキャフォールディングではなくポリッシングとアニメーションに移行することを発見しました。 
