TDesign は、Tencent Design Cloud の機能の重要な部分であるオープンソースとして正式にリリースされました。

インターネットの急速な発展に伴い、製品の規模と機能は増大し、開発シナリオはより複雑になり、従来の設計および開発モデルではビジネスの急速な拡大をサポートするのに十分ではなくなりました。インターネット企業であれ、従来のソフトウェア企業であれ、誰もがますます複雑化するソフトウェア開発のニーズを満たすために研究開発の効率性を向上させる方法を模索しており、より効率的に、より高品質で、より信頼性が高く、より持続的に、より良いビジネス価値を提供することを期待しています。

このような背景から、テンセントは、企業の設計と研究開発の効率を向上させ、効率的なコラボレーションを実現することを目的として、Tencent Design Cloudを立ち上げました。それだけでなく、テンセントは最近、エンタープライズレベルのデザインシステム「TDesign」を正式にオープンソース化し、テンセント独自の機能をさらに多くの企業に公開すると発表しました。

テンセントデザインクラウド：テンセントで生まれ、テンセントに集まる

テンセントの大規模なBからCへのビジネス実践において、デザインチームは、素材リソース、デザインコラボレーション、画像や動画素材の制作と編集、データの視覚化、ローコード構築など、それぞれのビジネスに役立つ制作プロセスのツールやプラットフォームを多数開発してきました。

930年の改革以来、クラウドに関する自己研究とオープンソースの連携はテンセントにとって重要な技術方向となっている。クラウド サービスをリソース管理から完全な R&D システムに変換し、コスト削減と効率向上を実現する方法は、テンセントが考えてきた課題です。このような状況において、テンセントの企業レベルの合同チームは、これらの機能とコンテンツをデザイン資産、管理ツール、さまざまな製品機能に洗練し、企業レベルのデザインツールプラットフォームであるテンセントデザインクラウドに統合しました。テンセントデザインクラウドは、生産、デザイン、研究ワークフローにおける共通の問題点の解決に重点を置き、効率的なツール、本物の材料リソースを提供し、コスト削減と効率向上の問題を解決し、効率的なデザインと容易なコラボレーションという最終目標の達成を目指しています。

Tencent Design Cloudの製品マトリックスには、アンケート分析用のTencent Questionnaire、インテリジェントデザイン制作プラットフォームのZhihui Design、長編・短編動画コンテンツ制作・コラボレーションプラットフォームのYunchuang Multimedia Engine、ワンストップデザインコラボレーションプラットフォームのCoDesign、チームコラボレーションプラットフォームのProWork、ローコード開発プラットフォームのWeDa Low-Code、ソフトウェアR＆D管理コラボレーションプラットフォームのCODING、エンタープライズレベルの製品設計システムであるTDesign、および2つの主要な著作権素材ライブラリである電車を通じた本物の画像ライブラリと電車を通じた本物の音楽ライブラリが含まれます。これらのライブラリは、著作権素材、ユーザー調査、インテリジェントデザイン、デザインコラボレーション、迅速な研究開発などの機能を企業顧客に提供しており、これらすべてのデザイン機能は Tencent 内の Oteam チームから提供されています。

テンセントデザインクラウドの製品は、QQミュージック、テンセントクラウド、テンセントカンファレンス、エンタープライズWeChatなどの大規模な制作、デザイン、研究チームにサービスを提供しており、デジタル広東、富図証券、モグジエなどの大企業にもサービスを提供していることが分かっています。さらに、Tencent Design Cloud には、成熟した SaaS 製品が多数統合されているだけでなく、クラウド上には配置されていないものの、Tencent 内でプロジェクトの効率を向上させるために使用されてきたツールもいくつか含まれています。これらの製品は商品化の段階が異なりますが、いずれも誕生した分野で役割を果たしています。

したがって、 「テンセントで生まれ、テンセントに集まる」は、テンセントデザインクラウドの誕生プロセスを最もよく要約したものです。

Tencent Design Cloud チームによると、プロジェクトが進み製品が成熟するにつれて、将来的にはさらに多くの蓄積された機能が解放される予定です。例えば、デザイナーの関心が高いデザイン草稿校正の分野では、データ可視化やインテリジェント制作ツールなどのツールを企業に提供し、制作効率の向上に努めていきます。

TDesignが誕生

実際、製品開発プロセスでは、チーム参加者の悩みはさまざまです。たとえば、設計者はコンポーネント ライブラリの使用仕様、適用可能なシナリオ、拡張計画などを理解したいと考えています。製品マネージャーは、コンポーネントがビジネスシナリオなどを満たすことができるかどうかを確認したいと考えています。開発者は、コンポーネントのインターフェース、メソッド、プロパティなどをより重視しています。上記の問題点を一つずつ解決することは現実的かつ複雑な問題となっているため、多くの企業はコンポーネントライブラリを使用して設計効率と生産・研究効率を向上させることを選択しています。

Tencent も例外ではなく、ほとんどの部門が独自のコンポーネント ライブラリ製品を持っています。

しかし、テンセントのような企業にとって、このアプローチは多くの問題を露呈しました。まず、各ビジネス チームがコンポーネント ライブラリを維持するために人材の一部を割り当てる必要があるため、車輪の再発明には重複した人材が必要になります。第二に、人材投資のレベルが異なるため、これらのコンポーネントライブラリの製品品質とメンテナンスは不均一であり、一般的なインタラクション方法の経験も一貫していません。さらに、これらのコンポーネントライブラリにはそれぞれ長所と短所があるため、テンセントは技術の選択において繰り返し困難に直面してきました。

2019年までに、テンセント社内で車輪の再発明の状況がますます深刻になり、同社にはこれらの車輪を統合するという強い要請があったことが分かっています。この状況に対処するため、テンセントはオープンソース協力委員会を設立しました。テンセントのデザイナーたちは、「テンセントの社内チームが個別にデザインシステムを維持していること、そして各デザインシステムの品質にばらつきがあるという問題を、オープンソースのコラボレーションによって解決できるのではないか？」と考えました。

そこで2020年2月、数回のリモート会議を通じて、TDesignの製品目標と技術ルートが決定され、全​​社員の参加によりTDesignという名前が投票で決定されました。 「テンセントシステムのデザイン言語を完全に表現しながらも、概念的な拡張の余地を残しており、他のモジュールコンポーネントを後で追加することもできます」とTDesignチームは紹介した。

TDesignは当初から社内業務向けに設計されました

TDesign は、Tencent 内のデザイナーと R&D 担当者の活用を容易にするために設計されました。したがって、TDesign はさまざまなフレームワークとデザイン リソースをサポートする必要があり、また、デザイン値とデザイン スタイル ガイドラインの完全なセットも備えている必要があります。これにより、TDesign は他のコンポーネント ライブラリとは異なるいくつかの特性も持つようになります。要約すると、3 つの側面があります。

全体

業界のコンポーネント ライブラリは主に 1 つまたは 2 つのテクノロジ スタックをサポートしていますが、TDesign は Vue 2、Vue 3、React、モバイル Vue 3、WeChat アプレットの開発をサポートしています。同時に、Augular や Flutter などの人気のテクノロジー スタックも開発中です。

現在、TDesign のほとんどのコンポーネントは内部ベータ版のリリースが完了しており、今後パブリックベータ版と正式版が段階的にリリースされる予定です。

開発とデザインの効率的なコラボレーションを実現するために、TDesign には、カラー システム、テキスト システム、モーション デザイン、アイコン要素、レイアウト構造などの一連のデザイン コンポーネント リソースも含まれており、Axure、Sketch、Figma、Adobe Xd などの主要な製品デザイン ソフトウェアをカバーしています。TDesign は、通常のデザイン リソースに加えて、Sketch デザイン プラグインなどの補助的なデザイン ツールも提供し、Tencent Codesign、Instant Design、Pixso、Mokto など、市場でよく使用されるデザイン ツールで TDesign デザイン マテリアルを使用することもサポートしています。

一貫性

TDesign は、テンセントの長年にわたる社内設計経験をプロフェッショナルな設計ガイドに凝縮しました。同社が提供するユニバーサル デザイン ソリューションは、製品マネージャー、デザイナー、開発者などの役割が、エンタープライズ レベルの製品の設計と開発を効率的に完了し、デザイン言語とスタイルの一貫性を維持し、ユーザー エクスペリエンスの要件を満たすのに役立ちます。

TDesign は、TDesign のデザイン システム仕様に基づいて、コンポーネント ライブラリのデスクトップ バージョンとモバイル バージョンの両方をリリースし、複数のテクノロジ スタック実装バージョンを提供しています。一連の共同プロセスと補助ツールを通じて、各テクノロジー スタック コンポーネントの API と実装製品の一貫性が保証され、開発者の学習コストが大幅に削減されます。

使いやすさ

TDesign デザイン システムは、さまざまなビジネスやシナリオからデザインの経験を抽出し、使用のしきい値を下げるための一般的なデザイン ガイドラインを提供します。さまざまな企業製品のブランドカスタマイズのニーズに応えて、TDesign はユーザーがデザイン スタイルを拡張できるようサポートします。現在、デザイン スタイルは整理され、デザイン トークンにまとめられ、企業内でセマンティック デザイン仕様のセットが形成され、その後の統一的な管理と使用の拡張が容易になっています。

ドキュメントとAPI仕様の統一が主な技術的課題である

TDesign チームは、「以前、単一のコンポーネント ライブラリに取り組んでいたときは、難しくないと思っていましたが、TDesign に取り組んでみると、当初考えていたものとは違うことがわかりました。TDesign 自体は複数のフレームワークをサポートしており、将来的には複数の言語をサポートする予定であるため、一般的なコンポーネント ライブラリの構築で遭遇する問題は、TDesign システムでは何倍にも拡大されるでしょう」と認めています。

具体的には、共同作業のプロセスでは、ドキュメント仕様の統一と API 仕様の統一という 2 つの大きな課題に直面します。

まず、TDesign は 3 つ以上の技術フレームワークをサポートする必要があるため、フレームワークごとにドキュメントを書き直すことは不可能です。各フレームワークの共通部分を再利用できれば、サンプルコード部分のみを書き直すことで、問題の大部分を解決できます。

この目的のために、TDesign チームは、重複したドキュメント作成の問題に対処するための技術的ソリューションを開発しました。 TDesign によって出力されるアーキテクチャ ダイアグラムは、主にコンパイル層、レンダリング層、出力層に分かれています。コンパイル層は主に Markdown 形式を解析して一連の反復タスクを解決するために使用されます。レンダリング レイヤーは共通領域を処理するため、コンポーネント内のドキュメントを出力する必要はありません。出力層では共通部分を取り除き、各フレームワークの独立した部分を結合して、最終的に TDesign の公式 Web サイト全体を出力します。

第二に、各フレームワークには共通点と特徴があるため、長期的には、API ドキュメントの自動化だけでなく、API TS コードや API Props コードの自動化もサポートする必要があります。この目的のために、TDesign チームは、API 関連の情報全体をデータベースに入力し、それをインターフェイス言語パーサーを通じてさまざまなフレームワーク、ドキュメント、またはコードに解析する自動化システム プロセスを開発しました。

現在、TDesign は React、Vue、Mini Programs の 3 つのフレームワークで実装され、正常に実行されており、手動によるドキュメントのメンテナンスにかかるコストの高さの問題が解決されています。

社内オープンソース化から 2 年を経て、TDesign はどのようにして急速に成長したのでしょうか?

「プロジェクトの開始当初、チームは多くの回り道をしました。情報の伝達に多くの時間と労力を費やしました。また、テクノロジー スタック間でコンポーネント ライブラリを維持する複雑さを十分に理解していませんでした。各フレームワーク内の同じコンポーネントのドキュメントと API 実装は異なっていました。そのため、コンポーネント ライブラリのユーザー エクスペリエンスの一貫性のなさが TDesign チームを悩ませ、TDesign の開発を停滞させていました」と TDesign チームは InfoQ とのインタビューで述べています。

上記の問題を解決するために、TDesign は 2 回目の反復中にオープン ソース コミュニティのコラボレーション方法を学習し始めました。同社は、企業に馴染みのある即時のグループコミュニケーションを放棄し、よりオープンソースなスタイルによる非同期の問題ディスカッションを選択しました。より非同期的なディスカッション方法の助けを借りて、問題について深く議論して考えることができるため、期待される結論を導き出すことが容易になり、開発中にコンポーネントのパッケージ化とコード記述をより効率的に完了できるようになります。さらに、オープンソースコラボレーションのプロセスに CI/CD プロセスが導入され、手動参加率が低下し、情報プッシュの効率が向上しました。

TDesign チームは、「個人ユーザーであれ、チームユーザーであれ、私たちは公平性、正義、透明性の原則を遵守します。たとえば、日々議論される問題、解決策、計画は GitHub で公開されます」と述べています。

TDesign のコア コントリビューターの多くは、最初に個人プロジェクトからコンポーネント ライブラリを試し、次に最初のバグ問題を提出し、次に最初の機能 MR を提出し、最終的にコード レビューと計画策定に徐々に参加したと考えられます。 TDesign チームによる予備的な計算によると、プロジェクトへの中心的な貢献者の数は約 100 人です。

この「オープン ソース」スタイルのツールとコラボレーションにより、TDesign の研究開発効率が向上し、反復タスクの第 2 フェーズが予想以上に完了しました。過去 1 年間で、Tencent から参加する人が増えるにつれて、TDesign は 1,000 件を超える問題を解決し、5,000 件を超える CR を実施し、毎週新しいバージョンを反復するというリズムを維持しました。

最後に

TDesign チームの見解では、オープン ソース化を決定した当初の意図は非常に単純です。一方で、TDesign は 2 年間の社内オープンソース化を経て、0 から 1 の構築を実現しました。TDesign が蓄積してきた機能でコミュニティに価値を提供していきたいと考えています。一方で、コミュニティの力を活用して社外とのコミュニケーションやコラボレーションの範囲を拡大し、TDesign が 1 から N への飛躍を遂げることに貢献したいと考えています。

「オープンソースから成熟までには長い道のりがあることは重々承知しており、同じ志を持つ人々が TDesign と肩を並べて取り組み、共に進歩していくことを楽しみにしています。」

エンタープライズレベルのデザインシステムTDesignのオープンソースリリースにより、Tencent Design Cloudの統合された制作、デザイン、研究コラボレーションの機能が基本的に形になり、これはオープンソースデザインコラボレーションにとっても小さな前進です。今後、Design CloudはTencentの社内設計ソリューションを徐々にリリースし、インテリジェントな制作と開発の可視化機能を通じて、企業開発の敷居をさらに下げ、コラボレーションの効率を向上させます。

TDesign がオープンしました。Github アドレス: https://github.com/Tencent/tdesign

TDesign公式サイト: https://tdesign.tencent.com/?from=nini_1