UIデザインのルール(色、フォント、余白)や、再利用可能なUI部品(ボタン、フォーム等)をコード化してライブラリ(Storybook等)にまとめ、全プロダクトで共有する施策です。デザイナーとエンジニアの協業をスムーズにし、プロダクト間で統一されたUI/UXを提供します。
職種 |
情報システム | 施策難易度 |
★☆☆☆☆ |
|---|---|---|---|
業界① |
IT・情報通信 | 目的 |
ブランディング 開発効率化 |
業界② |
ソフトウェアメーカー | 対象 |
UI/UXデザイナー フロントエンドエンジニア |
費用 |
200〜1000万円 | 180 |
主なToDo
- ブランドガイドラインに基づき、基本コンポーネント(Atomic Design)を定義する
- ReactやVueなどのコンポーネントとして実装し、カタログ化する
- 新機能開発時はライブラリから部品を組み合わせるだけでUIを作れるようにする
期待できる効果
統一されたUIコンポーネントをコード化して共有することで、プロダクト間でのデザインのばらつきを解消。デザイナーとエンジニアの共通言語を作り、開発効率の向上とブランド体験の均質化を同時に達成します。
躓くところ
ライブラリを常に最新かつ使いやすく維持するための、専任的なメンテナンス担当者の確保が困難です。既存プロダクトへの導入に伴う大幅なコード修正と、デザインの自由度とのバランス調整も課題です。

デザインシステム・コンポーネントライブラリ構築【ソフトウェアメーカー】






