ツールPenpot、AI搭載デザインワークフロー向けMCPサーバーを実験
オープンソースデザインプラットフォームのPenpotが、MCP（Model Context Protocol）サーバーの実験を進めています。このサーバーはLLMとPenpot APIのセキュアな橋渡し役として機能し、AIがシンプルな生成プロンプトではなく実際のデザイン操作を行えるようにします。PenpotはデザインをコードとしてPenpotが表現するアプローチを採用しているため、MCP経由で他ツールにない粒度のプログラム操作が可能です。この機能はPenpot Fest 2025でデザイナーのJuan de la Cruz GarcíaとOraios AI共同創業者のDominik JainがClaude Desktopを使ってライブデモを行いました。サーバーはLLM非依存で、Claude in VS Code、Cursor、Claude Desktop、JetBrains Rider（Junie AI）で動作確認済みです。Python SDK、REST API、プラグインシステム、CLIツールを含み、design-to-code、code-to-design、Storybookの生成、アクセシビリティ分析、ビジュアルリグレッションテスト、デザインシステム準拠チェックなど幅広いユースケースに対応します。現在ベータ前の実験段階で、support@penpot.appでボランティアテスターを募集中です。
Read Articlearrow_forward Article · アクセシビリティREAD TIME: 6m
ADA改革と企業・障害者双方の真のWin-Winへの道
Dequeは、Mike Lawler下院議員が共同提案者となっている「ADA 30 Days to Comply Act」を含む米国のADA改革案を検討しています。この法案はADA執行前に通知・是正（notice-and-cure）手続きを要求するものです。悪意ある訴訟の削減という目標は正当だとしつつも、アクセシビリティ上の障壁を想定外の事態として扱うことは、問題の構造的な性質を歪めていると論じています。ほとんどの障害は、アクセシビリティ基準なしに選ばれたサードパーティプラットフォーム、再利用されたテンプレート、ガバナンスの不在に起因します。通知・是正条項は、法律の保護を受ける前に障害者自身が違反を特定・報告することを求め、就職申請や医療情報アクセスのような時間的制約のあるデジタル場面では特に深刻な被害をもたらします。Dequeは代替策として、明確で安定した技術標準、継続的な準拠に連動したセーフハーバー、手頃なツール、調達責任を提唱しています。
READ_FULL_LOGarrow_forwardArticle · ツールREAD TIME: 7m
Figma Smart AnimateからReactへ：実践パイプライン
Carmen Ansioは、Figma Config 2025（サンフランシスコ）での発表をもとに、Figmaからコードへのアニメーションハンドオフの核心にある2つの問題を明示しています：複雑に作り込まれたモーション（タイミング・イージングカーブ・フレームシーケンス）の保全と、インタラクションロジック（ステートマシン・イベントハンドラ）のReact連携です。解決策はツールの明確な分担です：dotLottieはLottieFiles Figmaプラグインを通じてFigmaからエクスポートしたアニメーションを担当し、Smart Animateトランジションのイージング・duration・opacity・scale・positionを捕捉します；Framer MotionはAnimatePresenceによるキャラクター切り替えやホバー/タップのスケール応答など、Reactステート起動のインタラクティビティをすべて担います。@lottiefiles/dotlottie-webパッケージ（lottie-webではない）はWebAssemblyレンダラーで<canvas>に直接描画するため、Viteのpublic/フォルダにWASMバイナリが必要です。重要な実装の詳細：同一コンポーネントに複数のdotLottieアニメーションがある場合、それぞれ専用の<canvas>要素が必要で——1つのインスタンスでsrcを切り替えるとロードフラッシュが発生します——CSSのopacityトランジションでクロスフェードを処理します。既知のエクスポートの落とし穴として、ネストされたコンポーネント状態のフラット化、可変フォントのテキストプロパティ、FigmaのSpringイージングの三次ベジェ近似などが挙げられます。
READ_FULL_LOGarrow_forwardArticle · CSS機能READ TIME: 2m
ネストしたcontrast-color()でフォーカスリング？
Dave Rupertは、contrast-color(contrast-color(var(--page-bg)))のようにCSS contrast-color()をネストすることで、MicrosoftのFluentデザインシステムで使われている2トークンのフォーカスリングパターン（--focus-inner-ringと--focus-outer-ring）を置き換えられるかを検討しています。このパターンは青いボタンのような任意の背景に対してコントラストを保証するため、1pxインセットの白いハイライトと2pxオフセットの黒いアウトラインを組み合わせます。ネストされた呼び出しはcontrast-color()の戻り値を反転させ、理論的には2つのテーマトークンペアの代わりに既存の--page-bgトークン1つで済むようになります。ただし重要な制約があります：フォーカスリングがカード背景など--page-bgと異なる表面上に現れると、この手法は機能しません。contrast-color()のブラウザサポートがまだ不安定で、light-dark()の方がシンプルで読みやすいため、RupertはCSSのcolor-schemeとlight-dark()の組み合わせを最終的に推奨しています。
READ_FULL_LOGarrow_forwardArticle · プロセスREAD TIME: 11m
多くのプロダクトチームが本当には権限を与えられていない理由
Nielsen Norman GroupのLaura Kleinは、Marty Caganが2020年の著書Empoweredで定義したチームへの権限付与——チームに機能ではなく問題が与えられ、解決策の決定権を持つこと——が、ほとんどの大規模組織の構造と根本的に相容れないと論じています。4つの複合的な機能不全を分析しています：共有システムとコンポーネントによる過大な調整コスト（あるフィンテック企業のPMはナビゲーション変更1件に3ヶ月・14回の会議・47ページの文書を費やしました）、ユーザージャーニーではなくエンジニアリングの境界に基づく組織構造、医療マーケットプレイスの例に見られるようにうまく構成されたチームさえ阻む製品の依存関係、そしてロードマップの確実性に対する経営陣の要求と反復的な発見プロセスとの衝突です。Kleinは問題選択時のクロスチーム依存性の最小化、ユーザージャーニー全体の可視化、チーム間関係の事前構築などの実践的な戦術を提示しつつ、組織規模が大きくなるほどPMが戦略的思考者ではなく調整コストになるという現実も認めています。
READ_FULL_LOGarrow_forwardArticle · アクセシビリティREAD TIME: 6m
アクセシビリティテストに関するよくある誤解
TetraLogicalのEla Gorlaが執筆したこの記事は、デジタルチームにおける効果的なアクセシビリティテストを妨げる5つの根強い誤解を取り上げています。最も重要な誤解は、自動化ツールがWCAG要件の20〜40%しか検出できないにもかかわらず、多くのチームが包括的な監査として扱っているという点です。また、修正コストが高くなるにもかかわらず、テストがプロジェクト完了時のQAまで先送りされる慣行も指摘しています。Gorlaは、デザイナー・開発者・コンテンツライター・メディアプロデューサーなど全ての職種がそれぞれの役割に応じたアクセシビリティテストの責任を担うべきと主張します。障害者ユーザーパネルのみへの依存にも警鐘を鳴らし、WCAG SC 1.4.10（Reflow：320 CSSピクセル幅でのコンテンツの再配置）をパネルでほとんどカバーされない要件の例として挙げています。テスト対象のAT・ブラウザ・OS組み合わせの優先順位付けにはWebAIM Screen Reader User Surveyを推奨しています。
READ_FULL_LOGarrow_forwardsummarizeDigest_Summary
第2週のデザインシステムを象徴するのは、本当に新しいシグナルです: PenpotがMCPサーバーをLLMとデザインAPIの間のプログラム的な橋渡しとして実験しており、AIがテキスト説明からの生成ではなく実際のデザイン操作を実行できるようにしています。PenpotはデザインをコードとしてPenpotが表現するため、MCPレイヤーは競合ツールが追いつけない粒度を持ちます。これはPenpot Fest 2025でClaude Desktopを使ってライブ実演され、VS Code・Cursor・JetBrains Riderでもテスト済みです。LLM非依存のPython SDKでdesign-to-code・code-to-design・Storybookの生成・アクセシビリティ分析・デザインシステム準拠チェックをサポートします。まだベータ前ですが、このアーキテクチャはデザインツールがエージェント層と統合する方向性を先取りしています。
今週のアクセシビリティのテーマは2つの次元を持ちます。TetraLogicalのEla Gorlaは、チーム全体のアクセシビリティテストを静かに弱体化させる5つの誤解を解体します: 自動化ツールはWCAG要件の20〜40%しか検出できないのに包括的な監査として扱われ、テストはプロジェクト末期のQAまで先送りされ、責任はスペシャリストにのみ委任されます。実際にテストすべきAT/ブラウザ/OSの組み合わせの優先順位付けにはWebAIM Screen Reader User Surveyを推奨しています。またDequeによるADA改革分析では、通知・是正条項が障害者自身が違反を特定・報告して初めて法の保護が適用されるという構造的な問題を指摘しています。求職申請や医療情報アクセスのような時間的制約のあるデジタル場面では特に深刻です。
Dave Rupertのフォーカスリングのためのネストされたcontrast-color()の調査は、CSS機能の合成を極限まで押し進めた注目の事例です。ネストされた呼び出しは理論的に2トークンパターン（--focus-inner-ringと--focus-outer-ring）を単一の--page-bgトークンに縮小しますが、フォーカスリングがページ背景と異なる表面の上に現れると機能しません。不安定なcontrast-color()ブラウザサポートを考えると、light-dark()へのフォールバック推奨は実用的です。Carmen AnsioのFigma Config 2025の発表は、dotLottie/Framer MotionによるReactアニメーションハンドオフパイプラインをドキュメント化して今週を締めくくります。WebAssembly canvasレンダリングのdotLottieはモーション忠実度を、Framer MotionはReactステート駆動のインタラクティビティを担当し、コンポーネントごとに複数のアニメーションがある場合は各々専用の<canvas>要素が必要という重要な実装上の注意があります。
Key Takeaways- PenpotのMCPサーバー実験をdesign-to-code自動化のテンプレートとして評価してみてください。LLM非依存のアーキテクチャにより、チームがすでに使用しているモデルと接続できます。
- 今すぐすべての職種にアクセシビリティテストの責任を分散させてください。自動化ツールはWCAG要件の最大40%しか検出できず、後期段階の欠陥を修正するコストは最初から組み込む場合よりもはるかに高くなります。
- Figma-to-Reactアニメーションパイプラインでは、各dotLottieアニメーションに専用の
<canvas>要素を与え、クロスフェードにはCSSのopacityトランジションを使用してください。単一インスタンスでsrcを切り替えるとローディングフラッシュが発生します。
