AIを活用してデザインシステムの浸透を促進するDecagonの取り組み

カスタマーサポートは、AIによって次に大きく変革される業界のひとつです。Decagonは、その変革を実現するプラットフォームを構築しています。創業からわずか3年で、同社のAIエージェントは音声、チャット、メールに対応し、何十年にもわたってカスタマーサポートの当たり前だったチケット対応や長い待ち時間を置き換えています。こうした取り組みにより、DecagonはCNBCの「Disruptor 50」に選出されました。しかし、同社をそこへ導いたのは、何を作っているかだけではありません。どのように作っているかが、その理由です。

品質を保ちながらスケールできるデザインシステムを構築

DecagonのようなAIネイティブな企業では、デザインからコードへのサイクルは非常に高速ですが、その一方で簡単に整合性が崩れてしまう可能性があります。信頼性の高いアウトプットを生み出すには、コーディングエージェントに正確な入力を与えることが重要です。しかし、デザインシステムがなければ、すべてのコンポーネントが個々の判断に委ねられることになり、そのやり方ではスケールしません。プロダクトデザイナーのJennifer XuがDecagonに入社した当時、デザインシステムはまだ存在していませんでした。あるのは成長を続けるプロダクトと、デザインシステムの必要性を強く感じるほどのスピードで開発を進めるチームだけでした。プラットフォーム全体で一貫性が欠けていたことで、エンタープライズ顧客に求められる洗練された体験を提供することが難しくなっていました。また、デザインと開発の間で何度も修正を重ねる必要があり、多くの時間と労力が費やされていました。「Deco」と名付けられたデザインシステムを構築するにあたり、デザイナーとエンジニアは最初の段階から密接に連携して取り組みました。「最初から、さまざまなエッジケースや、コード上ですでに存在している要素を考慮しながら設計を進めることができました」とJenniferは話します。その結果、本来であれば後回しにされがちで、あとから見直すと大きなコストがかかるような課題にも、早い段階で向き合うことができました。たとえば、「フォーカス時にはどう表示されるのか」「各コンポーネントには無効・読み取り専用・エラー・警告といったどの状態が必要なのか」「プレースホルダーは表示するべきか」といった点です。

その結果、Figma上に組織全体で利用するライブラリが構築され、現在では何百ものコンポーネント、スタイル、変数が含まれています。複数のチームにまたがるプラットフォーム全体の大半のユースケースをカバーしています。Figmaのライブラリアナリティクスによると、このライブラリは30日間で数万回挿入されており、多くのメンバーに活用されていることがわかります。「ライブラリがしっかり整備されたことで、スタイルや実装について議論する必要がなくなりました」とJenniferは話します。「エンジニアは、どのボタンやテーブルを使うべきかを明確に把握できます。また、共通の言葉でコミュニケーションできるようになったことも大きなメリットです。デザイナーである私も、エンジニアとほぼ同じ基本要素を基準に考えられるので、プロダクトを作るときやユーザーフローを検討するときも、コミュニケーションがずっとスムーズになりました。」

Decoは組織全体に公開されており、デザイナーは新しい画面をゼロから作るのではなく、既存のコンポーネントを組み合わせて効率的に作成できます。「開発者にとっても、デザイン全体の方針に沿った実装を進めやすくなりました」とJenniferは話します。「私たちは迅速にプロダクトをリリースしたいと考えていますが、その一方で、すべての体験に一貫性を持たせることも重要です。デザインシステムは、そのための唯一の信頼できる情報源として非常に優れた役割を果たしています。」

デザインとコードのループをつなぐ

コーディングエージェントは、人間の開発者のように仕様を解釈するわけではありません。与えられた情報だけをもとに動作するため、入力に一貫性がなければ、そのままアウトプットにも反映されてしまいます。以前のDecagonでは、デザインから実装への引き継ぎは、よくあるやり取りの繰り返しでした。デザイナーが仕様を共有し、開発者がそれを解釈して実装し、レビューで認識のずれが見つかり、再び修正を行う──そんなサイクルです。その状況を変えたのが、Figma MCPサーバーでした。

Decagonのエンジニアリングチームは、デザインシステムのコンポーネントをStorybookへ移行し、コーディングエージェントがデザインを実装する際に、正確なコンポーネントを使用できるようスキルを構築しました。さらに、デザイナーが新しいコンポーネントを追加できるスキルも用意されており、Figmaとコードの内容を常に同期した状態に保てます。「私たちのAIエージェントではFigma MCPを有効にしているため、仕様、コード、デザインが一つのループでつながり、何度も行き来しながら作業する必要がありません」とJenniferは話します。

Figma MCPを介してDecoに接続したことで、イテレーションのスピードが大幅に向上しました。現在では、コーディングエージェントがFigmaから直接情報を読み取り、高い再現度の実装のたたき台を作成できます。「MCPでは、Figmaのリンクをコピーしてコーディングエージェントに貼り付けるだけで、デザインのコンテキストを取得するスキルを活用するだけでなく、それを私たちのデザインシステムのコンポーネントにもマッピングしてくれます」とJenniferは話します。「そのおかげで、細かな修正を何度も繰り返さなくても、デザインに非常に近い高精度なものを作成できるようになりました。」

顧客へのこだわりを形にする

Decagonのプロダクトロードマップの約70％は、顧客からの要望に基づいています。これは単なる企業理念ではなく、チームのプロダクト開発そのものを支える中核的な考え方です。「お客様のチームと一緒にロードマップの検討セッションを行い、リリースする機能が本当にニーズに応えられているかを確認しています」と、DecagonのプロダクトディレクターであるBihan Jiangは話します。そのプロセスでは、Figmaでモックアップや動作するプロトタイプを提示できることが重要な役割を果たしています。「Figma Makeのようなツールや、私たちが利用しているさまざまなシステムとの連携機能によって、開発できるプロダクトの可能性をさらに広げることができています」と彼女は続けます。

要件を集めて完成したプロダクトを提示するのではなく、現在では10種類の異なるプロトタイプを作成し、それぞれを10人の異なる顧客に見てもらうことができるようになりました。Bihanは次のように話します。「その結果、より優れたプロダクトを、はるかに短い時間で開発できるようになりました。」

インタラクティブなダッシュボード、各種メトリクス、そしてAIによるインサイトは、Decagonが顧客に提供する中核的な機能です。これらにより、顧客満足度や、複数のチャネルにわたる会話の感情分析など、定量データと定性データの両方を把握できます。Decagonのあるプロダクトマネージャーは、Makeを使って新しいグラフのプロトタイプを作成したり、顧客から寄せられる要望に応じて異なるデータセットを表示できるよう、ページを再設計したりしています。「プロダクトマネージャーは『このページのスタイルで作ってほしい』と指示してFigmaのスクリーンショットを貼り付けるだけで、そのツールやグラフをプラットフォーム全体のデザインコンテキストに沿って検討できるようになります」とJenniferは話します。「その後、エンジニアリングチームや顧客対応チームと相談し、その変更が本当に有用なのかを確認できます。多くのエンジニアリングやデザインのリソースを投入する前に、価値があるかどうかを判断できるのです。」

チームがインタラクティブなチャートを、よりシンプルで使いやすいものへと刷新しようとした際にも、同じ考え方が活用されました。プロダクトマネージャーは、元のチャートをMakeに入力し、実現したい変更内容を説明したうえで、それを開発者に共有しました。Jenniferは次のように話します。「デザイナーに意図を伝え、デザイナーがモックアップを作成し、その後エンジニアが開発するというプロセスに比べると、はるかにシンプルでした。開発にかかる時間も短縮できました。」

高精度なプロトタイプにより、チームはアイデアをドキュメントからワイヤーフレームへ変換するのではなく、最初からビジュアルな形で検討を進められるようになりました。「デザイナーとして、私は常に視覚的に考えています。そして、分析機能に取り組む場合、課題そのものがビジュアルに関わるものです」とJenniferは話します。「私はそれをドキュメントとしてではなく、ひとつの画として見ています。そのため、最終的なプロダクトと同じ表現形式で、最初の段階から考え始められることは非常に有用です。」具体的な形に落とし込み、早い段階で顧客の目に触れさせるという姿勢は、DecagonのDNAの一部になっています。「ブレインストーミングの一環としてFigmaを活用することは、私たちのカルチャーの大きな部分を占めています。これにより、以前よりも迅速かつ高い精度でコラボレーションできるようになりました。」

Decagonは、提供するプラットフォームだけでなく、その開発プロセスそのものにもAIを据えています。デザインシステムは、チームが拡大しても、一貫した品質とクラフトを維持します。MCPは、デザインとコードの整合性を保ち、実装時の認識のずれを防ぎます。そしてFigma Makeは、試してみる価値のあるアイデアを持つすべての人が、ビジュアルを使って形にできる環境を提供します。「デザインの新しい時代は本当にワクワクします」とJenniferは話します。「私たちはその最前線にいると思います。高品質なものを、非常に素早くリリースできるようになりました。」Decagonにとって、品質を犠牲にすることなくスピードを高められることこそが、本当の競争優位性なのです。