トークン Design Token命名規則の実践ガイド デザインシステムのスケールアップにおいて、トークン名を一貫して維持することは最も難しい課題の一つ です。このガイドでは、primitive ・semantic ・component トークンの3 階層モデルと、Category-Property-Modifier、Object-Property-Modifier、context-firstパターンなど5つ の具体的な命名規則を解説しています。Design Tokens Community Group の仕様とTokens Studio 、Style Dictionary などのツールをもとに、variant・state・mode・numbered scaleを予測可能で位置安定的な方法で扱う手法を説明します。一貫性の優先、明確さの優先、視覚的な値ではなく意図を表すsemantic名、広いカテゴリから具体的への順序、自己説明的な名前、成長を見据えたパターンという6つ の実践的なルールも示されています。最後に、正式な命名ガイド・レビューチェックリスト・デザインとエンジニアリング間の共同所有権による軽量なガバナンスの推奨事項を通じて、システムの進化に伴い規則を安定させる方法を紹介します。
Read Articlearrow_forward Video · AIワークフロー
AIを使ったDesign-to-Code Process Flux Academy は、Figma とFigma MCP サーバーを通じて接続されたClaude Code を使用した完全なデザインからコードへのワークフローを紹介しています。ダッシュボード、分析テーブル、フィルター可能な通知、タブ設定で構成されたマルチスクリーンのコンセプトアプリをHTML、CSS、JavaScriptに変換します。AIに渡す前の主要な準備ステップには、全体にauto layoutを適用（AIが絶対ピクセル位置ではなくflexコンテナを読めるように）、Figma AIによるレイヤー名の変更、MCPサーバーがClaudeに転送するテキストとカラースタイルの設定、コンポーネントvariantの整理が含まれます。ビデオでは2回 のプロンプト反復を示しています。最初はFigmaのデザイン仕様から視覚的に正確なスケルトンを生成し、2回 目は実際の機能 — CSVエクスポート、フィルターchip、トーストフィードバック付きの全既読、編集可能なフォーム入力 — を追加します。発表者はワークフローのコアはツールに依存しないと強調しています。デザインの基礎、クリーンなファイル構造、評価的な判断力は依然としてデザイナーの代替不可能な貢献です。
AI_INFOGRAPHICopen_in_full close WATCH_VIDEOarrow_forward Article · リアルタイム READ TIME: 9m
CRDTとSync EngineがFractional IndexingでRealtime Listの順序を保つ仕組み 通常の配列インデックスは、単一の挿入や並び替えで以降のすべてのインデックスをシフトする必要があるため、マルチプレイヤーアプリでは2つ のクライアントが同時に編集すると競合が発生します。Fractional indexing は各アイテムに0 と1 の間の固有の位置値を与えることでこの問題を解決し、操作ごとに1つ のインデックスのみが更新され、異なるクライアントからの同時編集が自動的に収束します。この記事は、Liveblocks がプロダクションで解決した3つ の実践的な課題を取り上げています。約50回の末尾挿入 後の浮動小数点精度の枯渇（インデックスを文字列として保存して解決）、繰り返しのpushによるインデックス長の急増（3 文字ずつ前進してから1 ずつ増加するviewportベースの成長アルゴリズムで解決）、データサイズ（辞書順ソートのための印刷可能なASCIIを使うbase-96 エンコードへの切り替えで削減）。LiveblocksはこれをLiveListという競合のないマルチプレイヤー配列として公開し、useStorageとuseMutationによるReact統合を示しています。
READ_FULL_LOGarrow_forward Article · アクセシビリティ READ TIME: 9m
Session Timeout：Authentication Designで見落とされるAccessibility Barrier セッションタイムアウトは、運動・認知・視覚障害を持つユーザーに不均衡な影響を与えます。世界で約13億人の障害者 と、ウェブサイト利用者の約20% を占める神経多様性のある人々がその対象です。運動障害は入力速度を遅くしてユーザーが非アクティブに見えるようにし、ADHDのあるユーザーは時間盲目によりカウントダウンを正確に把握できず、スクリーンリーダー使用者は見出しやフォームフィールドのナビゲーションに時間がかかる一方、ライブカウントダウンタイマーは毎秒ステータスを読み上げることがあります。主な失敗パターンとして、警告なしのタイムアウト、延長不可のセッション、タイムアウト時のフォームデータの完全消失が挙げられます。この記事は、セッション延長ダイアログを含む事前警告、活動ベースと絶対タイムアウトの区別、localStorageやsessionStorageを使った自動保存を推奨しています。WCAG 2.2 ガイドライン2.9.2 — 調整可能または無効化可能な時間制限を求める — への準拠がカバーされる基準標準です。
READ_FULL_LOGarrow_forward Article · React READ TIME: 3m
React Compiler Renderingガイド Mark Erikson は、React Miami 2026 とDevoxx UK 2026 （拡張版）で発表したReactのレンダリング基礎とReact Compiler の内部に関するスライドと動画リンクを公開しました。この発表はEriksonの広く読まれているリファレンス記事のテーマであるReactの再レンダリング動作のコアなメンタルモデルを再確認し、実際にコンパイルされたコンポーネントの出力を検証することでReact Compilerが内部で何をしているかを明らかにしています。主なテーマは、コンパイラがReactのデフォルトのレンダリング動作をどのように反転させるかです。useMemoやuseCallbackの手動呼び出しに頼るのではなく、コンポーネントを自動的にメモ化し、その変化が今後のコンポーネント設計に対する開発者の考え方にどのような意味を持つかを扱っています。標準版と拡張版の両方のスライドデッキがこの投稿からリンクされています。
READ_FULL_LOGarrow_forward Article · オープンソース READ TIME: 6m
デジタル独立 ウェブデザイナーのThomas Gunther は、Elon MuskによるTwitter買収とTim Cookの政治的立場をきっかけに始まったデジタル独立への個人的な歩みを振り返っています。TwitterからMastodonに移行し、検索（Ecosia ）、ブラウザ（Ungoogled Chromium ）、決済（Wero ）、メッセージング（Signal ）でプライバシーを尊重する代替手段を採用し、MacBookの代替としてTUXEDO InfinityBook Pro 14 などのLinuxウルトラブックを積極的に探っています。この記事は、Audacity v4 の再デザインとMastodon上のLinuxデザインコミュニティを例に挙げ、オープンソースソフトウェアのデザイン品質が意味のある形で向上していると主張し、無料ソフトウェアは見栄えが悪いはずというバイアスに反論しています。全体を通して、エンゲージメント最適化アルゴリズムが人間の注意力をどのように搾取するかを宇宙人の視点で描いた短いSFフィクションが織り込まれており、enshittification とウェブの中央集権化を向き合うべき構造的問題として位置づけています。
READ_FULL_LOGarrow_forward summarize Digest_Summary
今週のデザインシステム関連カバレッジは、トークン命名・アクセシビリティ・新興のデザインからコードへのAIワークフローに焦点を当てました。包括的な命名ガイドは、primitive ・semantic ・component の3 階層トークンモデルと、Category-Property-ModifierやObject-Property-Modifierパターンを含む5つ の具体的な命名規則を示しました。Design Tokens Community Group の仕様とTokens Studio ・Style Dictionary などのツールをもとに、一貫性の優先・明確さの優先・視覚的な値ではなく意図を表すsemantic名・広いカテゴリから具体的への順序・自己説明的な名前・成長を見据えたパターンという6つ のルールと、命名ガイド・レビューチェックリスト・部門横断的な共同所有権による軽量なガバナンスを提唱しました。
Smashing Magazine の詳細な解説は、セッションタイムアウトがWCAG 2.2 ガイドライン2.9.2 において見落とされがちな重大なアクセシビリティ障壁であることを明らかにしました。localStorageまたはsessionStorageによる自動保存が含まれます。
リアルタイムコラボレーション面では、Liveblocks がフラクショナルインデックスに関する詳細な技術記事を公開しました。約50回の末尾挿入 後の浮動小数点精度の枯渇(文字列保存で解決)・インデックス長の急増(viewportベースの成長アルゴリズムで解決)・データ効率のためのbase-96 エンコードへの切り替えを解説しています。React APIはこれをuseStorageとuseMutationを通じたLiveListとして提供します。
Key Takeaways デザイントークンの命名は広いカテゴリから具体的への順序でprimitive・semantic・componentの3 階層モデルに従う必要があり、Tokens StudioやStyle Dictionaryなどのガバナンスツールには正式な命名ガイドと部門横断的なレビューチェックリストが必要です。 セッションタイムアウトは運動障害・ADHD・スクリーンリーダー使用者に対してWCAG 2.2 ガイドライン2.9.2 に違反します。セッション延長ダイアログとlocalStorageまたはsessionStorageによる自動保存を実装してください。 フラクショナルインデックスはCRDTリストの順序競合を解決しますが、本番環境で実用的に使うには浮動小数点ではなく文字列保存のインデックス・viewportベースの成長アルゴリズム・base-96 エンコードが必要です。 
