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

Declarative Shadow DOMとNative Server-side… — 2026年 第18週 デザインシステム

UI component architecture, design tokens, and semantic theming

calendar_todaysummarizeWeek 18-2026
Webコンポーネント

Declarative Shadow DOMとNative Server-side Rendering

Declarative Shadow DOM(DSD)は、template要素のshadowrootmode属性を使ってshadow rootの接続をJavaScriptではなくHTML上で行えるようにすることで、Web Componentsの真のサーバーサイドレンダリングを実現します。DSD以前はshadow rootを命令的にしか接続できず、コンポーネントの内部はHTMLストリームに含まれず、クライアント側のJavaScriptで再構築する必要がありました。2024年2月以降、主要ブラウザ全てでBaselineとなったDSDにより、インタラクティブでないコンポーネントはhydrationなしで初期HTMLから完全にレンダリングされます。これにより、LCP・INP・CLSの3つのCore Web Vitalsがすべて改善されます。ただし、ARIAのクロスバウンダリー参照やフォーム関連付けに関するアクセシビリティの制限は依然として存在するため、フォームコントロールはlight DOMに置き、slotで挿入する必要があります。

Declarative Shadow DOMとNative Server-side Rendering
Read Articlearrow_forward
Video · デザインツール

お気に入りの「Alternative」Design Toolを試してみた

JuxtaposedはPenpot・Lunacy・Blender・Affinity・Rive・Friction・Caligari・Inkscape・Gravit・Unicorn Studio・Aseprite・PixiEditorなど18種類の非Figmaデザインツールを、同じボタンデザインを各ツールで再現するという方法で実地テストしています。Penpotはデザインには堅牢ですが、smart-animateやhoverトリガーがなくプロトタイピングには弱点がありました。Blenderはガラスシェーダー・ノードベースのエフェクト・タイムラインアニメーションのおかげでUI作業で際立ちました。Caligariは粘土のように形状を自由に変形できる機能とインラインシェーダーエディターで印象的でした。モーションとプロトタイピングではRiveとFrictionがリードしました。InkscapeはクリーンなペンツールとグラデーションコントロールでLinuxのUIツールとして推奨されています。結論として、BlenderはUI作業で真剣に検討する価値があり、PixiEditorはノードエディターを持つピクセルアートに魅力的で、Caligariはモーションが多い作業への乗り換えを検討する価値があります。

AI_INFOGRAPHIC
お気に入りの「Alternative」Design Toolを試してみた — infographicWATCH_VIDEOarrow_forward
Article · アクセシビリティREAD TIME: 7m

Engineering LeaderがAccessibilityを始める方法

Dequeは、デジタルアクセシビリティを初めて担当するエンジニアリングリーダーのための実践的な90日間プランを提示しています。第1ステージはスコープの把握に集中します。組織が準拠すべき標準、法的プレッシャー、既存の監査やツールの有無を確認します。第2ステージはツールとテストをカバーします。DequeのaxeやWebAIMのWAVEなどのブラウザ拡張機能から始め、Playwright・Selenium・Cypressなどのフレームワークと統合した自動テスト、AIを活用したガイドテスト、IDEレベルの修正のためのMCP接続へと発展させます。第3ステージはアクセシビリティ専門家による正式な監査と修正を扱い、優先順位付きダッシュボード・VPAT・Accessibility Conformance Reportが成果物となります。長期的な重要投資として、ハッカソン、専任a11yエンジニア、またはIAAP認定によるスキルアップトラックを並行して推奨しています。

READ_FULL_LOGarrow_forward
Article · デザイン仕様READ TIME: 2m

Google Stitch、UI Design共有の新標準DESIGN.mdを発表

Google Labsは、自然言語プロンプトをUIレイアウト・ビジュアルプロトタイプ・フロントエンドコードに変換する実験的AIデザインツール「Stitch」を発表しました。より重要なイノベーションはDESIGN.mdです。これは従来のFigmaファイル・PDF・静的モックアップに代わる、機械可読なデザイン仕様フォーマットです。デザインの意図を構造化されたバージョン管理可能なファイルとして扱うことで、DESIGN.mdはAIツールが共有ルールに基づいて一貫したUIを生成し、開発者がデザイン仕様をコードパイプラインで直接再利用し、チームがコード変更をレビューするのと同じようにデザインの決定をdiff・レビューできるようにします。この変化はデザインをビジュアル成果物ではなくインフラとして位置づけ、製品チームのコラボレーションのあり方を根本的に変える可能性があります。

READ_FULL_LOGarrow_forward
Article · 開発者体験READ TIME: 13m

Design-minded Engineer

AKQA・Volvo・Canvaで25年のキャリアを積んだDen Odellは、デザイナーの意図と実際にリリースされた製品のギャップを埋めることが、ソフトウェアエンジニアリングで最も過小評価されているスキルだと主張します。彼はdesign-minded engineerをDesign Engineerという役職と区別しています。前者は肩書きではなく思考方法と能力であり、組織全体に拡張しやすいとしています。彼が提唱するフレームワークは3つのレンズを使います: ユーザー行動(ロケール・RTLレイアウト・実際の利用環境の考慮)、パフォーマンス(入力レイテンシやアニメーションの忠実度をデザインの決定として扱う)、アクセシビリティ(WCAGスコアだけでなくVoiceOverナビゲーション)。重要な概念はgap statesで、モックアップには現れないが実際のセッションの多くでユーザー体験を決定するローディング・エラー・空の状態です。AI生成UIはデザインの意図ではなくデフォルトによるデザインのリスクを加速させるため、人間のデザイン判断力はより重要になると警告しています。

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

VS Code Release NotesでAccessibilityを置き換えるAI

Thomas Günterは、かつてアクセシビリティ改善に大きな紙面を割いていたVS Codeのリリースノートが、今やAI機能のアナウンスにその場所を明け渡していると指摘しています。彼が作成したグラフによると、VS Codeの直近10リリースのうちアクセシビリティに言及しているのはわずか3件で、AIに関する内容が圧倒的です。彼はアクセシビリティはトレンドや流行語ではなく、ソフトウェア品質の真の指標であり、バイブコーディングが横行する時代においてとりわけ重要だと主張します。コミュニティからの返信も同様の懸念を示しており、EUのアクセシビリティ規制が組織の実質的な投資を促進していたが、AIブームがその議論を置き換えていると指摘しています。

READ_FULL_LOGarrow_forward
Article · アーキテクチャREAD TIME: 11m

22行のTypeScriptで作るServer-driven UI

Neciu Danは、Airbnbが広めたServer-Driven UI(SDUI)パターンを、JSONツリー契約・ComponentRegistryクラス・再帰的SDUIRenderer関数という3つのコア要素の最小TypeScript実装で解説しています。サーバーはtype・props・オプションのchildren・オプションのactionsを持つバージョン付きJSONツリーを送信し、クライアントはregistryを通じて各typeの文字列を事前登録されたReactコンポーネントにマッピングします。useActionDispatcherフックはnavigate・add-to-cart・trackのアクションタイプを単一のswitchで処理し、コンポーネントをアクションロジックから分離します。ルートのversionフィールドによる契約バージョン管理は、リリースサイクルが長いモバイルクライアントでpropsの形状を安全に進化させるために不可欠です。このパターンは頻繁に変更されるディスカバリー画面やプロモーションレイアウトに適していますが、すべてのレンダリングにサーバー接続が必要なため、認証フローやオフライン必須の画面には使用すべきではありません。

READ_FULL_LOGarrow_forward
summarizeDigest_Summary

今週はデザインシステムの考え方にさまざまな挑戦が提起されました。Google LabsはFigmaファイル・PDF・静的モックアップを置き換えるための機械可読・バージョン管理可能なデザイン仕様フォーマットDESIGN.mdを導入した実験的AIデザインツールStitchを公開しました。デザインの意図を構造化データとして扱うことで、DESIGN.mdはAIツールが共有ルールに基づいて一貫したUIを生成し、チームがコード変更をレビューするのと同じ方法でデザインの決定をdiff・レビューできるようにします。アクセシビリティ分野ではDequeが、axe・WAVEなどのブラウザ拡張機能からPlaywright/Selenium/Cypressの自動テスト、VPAT・Accessibility Conformance Reportを含む正式な監査へと進むエンジニアリングリーダー向けの90日間プランを示しました。

2024年2月から主要ブラウザ全てでBaselineとなったDeclarative Shadow DOM（DSD）は、shadowrootmode属性によってWeb Componentsの真のサーバーサイドレンダリングを可能にし、クライアントサイドのhydrationなしでLCP・INP・CLSを改善することが詳細な技術レビューで示されました。Thomas Günterは、VS Codeの最近10リリースのうち3件しかアクセシビリティに言及しておらず、残りはAI機能の発表に置き換わっているという懸念を提起しました。EU規制がアクセシビリティをビジネス上の要件にしている状況では重要なシグナルです。

ツール面では、Penpot・Blender・Rive・Caligari・Inkscapeなど18種類の非FigmaデザインツールのストレステストでBlenderがUI作業（ガラスシェーダー・ノードエフェクト・タイムラインアニメーション）で予想外の高性能を示し、RiveとFrictionがモーション分野でリードしました。Server-Driven UI実装ガイドとDen Odell（AKQA/Volvo/Canva）による「design-minded engineer」マインドセットに関するエッセイも今週を飾りました。

Key Takeaways
  • Google LabsのStitchはDESIGN.mdを導入しました。バージョン管理可能で機械可読なデザイン仕様フォーマットで、デザインの意図をビジュアル成果物ではなくインフラとして位置づけます。
  • Declarative Shadow DOMは2024年2月からBaselineです。shadowrootmode属性でWeb ComponentsのサーバーサイドレンダリングをJavaScriptのhydrationなしに実現し、LCP・INP・CLSを改善します。
  • VS Codeのリリースノートは直近10件のうち3件しかアクセシビリティに言及しておらず、AI発表がその場所を占めています。EU規制がa11yをビジネス要件にしている中で懸念を呼んでいます。