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

UIデザインのルール(色、フォント、余白)や、再利用可能なUI部品(ボタン、フォーム等)をコード化してライブラリ(Storybook等)にまとめ、全プロダクトで共有する施策です。デザイナーとエンジニアの協業をスムーズにし、プロダクト間で統一されたUI/UXを提供します。

職種 情報システム 施策難易度 ★☆☆☆☆
業界① IT・情報通信 目的 ブランディング 開発効率化
業界② ソフトウェアメーカー 対象 UI/UXデザイナー フロントエンドエンジニア
費用 200〜1000万円 実施期間 180

主なToDo

  • ブランドガイドラインに基づき、基本コンポーネント(Atomic Design)を定義する
  • ReactやVueなどのコンポーネントとして実装し、カタログ化する
  • 新機能開発時はライブラリから部品を組み合わせるだけでUIを作れるようにする

期待できる効果

統一されたUIコンポーネントをコード化して共有することで、プロダクト間でのデザインのばらつきを解消。デザイナーとエンジニアの共通言語を作り、開発効率の向上とブランド体験の均質化を同時に達成します。

躓くところ

ライブラリを常に最新かつ使いやすく維持するための、専任的なメンテナンス担当者の確保が困難です。既存プロダクトへの導入に伴う大幅なコード修正と、デザインの自由度とのバランス調整も課題です。

狙えるチャネル

社内ツール