![](data:image/svg+xml,<svg display="block" id="1266964133" role="presentation" viewBox="0 0 692 636" xmlns="http://www.w3.org/2000/svg"><g fill="transparent" height="560.0252304666609px" id="vwOxckwwh" transform="translate(73.51 37.6)" width="544.0252304077148px"><path d="M 134.25 0 C 208.394 0 268.5 60.106 268.5 134.25 C 268.5 208.394 208.394 268.5 134.25 268.5 C 60.106 268.5 0 208.394 0 134.25 C 0 60.106 60.106 0 134.25 0 Z" fill="rgb(1, 20, 24)" height="268.5px" id="yN8vm1Hrx" transform="translate(138 136.58)" width="268.5px"/><path d="M 0 20.006 C 0 8.957 8.957 0 20.006 0 L 20.006 0 C 31.055 0 40.013 8.957 40.013 20.006 L 40.013 60.019 C 40.013 71.068 31.055 80.025 20.006 80.025 L 20.006 80.025 C 8.957 80.025 0 71.068 0 60.019 Z" fill="rgb(1, 20, 24)" height="80.02523046666083px" id="shHSoeOt9" transform="translate(252 0)" width="40.01261523333051px"/><path d="M 0 20.006 C 0 8.957 8.957 0 20.006 0 L 20.006 0 C 31.055 0 40.013 8.957 40.013 20.006 L 40.013 60.019 C 40.013 71.068 31.055 80.025 20.006 80.025 L 20.006 80.025 C 8.957 80.025 0 71.068 0 60.019 Z" fill="rgb(1, 20, 24)" height="80.0252304666609px" id="f_wgo_K4w" transform="translate(252 480)" width="40.01261523333051px"/><path d="M 70.733 42.44 C 78.546 50.253 78.546 62.92 70.733 70.733 L 70.733 70.733 C 62.92 78.546 50.253 78.546 42.44 70.733 L 14.147 42.44 C 6.334 34.627 6.334 21.96 14.147 14.147 L 14.147 14.147 C 21.96 6.334 34.627 6.334 42.44 14.147 Z" fill="rgb(1, 20, 24)" height="84.87957469348834px" id="yd7tGmc9p" transform="translate(399.513 400.699)" width="84.87957469350249px"/><path d="M 70.733 42.44 C 78.546 50.253 78.546 62.92 70.733 70.733 L 70.733 70.733 C 62.92 78.546 50.253 78.546 42.44 70.733 L 14.147 42.44 C 6.334 34.627 6.334 21.96 14.147 14.147 L 14.147 14.147 C 21.96 6.334 34.627 6.334 42.44 14.147 Z" fill="rgb(1, 20, 24)" height="84.87957469348827px" id="L5H_XKlqs" transform="translate(60.412 75.598)" width="84.87957469350272px"/><path d="M 0 20.006 C 0 8.957 8.957 0 20.006 0 L 60.019 0 C 71.068 0 80.025 8.957 80.025 20.006 L 80.025 20.006 C 80.025 31.055 71.068 40.013 60.019 40.013 L 20.006 40.013 C 8.957 40.013 0 31.055 0 20.006 Z" fill="rgb(1, 20, 24)" height="40.01261523333062px" id="u2pqvCVt4" transform="translate(464 260) rotate(180 40.013 20.006)" width="80.02523046666101px"/><path d="M 0 20.006 C 0 8.957 8.957 0 20.006 0 L 60.019 0 C 71.068 0 80.025 8.957 80.025 20.006 L 80.025 20.006 C 80.025 31.055 71.068 40.013 60.019 40.013 L 20.006 40.013 C 8.957 40.013 0 31.055 0 20.006 Z" fill="rgb(1, 20, 24)" height="40.01261523333039px" id="aMBcd6Ugf" transform="translate(0 260) rotate(180 40.013 20.006)" width="80.02523046666079px"/><path d="M 42.44 14.147 C 50.253 6.334 62.92 6.334 70.733 14.147 L 70.733 14.147 C 78.546 21.96 78.546 34.627 70.733 42.44 L 42.44 70.733 C 34.627 78.546 21.96 78.546 14.147 70.733 L 14.147 70.733 C 6.334 62.92 6.334 50.253 14.147 42.44 Z" fill="rgb(1, 20, 24)" height="84.87957469348827px" id="e3VHiSnuY" transform="translate(392.513 75.598)" width="84.87957469350249px"/><path d="M 42.44 14.147 C 50.253 6.334 62.92 6.334 70.733 14.147 L 70.733 14.147 C 78.546 21.96 78.546 34.627 70.733 42.44 L 42.44 70.733 C 34.627 78.546 21.96 78.546 14.147 70.733 L 14.147 70.733 C 6.334 62.92 6.334 50.253 14.147 42.44 Z" fill="rgb(1, 20, 24)" height="84.87957469348834px" id="lsZHVEVAz" transform="translate(60.412 400.699)" width="84.87957469350272px"/></g></svg>)
AIネイティブなデザインシステムの構築
AI SaaSプロダクト向けに、Storybook上で包括的なデザインシステムを構築しました。コンポーネントやトークン、パターンを定義することで、変化の速いプロダクトでもビジュアルと機能の一貫性を保てるように。
カテゴリー
SaaS デザインシステム
期間
2026年5月 - 2026年7月
マーケット
日本
役割
プロダクトデザイナー
PROBLEM
土台のない2つのプロダクト
当時、会社にはすでにAIによる成果物生成支援ツールと、プロジェクト管理ツールの2つのプロダクトがありました。ただ、この2つの間には一貫したシステムがなく、設計はバラバラで、開発スピードも上がらず、技術面・UX面の負債がどんどん積み重なっている状態でした。
GOAL
プロダクトの成長スピードを支えるデザインシステムの構築
参画した当時、会社はスケールフェーズにあり、ユーザーの信頼と体験の質を落とさずに、プロダクトを素早く進化させ続けることが求められていました。スタートアップにおいて、デザインシステムはプロダクトの速度を「制御する」ものではなく「支える」ものであるべきだと考えています。
APPROACH
AIを活用し、2ヶ月弱でスケーラブルなシステムを設計
Step. 1
AIツールを使ったUXオーディット
Devinを使って既存のトークンとコンポーネントパターンを監査し、重複や矛盾、各コンポーネントの利用頻度をマッピングしました。
Step. 2
フレームワーク選定
限られたリソースの中で、新しいデザインシステムのガバナンスをどう設計するか、エンジニアと一緒に検討しました。開発のしやすさを重視して、フロントエンドにはヘッドレスUIとTailwindを採用することに決めました。
Step. 3
土台の再構築
新しいコンポーネントをつくり始める前に、カラー・スペーシング・角丸・タイポグラフィからなる2層構造のセマンティックトークンシステムを定義しました。全体を見渡しやすくするため、この段階の定義にはFigmaを使っています。
Step. 4
コンポーネントの構築
既存機能を維持するために必要な主要コンポーネントを設計しました。プロセスを速めるため、開発側にはヘッドレスUI、デザイン側にはFigmaとCursorの連携を活用しています。
KEY DECISION 01
「スロット」の活用によるコンポーネントの柔軟性確保
Figma
多くのバリアントをつくらなくても、利用者がコンテンツを動的に差し替えられるFigmaの新機能です。カード要素に活用しました。
Code
<children> propとして実装しています。React nodeを渡すと、コンポーネント側がそれを自身のマークアップでラップする仕組みです。
KEY DECISION 02
Figma MCPとCursorを活用したAIによる高速な構築
Figma
カラーやタイポグラフィといった基盤トークン、そして多くの共通コンポーネントで使われるデフォルトスタイルの定義に、Figmaを使いました。
Cursor
トークンを定義したあと、Cursorを使ってすべてのコンポーネントのソースをStorybookに集約しました。
OUTPUT
Storybookに集約する
タイポグラフィ
欧文と日本語が混在しても美しく一貫した見た目になるよう、「Gen Interface JP」を採用しました。
カラー
拡張性が高く、一貫性のあるトークン運用を実現するため、raw（生値）とsemantic（意味づけ）の2層構造を採用しています。
スペーシング
業界標準を踏まえつつ、2の倍数を基準にしたルールで設計しました。
角丸（Radius）
スペーシングと同じく、業界標準を踏まえつつ2の倍数を基準にしたルールで設計しました。
Storybook上に50以上のコンポーネントを管理
AIと人間の視認性を高めるためにStorybookを作成しました。
活用事例：チャットインターフェース
活用事例：ドラフト画面
結果
誰もが一貫性を保ったままプロトタイピングできるシステムへ
競争の激しいAI活用型SaaS業界で生き残るには、事業として速いスピードで適応し続けることが求められます。今回つくったこのシステムは、いまではデザイナー以外のメンバーもプロトタイプを素早くつくるために活用していて、認識合わせのスピードと効率を大きく高めています。
Create a dashboard for our next product.
Thinking…
Design system
Generate
