Takramは、三菱電機株式会社（以下、三菱電機）のDX戦略を支える「Serendie Design System（セレンディデザインシステム）」のデザインと開発を手がけました。このプロジェクトは、デザインシステムの立ち上げに留まらず、オープンな組織文化をつくる第一歩となることをめざしたものです。
宇宙から家電まで幅広い事業分野を有するを三菱電機は「循環型 デジタル・エンジニアリング企業」への変革を打ち出し、その変革を加速させるためのDX基盤「Serendie（セレンディ）」をリリースしました。
Takramは、このDX戦略を支えるデザインシステムのデザインから開発までを一気通貫で手がけました。
Figmaを活用した汎用性の高いUIコンポーネント集とともに、コードコンポーネント（JavaScript実装）を併せて開発。
Serendie UIをベースに各事業のVIを適用し、設計の共通化と多様な事業分野ごとに最適化をめざす。
テーマはデザイントークンを活用してシステマチックに構成され、必要に応じてカスタムすることもできる。
幅広い事業分野に対応するよう5つの標準カラーテーマを備える。
デザイントークンはReference TokenとSystem Tokenの2層から成り、テーミングやマルチデバイスへの対応を考慮。
Single Source of Truthを実現するため、Figma API、Variables、Code Connectなどを活用した仕組みを開発。
一貫した印象を届けるため、Serendieアセットとしてイラストシステムや300以上のアイコンを提供。
三菱電機と密に連携し、デザインシステムを継続的に育てるためのチーム構成やワークフロー、会議体などの運用モデルを検討。Photography by Ayumi Yamamoto
Photography by Ayumi Yamamoto
Photography by Ayumi Yamamoto
Information
- Client三菱電機
- Year2025- (Ongoing)
- StudioTokyo
- Link
- Award
- Expertise
Project Team
- Project Direction:
- Software Engineering:Yahiro Nakamoto (Intern)
- UI Design:
- Web Design & Illustration:
- Iconography:
Collaborators
- Software Engineering:Takeshi Nagayama (float)Kenshiro Fujii (CLAN)
- Design System Advisory:Ryo Fukushima (SmartBank)
- Motion Graphics:Yoshihiko Shimoda
Related Projects
View all projects
