マルチブランドEC：デザインシステムの構築・運用
Client
Leading Company in Apparel Industry
Team
PM
Designer x3 (me)
Engineer x2
Development Vendor（India）
Platform
Web
Mobile APP
Tool
Figma
Adobe CC
Jira
Confluence
Teams
Timeline
2022.5 - 2024.3
Overview
複数ブランドをグローバルに展開する大手アパレル企業のWeb・モバイルアプリ向けECサービスにおけるDesign System構築プロジェクトに参画しました。
私はDesign Systemチームの一員として、2年にわたりComponentやDesign Tokenの設計・更新、ガイドライン整備、開発や他デザインチームからの問い合わせ対応などを担当。多ブランド・多言語・多機能という複雑なサービス構造において、スケーラブルで効率的なデザイン運用を実現するための基盤整備を推進してきました。
Design System Structure
本プロジェクトでは、Webおよびモバイルアプリの2つのプラットフォームに対応するECサービスに対し、3つの主要ブランドが共通のDesign System上で構築されています。画面構成や使用Componentは基本的に統一されており、ブランドごとの世界観やビジュアルトーンはDesign Tokenの切り替えによって表現されています。
Design Systemの構造
システムの開発体制はプラットフォーム別に分かれていますが、デザインリソースは可能な限り共通化されており、差分が必要な箇所のみ個別に設計・提供する形です。
では、1つのデザインとComponentセットで3ブランドに対応する仕組みは、どのように実現されているのでしょうか？
ページのレイアウトとComponentデザインは、基本的に1つの共通設計で構築されています。3つのブランドはすべて同じレイアウト・Componentを共有しており、Design Tokenの切り替えによって、色・タイポグラフィ・角丸・影・アイコンなどの視覚的な要素を各ブランドのスタイルに最適化しています。
この仕組みを支えるためには、以下のポイントが重要です：
すべてのブランドが同一のToken構造を共有していることが前提
命名ルールを統一と共通認識を確立
Tokenでは表現できない差分には、ブランド別でComponentを用意
Design System Team’s Role
デザイン、開発、マーケティングなど、さまざまな部門が関わる大規模ECサービスにおいて、Design Systemチームは“全体をつなぐハブ”として機能します。コンポーネントの整備やガイドラインの更新はもちろん、他チームとの連携も重要な役割の一つです。Design Systemチームはデザインが始まる段階から入り、画面のデザイナーや開発と議論しながら進めています。
Workflow
デザインシステムチームの役割
ページ機能の更新に伴うコンポーネントおよびデザイントークンの設計・更新
デザインシステムドキュメントの整備（ガイドライン／仕様書の更新）
デザインシステムの構造を最適化
デザインチーム・開発チームからの問い合わせ対応
Design Systemチームはデザインが始まる段階から入り、画面のデザイナーや開発と議論しながら進めています。
My role
Design Tokenの設計・命名・管理
ブランド差分を吸収可能な共通コンポーネントの構造設計
ガイドラインやデザイン仕様書の作成・保守
プロトタイピング
開発・他デザインチームからの問い合わせ対応と仕様調整
Design QA
DesignOps効率化の提案・実施
具体的なアプローチについては、こちらのケースをご参照ください。
Achivement
本プロジェクトを通じて、複雑なマルチブランド・マルチプラットフォーム環境下でも、一貫性と柔軟性を両立したデザイン運用体制を構築しました。
共通のDesign Token構造と命名ルールのもと、3ブランドへの柔軟な対応を実現
WebとFlutterアプリにまたがるデザイン資産を共通化し、運用効率を大幅に向上
ページ機能更新に伴うコンポーネントの設計・更新を継続的に支援
運用フローを改善による運用性を向上
これらの取り組みにより、デザイン品質と業務効率を両立させる、スケーラブルなデザインシステム基盤を確立しました。
