コンポーネント Storybook 10.4 Storybook 10.4 では、AIによる自動セットアップ機能が導入され、モックの構成、ストーリーの作成、最大10コンポーネント へのインタラクションテスト実行を手作業なしで完了できます。新しいサイドバーの変更検出フィルターは、コードdiffに関連するストーリーをnew・modified・relatedに分類し、エージェント生成コードのレビューを効率化します。Quick Sharing機能はPRやCIを待たずにローカルのStorybookをChromatic 上に1 クリックで共有できます。@storybook/tanstack-reactによりTanStack Reactのタイプセーフなルーティングとサーバー関数がゼロ設定でサポートされます。実験的なreact-component-metaアナライザーはVolar とTypeScript Language Serverを基盤とし、react-docgenおよびreact-docgen-typescriptを置き換える高速かつ高精度なコンポーネント検出を実現します。
Read Articlearrow_forward Video · デザインプロセス
Design Critを効果的にする2-Question Rule Dscript のデザイン責任者Johnは、9 名のチームがFigJam とNotionで使用するデザインセレモニーと運営システムを紹介します。中心は設計クリティークのための「2 質問入場料」ルールです。誰かがフィードバックを与える前に、グループ全体がまず2つ の明確化質問をする必要があり、実行方法を批評する前に参加者がプロジェクトのコンテキストを理解しているかを確認します。デザイナー専用のクラフトクリット、クロスファンクショナルな作業進捗レビュー、go/no-goデザインレビューの3つ のスコープされたレビュータイプにより、戦略的な会話と品質に関する会話が混在しないようにします。DscriptのCrit Hub はビジョンVibes・責任・ファシリテータールールをNotionに文書化します。補助的なリチュアルとして、デザイナーが時間制限内で製品を実際に使用して実際の問題点を発見するcreator challenge、毎週のFigJam vibeometerチェックイン、デザインシステムのカラーパレット更新などチームレベルの意思決定のためのCatalyst非同期提案フレームワークがあります。
AI_INFOGRAPHICopen_in_full close WATCH_VIDEOarrow_forward Article · コンポーネント READ TIME: 21m
React Server Components向けComponent Architecture Aurora ScharffはuseEffectのローカルフェッチからReact Query、ルートレベルローダーを経てReact Server Components（RSC） への進化を辿り、RSCが両方の利点を達成すると主張します。コンポーネントをローダーのデータ形状に結合せずにサーバーサイドデータフェッチを実現できるというものです。各非同期サーバーコンポーネントは最小限の識別子を通じて必要なデータのみを取得するため、prop drillingや重複したローダーロジックなしにページ間でコンポーネントを再利用できます。Reactのcacheはコンポーネントツリーでのリクエスト単位の重複フェッチを除去します。ページはローディングシーケンスを設計するために意図的なSuspenseバウンダリを配置する同期的コンポジターになります。単純さのための単一バウンダリ、独立したストリーミングのための粒状バウンダリを選択し、レイアウトシフト防止のためにコンポーネントとスケルトンを同じファイルから一緒にエクスポートします。この記事ではuseOptimisticによるクライアントサイドのServer Function変更、フィーチャーフォルダー構成、そして同じアーキテクチャがcacheComponentsを使用するNext.js 16 のPartial Prerenderingにどのようにマッピングされるかも扱っています。
READ_FULL_LOGarrow_forward Article · アクセシビリティ READ TIME: 3m
divなどのGeneric Elementへaria-labelを付けない ARIAの仕様書の「Name prohibited」セクション では、divとspanのデフォルトロールであるgenericロールが、名前を付けることができない要素として明示的に列挙されています。Manuel Matuzovicは8 種類のスクリーンリーダーとブラウザの組み合わせでdiv・span・カスタム要素にaria-labelを適用してテストし、一貫性のない動作を確認しました。macOSのVoiceOverはラベルと「group」を読み上げる一方、ChromeのJAWSとNVDAはラベルを完全に無視してテストコンテンツのみを読みます。例外が2つ あり、section要素はラベルを付けるとregionランドマークロールを持つため適切であり、popover属性を持つdivはgroupロールになるため技術的にラベルが有効です。実務上、デザインシステムのマークアップガイドラインでgeneric要素へのaria-labelの使用は予測不能なAT読み上げをもたらすため避けるべきです。
READ_FULL_LOGarrow_forward Article · アクセシビリティ READ TIME: 8m
Alt Text Best Practice：CKEditorで記述・AI生成 効果的なalt textはコンテキストに大きく依存します。同じ絵画の画像でも、エッセイでは詳細な説明が必要ですが、ナビゲーションリンク内では機能的なリンク先ラベルだけで十分 です。この記事はWCAG 2.2 のPOUR原則を画像カテゴリーに具体的にマッピングします。必須コンテンツ画像、リンクやボタン内の画像、空のalt属性が必要な装飾的画像、テキスト画像、長いalt文字列よりも補足リストや説明が適切なチャートなどの複雑な画像が対象です。HTMLのalt属性は、画像の読み込みに失敗した場合に代替テキストとして機能しないaria-labelやaria-labelledbyよりも標準的な方法として推奨されます。CKEditor のAI Quick Actions 機能は画像内容からalt textを自動生成できますが、公開前に正確さとコンテキストへの適合性について人間によるレビューが必要だと強調されています。
READ_FULL_LOGarrow_forward Article · アクセシビリティ READ TIME: 7m
Global Accessibility Awareness Day：Dequeの無料Training 3回を振り返る 第15回Global Accessibility Awareness Day（GAAD） に合わせてDeque はAPAC・欧州・北米の3 地域で無料のデジタルアクセシビリティ基礎セッションを開催し、30か国以上 ・30 職種以上から数千名が登録しました。主な実践的ガイダンスとして、Patrick Sturdivantによる「alt textは何もないよりあった方が良い」という助言と、Michael Harshbargerによるアクセシビリティをセキュリティやパフォーマンスと同等の継続的な運用規律として捉える視点が示されました。AI面でも直接触れられており、AI生成コードがアクセシビリティ基準を満たすかどうかは開発者が引き続き責任を持つと強調されました。APACセッションでは同地域に6億9000万人 の障害者が存在することが強調され、問題の規模が浮き彫りになりました。Dequeの目標はGAADの認知を開発・デザインチーム全体にわたる持続的な行動へと転換することです。
READ_FULL_LOGarrow_forward Article · デザインプロセス READ TIME: 5m
Design Disposableの必要性 Laura Kleinはデザイン成果物を2 種類に区別しています。ステークホルダーのためのdeliverableと、デザイナー自身が考えを整理するために作る「design disposable」 、つまりラフなスケッチ、ドラフトのタスクフロー、クイックプロトタイプ、初期のリサーチプランです。核心的な主張は、すべての成果物をレビュー可能なdeliverableとして扱うとサンクコストの誤謬を引き起こし、探索が高コストに感じられて反復作業が抑制されるというものです。Disposableは意図的に不完全で廃棄可能であり、その価値は曖昧な思考を外部化することにあります。AIツールはこのダイナミクスを複雑にします。実際の問題解決が行われる制作の生産的な摩擦を取り除き、数秒 でドラフトのタスクフローを生成できるためです。Kleinの推奨は、AIを成果物作成の高速化に活用しつつ、出力を厳密に評価・検討し続けることです。Disposableは思考を促すものであり、思考の代替になってはなりません。
READ_FULL_LOGarrow_forward summarize Digest_Summary
今週はデザインシステムのツール面で複数の進展がありました。Storybook 10.4 は、一度に最大10コンポーネント のモック構成・ストーリー作成・インタラクションテストを自動化するAI主導のセットアップ機能をリリースしChromatic 上に1 クリック公開を可能にし、@storybook/tanstack-reactを通じてTanStack Reactが公式サポートされました。Volar ベースの実験的なreact-component-metaアナライザーはreact-docgenとreact-docgen-typescriptを置き換えます。
デザインシステムにおけるアクセシビリティも大きな注目を集めました。8 種類のスクリーンリーダーとブラウザの組み合わせにわたるManuel Matuzovicの研究は、divやspanなどの汎用要素にaria-labelを使用するとAT動作が一貫しないことを確認しました。VoiceOverはラベルと「group」を読み上げますが、ChromeのJAWSとNVDAは完全に無視します。マークアップガイドラインから禁止すべきです。 CKEditorはWCAG 2.2 のPOUR原則に沿ったalt textのベストプラクティスをまとめ、コンテンツ画像・リンク画像・装飾的画像・複雑な画像のコンテキスト別要件を区別しました。第15回Global Accessibility Awareness Day（GAAD） は、AI生成コードでも開発者のアクセシビリティ責任は免除されないことを再確認しました。
デザインプロセスの考え方も注目されました。Laura Kleinは、実際の問題解決が起こる「作る」という生産的な摩擦をAIが取り除いてしまう可能性を警告し、曖昧な思考を外部化するラフスケッチやクイックプロトタイプなどの「design disposable」 を守ることを主張しました。Aurora ScharffはReactのcache()を使ったリクエスト単位の重複排除、コンポーネントと同位置に配置したSuspenseバウンダリとスケルトン、useOptimisticによるServer Function変更を活用するReact Server Componentsアーキテクチャを詳述し、Next.js 16 のPartial Prerenderingとのマッピングも解説しました。
Key Takeaways Storybook 10.4 のAI主導セットアップは、最大10 コンポーネントのモック設定・ストーリー作成・インタラクションテストを一括自動化します。エージェント型コードレビューのボトルネックを直接ターゲットにしています。 divとspanへのaria-labelはARIA仕様で明示的に禁止されており、JAWS・NVDA・VoiceOver全体で予測不能なスクリーンリーダー出力を引き起こします。デザインシステムのマークアップガイドラインから削除してください。 Reactのcache()によるリクエスト単位の重複排除とコンポーネントと同位置のSuspenseバウンダリを持つReact Server Componentsが、Next.js 16 Partial Prerenderingプロジェクトのデータフェッチの推奨アーキテクチャになりました。 
