デザイナーがFigmaで作成したデザインデータを、エンジニアがコーディングする。Web開発の現場で当たり前に行われてきた業務ですが、DMMのデザインシステム「Turtle（タートル）」の開発チームは、AIを活用してFigmaのデザインデータを基にフロントエンド実装を行う新たなワークフローを構築しました。
AIが実装の大部分を担うAgentic Codingにおいて、デザイナーのデザイン業務はどのように変わったのか。そして、デザイナーとエンジニアのコミュニケーションや働き方はどう進化していくのか。Turtleの開発とAI連携を推進したチームリーダーの古川純希さんと高野慎二さんに伺いました。
プラットフォーム開発本部 UIデザイナー兼PO。事業会社でWebサイトのディレクション、デザイン、実装からアクセス解析、Webコンサル業務などに取り組んだのち、2023年DMMに入社。プラットフォームの品質や開発生産性を、横断的な立場からよりよくしていくために、デザインシステムでの標準化を主な取り組みとして仮説検証を日々行っている。
プラットフォーム開発本部 FEエンジニア。Web制作会社にて長らくサイト制作に関わる。ブロードバンド事業、客先常駐、ベトナム勤務等さまざまな経歴を経たのち、2022年DMMに入社。フロントエンドエンジニアとして勤務。
DMMのデザインシステム「Turtle」と、実装自動化への挑戦
―― デザインシステム「Turtle（タートル）」の概要を教えてください。
古川：DMMのデザインシステム「Turtle（タートル）」ができたのは、3～4年ほど前のことです。目的は、DMMのプラットフォーム全体のUI/UXの一貫性を向上させること、開発業務を標準化して生産性を高めることでした。決済やログインといった共通機能を各プロダクトが自由に作ってしまうと技術的負債にな りやすく、保守コストも膨らみます。そのため、デザインシステムで機能を統一して開発コストを下げる狙いがありました。
Turtleの具体的な構成要素としては、スタイリングの基準となるデザイントークン、UIコンポーネントとその仕様書、それらを扱うガイドラインや、Figma上で画面を組み立てるためのUIキットなどを用意しています。
―― Turtleと生成AIを組み合わせて、フロントエンド実装の自動化を実現されました。このプロジェクトに取り組んだ背景や現場の課題感について教えてください。
古川：きっかけとなったのは、2025年4月頃にオープンソースの「Figma MCP」が登場したことでした。デモ動画では、APIを通じてFigmaのデザインデータから実際のコードが生成される様子が紹介されていて、社内で話題になりました。そこから「Figmaからの実装を自動化できないか」という発想が生まれました。
高野：それまで、エンジニアはFigmaのデザインをReactなどのコードに落とし込む際は手作業で進めていました。作業の効率化のためにコンポーネントを使いやすくしたり 、ドキュメントを充実させたりといった改善を重ねていましたが、AIを活用することで手作業を減らすことができるのではないかという期待がありました。
デザイナーとエンジニアの試行錯誤を経て、AIによる自動化が実現
―― Figmaからの実装を自動化させるために、工夫した設計のポイントや試行錯誤したことについて教えてください。
高野：最初のアプローチでは、AIにTurtleのコンポーネントのソースコードを読ませて理解させ、その後オープンソースのMCPサーバーでFigmaのデータを取得して、「その通りにコーディングしてほしい」と指示を出しました。しかし、この方法ではなかなか精度が上がりませんでした。その後1ヶ月ほどは、プロンプトを打ってはブラウザで確認する検証サイクルをひたすら回し続けました。最終的に、「この種類のデータが来たら、このようにコードを書いてください」という具体的なルールを整理して、AIが推論する余地を可能な限り減らし、MCPのレスポンス内に組み込むようにしたところ、精度が向上しました。
古川：AIに正しく意図を読み取ってもらうために、Figmaのデザインデータの設計の見直しも行いました。Figma上でバリエーションを定義する「プロパティ」と、実装側の「props」という概念を1 対1で対応させる必要があったんです。両者の命名が離れすぎていたり、該当するパターンが存在しなかったりするとAIが迷ってしまうため、命名規則を整理して、マッピングを行いました。
―― TurtleとAIを連携させる過程で、利用者であるデザイナーとはどのようなコミュニケーションをとりましたか？
古川：システム開発チーム内部では「ホットポテト」と呼ばれる手法を取り入れ、オンラインで常時つないで画面を共有しながら、細かく調整を繰り返しました。一方、Turtleの利用者であるプラットフォーム向けのプロジェクトにアサインされるデザイナーに対しても、丁寧にヒアリングを行いました。デザインシステムは基本的になんらかの課題を解決するための制約を設けるものではありますが、それがプロダクトをもっと良くしていく上での障害になってしまうと意味がないからです。
* ホットポテトとは、完璧を目指してデザイナーだけ・エンジニアだけで作業を停滞させるのではなく、未完成のアイデアをあえてスピーディーに投げ合う優れたコラボレーションの方法です。
また、ガイドラインは作って終わりではなく、形骸化させないための意識醸成が大事です。現在は、利用するデザイナーも含めて一緒にガイドラインを見直す取り組みを少しずつ進めています。自分で組み立てた家具に愛着を持つ「IKEA効果」のように、利用者自身も運用に巻き込むことでより設計意図や背景を理解してもらえます。お互いの価値観や認識の違いをフィードバックし合いながら共に作り上げるプロセスを大切にしています。
―― AIに実装を任せる前提になると、デザイナー側のデータ設計にも変化があるのでしょうか？
古川：デザインデータ自体も文書構造に合うような構造を持つように作る必要があります。こうした変化については、デザイナーの業務スタイルによって度合いが違ったと思います。デザイン時にWeb上でどう構築されるかという構造をあまり意識していなかったデザイナーにとっては、いきなりハードルが上がったように感じたかもしれません。
一方で、元々構造を意識してデザインデータを作成していたデザイナーは、比較的スムーズに移行ができ「とても楽になった」と感じていたようです。AIが表面上のデザイン情報だけでなく、操作したときの動きも理解してくれるので、プロトタイプとしては問題ないレベルで動作するものができあがるようになりました。
―― デザイナー側の負荷はどのように変化しましたか？
古川：心理的な 負荷が減っているとは言い切れません。これまでは人同士の暗黙知で進めていた部分も明確に定義しなくてはいけないケースが増えるからです。デザイナーのタイプによって捉え方も違います。例えば、定義しきれないところはエンジニアとのコミュニケーションで解消する方が楽だと感じるデザイナーもいれば、自分で完璧に設計してからエンジニアに渡す方が楽だと考える人もいるからです。
ただ確実に言えることは、成果物の品質は上がっています。実装後の手戻りが大きく減り、自分が想定したものがブラウザでレンダリングされる前に形になります。また、品質の向上によってPdMやステークホルダーとの合意形成のスピードも上がりました。
―― エンジニア側の業務はどのように変化しましたか？
高野：新規ページをコーディングする際の精度はかなり高まっているため、エンジニア側の工数は減っています。一方で、既存ページの一部を修正してコーディングする場合はピンポイントでAIに修正させるのがなかなか難しい状況です。ある程度の効率化は見られますが、新規ページほどの工数インパクトは得られていないため、今後の課題となっています。
古川：この課題については別グループで取り組みを進めています。UIを構築する上で必要な情報をコンテキストとしてフォルダにまとめて、AIにインデックスだけを把握させた上で指示をするという方法です。
AIが「中間言語」になる。これからのデザイナーに求められるもの
―― 今後、デザイナーとエンジニアの関係性や働き方はどのように変わっていくと思いますか？
高野：今後はAIを「中間言語」にしたコミュニケーションへと変わっていくと考えています。これまで、エンジニアは「こうなっていた方が実装しやすいので、デザインを調整してほしい」とデザイナーに依頼していましたが、「AIがうまくコードを出力できないから、デザインデータをいじってくれないか」というような伝え方が増えてくると思っています。
古川：AIを活用することで実装は非常に速くなりますが、同時に技術的負債が増えるスピードも早くなると言えます。そのため、これまで以上に意思決定を丁寧に行う必要があり、「なぜ独自のカスタマイズが必要なのか」というデザイナー側の説明責任がより強く求められます。
何を標準ルールとして、どの部分を独自のものとして尖らせるか。その選択はUIのためなのか、ブランドの世界観を見せるためなのか。こうした意図をデザイナーがしっかりと言語化し、説明できる必要があると感じます。
―― AI活用や業務の自動化が進む中で、「ここはあえてAIに任せず人がやるべき」と残している領域はありますか？
高野：実装の観点では、基本となるコーディングのガイドラインやルール決めは人が担っています。また、すべてをAIに任せてリリースすることはなく、最終的なレビューは必ず人が目視で確認するプロセスを設けています。
古川：デザイン面については、AIに指示すると何でもスピーディーに作れてしまうからこそ、デザイナーは「なぜこのデザインにするのか」「操作したときにどう感じてもらうか」といった情緒的な体験設計、ユーザーのどんな問題を解決し、どのような感情を体験してほしいのかに一層向き合う必要があると感じます。
―― AIの活用で働き方が大きく変わる中で、お二方はエンジニア、デザイナーとして何を大事にしていきたいですか。
高野：エンジニアとして、コードを書いているのが楽しいという感覚が強いので、AIにすべてを任せるのではなく、エンジニアとして楽しむ余地を残しながら上手にAIを使っていきたいです。
古川：私は特定の業務領域に捉われない「広義のデザイナー」であることを大事にしたいと思います。デザイナ ーとは、本質的には「課題を解決する人」です。今後、圧倒的な標準化によってWeb画面をデザインする専門職が不要になったとしても、必ずまた別の問題が発生するはずです。私は自分の提案によって課題が解決して、人が驚いて喜ぶ瞬間を見ることが好きなので、自分の喜びの根源を今後も大切にしていきたいですね。
東京生まれ。新卒でNECシステム建設（現・NECネッツエスアイ）で法人営業を経験後、転職サイトtypeの求人広告制作、マーケティングを経験。株式会社ウェブライダーでオウンドメディア企画、ライティングを経験。2017年7月より独立し、経営者や管理職のインタビュー、書籍のライティングなどを行う。
https://note.com/kubokana/n/n0d153fa434f7
