ウィルゲートでTACT SEOを開発している水口です。 TACT SEOはサービス開始から7年が経過するプロダクトです。 今回は、TACT SEOの新しいUIを実現するため、サービス開始当初からほとんど更新されてなかった、フロントエンド開発の仕組みを見直し、デザインシステムの導入する取り組みについてご紹介いたします。 デザインシステム導入前に抱えていた課題 今回の取り組み前後の状況 取り組み前 取り組み後 デザインシステムとは デザインシステムの定義 デザインシステムの構成要素 今回の取り組み内容 新UI・基本概念の理解とドキュメントの作成 スタイルガイドの取説の作成 クラス設計&Sass導入 Storybook導入 ライブラリのパッケージ管理、アップデート 取り組み前の課題に対する効果 その他の効果 最後に デザインシステム導入前に抱えていた課題 1. デザインに統一感がない TACT
![サービス開始後7年経過するプロダクト(TACT SEO)にデザインシステムを導入した取り組み - WILLGATE TECH BLOG](https://cdn-ak-scissors.b.st-hatena.com/image/square/d224e61884058bcbdcb955741036fcc5a02f9212/height=288;version=1;width=512/https%3A%2F%2Fcdn-ak.f.st-hatena.com%2Fimages%2Ffotolife%2Fm%2Fmizuguchi-harumi%2F20240830%2F20240830173847.png)