ビューフェスジャパン2026
Vue Fes Japan 2026のメインビジュアル。VueをイメージしたVのシルエットと、日の丸をイメージした丸のシルエットが横に並んでいる。色は深い抹茶のような色をしており、丸のシルエットには金色の墨流し模様が描かれている。
大手町プレイス ホール &カンファレンス

Speaker

ウェルネス×hacomonoトラック
11:05 - 11:15
山口 祐司

契約で守るコンパウンドプロダクトのデザインシステム

複数ドメインを跨ぐコンパウンドプロダクトでは、コンポーネントを揃えても、トークンの使い方と部品の役割がいつの間にかばらついてしまう。

ドキュメントに規約を書いてレビューで直す運用にしても、コードが増えると対応が追いつかなくなっていき、コンポーネントのカタログでは、そのばらつきを検査することができない。

そこで我々はデザインシステムの本体をスキーマによる契約にし、Schema Driven UI によって、同じスキーマから同じフロントエンドが再現できるようにしています。

トークン以外の値は型検査が落とし、レイヤーをまたぐ依存は依存検査が落とす。人間のレビューは、機械が判定できない判断に残す。契約によってフロントエンドの実装を守る話をします。

  • Dress Code株式会社
  • プロダクトエンジニア

山口 祐司

  • Dress Code株式会社
  • プロダクトエンジニア

山口 祐司

契約で守るコンパウンドプロダクトのデザインシステム

複数ドメインを跨ぐコンパウンドプロダクトでは、コンポーネントを揃えても、トークンの使い方と部品の役割がいつの間にかばらついてしまう。

ドキュメントに規約を書いてレビューで直す運用にしても、コードが増えると対応が追いつかなくなっていき、コンポーネントのカタログでは、そのばらつきを検査することができない。

そこで我々はデザインシステムの本体をスキーマによる契約にし、Schema Driven UI によって、同じスキーマから同じフロントエンドが再現できるようにしています。

トークン以外の値は型検査が落とし、レイヤーをまたぐ依存は依存検査が落とす。人間のレビューは、機械が判定できない判断に残す。契約によってフロントエンドの実装を守る話をします。