「デザインシステム」と呼べる日は来るのか？

デザインシステム勉強会の資料
https://techplay.jp/event/982019

Transcript

1. 「デザインシステム」 と呼べる日は来るのか？ Acsimでの取り組みから考える デザインシステム勉強会 2025-07-04 株式会社ROUTE06 プロフェッショナルサービス事業本部 Acsim事業部 デザインエンジニア becolomochi
2. タイトルについて （日々の試行錯誤を共有したい）
3. becolomochi 株式会社ROUTE06のデザインエンジニア 過去: 印刷物のデザイナー → Webデザイナー イラストレーター SNS ID: becolomochi
4. 2020年創業 AI駆動開発プラットフォーム、 システム開発、コンサルティングサービスを提供 Company
5. 読み: アクシム AIを活用した要件定義を支援するプロダクト 2025年4月 販売開始 新規機能開発・アップデート継続中 https://ai.acsim.app/ Product
7. サービス開発について
8. 開発メンバーではないメンバーも コードを書くように プロダクト開発の変化
9. 開発支援ツール B CursoE B DeviC B ClaudV B Claude Cod3 B Copilo$ B Code Rabbi B v' B Figma Dev Mode MC B Playwright MCP etc...
10. PO PM Designer CSM Feature Development Acsim Team Sales AI promote Usability
11. PO PM Designer CSM Feature Acsim Team with AI tools Sales AI promote Usability みんな開発！
12. 土台としての デザインシステム。 ' ヒューマンリーダブ% ' AIリーダブル
13. フロントエンド周辺の 技術スタック 7 Reac' 7 TypeScrip' 7 Vit@ 7 React Flo$ 7 Tailwind CSB 7 Radi 7 Phosphor icons etc...
14. 社内全体で使用できる デザインシステムは未整備 B 複数プロジェクトが並行進E B 各プロジェクトでそれぞれ定7 B ベースガイドラインは会社のwikiに存在
15. Acsimの デザインシステム （と、呼べそうなもの） B デザイン原@ B トークD B コンポーネン8 B アイコD B ガイドライン
16. apps docs frontend src/components/ui storybook design-tokens icons style packages Acsimの ディレクトリ構造 説明に必要なところだけ
17. apps docs frontend src/components/ui storybook design-tokens icons style packages Acsimの ディレクトリ構造 説明に必要なところだけ Figma デザイン原則 ガイドライン トークン コンポーネント スタイル アイコン
18. トークン管理 1. Figma variablesで定義 2. Figma REST APIで取得 3. Style Dictionaryで変換 4. ファイル生成 5. tailwind.config.tsに読み込み (packages/style) Design Tokens
19. Figma REST API について ` variablesのread / writeはエンタープライズプランのg ` https://www.figma.com/developers/api#authentication- scope… ` ROUTE06ではセキュリティを考慮しエンタープライズプ ランへ引き上げ（organizationやシングルサインオン etc...

 （個人的にはめちゃくちゃ嬉しい） Design Tokens
20. トークン管理のメリット・デメリット U 一元管Q U やや高度（D U 開発初期はデザイナーが頑張ってトークンを構築 U デザイナーとエンジニアで協力体制を敷けると良い Design Tokens
21. トークン管理で見えている課題 v Tailwind v4では tailwind.config.ts(js)ではなくcssを推W v Figmaからインポートするの一方向のU v Figmaへエクスポートもできるようになるともっと便 利か† v https://github.com/serendie/figma-utils Design Tokens
22. コンポーネント $ apps/frontend/src/components/u $ apps/storybook Components
23. 運用の課題 % ドキュメント整 % AIに更新をかけてもらう Components
24. アイコン É packages/icons に切り出してい9 É Phosphor ico É オリジナルのアイコン → 使用時は @acsim/iconsから呼び出せる Icons
25. ガイドライン  docs/ に設  人間もAIも読む Guidelines
26. Guidelines アクセシビリティと ユーザビリティの ガイドラインを追加 # アクセシビリティについてのルール このドキュメントでは、プロジェクトにおけるアクセシビリティの要 件と実装ガイドラインを定義します。 ## 基本方針 すべてのユーザーが平等にサービスを利用できるよう、WCAG 2.1の レベルAAに準拠したアクセシビリティを確保します。 ## 参考リソース - [WCAG 2.1](https://www.w3.org/TR/WCAG21/) - [WAI-ARIA Authoring Practices](https://www.w3.org/ WAI/ARIA/apg/) - [Radix UI](https://www.radix-ui.com/) - [Accessible Rich Internet Applications (WAI-ARIA) 1.2](https://www.w3.org/TR/wai-aria-1.2/) 例
27. ガイドラインについて C AIにまずは理想形を書いてもら8 C Acsimに合うように調整 → レビュ6 C mdファイルをもとにルールファイルとして読み込めるよ うにする Guidelines
28. ガイドラインの内容 B カラーコントラスS B フォーカス管I B 音声読み上げ時の優先順# B インタラクショV B ナビゲーションの深さ →アクセシビリティテストで使用。NGな場合はCIが落ちる Guidelines
29. やりたいこと F Tailwind CSSのテーマ変数の設定切り替@ F トークン設計の効率 F ドキュメントの一元 F Design Tokens関連コードの外部パッケージ化 Guidelines
30. デザインシステムの現状 Y Acsimのサービス開発上は動く状3 Y デザインシステムと呼べるようになるE Y 派生サービス、派生サイトにも適用できるのが理7 Y もっと便利にできるはず
31. Figma Dev Mode MCPに実装を依頼した例 既存の実装済みコンポーネントを組み合わせて作成が完了→