「デザインシステム」と呼べる日は来るのか？Acsimでの取り組みから考える 【デザインシステム勉強会/イベントレポート】

※この記事は、2025年7月に開催されたイベントでの発表内容をレポートしたものです。

登壇者はこの方

becolomochi

株式会社ROUTE06
プロフェッショナルサービス事業本部Acsim事業部
デザインエンジニア

ROUTE06へ2021年5月入社。プロダクトデザイン〜フロントエンド実装を担当。デザインとエンジニアリングを行き来する中で、デザインシステムやDesign Tokensの整備の設計に興味を持ち、DesignOpsを推進し始めました。

speakerdeck.com

becolomochi：私の発表では、「デザインシステム」と呼べる日は来るのか？Acsimでの取り組みから考える」というタイトルでお話ししたいと思います。

私が所属するROUTE06は、2020年創業でAI駆動開発プラットフォーム、システム開発、コンサルティングサービスを提供しています。プロダクトとして「Acsim（アクシム）」というAIを活用した要件定義を支援するプロダクトを販売開始しています。

ここから本題に入り、Acsimのサービス開発についてお話しさせていただきます。

開発メンバーではないメンバーもコードを書くように

LLMを活用したサービス開発が盛んになってきましたが、弊社でも開発メンバーではないメンバーもコードを書くようになりました。

開発支援ツール

開発支援ツールとしては、コードを書くときは以下のようなものを使っています。

•    Cursor
•    Devin
•    Claude
•    Claude Code
•    Copilot
•    Code Rabbit
•    VO
•    Figma Dev Mode MCP
•    Playwright MCP

Acsimのチーム構成

点線の枠の外にPO（プロダクトオーナー）、Sales（営業）、CSM（カスタマーサクセスマネジメント：お客様に対してサービス導入後のフォローを行うチーム）がいます。

中央にPMとDesignerがおり、右側にFeature（機能開発チーム）、AI promote（AI活用のチーム）、Usability（ユーザビリティの改善など、デザインシステムの整備）がいます。

Acsim Team with AI tools

AIツールを使うことで、上図の点線が囲っていたものが外れて、チーム全体でコードを書くようになっています。

土台としてのデザインシステム

こうした変化の中で、デザインシステムのあり方を考え、メンバーと話し合う機会が増えました。そして、人間もAIも読める状態が理想で、デザインシステムがその土台となることが重要だと思っています。

フロントエンド周辺の技術スタック

補足として、Acsimの技術スタックについて紹介します。
•    React
•    TypeScript
•    Vite
•    React Flow
•    Tailwind CSS
•    Radix
•    Phosphor icons
•    etc...

さらに補足すると、社内全体で使用できるデザインシステムは未整備の状況です。

•    複数プロジェクトが並行進行
•    各プロジェクトでそれぞれ定義
•    ベースガイドラインは会社のwikiに存在しています

Acsimのデザインシステム

Acsimのデザインシステムについて、以下については一通り存在しています。

・ デザイン原則
・トークン
・コンポーネント
・アイコン
・ガイドライン

Acsimのディレクトリ構造

Acsimのディレクトリ構造については、下図の右側のような作りになっています。Appsの中にアプリケーションのコードを入れています。Packagesの中に、デザイントークンやアイコンなどを入れています。

トークン管理

トークン管理については、以下の流れで管理しています。

1. Figma variables で定義
2. Figma REST APIで取得
3. Style Dictionary で変換
4. ファイル生成
5. tailwind.config.tsに読み込み （packages/style）

この方法で、figma上で変数に変更があった際は、tailwind.cssに反映させています。

Figma REST APIについて

•    variablesのread / writeはエンタープライズプランのみ
•    https://www.figma.com/developers/api#authentication-scopes
•    ROUTE06ではセキュリティを考慮しエンタープライズプランへ引き上げました

トークン管理のメリット・デメリット

トークン管理のメリットについては、一元管理できることです。しかし、推進するにはやや高度で、開発初期はデザイナーが頑張ってトークンを構築するという対応になってしまっています。
これについては、デザイナーとエンジニアで協力体制を敷けると良いと思っています。

トークン管理で見えている課題

Tailwind v4ではテーマ管理がCSSベースになっています。そのため、tailwind.config.ts（js）ではなくCSSに置き換えようと思います。また、Figmaからのインポートではなく、Figmaへエクスポートができるようになるとより便利だと思います。

https://github.com/serendie/figma-utils

運用の課題

運用の課題としては、プロップスが増減した時やコンポーネント追加時のドキュメント更新です。
現状はコード内に、直接js docsの形式で説明を記述していますが、変更があった場合は、AIの力で更新をかけるようにしています。
 

アイコン

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

ガイドライン

人間もAIも読める形でdocsに設置しています。

ガイドラインについては、以下のような流れで行なっています。

・ AIにまずは理想形を書いてもらう
・ Acsimに合うように調整→ レビュー
・mdファイルをもとにルールファイルとして読み込めるようにする

ガイドラインの内容としては、主に以下のような内容になっています。

・ カラーコントラスト
・フォーカス管理
・ 音声読み上げ時の優先順序
・インタラクション
・ ナビゲーションの深さ

このガイドラインを元に、アクセシビリティテストで使用。NGな場合はCIが落ちるようにしています。

ファイルがたくさんあると人間だと読むのが大変なので、このような形でCIに任せてチェックしてもらう形で進めています。

やりたいこと

発表の最後になりますが、今後やりたいこととしては、Tailwind CSSのテーマ変数の設定切り替え、トークン設計の効率化、 ドキュメントの一元化 Design Tokens関連コードの外部パッケージ化　など行いたいと思います。

下図は、Figma Dev Mode MCPに実装を依頼した例になりますが、このようにAIとデザインシステムの活用で開発を加速させていきたいと考えています。

私からの発表は以上となります。

▼▼　ぜひ他登壇者の発表レポートもご覧ください