開発ヒストリー
数十もの事業で利用される DMM プラットフォームでは、認証、決済、ポイント等、いくつもの機能が開発・保守・運用されています。
デザインシステム開発以前では、そういった共通機能を統一的かつ効率的に開発することが事業として求められる中、各部署でフロントエンドに対する考え方がまちまちで、UI の一貫性やコンポーネントの再利用性に課題を抱えていました。
そんな中で、モノレポの整備に合わせて UI 整備の一環としてデザインシステムが段階的に導入されました。
2021年
- 「Turtle Design System」が誕生。名前の由来は、インドの神話に登場する「World Turtle」と、亀山会長の「亀」からきています。DMM プラットフォームの体験を支える基盤として課題に貢献できるように、そんな想いが込められています
- デザイナー1名、エンジニア2名で立ち上げ
- DMM プラットフォームの UI の共通化を目先の目標に開発スタート
- [記事] DMM プラットフォームのフロントエンド開発を支えるエコシステム
2022年
- 基本的なデザイントークンと汎用的なアトミックコンポーネントを準備拡大
- Figma UI kit と合わせて React コンポーネント & Storybook を整備
- [記事] デザインシステムにおけるタイポグラフィーの試行錯誤
2023年
- コンポーネントのウェブアクセシビリティテストを実施し、信頼できる品質の担保に取り組む
- 開発チームのゴール設定やチームビルディング、ガイドライン策定に注力
- Turtle を使ったサンプルアプリケーションの開発
- Turtle 利用者アンケートの運用開始
- [記事] サービスを支える基盤であり共通言語。DMMのデザインシステム「Turtle」が目指すもの
- [登壇] デザインシステムで解消するさまざまな分断 / Bridging Various Divides with Design Systems
2024年
- 利用デザイナー、エンジニアに向けた Figma / デザインシステムワークショップ等を実施
- デザイントークン管理の一元化
- Figma Code Connect の導入
- ADR として「設計ログ」の運用開始
- Figma 運用に関するベストプラクティス等をドキュメントで整備
- 一部のコンポーネントを CSS 化し、非 React のプロダクトに対応
- コンポーネントに関する仕様情報やガイドライン情報を Storybook に一元化
- 利用者解像度の向上に伴いデザインシステムの KPI 見直し
- [紹介] デザインシステムの構築と運用そしてその本質
- [登壇] DMMでデザインシステムやってみてわかった、 美味しい所・美味しくない所
- [登壇] Figma Code Connect を使ってエンジニアの新しい体験をデリバリする
- [記事] 入社10ヶ月で行った Turtle デザインシステムの開発と関連する取り組み
2025年
- 責務範囲の拡大・変化に伴いチーム分割。デザイナー2名、エンジニア2名のチームに
- AI-Turtle 等の新たなソリューションにチャレンジ。知見を全社に貢献できる形に
- DMM 全社への価値提供を進めるため、Turtle のポータルサイトを公開することで情報のアクセシビリティを向上させる Public Turtle プロジェクト始動
- [登壇] 【イベントレポート/LT #3】DMM.comでのFigmaを活用したデザインシステム開発と情報の一元化 #Offers_DeepDive
- [記事] AI × Turtle で実現する Vibe Coding:DMM デザインシステムを活用した新たな開発ワークフロー
- [登壇] DMMのデザインシステム:経験主義に頼らないコラボレーションパターン | UI+FE合流点