エンジニア共創型デザインシステムの設計と運用
コのほけん！のプロジェクトにアサインされた時点ではデザインシステムがなく、エンジニアとデザイナーのコミュニケーションコストが必要以上に発生している状態でした。そこで開発体制の効率化やユーザビリティの向上を目指し、デザインシステム構築に取り組みました。デザイナーとエンジニアと協働しながら、持続的に運用可能なデザインシステムの構築を主導しました。
背景と課題
サービスの急成長に伴い、デザイナーやエンジニアのチーム規模が拡大していた
UIの一貫性が徐々に失われ、似て非なるデザインが複数存在することで、デザインの属人化や実装時の認識ズレが頻発していた
デザイナーとエンジニアの認識合わせのためにコミュニケーションコストが増大していた
デザインのばらつきによってブランドの統一感も損なわれ始めていた
目的
UIコンポーネントの再利用性を高め、実装・デザイン効率を向上させる
ブランドイメージを統一し、UX品質を高める
デザイナーとエンジニアが共通の言語で連携できる基盤づくりを目指す
アプローチ
既存UIを洗い出し、再利用性・拡張性を重視しながらFigma上にコンポーネントライブラリを構築しました。
担当：デザイナー
Storybookを確認しながら、コンポーネントライブラリを修正しました。最終的にはエンジニアと相談しながら命名規則を決め、今後運用するコンポーネントについて認識合わせをしました。
担当：デザイナー、エンジニア
デザインガイドやコンポーネントライブラリをチームに共有し、チーム内浸透を図ることで、継続的な運用体制を整備しました。
担当：デザイナー、エンジニア
成果
システム導入後に実施したエンジニア向けアンケートでは満足度100%を記録し、「今後も継続して取り組みたい」と全員が回答しました。
実装前の細かな仕様確認が大幅に削減され、開発リードタイムの短縮に寄与しました。
デザイナー間でのデザイン定義の齟齬が解消され、レビュー工数を削減。チーム全体で一貫した「コのほけん！」ブランドを迅速にアウトプットできる体制を実現しました。