概要
https://techtekt.persol-career.co.jp/entry/tech/251209_01
詳細内容
## バックエンドエンジニアがデザインシステムを導入してみた話 #PERSOL CAREER Advent Calender2025
https://techtekt.persol-career.co.jp/entry/tech/251209_01
パーソルキャリアのバックエンドエンジニアがdoda CONNECTにデザインシステムを導入し、開発効率とユーザー体験の一貫性を大幅に向上させた経緯と成果を解説します。
**Content Type**: Tools (⚙️)
**Language**: ja
**Scores**: Signal:5/5 | Depth:4/5 | Unique:3/5 | Practical:5/5 | Anti-Hype:5/5
**Main Journal**: 100/100 | **Annex Potential**: 100/100 | **Overall**: 88/100
**Topics**: [[デザインシステム, 開発効率化, フロントエンド開発, デザイントークン, チーム連携]]
パーソルキャリアのバックエンドエンジニアである佐藤氏は、同社の採用管理システム「doda CONNECT」にデザインシステムを導入した経験を共有しています。導入前は、デザインの不一致（色、フォント、マージン）、インタラクションの問題、デザイナーの単純な誤り、さらには「同じ見た目」という漠然とした依頼が技術的負債を生み出し、エンジニアとデザイナー間で頻繁な手戻りが発生していました。
この記事は、デザインシステムがいかにこれらの課題を解決し、Webアプリケーション開発の現場で「なぜ重要なのか」を明確に提示しています。筆者は、デザインシステムは単なるツールではなく、Webサイトやアプリのデザインと開発を一貫させ、効率化するための「仕組み」であり、ガイドライン、UIコンポーネント、ツールを含む集合体だと説明します。
主な目的として、一貫したユーザー体験の提供、デザインと開発の効率向上（コンポーネントやデザイントークンの再利用）、そして異なる職種間の「共通言語」としてのチーム連携強化を挙げています。特に、デザイントークン（具体的な色や値を定義する「プリミティブトークン」と、役割を持たせた「セマンティックトークン」）の概念を具体例を交えて解説し、ブランディングカラー変更のような大規模な変更にも柔軟に対応できる利点を強調しています。
バックエンドエンジニアである筆者が、デザインシステムのキャッチアップからSCSSやコンポーネント化フレームワークの情報収集、ツール選定、コンポーネント製造、運用フロー整備まで多岐にわたるタスクを主導した経緯が詳細に述べられています。PoC（概念実証）の結果、開発における製造時間が約3分の1に短縮され、デザインレビューの指摘が減り開発が円滑に進んだことが定量・定性面で証明されました。
筆者は、デザインシステムは「共通言語」であり、一部のメンバーだけでなくチーム全体で育成していくべきものであり、職種間の相互理解と歩み寄りが成功の鍵であると締めくくっています。これは、単に技術を導入するだけでなく、組織文化として定着させることの重要性を示唆しています。