私たちはこれを「デザイントークン化」と呼んでいます。それが何であるか、なぜ実施したか、そしてPendoを基盤に構築するチームにとって何を意味するかをご説明します。

「まあ十分」なスタイリングの問題点

デザインシステムは、コードベースと同じように技術的負債を積み重ねます — 静かに、徐々に、そして一気に。

時間の経過とともに、スタイリングの決定が個別に行われるようになります。ここにハードコードされた16進数の値。そこに一度きりの角丸。サーフェス間でわずかにずれていくタイポグラフィ。その瞬間には壊滅的には感じられません。しかし、数百のコンポーネントと数千の決定を持つプロダクト全体に積み重なると、現実的な問題となります。修正にコストがかかる不整合と、将来のデザイン変更のたびに考古学的な調査が必要になるコードベースです。

私たち自身のプロダクトでもこれを目の当たりにしました。色を更新したいとき、数十のファイルを修正しなければなりませんでした。デザイナーが仕様を引き渡すと、エンジニアはそれを直接実装するのではなく解釈しなければなりませんでした。そして、AIを前面に押し出したプロダクト開発を加速させるにつれ、このギャップはさらに広がるだけだとわかっていました。

そこで、基盤を修正しました。

私たちが構築したもの：デザインとコードの間のセマンティックレイヤー

この取り組みの核心は、一元化されたトークンシステムです。プロダクト内のすべてのビジュアル上の決定 — 色、タイポグラフィ、角丸、スペーシング — が、Figmaから直接取得され、デザインシステムライブラリを通じて解析された、意味的に命名されたトークンとして定義されるようになりました。

「意味的に命名された」というのが重要なフレーズです。数十のコンポーネントファイルに散在する#1A1A1Aの代わりに、color.action.primaryのようなトークンが使われます。ハードコードされたピクセル値の代わりに、スペーシングスケールがあります。曖昧な一度きりの値の代わりに、デザインとエンジニアリングの両方が理解できる共通の語彙があります。

シンプルに聞こえます。しかし実装はそうではありませんでした。チームはPendoのコードベース全体を — コンポーネントごと、サーフェスごとに — ハードコードされた値をトークンに置き換えながら精査しました。Jake MinorとDarshana Saravananがこの取り組みを主導し、Fluxチーム全体が、基盤を本当に支えるための地道で地味な作業に取り組みました。
フロントエンドプラットフォームチームを率いるCourtney Kyleが、新しいセマンティックトークンシステムがデザインの意図を製品インフラに直接エンコードする方法を説明します。


製品における変更点

ユーザーにとって最も目に見える変更点は次のとおりです。

洗練されたニュートラルパレット。 全体的に明るく温かみのあるニュートラルカラー — ボーダーやラインにはより明るいグレー、ページ背景はホワイト。すべての画面でコントラストと可読性を向上させることを目的としています。

プライマリカラーとインタラクティブカラーの更新。 プライマリアクションには、ブランドの主要な色相の代わりにほぼ黒に近い色を使用するようになりました。これにより、色をデータ、状態、AIサーフェスなど意味のある用途に活用できるようになり、UI全体に常に存在するものではなくなります。

新しいデータビジュアライゼーションパレット。 暗くくすんだトーンから、柔らかく明るい色へと移行しました。ブランドに合わせたピンクとオレンジを基調とし、データが必要とする箇所にはコントラストアクセントを加えています。よりクリーンで、よりわかりやすくなりました。

これらの変更はいずれも機能には影響しません。ワークフローはこれまでと同じです。しかし、Pendoを使用する体験は、その背後にある製品の洗練さを反映するようになりました。

見た目だけにとどまらない、この取り組みの重要性

ここからは、プロダクトチームにぜひ注目していただきたい部分です。これは、何を使って構築するかではなく、どのように構築するかに直接関わる話だからです。

以前は数週間かかっていたデザイン変更が、今では数時間で完了します。 ビジュアル層全体がトークン化されていれば、カラーシステムの更新は一か所を変えるだけで済みます。ビジュアルの反復をより速く出荷し、フィードバックにより迅速に対応し、新しいサーフェスを追加しながらも（そして私たちは多くの新しいサーフェスを追加しています）、プロダクト全体のビジュアル一貫性を保つことができます。

AIを活用した開発が劇的に向上します。 これは本当のことです。Cursor、Lovable、Claudeといったツールは、明確なトークンシステムがあることでより優れたUIを生成します。わずかにずれたスタイルを個別に生成するのではなく、デフォルトでブランドに沿ったコンポーネントを生成するようになります。自社のプロダクト開発でAIコーディングツールを使用しているなら、構造化されたデザインシステムは最も高いレバレッジをもたらす投資の一つです。

デザインとエンジニアリングの引き継ぎが実際に機能します。 セマンティックな命名により、共通の文脈が生まれます。デザイナーが color.feedback.error と言い、エンジニアが color.feedback.error を実装するとき、両者は同じ情報源から作業しています。解釈の余地はなく、レビューでの予期せぬ問題もありません。

すべてを可能にする、目立たない作業

デザインシステムの作業は、うまくいっているときは目に見えません。優れたトークンシステムは気づかれないものです。気づくのは、見た目が洗練されていて、素早く反応し、ビジュアルの不一致で驚かせることのないプロダクトです。

それが目標です。そしてこの目標はスケールします。Pendoだけでなく、品質を犠牲にせずに速く構築する方法を真剣に考えているすべてのプロダクトチームにとっても。

今、その基盤が整いました。その上に構築するすべてのものが、より良くなるでしょう。