システム全体像#

Turtle は、デザイナー・エンジニアが迷わず一貫性ある UI をつくれるように設計された、DMM 横断のデザイン基盤です。 React を中心としながらも、一部では各プロダクトの実装スタックに適応できるよう構成されています。

提供しているリソース#

Turtle では、デザインから実装、運用まで一貫したワークフローを支援するリソースを提供しています。

プロダクト#

実装で直接利用するパッケージやライブラリです。

• React UI Library：フロントエンド実装向けの公式 UI コンポーネント
• turtle-design-tokens：カラー、タイポグラフィ、スペーシング等のルールをコード化しパッケージ化
• HTML/CSS 対応版 UI Library：一部の非 React プロダクトの UX 改善目的で提供しているコンポーネント
• Icons：Material Icons を中心とした統一されたアイコンセット

ツール#

効率的な開発を支援するツールやユーティリティです。

• Figma UI kit：デザインライブラリ（トークン・コンポーネント・テンプレート）を提供（Code Connect 対応）
• Turtle MCP：AI を利用して精度の高い UI 実装を実現する MCP Server
• Storybook：UI カタログとデザインガイドラインの統合ドキュメント

ナレッジ#

デザインシステムの活用と運用に関する知識やガイドラインです。

• Figma 活用：効率的なデザインデータ作成とコンポーネント活用方法
• UI/UX スキル：ユーザー中心設計とインターフェース設計の実践的手法
• デザインシステム活用：プロダクト開発でのデザインシステム導入と運用方法
• デザインシステム運用：継続的な改善とチーム間連携のベストプラクティス

オンボーディング#

デザイナー・エンジニア向けの導入支援オンボーディングです。

• Turtle Designer：デザイナー向けの Figma UI kit 活用と効率的な活用方法
• Turtle Developer：エンジニア向けのコンポーネント実装や AI ツール活用方法

システムの位置付け#

DMM プラットフォームの UI 実装は、ロジック部分を除くと次の二層で構成されています。
Turtle はここで言う、コア・デザインシステムにあたる役割を持っています。

• ローカル・デザインシステム：特定のプロダクトの文脈で共通利用できる、ローカルコンポーネントを管理する
• コア・デザインシステム：プロダクトを超えて共通利用できる、アトミックコンポーネントを管理する