サービスを支える基盤であり共通言語。DMMのデザインシステム「Turtle」が目指すもの

長島志歩 | 03.16.2023

デザインシステムを立ち上げる会社が相次ぐ中、その考え方やつくり方の違いにも関心が高まっています。今回は「DMM TV」など多数の事業・サービスを手がけるDMM.comの大村さんと岡本さんに、プラットフォーム事業本部が開発運用をしているデザインシステム「Turtle」立ち上げの背景やその目的、そして導入によっておきた変化などについてお話を伺いました。

合同会社DMM.com 大村真琴　
VPoE室とCTO室を兼務しているデザイナー。プラットフォーム事業本部のフロントエンドグループにて技術支援をしている。その一環としてデザインシステム構築を主に担当している。

合同会社DMM.com 岡本忠浩　
プラットフォーム事業本部のフロントエンドエンジニア。キャリアとしては10年目でスタートアップ、AWS受託、事業会社を経て、2020年にDMMにジョイン。

多数のサービス群を一つにまとめ、支えられるデザインシステムを

── DMM.com（以下、DMM）では、なぜデザインシステムをつくることにしたのでしょうか？

岡本：DMMのデザインシステム「Turtle」のプロジェクトは、僕ともう一人の社内メンバーが問題意識を持ったところから始まりました。

DMMにはさまざまな事業やサービスがありますが、ユーザーはそれらすべてを一つのプラットフォームとして捉えていますし、僕たちとしても一つのプラットフォームのように振る舞いたいと思っています。でも実際はそれぞれ担当する事業部が独自に開発していたため、サービス間を移動したときにまるでフィッシングサイトのような印象を与えてしまいそうなほど、全体的な見た目はもちろん、品質的にもバラつきがある状態でした。

この問題を解決したいと思っていたタイミングで、ちょうど大村さんが所属するCTO室からの技術支援が決まったこともあり、Turtleの立ち上げに向けて動き出しました。

── Turtleの立ち上げにあたっては、どのようなことを意識しましたか？

大村：デザインシステムをつくる目的を、僕は「思考をシステム化していくこと」だと捉えています。分かりやすい例だと「このカラーパレットの中で自由にどうぞ」ではなく、「レッドは失敗、グリーンは成功」など利用シーンを定義していくことで、一人のデザイナーの思考やスキルに依存しないようにすることが最も重要なんです。

そうすることで、各プロジェクトのUIデザインをすべて１から考える必要がなくなりますし、UIに強いデザイナーばかりではなかったとしても対応できるようになります。システム化することで個人が考える負担を減らし、もっとクリエイティブなことに脳を使えるようにすることこそが、デザインシステムの肝だと僕は考えています。

── Turtleという名前にも意味があるそうですね。

大村：一つは「鶴は千年、亀は万年」ということわざから。Turtleを長く運用していきたいという思いを、長寿の象徴である亀にかけています。

もう一つは、さまざまな神話に登場する「ワールドタートル」から。世界は象の上にあり、その象は亀の背の上にあるとする考え方で、TurtleがDMMを支える大きな基盤となっていくイメージをこめています。

実は最初は仮の名称のつもりだったんですが、こうやって思いを整理していったらぴったりあてはまると気づき、そのまま採用しました（笑）。

自社の特色をふまえて「色」から着手

── Turtleの立ち上げにあたり、まずはじめに何から取り組みましたか？

大村：DMMでは常に多数の新規サービス開発やキャンペーン施策、改善施策などのプロジェクトが進行しているため、デザインシステムがすべてできあがってから適用するのではなく、プロジェクトと平行してつくっていく必要がありました。

その前提で考えると、どんなプロジェクトでも必ず必要になるのが「画面」であり、そこでもっとも多く利用するのが「色」です。コードベースでの色の一括リプレイスは非常に難しく、Hexの値が一つずれているだけで検索にヒットしないためハードルはありましたが、裏を返せばデザインシステムによって統一する恩恵がもっとも大きいとも言えます。そこでまずは色、特に無彩色から着手することにしました。

実はTurtleに着手する前に岡本さんが参加していたプロジェクトがペンディングになっていて、そのときつくったデザインやコードなどの財産が宙に浮いている状態だったんです。それらを活用しつつルールを設定することが、Turtleの第一歩となりました。

── 色はどのように決めていきましたか？

大村：DMMではダークモードへの対応を前提としているため、まずは大きくBackground（背景）とSurface（表層）の２軸から詰めていきました。

Backgroundの色は、基本概念を主軸に据えつつ実際の運用を鑑みて定めました。単調にならないよう、ある程度バリエーションを持ちたいという要望もあるだろうと考えて３色を設定しています。

大村：その上でBackgroundとの最適なコントラスト比を考慮してSurfaceの色を決め、さらに細かいボーダーやディバイダーの色を調査をして決めていきました。Turtleを使えば、最適なコントラスト比を保ちながら簡単にダークモードへの切り替えができるようになっています。

岡本：DMMにはさまざまなサービスがありどれも特色のあるものなので、初めから拡張しやすさを意識してTurtle自体はあまり色を持たないようにしています。ただし、プラットフォーム向けに提供しているサービスでは独自性よりも「ちゃんと使える」ことの方が重要で、それにはTurtleを使ったほうが早いし品質も担保できるんです。

デザインシステムを共通言語に、コミュニケーションが生まれる

── 立ち上げてみて、社内の反応はいかがですか？

岡本：最初に提言したときの社内の反応は正直イマイチでした。「そんなに大ゴトにしてまでやることなの？」と、あまり響いていなかったんです。

そのため、まずは一つのサービスで試験的に導入してもらい、その後僕らが関わるサービスに関してはTurtleを使ってもらうことで、徐々にDMM全体に広げていく戦略をとっています。開発チームから徐々に活用がはじまり、現在は少しづつデザインチームへと広がってきているところです。

── Turtleは現在、どの程度整備されていますか？

大村：色やチェックボックス、ボタンなどの基本的なコンポーネントは揃いつつあります。ただしTurtleは立ち上げて日が浅いため、BreadcrumbsやStepperなどまだ用意がないものも多いです。そのため、各プロジェクトで新規につくったものから採用してTurtleに蓄えるという運用をしています。

大村：2022年12月の「DMM TV」ローンチに合わせて「DMMプレミアム会員」という新しいサブスク会員システムがスタートしたのですが、その開発プロジェクトの中でTurtleにはないモーダルコンポーネントが登場しました。アクセシビリティを考慮してかなりかっちりレビューしてつくったのですが、非常に素晴らしいモーダルができたためTurtleに採用することにしました。アクセシビリティの強化は、現在特に力を入れている部分でもあります。

岡本：「DMMクーポン」の開発プロジェクトの中でつくられたクーポンカードも、最近Turtleに取り込みましたね。ヘルプページなども同様の流れで最近追加されました。

──とすると、事業側のデザイナーとの連携が大切になりそうですね。

大村：事業側のデザイナーに「これTurtleにあったらいいかも」と発想してもらえたらいいなという願望はありますね。ただ、その発想のために必要なのもやはり「思考のシステム化」だと考えていて、一つの策として「ロジックツリー」を充実させるようにしています。

大村：このロジックツリーに沿っていけば、プロジェクト独自でつくるのか、Turtleを使うのか、誰でも思考をシステム化して判断することができます。こういった部分もデザインシステムとしてカバーしていきたい範囲ですね。

──Turtleができたことで、社内のコミュニケーションに変化はありましたか？

岡本：カジュアルに意見をもらったり、「Turtleとしてどうすべきか」を毎日話す場があったり、議論する機会はかなり増えました。社内の問い合わせで課題に気づくことも多いため、GitHub Discussionsで要望を聞いたり、Slackの問い合わせチャンネルも頻繁に更新するようにしています。

またTurtleには「DMM全体のフロントエンドを支えるエコシステムをつくる」という狙いもあるため、一括更新できるよう「モノレポ（一つのリポジトリで複数のプロジェクトを管理する方法）」で管理しています。モノレポ管理にすると、たとえば新しいサービスを立ち上げる場合３か月ほど毎日コードレビューが必要になるのですが、その分事業側のデザイナーとも密なやりとりが増え、その中で「これTurtleにあったほうがいいね」「ちょっとこのTurtleのUIイケてないよね」といったコミュニケーションが生まれるなどの付随的なメリットも感じています。Turtleという共通言語ができたことで、デザインに関してもエンジニアリングに関しても良い効果が生まれています。

見つけて、使ってもらえてこそ力を発揮できる

── デザインシステムの構築や運用にあたり、何か心がけていることはありますか？

大村：僕たちふたりとも、さまざまな会社が公開しているデザインシステムを趣味のような感覚で「見すぎている」節があります（笑）。

その中で僕がもっとも意識して見ているのはドキュメントの構造で、特に分類の仕方を注視しています。結局ドキュメントそのものは充実していたとしても、誰かの感覚ベースで分類されていたりして探しにくく発見できなければ、使われなくなってしまうからです。

そのためTurtleではドキュメント自体を充実させることはもちろん、その参照しやすさ、発見しやすさを大切にしています。多少内容が難しかったとしても、辿り着けさえすれば質問してもらえるし、それをきっかけにコミュニケーションをとることができるからです。

現在はまだデザイナーからの問い合わせは多くはないので、今後はFigma上にオンボーディングデータを用意したり、そこからドキュメントに辿り着けるようにしたりして、デザイナーが探しやすく使いやすいように整えていきたいと思います。

岡本：Turtleの特徴でもある拡張性は、今後も大切にしていきたいですね。例えば「据置型ゲーム機では、ログイン画面をゲーム機の仕様に準拠したインターフェイスにしたい」など、事業側がそのサービスらしさを表現するためのこだわりを実現したり、専門性に対するオタク度を追及できるよう、アクセシビリティを担保しつつある程度の自由度をあげたいなと思っています。そのためにはお互いの専門性に対する理解が必要ですし、コミュニケーションを重ねて一緒にベストプラクティスを探っていきたいですね。