ガウディデザインシステム
Gaudiy Fanlinkの初期から構築してきたデザインシステムプロジェクト。
Background
Gaudiyが提供する『Gaudiy Fanlink』は、コミュニティプラットフォームという性質上、機能や関連プロダクトの増加が明確に予測される状況でした。組織やプロダクトが徐々にスケールしていく中で、様々な要求と制約がある環境において、すばやく、効率的に、一貫性をもってプラットフォームを提供する必要性が高まっていました。
また、少人数のスタートアップという制約の中で、専任チームを設けることが難しく、限られたリソースでも継続的にデザインシステムを運用・改善していく体制づくりが求められていました。
https://note.com/jirosh1998/n/n9c18262b5170
Issue & Goal
主要課題
開発効率の向上: 機能開発時の重複作業を削減し、開発スピードを向上させる
一貫性の担保: プロダクト全体でのデザイン品質と体験の統一性を確保する
意思決定の迅速化: 基準とルールを標準化することで、デザイン判断を効率化する
スケーラビリティの確保: 複数プロダクトに展開可能な設計で将来の拡張に対応する
運用面の課題
専任チームがない状況での継続的な改善体制の構築
Variables化されていないトークンの散在
FigmaとImplementationの命名規則の不統一
40以上のコンポーネントのガイドライン不備
参照頻度の低いドキュメント管理の散在
Solution
1. 運用体制の構築
専任ゼロでも持続可能な体制づくり
プロダクトデザイナー3名、フロントエンジニア1名を中心とした運用体制
2週間スプリント制の導入（週3時間程度の現実的な工数設定）
業務委託メンバーの活用による安定した進捗確保
各開発チームのミッション達成を最優先とした明確な優先度設定
2. 大幅リファクタリングの実施
3ヶ月間での集中的な基盤整備
Variables化されていないトークン（Spacing, Radius, Typography等）の定義
FigmaとImplementationの命名規則統一
40以上のコンポーネントへのトークン適用
40以上のコンポーネントのガイドライン整備
デザインパターンの言語化
3. 効率化ツールの導入
LLMを活用したガイドライン作成
ChatGPTを使ったガイドライン叩き台の高速作成
テンプレート/スクリーンショット/参考デザインシステムを組み合わせた効率的な制作フロー
一定品質の担保と制作時間の大幅短縮を実現
4. 客観的な優先度判断システム
スコアリングによるIssue管理
利用頻度 × 工数 × インパクトでの客観的評価
Library Analyticsを活用した実際の利用状況把握
バックログの透明性確保と合理的な優先度決定
5. 自動化とプロセス改善
運用負荷軽減の仕組み構築
Slack to Backlog連携（絵文字リアクションでの起票自動化）
Figma Publish通知の自動化
デザインレビュープロセスの導入
デイリー相談会（UID会）での気軽な相談環境整備
6. AI-Ready化への取り組み
将来を見据えた情報構造化
ガイドラインの言語化・構造化でAIアクセス可能な状態を実現
コンテキスト情報のWeb公開による活用幅拡大
次世代プロダクト開発プロセスへの対応準備
Result
定量的成果
40近いコンポーネントのガイドライン策定完了
命名規則の統一によるFigma-Implementation間の差分削減
Variables化による変更管理の効率化
Library Analyticsでの利用状況可視化実現
定性的成果
開発効率の向上: 一定のコンポーネント・デザインパターン土台により、体験や機能価値にフォーカスしたプロダクト開発が可能に
品質の安定化: デザインレビュープロセス導入により品質担保体制を確立
運用の持続可能性: 専任チームなしでも継続的改善を実現する体制構築
チーム間連携の改善: 明確なガイドラインとプロセスにより、デザイナー・エンジニア間の協働効率向上
今後への展開
AI時代への準備: 構造化されたドキュメントとガイドラインでAI活用基盤を整備
複数プロダクト対応: 設計段階から複数プロダクト展開を想定した拡張可能な構成
継続的改善文化: スコアリングシステムと定期スプリントによる持続的な品質向上体制
組織への影響
プロダクトデザイナーの「プロダクト品質担保責務」を明確に定義し、事業推進との両立を図りながら、デザインシステムがもたらす恩恵を組織全体で実感できる状態を実現。限られたリソースの中でも、戦略的な優先度設定と効率的な運用により、持続可能なデザインシステム運用モデルを確立しました。