サービス開始後7年経過するプロダクト（TACT SEO）にデザインシステムを導入した取り組み - WILLGATE TECH BLOG

ウィルゲートでTACT SEOを開発している水口です。 TACT SEOはサービス開始から7年が経過するプロダクトです。 今回は、TACT SEOの新しいUIを実現するため、サービス開始当初からほとんど更新されてなかった、フロントエンド開発の仕組みを見直し、デザインシステムの導入する取り組みについてご紹介いたします。 デザインシステム導入前に抱えていた課題 今回の取り組み前後の状況 取り組み前 取り組み後 デザインシステムとは デザインシステムの定義 デザインシステムの構成要素 今回の取り組み内容 新UI・基本概念の理解とドキュメントの作成 スタイルガイドの取説の作成 クラス設計＆Sass導入 Storybook導入 ライブラリのパッケージ管理、アップデート 取り組み前の課題に対する効果 その他の効果 最後に デザインシステム導入前に抱えていた課題 1. デザインに統一感がない TACT