terminal
Weekly Digest // DESIGN_SYSTEMS — Week 8-2026
architectureWeekly Report

Design Token命名のベストプラクティス — 2026年 第8週 デザインシステム

UI component architecture, design tokens, and semantic theming

calendar_todaysummarizeWeek 8-2026
トークン

Design Token命名のベストプラクティス

Design tokenの命名はコスメティックな問題ではなく、システムアーキテクチャの根幹です。Mary AchingerIBM Carbonを参照事例として、global・alias・componentの三階層構造を解説しています。color-blue-60のようなglobal tokenは生の値を持ち、color-primaryのようなsemantic aliasはテーマ切り替えを実現し、button-backgroundのようなcomponent tokenはローカルなoverrideを可能にします。マルチブランドシステムではcolor-brand-primaryのような安定したalias構造を維持しつつ、ブランド固有の値を別themeに分離して重複を最小化することを推奨しています。elevation-medium-iosのようにplatformコンテキストを名前に含めると、グローバルnamespaceを汚染せずにplatform固有の要件を明示できます。Tokens Studio、Style Dictionary、CI/CDによるlintingを活用したtooling戦略も紹介しています。

Design Token命名のベストプラクティス
Read Articlearrow_forward
Video · 深堀り57:31

50以上のスポーツブランド向けFigma Design Systemの構築方法

スポーツチケッティングスタートアップのJumpMinnesota TimberwolvesのファンアプリプラットフォームとしてN最近発表)のリードプロダクトデザイナーCorneliusが、2人のデザインチームが単一のFigmaライブラリで50以上のスポーツブランドをサポートする方法を解説します。このシステムは標準的なlight/darkパラダイムを超えてFigma modesを活用しています。各チームは5つのブランドカラー(brand-corebrand-lightbrand-darkinteractiveinverted-interactive)、チームごとのサイズとletter-spacingを持つカスタムdisplayフォント、border-radiusのような任意のUIオーバーライドを含むmodeエントリを持ちます。単一のteam ID変数を変更するだけで、画面フロー全体がNorth Carolina CourageからBucknell Bison(またはMinnesota独自の「wolf mode」)に切り替わります。Figmaファイルはエンジニア向けPMセクション(仕様、状態、tokenドキュメント)とデザイナー向けセクション(component、探索、graveyard)に分かれています。Interaction tokenはhover-scaleとpress-stateオーバーレイ(調整された不透明度のmode-agnostic black/white)を抽象化し、開発アプリのカスタムdebugメニューとwebのStorybookで検証され、コンポーネントごとのscale交渉をinteraction-scale-700のような単一token参照に置き換えます。

AI_INFOGRAPHIC
50以上のスポーツブランド向けFigma Design Systemの構築方法 — infographicWATCH_VIDEOarrow_forward
Article · ガイドREAD TIME: 5m

Design System導入の落とし穴

誰も使わないdesign systemは設計の失敗ではなく、governanceの失敗です。Mary Achingerは最も一般的なadoptionの落とし穴を整理しています。実際の需要を検証せずにリリース時点であらゆるcomponentを作る過剰エンジニアリング、明確なownershipの欠如によるドキュメントの劣化とバグ修正の遅延、デザインアセット・ドキュメント・コードが別々のサイロに分かれるtool fragmentationが代表例です。ステークホルダーの参加なしに孤立して開発されたシステムはチームのbuy-inを失い、shadow componentとparallel workaroundを生み出して技術的負債を膨らませます。記事は一部のcomponentのみを使う部分的adoptionと、ゼロから作り直す完全な崩壊を区別し、「componentよりもcultureが重要」という結論を強調しています。

READ_FULL_LOGarrow_forward
Article · UXREAD TIME: 18m

Streak Systemの設計:ストリークのUXと心理 — Smashing Magazine

Victor Ayomipoはstreak設計を三つの心理的メカニズムで説明します。損失回避(失うことは得ることの二倍つらい — Duolingoのデータは、ユーザーが積み重ねた努力を失う恐怖から長いstreakを守ることを確認)、BJ FoggのB=MAPモデル(行動はMotivation・Ability・Promptが同時に揃う必要がある — Duolingoの赤バッジA/BテストでDAUが6%向上)、Zeigarnik効果(未完了タスクはより多くの精神的空間を占める — 進行中のstreakは持続的なopen loopとして機能)。UX面では、行動の摩擦を最小化(1レッスン、1分)、GitHubのcontribution graphやDuolingoのマイルストーンアニメーションのような視覚的フィードバック、一律のスケジュールではなくユーザーの行動パターンに合わせたpush notification、streak freeze・23時間の延長・decayモデルなどのgrace mechanismによる過酷なリセット防止を推奨しています。エンジニア向けには、サーバー権威型アーキテクチャ(ユーザーごとのIANA timezone文字列保存、UTCタイムスタンプによるサーバーサイドのイベント検証、バグによる不当なリセット復元のための管理者バックドア)を詳述しています。

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

ARIA Authoring Practices Guideに頼る際の注意点

ARIA Authoring Practices Guide(APG)はw3.orgでホストされ、「デザインパターンと機能例」を提供すると明記しているため、開発者がこれをアクセシビリティの権威ある参照として扱うのは自然なことです。Stefan JudisはEric Eggertの分析を引用し、APGはARIAの機能を*示すため*に作られたものであり、pattern libraryや唯一の正解源として設計されたわけではないと指摘します。実演が目的だったため、ネイティブHTMLで十分な場合でもARIAを過剰に使用しており、ブラウザ・スクリーンリーダーのサポートのギャップはガイドの範囲外です。Judisが本当に価値があると認める部分は、標準化されたパターン名、「About This Pattern」の説明、Keyboard Interactionの仕様です。実践的なルールは三つ:常にネイティブHTMLを最初に使うこと(<button><div role="button">より優れている)、自分で支援技術を使ってテストすること、Adrian Roselliのような実際のscreen reader互換性結果を公開する実践者をフォローすること。

READ_FULL_LOGarrow_forward
summarizeDigest_Summary

今週のdesign systemsは繰り返す緊張を浮き彫りにしました。アーキテクチャ的に堅牢なものを作ることと、実際に使われるようにすることの間のギャップです。注目記事のtoken命名はその基盤層を直接扱い、IBM Carbonモデルに倣うglobal-alias-component三階層構造が表記上の慣習ではなく、load-bearingなアーキテクチャであると主張しました。特にcolor-brand-primaryのような単一aliasがnamespaceを重複させずにthemeごとに異なる値として解決されなければならないマルチブランドシステムでは顕著です。併せて紹介されたFigmaの動画はこの原則が実規模で適用される様子を示しており、Jumpスポーツの2人チームがチームごとのFigma modeを使って単一ライブラリで50以上のブランドを管理し、team ID変数ひとつを変えるだけでUI全体がブランド間で切り替わります。

ARIA Authoring Practices Guideへの批評は重要なアクセシビリティの訂正をもたらしました。APGはARIAの機能を実演するために設計されたものであり、プロダクションのpattern libraryではなく、ネイティブHTMLで十分な場面でもARIAに依存しすぎた例が含まれています。Stefan Judisの実践ルール — ネイティブHTML優先、支援技術での実機テスト、実践者のフォロー — はdesign systemのコンポーネントドキュメントにも等しく当てはまります。adoption pitfallsの記事は文化的な要因を強調しました。チームが回避する技術的に完璧なライブラリよりも、governanceとフィードバックループが長続きします。

エンゲージメント心理学に関するstreak UXの詳細解説がカテゴリを締めくくり、損失回避・Zeigarnik効果・grace mechanismといった行動設計レイヤーが、design systemがユーザー向け機能をリリースする際にcomponentレイヤーと同じくらい重要であることを思い起こさせました。

Key Takeaways
  • Token命名はアーキテクチャです。global-alias-component三階層構造でマルチブランドの重複を防ぎ、変数一つでtheme切り替えを実現しましょう
  • ARIA APGはARIAを実演するために作られたものであり、pattern libraryではありません。常にネイティブHTMLを優先し、実際の支援技術でテストしてください
  • Design system adoptionの失敗はcomponent品質ではなくgovernanceと文化のギャップに起因します。ユーザーとともに作りフィードバックループを維持することが差別化要因です