Headless ERPのTailorが取り組むフロントエンド第2弾 Design systemとは
こんにちは、Tailor Japan COOの@yukiです。Tailorはエンタープライズ向けのローコードなバックエンドシステム開発基盤を提供していますが、実は、フロントエンドの開発にも積極的に取り組んでいます。
第一弾として、Seiyaから、全体像に関する記事がでているので、こちらの記事を読む前に、よろしかったら、そちらもご覧ください。
今回は、TailorのFrontend Foundationの一つであるDesign systemの開発を担当している @tamura @masato.miuraの対談形式で、TailorのDsign systemに関する取り組みや開発経緯、今後の展望についてご紹介できればと思います！
▼公開中のTailor Design System
この記事に登場する方
@tamura ：Designer
DeNAにて、健康保険組合向けサービスのデザインを推進後、ベンチャー企業にて、新規事業のデザイン責任者を歴任。Tailorでは、主にUXデザイン・開発に従事。
@masato.muira：Design Engineer
USの複数スタートアップで、エンジニアリングとプロダクトデザインの領域をシード期からIPOまで各ステージに貢献。前職Podiumでテック・リードを経験後、Tailorにジョイン。
@yuki：Tailor Japan COO
IT企業にてプロダクトマネージャーとして、不正検知・物流・カスタマーサービスシステム等の開発やグループ会社のDXプロジェクト推進に従事。2023年1月に入社し、2024年5月より現職。
ーまずはテイラーのDesign Systemはどのようなものなのか教えてください
@tamura：まずデザイン的特徴からお話しすると、様々なERPアプリケーションのフロントエンドを構築できるよう、ボタンやアコーディオンなど基礎的かつ汎用的なコンポーネントを網羅しています。特に、ERPでよく扱われるDatagridに関しては、表のエクスポートや、列の入れ替えなど様々なユースケースに対応した操作性を保持しているのが特徴です。また、UIのスタイリングは、システム内部だけで完結することも可能で、その自由度が高いのも特徴です。
@masato.miura：私の方からは、技術的な特徴を。大きく特徴は２つで、「Headlessコンポーネント」と「ビルドタイム生成」です。「Headlessコンポーネント」に関しては、ロジックを分離できるので、より柔軟性を持たせることができます。「ビルドタイム生成」に関しては、前職でも似たようなことをやっていた経験が活きています。その際は、ランタイムで生成されるようなCSS-in-JSを使っていました。ERPのような大規模アプリでは、ストレスのない応答性などが重要になってきます。そこで、それに耐えうる技術がないかなということを探していたときに、ちょうど、Ark UIとPanda CSSが盛り上がって来たので、チャレンジではありますが、それらをTailorのDesign Systemに採用しました。
ーモダンな技術で、この段階で採用するのはチャレンジングな決定だと思うのですが、その後、しばらく運用してみてどうですか
@masato.miura：当初の期待値にはミートしていて、その点に関しては満足しています。一方で、新しい技術ではあるので、利用者が学習コストを払う必要はありますが、社内のユースケースにおいては、勉強会を開くなどしてカバーしています。
ー特徴としては、デザイン面・技術面からERPのフロントエンド開発を意識したものとなっていて、当初の期待値を満たすものが出来上がってきているということですね。そもそもどんな経緯で開発をスタートすることになったんですか
@tamura：Tailor PlatformはERPを素早く開発できるヘッドレスなバックエンドアプリケーションを構築できる基盤であり、フロントエンドの技術選定は完全に自由です。しかし、Tailorとしてはフロントエンドも含めてより良いERPアプリケーションの開発体験を提供しようと考えています。TailorDBの定義からフロントエンドで扱う画面、フォーム、バリデーションルールを自動生成するというコードジェネレーターへの取り組みなど、様々なことをやっているのですが、Tailor Platformのユーザーやその他のERP開発者に向けても、ERPアプリケーション向けの真に使いやすいUIコンポーネントが求められているなと感じていまた。それがきっかけです。
@masato.miura：まさにtamuraさんのおっしゃるとおりですね。そこに補足すると、ERPアプリケーションは、デザインを重視されてこなかった経緯があると思っています。よりよいデザインをERPアプリケーションで提供したいという思いと、開発者体験を向上させたいという思いがマッチして、この取り組みにつながっていると思います。
ー立ち上げの際は、社内でどのような会話があったのでしょうか。
@masato.miura：特に大きなハレーションはなかったですね。今後Professional Serviceでの社内開発の拡大や、Tailor Platformのユーザーに向けた価値提供を考えたときに、メンバーの思いは一致していたので、比較的スムーズに立ち上がりました。
ー日頃からチームで思いや課題感も共有されていたのですね。今は、Design Systemはどのような利用にされているんですか。
@tamura：すでに、ライブラリとして公開されているので、外部から利用いただくことも可能です。現在、主に、日本地域で展開しているProfessional Servicesで利用しています。これは、クライアントのERPをバックエンドはTailor Platformを使用し、フロントエンドは要望に応じて、フルスクラッチで開発するサービスです。その開発過程で、様々なERPを同時多発的に開発しても、一貫した高水準なUXを提供できるよう、システムを跨いだ再利用可能なUIコンポーネントや、共通言語としてのスタイルガイドを活用しています。
@masato.miura：日本のProfessional Services以外でも、Tailor Platformの開発者向けUIであるConsoleにも利用しています。
ーすでに社内での活用は進んでいるんですね。開発はどのように進んでいるんですか。
@masato.miura：最初に基礎的なコンポーネントを作っており、すでに各社内プロジェクトで導入が進んでいます。現在は、社内の各プロジェクトのフィードバックをもとに、足りないコンポーネントの追加や使い勝手の修正など、ユースケースベースで進化をさせていっています。別のnoteでseiyaさんがご紹介いただいたようなチーム体制で、メンバーは4名程度で開発をしています。Tailor PlatformのDeveloper CommunityがDiscordにもあり、そちらでも、社外からのフィードバックを集めています。
ーまだまだ進化しているんですね。どういったところが、TailorでDesign Systemを開発する面白さだと感じていますか
@masato.miura：面白さというか魅力という話なんですが、開発者目線だと、このDesign Systemがあることで、どれくらい開発が簡単になるのかというのは重要な指標だと思っています。社内でこの開発を行い、社内・社外からフィードバックを集め、ERP向けのデザインシステムを関係者全員で進化させていくことで、ERPの開発者に還元されることは、非常に大きな魅力だと思っています。
@tamura：miuraさんのおっしゃっていることと近しいのですが、自分たちが開発者であり、自分たちがユーザーであるというプロダクトを作れているのは、非常に楽しいです。また、私は、Professional Serviceでエンドユーザーに近い立場で仕事をしていて、お客様からこういった機能がほしい、こういうデザインにしたいなどのご意見をたくさん頂戴します。基盤を作り込むことで、既存のお客様だけでなく、将来のお客様に対して複利的に価値を還元していけると信じているので、そういった観点でも面白さを感じています。
ー今後、どのように進化させていくか今の考えはありますか
@masato.miura：それでは、僕の方からお話をさせていただきます。デザインシステムってどうしてもその内部向けになりがちだと思うんです。自社のコンポーネントを共通化して自社の開発に利用するっていうのが、基本的なユースケースだと思うんですけど、Tailorの場合、外部利用も前提にしているんですよね。外部でのユースケースが増えてくることが、さらにDesign Systemの発展につながってくると思う。ERPのアプリケーションを作るのはやっぱり難しいですよね。その中で、Tailor Platfromというローコードなバックエンドと、Design SystemなどのFrontend Libraryを組み合わせて、例えば、自動生成でアプリケーションがどんどんできていく世界は非常に魅力的だと思います。そこにDesign Systemは貢献していきたいですね。
@tamura：ERP向けのDesign Systemとしてデファクトスタンダードになれれば良いなと思いますね。もちろんバックエンドにはTailor Platformを使ってほしいですが、フロントエンド部分だけでも、Tailor Design Systemが使われる世界も目指していきたいです。
ーまだまだ大きな夢の途中ですね！そろそろお時間です。お二人、本日はありがとうございました。
@masato.miura：ありがとうございました！
@tamura：ありがとうございました！一緒に働く仲間も募集中なので、ご興味あれば、採用ページから！
テイラーでは、エンジニア、デザイナー、プロダクトマネージャー、事業開発、コーポレート系などすべてのポジションで採用を行っております。転職意向のある方は採用チームへのコンタクトを、情報だけフォローしておきたいという方はTwitter、Podcast、Noteのフォローをよろしくお願いいたします。
■ 技術スタック
言語、ライブラリー：TypeScript, React, apollojs, Go, gqlgen,Gorm, GraphQL, gRPC
インフラ：Google Cloud Platform, Amazon Web Service
データベース：PostgreSQL(Cloud SQL/RDS, AlloyDB), BigQuery, MongoDB
オーケストレーション：Cloud Run
CI：GitHub Actions
コード管理：GitHub
ミドルウェア：Cloud Pub/Sub, Cloud Scheduler, Cloud Functions, Cloud Tasks, AWS Lambda, Google Identity Platform
監視：Datadog
環境構築関連：Docker, Docker Compose, Terraform
認証: Auth0