DMMグループ内で導入をご検討の方へ
ここでは、Turtle やデザインシステムの導入を検討の方に役立つ情報を提供します。
対象読者：DMM グループ内でデザインシステム構築や Turtle 導入を検討している方
こんな課題ありませんか？
次のような課題を抱えているチームは、デザインシステムの活用によって受けられる恩恵が大きいかもしれません。
- リードデザイナー不在のままスケールしたデザインルールがカオスなプロダクトで、引き継ぎや教育が困難な状態になっている
- マルチプロダクト化や新規プロダクトの成長により UI が急速にスケールし、小さなリリースにも時間がかかるようになった
- PoC や MVP 開発では UI/UX が後回しになり、品質が落ちがち
一貫性のなさが引き起こす問題
これらの問題は、放置しておけばプロダクトを取り巻く一連の業務の問題につながっていきます。
- エンドユーザーが戸惑う：一貫性は、心理的にサービスの安心感やブランド形成に長期的に影響を与えます。数字で測ることは容易ではありませんが、施策の再現性を高めたり、価値提供の品質を維持・向上させていくには必要不可欠です。
- 開発メンバーが戸惑う：デザイナーやエンジニアの間で「なぜこのデザインなのか」の一貫した認識が形成されず、論点が定まらないため意思決定に時間がかかり、リリース遅延の要因となります。
デザインシステムで実現できること
デザインシステムは先にあげた課題の解決に寄与します。
(1) デザインの意思決定を戦略的かつロジカルに行える
昨今、AI の発展によるデザインの民主化も後押しとなり、職能横断でコラボレーションする働き方が重視されつつあります。これにより、価値観の異なる人々が共通の軸で議論できる環境が重要になっています。
原則やガイドラインがあることで、好みではなく「私たちのユーザーやビジネスにとってどうか？」という共通の論点で対話でき、合意形成のコミュニケーションをスムーズにおこなうことができます。
(2) シンプルなルールで、誰もが迷わずデザインできる
デザイナーはユーザーや複雑化するドメインを誰よりもよく分析し、事業戦略を“画面”ではなく、プロダクトの“デザインルール”に落とし込みます。
そのルールに基づいて、チームは共通の軸で議論することができます。そして、基本的な UI 調整ならエンジニアでもできる…そんな職能横断の働き方になっていきます。
(3) ゼロから作るのではなく、既存パーツを再利用して開発できる
既存のシステムの資産を無視してゼロベースで作ることで、今後のプロダクトに負債を撒いてしまうリスクも孕んでいます。特にルールがカオスな状況において、歴の長いデザイナーと、新規でジョインしたデザイナーでは、キャッチアップしなければならない情報の重さが異なります。
シンプルなルールがあることで、新規メンバーへのオンボーディングや既存メンバーの業務負担低減はもちろん、エンドユーザーの UI 学習コスト削減や、高速な価値提供にもつながります。
デザインシステムのビジネスインパクト
デザインシステムは、開発コストの削減やプロダクトのリリーススピード向上に役立ちます。さらに、デザインシステムは生成 AI の出力精度向上に非常に相性が良いことがわかっており、今後飛躍的な開発力の強化につながる可能性があります。
Turtle デザインシステム × AI 活用の PoC の成果事例になります。社内の方で詳細を知りたい方は、Slack の #ask-turtle よりお気軽にご相談ください。
社内 PoC 事例
- AI-Turtle と Turtle デザインシステムを使った１画面の UI 実装で、工数削減率 93.8%
- AI-Turtle と Turtle デザインシステムを使った実案件での検証で、工数削減率約（集計中）
私たちのチームでは、費用対効果の計算にこちらのサイトを参考にしました。
Design System ROI Calculator（Knapsack）：デザインシステム導入による費用帯効果を算出可能
導入アプローチの選び方
プロジェクトの状況によって適切なアプローチを選択することをおすすめします。
1. 新規プロダクトの場合
重要な観点は、開発スピードと品質をいかに両立するかです。デザインシステムを活用する際の選択肢を比較してみましょう。
| 項目 |
社外ライブラリ （MUI, Ant Design など） |
Turtle |
|---|---|---|
| 適用範囲 | 汎用的、幅広い業界・用途 | DMM プロダクト向けに特化 |
| コミュニティ | 大規模なグローバルコミュニティ | 社内チームによる直接サポート |
| カスタマイズ | 高い自由度、豊富なオプション | コア + ローカルの二段構造 |
| 学習リソース | 豊富なドキュメント・事例 | 社内オンボーディング・ワークショップ |
Turtle の特徴は以下の4点が挙げられます。選定時の参考にしてください。
- AI 活用に最適化：MCP server の活用で飛躍的なリリーススピードを実現
- アクセシビリティ品質：WCAG 2.1 - A 一部準拠し、あらゆる人のアクセス性を担保
- 充実したオンボーディングやワークショップ：専任チームによる直接サポート
- コア + ローカル設計：既存資産の活用 + 独自 UI で構築できる
まずは、Figma ファイルから Turtle のライブラリをインポートして試してみましょう。実装するときは npm パッケージからインストールしてすぐに実装できます。詳細はシステム全体像やリソースをご覧ください。
2. 既存プロダクトの場合
既存プロダクトでは、現在のユーザー体験を尊重した段階的な改善が重要です。ユーザーが既に学習している UI/UX パターンを急激に変更すると、混乱を招く可能性があります。Turtle を使う場合でも、既存プロダクトからデザインシステム化を行う場合でも、次のような段階的ステップが有効です
- 現状分析
- 段階的に適用
- 小さくリリース・テスト
- ルール化・ドキュメント化
まず、既存の体験を分析することから始めましょう。画面キャプチャを収集し、「青いボタンは重要なアクション」「角丸は親しみやすさを表現」といったユーザーが無意識に学習している UI の役割や意味を言語化します。色・UI パターンがどのように使われているかを分析し、そこから小さくデザインルールを作っていきます。
ここで、デザインルールが言語化されることで、Turtle に置き換え可能か、または独自のデザインシステムを構築すべきか判断しやすくなるでしょう。
次に、Button からルール適用を始めます。Button は基本要素（色、フォント、スペーシング）が集約されており、コンテクストに応じたガイドラインを定義しやすいコンポーネントです。ルールを適用し、ガイドラインを定義して実装に反映してみましょう。
そして、リリースして結果をテストします。ユーザーの反応や使用感を確認し、悪い影響があればすぐに戻せる体制を整えておくことが重要です。この小さなサイクルを繰り返すことで、リスクを最小限に抑えながら段階的に改善できるだけでなく、まとまったリソースを割きにくい状況でも取り組みを進められます。
最後に、テストから学んだ内容は、ガイドラインとしてドキュメンテーションすることでデザインのルールとして管理していきましょう。
デザインシステムの利用における各種コスト
デザインシステム導入後は、運用コストがかかることも理解しておきましょう。
- 学習コスト：デザイナーやエンジニアがデザインシステムの目的や使い方を学習する必要があります。Turtle では学習のためのオンボーディングを提供していますのでお気軽にご相談ください。
- 保守・運用コスト：Turtle npm パッケージや Figma ライブラリの更新を定期的に行なってください。
- カスタマイズコスト：プロジェクト固有の要件に対応するため、ローカル・デザインシステムの構築や保守が必要になる場合があります。
- 移行コスト：既存プロダクトの場合、段階的な置き換えや一時的な複数パターン共存による開発・保守の負担が発生します。
私たちがサポートできること
Q. 改善依頼はどの程度で対応されますか？
最短で3日から可能です。問題の大きさによってお時間をいただく場合がございます。#ask-turtle で希望の対応スピードを選択できますのでご利用ください。
Q. オンボーディングはどのくらいかかりますか？
3人日程度で全てのオンボーディングを完了できます。こちらの資料でオンボーディングを提供しています。読み合わせやワークショップ形式でも実施可能のためお気軽にお声がけください。
Q. デザインシステムの使い方についてレビューが欲しいです
#ask-turtle よりご相談ください。規模にもよりますが1週間程度で対応可能です。
Q. デザインやコードへの要求やコントリビュートはできますか？
#ask-turtle からの投稿によって可能です。PR や figma 上での提案ができる環境は、現在用意はできていませんが、要望が多くあれば検討する予定です。
お問い合わせ（DMMグループ内向け）
導入相談や詳細の確認は、Slack の #ask-turtle チャンネルからお気軽にご連絡ください。