「デザインシステム」 と呼べる日は来るのか？ Acsimでの取り組みから考える デザインシステム勉強会 2025-07-04 株式会社ROUTE06 プロフェッショナルサービス事業本部 Acsim事業部 デザインエンジニア becolomochi 

タイトルについて （日々の試行錯誤を共有したい） 

becolomochi 株式会社ROUTE06のデザインエンジニア 過去: 印刷物のデザイナー → Webデザイナー イラストレーター SNS ID: becolomochi 

2020年創業 AI駆動開発プラットフォーム、 システム開発、コンサルティングサービスを提供 Company 

読み: アクシム AIを活用した要件定義を支援するプロダクト 2025年4月 販売開始 新規機能開発・アップデート継続中 https://ai.acsim.app/ Product 

No content

サービス開発について 

開発メンバーではないメンバーも コードを書くように プロダクト開発の変化 

開発支援ツール 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... 

PO PM Designer CSM Feature Development Acsim Team Sales AI promote Usability 

PO PM Designer CSM Feature Acsim Team with AI tools Sales AI promote Usability みんな開発！ 

土台としての デザインシステム。 ' ヒューマンリーダブ% ' AIリーダブル 

フロントエンド周辺の 技術スタック 7 Reac' 7 TypeScrip' 7 Vit@ 7 React Flo$ 7 Tailwind CSB 7 Radi 7 Phosphor icons etc... 

社内全体で使用できる デザインシステムは未整備 B 複数プロジェクトが並行進E B 各プロジェクトでそれぞれ定7 B ベースガイドラインは会社のwikiに存在 

Acsimの デザインシステム （と、呼べそうなもの） B デザイン原@ B トークD B コンポーネン8 B アイコD B ガイドライン 

apps docs frontend src/components/ui storybook design-tokens icons style packages Acsimの ディレクトリ構造 説明に必要なところだけ 

apps docs frontend src/components/ui storybook design-tokens icons style packages Acsimの ディレクトリ構造 説明に必要なところだけ Figma デザイン原則 ガイドライン トークン コンポーネント スタイル アイコン 

トークン管理 1. Figma variablesで定義 2. Figma REST APIで取得 3. Style Dictionaryで変換 4. ファイル生成 5. tailwind.config.tsに読み込み (packages/style) Design Tokens 

Figma REST API について ` variablesのread / writeはエンタープライズプランのg ` https://www.figma.com/developers/api#authentication- scope… ` ROUTE06ではセキュリティを考慮しエンタープライズプ ランへ引き上げ（organizationやシングルサインオン etc...

 （個人的にはめちゃくちゃ嬉しい） Design Tokens 

トークン管理のメリット・デメリット U 一元管Q U やや高度（D U 開発初期はデザイナーが頑張ってトークンを構築 U デザイナーとエンジニアで協力体制を敷けると良い Design Tokens 

トークン管理で見えている課題 v Tailwind v4では tailwind.config.ts(js)ではなくcssを推W v Figmaからインポートするの一方向のU v Figmaへエクスポートもできるようになるともっと便 利か† v https://github.com/serendie/figma-utils Design Tokens 

コンポーネント $ apps/frontend/src/components/u $ apps/storybook Components 

運用の課題 % ドキュメント整 % AIに更新をかけてもらう Components 

アイコン É packages/icons に切り出してい9 É Phosphor ico É オリジナルのアイコン → 使用時は @acsim/iconsから呼び出せる Icons 

ガイドライン  docs/ に設  人間もAIも読む Guidelines 

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/) 例 

ガイドラインについて C AIにまずは理想形を書いてもら8 C Acsimに合うように調整 → レビュ6 C mdファイルをもとにルールファイルとして読み込めるよ うにする Guidelines 

ガイドラインの内容 B カラーコントラスS B フォーカス管I B 音声読み上げ時の優先順# B インタラクショV B ナビゲーションの深さ →アクセシビリティテストで使用。NGな場合はCIが落ちる Guidelines 

やりたいこと F Tailwind CSSのテーマ変数の設定切り替@ F トークン設計の効率 F ドキュメントの一元 F Design Tokens関連コードの外部パッケージ化 Guidelines 

デザインシステムの現状 Y Acsimのサービス開発上は動く状3 Y デザインシステムと呼べるようになるE Y 派生サービス、派生サイトにも適用できるのが理7 Y もっと便利にできるはず 

Figma Dev Mode MCPに実装を依頼した例 既存の実装済みコンポーネントを組み合わせて作成が完了→