はじめに
Turtle デザインシステムのポータルサイトへようこそ。
ここでは、 Turtle の存在意義や提供するソリューション等の概要について知ることができます。
Turtle デザインシステムとは
Turtle は、DMM のプラットフォーム領域で主に利用されているデザインシステムです。UI の一貫性を担保する手段として、デザインコンポーネントやトークンをパッケージとして提供しています。
なぜ Turtle が必要なのか
複数のプロダクトが独立して開発される中で、次のような課題がありました。
- 画面間の体験がバラバラでエンドユーザーの認知負荷が高い
- 車輪の再発明で非効率になっている
- 既存機能や画面間の調査・学習が負担になっている
Turtle は、これらの課題を解決するためのデザインシステムです。
Turtle が提供する価値
Turtle は、先ほど挙げた課題を解決し、開発チームが本質的な価値創造に集中できる環境を提供します。
(1) 一貫した体験で認知負荷を軽減
統一されたデザインコンポーネントとトークンにより、プロダクト間での体験のばらつきを解消します。エンドユーザーは一度操作を学習すれば直感的にプラットフォームの全機能をストレスなく利用でき、学習コストが削減されます。
(2) 車輪の再発明をやめて開発を効率化
再利用可能なコンポーネントライブラリにより、同じような機能を各チームが個別に実装する無駄を排除します。開発リソースをエンドユーザーが本当に求める機能の開発に集中できます。
(3) 調査・学習コストを削減する
明確なデザインルールとガイドラインにより、既存機能の調査や画面間の整合性確認の負担を大幅に軽減します。デザイナーやエンジニアは迷いなく品質の高い UI を構築することができます。
Turtle のアプローチ
Turtle は次のようなアプローチで価値を提供します。
- アトミックなコンポーネント：特定のプロダクトのみでしか使用しないローカルコンポーネントの管理は対象外とし、汎用性の高いコンポーネントに集中
- 共通基盤の管理：共通スタイルや共通コンポーネントとして機能を管理することで、UI/UX 改善やマイクロインタラクションの検証・拡充を効率化
- 開発効率化ツール：Figma 連携や AI によるコード生成など、デザインから実装までの工程を効率化するツールを提供
- 実践的なガイドライン：デザインデータの作成方法やコンポーネントの使い方など、具体的な運用の指針を提供
- ベストプラクティスの共有：プラットフォーム全体での知見を蓄積し、効果的な開発手法を共有
ユースケース
Turtle のリソースをどのように活用できるかの具体的なユースケースをご紹介します。
ケース1：UI の色・余白・文字サイズをサービスで統一したい
turtle-design-tokens のカラーパレットを活用して、トークンの利用方法にルールを持たせ、統一されたインターフェース作りに役立てたり、Dark-mode 対応をモード切り替えだけで完了できます。微調整や色と余白のぶれに悩む時間をなくせます。
デザイントークンケース2：デザイン業務を効率化したい
白紙から UI を作る手間を大幅に減らすことができます。Turtle のコンポーネントやテンプレートを使えば、デザインを最短距離で進められる上に、今解決したい問題の最小限のイシューに集中できます。
リソースケース3：UI 実装を AI で高速化したい
様々なプロダクトで検証を重ねた品質の高いコンポーネントを再利用できます。Turtle MCP を使えば、AI 対応された Figma データから UI 実装を数分で構築できます。"Do more with less." より少ない労力で最大の成果を出すことに集中しましょう。
提供リソース
Turtle が提供するリソースや DMM プラットフォームでの位置付けについて詳しく説明しています。
システム全体像プロダクトビジョン
2023年に Turtle はプロダクトとしての価値を最大化するため、プロダクトビジョンを策定しました。
プロダクトビジョンデザイン原則
プロダクトビジョン実現のためには、利用者やTurtle開発チームが迷わずに品質担保できる原則が役に立ちます。デザイン原則では、Turtle を開発・利用する際の意思決定基準を定義しています。
デザイン原則開発ヒストリー
Turtle の開発スタートから現在に至る歴史をまとめました。
開発ヒストリー現在の導入状況
Turtle は DMM プラットフォーム開発本部のフロント実装を持つプロダクトのうち、エンドユーザー向けプロダクトと管理画面を合わせて、全体の 50% 以上で導入が完了しています（2025年8月時点）。
プラットフォーム開発本部では次のようなプロダクトを開発しています。
- 認証認可
- 決済
- 不正対策
- 会員
- 告知管理
- クーポン
- ポイントクラブ
- ヘルプセンター
- ユーザーレビュー
- 共通ナビ
大きな変化を実現するには、環境に即したアジャイルで段階的なアプローチが必要です。亀の歩みではありますが、導入範囲を着実に広げています。
DMM の開発効率の向上に資するソリューションとして、全社的な事業貢献を見据え、価値最大化に向けた最適な進め方を丁寧に検討しています。