【デザインシステム】1,000社以上が利用するSaaSプロダクトのデザインシステム構築・刷新

【概要 / Context】

100ページを超える大規模SaaSプロダクトにおいて、デザインの属人化と管理コストの増大が課題となっていました。

既存の表層的なガイドラインの限界を論理的に分析し、事業資産としてのデザインシステムへの刷新をゼロベースから主導。Figma設計から React/TypeScript、Storybook実装まで、100ページ超のリプレイスを実質単独で完遂しました。

---

【課題 / Problem】

• デザインの属人化
  複数開発者の参画によるデザイン原則の形骸化。一機能に複数コンポーネントが乱立し、品質と開発効率が著しく低下していた。
• 管理コストの増大
  ガイドラインの作成のみでは不十分で、実装との整合性を担保する仕組みが弱く、手戻りが頻発していた。
• スケーラビリティの欠如
  プロダクトの成長に伴い、デザイン基盤の拡張性が限界に達していた。

---

【解決策 / Approach】

• 設計 … Figmaを用いたプロパティベースのコンポーネント設計。大規模適用を見据えた一貫性と柔軟性の両立
• 実装 … React/TypeScript、Storybookを用いたコンポーネントライブラリの構築。実質単独で100ページ超のリプレイスを完遂
• ガバナンス … デザイナー・エンジニア間の共通言語の確立と、Gitを通じた実務フローにおける、デザイン品質と実装コードの整合性管理

---

【成果・価値 / Impact】

• 手戻り削減と開発速度
  デザイナーとエンジニア間の手戻りを大幅に削減し、開発速度の向上に寄与。
• 外部評価
  国内最大手金融グループから、堅牢な設計思想と実装への専門性について高い評価を得た。
• 持続可能な品質管理
  デザインとコードが常に同期する「生きたガイドライン」の構築により、持続可能な品質管理体制を確立。

※守秘義務の観点から、Web上では社名・固有名詞を抽象化しています。詳細は個別の場で共有可能です。

---

【使用アプリケーション・スキル】

Figma / React / TypeScript / Storybook / Git/GitHub