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

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

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

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

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

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

サービス開発について

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

開発支援ツール 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に実装を依頼した例既存の実装済みコンポーネントを組み合わせて作成が完了→

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

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

beco

More Decks by beco

Other Decks in Programming

Featured

Transcript