デザインシステム

Phase 1（2週間）: 現状の棚卸し

• 全画面のスクリーンショットを並べて、使われている色・フォント・コンポーネントを洗い出す
• 発見: ボタンが7種類、グレーが12色、フォントサイズが15パターン。統一感ゼロ

Phase 2（2週間）: トークン＋基本コンポーネント定義

• カラー: プライマリ（Blue-600）、セカンダリ（Gray-700）、エラー（Red-500）+ 各色の100〜900スケール
• フォント: 見出しInter Bold / 本文Inter Regular / サイズ5段階
• スペーシング: 4px刻みの8段階
• 基本コンポーネント: ボタン3種、入力4種、カード、モーダルをFigma＋React

Phase 3（1ヶ月）: 展開＋ドキュメント

• Storybookでコンポーネントカタログを公開
• 新規画面からデザインシステムを適用。既存画面は段階的に移行
• 週1回の「デザインシステムオフィスアワー」で質問対応

効果: 新画面のデザイン〜実装が40%短縮。 「このボタンどっちを使う？」の議論がゼロに。エンジニアのコメント「コンポーネントを組み合わせるだけで画面が作れる」。

状況: 3つのSaaSプロダクトを持つ企業。各プロダクトが独自のUIルールで開発されており、同じ会社の製品に見えない。顧客から「操作体系がバラバラで使いにくい」との声。

取り組み:

• 3プロダクト共通のデザイントークンを定義（カラー5色、フォント2種、スペーシング8段階）
• 共通コンポーネント25個を作成。各プロダクト固有のコンポーネントは別レイヤーで管理
• 全プロダクトのデザイナー8名＋エンジニア15名がStorybookを共有

結果:

• プロダクト間のUI差異: 87箇所→12箇所（86%削減）
• 新機能開発速度: 平均2.3倍に向上（共通コンポーネント再利用のため）
• 顧客満足度調査で「製品間の一貫性」スコアが3.1→4.4に改善（5点満点）
• デザイナーの異動時のキャッチアップ期間が2週間→3日に短縮

状況: デザイナー1名、エンジニア4名のスタートアップ。デザインシステムの必要性は感じているが、専任リソースは割けない。

最小構成でのスタート（Week 1-2）:

• デザイントークン: カラー4色、フォントサイズ4段階、スペーシング4段階
• コンポーネント: ボタン2種、入力フィールド2種、カード1種（計5個）
• ドキュメント: NotionにDo/Don’tを記載（1コンポーネント1ページ）

成長過程（6ヶ月）:

• Month 1: +3コンポーネント（モーダル、ドロップダウン、テーブル）
• Month 3: Storybookを導入しコード側も整備。コンポーネント計15個
• Month 6: デザイントークンをFigma Variables化。コンポーネント計28個

結果: 6ヶ月後にはデザイン〜実装のサイクルが2.5倍速に。 エンジニアの声「最初の5個だけでも、あるとないでは全然違った」。小さく始めたからこそ、プロダクトの成長に合わせて自然にシステムが育った。