kintoneのデザインシステムを作る「Mantleチーム」とは？（前編）#CybozuDesignPodcast

2022年10月12日 08:49

Cybozu Design Podcastではおたよりをお待ちしています！
番組の感想・メンバーへの質問・リクエストなどお送りください。
📮Cybozu Design Podcast おたよりフォーム

オープニング（00:00）

Tobi／皆さんこんにちは！デザイナーのTobiです。この番組はサイボウズデザイン＆リサーチグループのメンバーが日々の活動や取り組みを雑談形式で紹介するコンテンツです。デザイン・リサーチ・アクセシビリティを軸にサイボウズデザイン&リサーチグループの今をお届けしつつ、メンバーの人柄やチームの雰囲気をお伝えします。

Tobi／はい、今回はkintoneユーザー体験を最高にする活動をするチーム。社内ではMantleチームと言っていますけれども、2部構成の前編として、Mantleチームがどんなことをしているのかについて、メンバーのAmiちゃんとsakitoさんとお話して行きたいと思います。よろしくお願いします！では、まず簡単に自己紹介と普段どういったことをやっているのかをAmiちゃんから。

Ami／はい。kintone開発チームのAmiです。普段はMantleチームでデザインテクノロジストとスクラムマスターをやっています。はい、今日はよろしくお願いします。

Tobi／お願いします。では、続いてsakitoさんお願いします。

sakito／はい、sakitoです。普段はkinotneデザインシステム作ってるMantleチームのプロダクトオーナーをやっています。元々は、kintoneチームの前はフロントエンドエキスパートチームっていうフロントエンド専門だったんですけど、今はデザインとエンジニアの垣根を超えるっていう活動をしています。よろしくお願いします。

Mantleチームの概要ついて（01:34）

Tobi／お願いします。はい、では早速なんですけど、そもそもMantleチームっていうふうに僕たち今言ってしまってはいるんですけど、具体的にMantleチームってどういったことをやっていますか？

sakito／はい。Mantleチームは昨年の12月に立ち上がってもうすぐ1年になるチームなんですけど、元々はユーザー体験を最高にするチームだっていう長い名前だったんですけど、名前をkintoneチーム内とかで募集したとこ、ここのAmiちゃんの命名した名前がみんなの投票の中で1番になって、kintoneチームって宇宙系の話が多いんですよね。内部事情的な話でチームの名前がこうスペースシャトルとかに寄ってるんで、Mantleチームっていう地球っていう方向に向いた核の方で名前つけたらいいんじゃないかっていうので、Mantleチームっていう名前なんですけど、やってることとしては、デザインシステムを提供するっていうことなんですね。でも、デザインシステム提供するって、デザインシステムって幅広いですけど、もうちょっと落とし込んで僕たちは定義してて、2つあります。
1つはkintoneチームの人たちが主体的に品質の高いアプリケーションをすばやく開発できるようになることを目指すっていうのが1つと、もう1個が一貫性のあるユーザー体験やデザインの品質をユーザーに提供できることっていうふうにしてます。
このために今はいろいろ活動していて、フロントエンドの実装開発もやるし、デザインのフローを見直して調整もしますし、デザインシステムっていうフレームワークを通じて、よりシステマティックに仕組みを提供していきたい、kintone全体に広げたいっていうので活動しています。

チーム立ち上げ時の目標やチームづくりにおける意識について（03:19）

Tobi／そうですね、今Mantleチームが発足されてから、だいたい9ヶ月ぐらい経ったかなと思うんですけど、立ち上げの時に目標だったりとか、どういったことを意識してチームを作っていったかみたいなところってあったりしますか？

sakito／ちょっと自分が主導してやってたので、自分が喋るんですけども、最初の立ち上げは、チーム構成としてはアクセシビリティの得意なメンバー、QAが得意なメンバー、ここにいるAmiちゃんでデザインとフロントエンド両方ができればと。
あと、KintoneチームにいたんですよねAmiちゃんは?

Ami／はい。

sakito／それで、僕がフロントエンドが得意っていう、いろんな職種、いろんな方面に強い、あとデザイナーもいたんですよね。
それで、デザインシステムそもそも何みたいなところからスタートしたんですよ。あと、ユーザー体験を最高にするって何？みたいな。そこのバックグラウンド背景を整えるために最初の3ヶ月位はみんなでデザインシステムに関連する本読んだり、海外にあるデザインシステムの事例をみんなで見て、それについてkintoneだったらどうやってやっていったらいいんだろう？こういうエッセンスがkintoneに役に立つのかもしれないっていうことをすごく話しました。そこで目標もだんだんと決まってきて、よし、やっていくぞっていう感じになった。

Tobi／そうですね。僕はMantleが走り出して途中でジョインした形にはなるんですけど、すごく目標がしっかりしているなーっていう印象を最初に受けてました（笑）

sakito／良かった（笑）

誰がデザインシステムを提供されると嬉しいかについて（05:15）

Tobi／今、デザインシステムを作っていくんだっていうフェーズにあると思うんですけど、kintone今までなかったわけじゃないですか、デザインシステムが。作っていくにあたって誰がデザインシステムを提供されると嬉しいか、みたいな解像度持ってたりしますか？
これAmiちゃんにお答えしてもらいたい（笑）

Ami／（笑）
Kintoneで開発者として、kintoneチームに以前はいたんですけど、その経験から言うと、もうkintone開発の人全員が嬉しいんじゃないかなと思っていて、以前のデザインシステムのないkintoneチームでの開発だと、割と職能ごとに分かれて仕事をしているっていうのがあったんですけど、じゃあPMとバックログの検討しているときに、デザイナーがデザインプロトを作って、それがエンジニアのチームに渡ってきて、それでアクセシビリティチームにDOMの相談をちょっと依頼して、それで戻ってきたのをエンジニアが実装して、デザインプロトに合わせて実装したものをデザイン確認してくださいって、デザイナーに依頼して戻ってきてみたいな感じでやっていたんですけど、デザインシステムがあるとまずその中で全員が使う共通言語ができるからそれぞれコンテキストに合わせて呼び名が違ってたと思うんですけど、そういうところが揃ったりとか依頼ベースで時間をかけてコラボレーションしてみたいなことがもうちょっと減るのかなと思っていたりとか、あとはデザインシステムの中で、UIのコンポーネントライブラリーも提供しようとしているので、そもそもデザインシステム、コンポーネントライブラリー使えば、コンポーネントレベルではkintoneのデザインがちゃんと最新を保たれていくと、みんなが嬉しいんじゃないかなって思ってます。

Tobi／確かに。でも、もう現時点でも、ただ単純に業務の効率化っていうだけじゃなくて、別チームとも共通言語だったりとか、コンポーネントですけど、一緒になって動けているなっていう感じが僕は思って。

sakitoとAmiの役割と業務内容について（07:43）

Tobi／はい。今、チームの話とか、Mantleチームが何をやってるかみたいな話をしてきたんですけど、2人がそれぞれの役割でどういったことをやっているのか、みたいなところもぜひ伺いたいなって思っています。

sakito／じゃあ、自分から。自分はデザインシステムのプロジェクトを、簡単にはリードするっていうポジションなんですけど、実際、最初の方はもともとフロントエンドをやってたとか、デザインの仕組みを考えるところを会社全体でもやってたので、走り出しは手を動かしたりとか、細かい方針とか技術選定だったりとか、Figmaの運用の仕方の草案とか考えたりしたんですけど、それはもう今やってなくて、最初の4,5ヶ月ぐらいまではやってたけど、最近はもうどっちかっていうと、一歩先の未来を考えるようになってて、デザインシステム、さっきも言ったけど定義が広いんで、自分たちが目指す方向っていうのを常にメンバーの人たちがどういったものを目指していくのかとか、チームとしてこういうスキルが必要っていうところで、どうやったらそのスキルを獲得できるのかって、そういう仕組みを作ったりとか。今、2022年だと思うんですけど、2023年こういうところまで到達できてたらいいよねっていう草案を考えて、みんなに話して、それを。うちの会社は1Q、2Q、3Q、4Qって1年を4分割するんですけど、1分割ごとにマイルストーンを作ったりとか、実際にタスクに落とし込んだりして、他のチームとも調整したりして、各メンバーが作業に集中できるようにするっていうところで色々と動いています。はい。あみちゃん、どうぞ。

Ami／はい。私はMantleチーム、スクラムを導入してるんですけど、そのスクラムマスターとあと開発チームとしての役割もやっていて、そちらはデザインテクノロジストとして活動をしています。スクラムマスターは、いわゆるスクラムのスクラムマスターらしいことをしていて、メトリクスを取ったりとか、レディメントを解消したりとかはしてるんですけど、クロスファンクショナルでデザインシステムを作っているチームでっていうので意識しているのは、職能またいでコラボレーションができるようにっていうのはすごく意識して、チームの効率を上げるのをいろいろとやっております（笑）
デザインテクノロジストとしては、デザイン方面もフロントエンド方面も手を動かすこともしますし、あとはデザイナーとか開発の得意なメンバーとか、QAの得意なメンバーからどう協力したらいいとか、こういうやり方がいいとかっていう相談が結構くるので、デザインとアクセシビリティとフロントエンドとテストとっていうのを色々考えて、みんながコラボレーションがしやすくてやりやすい方法を一緒に考える、みたいなことをやっています。

Mantleチームの文化について（11:20）

sakito／実際、Tobiちゃんもデザイナーとして入ってるけど、最近実装やったりとか書いたりとかしてると思うけど、結構うちのチームは最初の方に3ヶ月後で意識したのが、さっきAmiちゃんが言った職能をあんまり意識しないというところ、もともとアクセシビリティが強くて、デザインが強くて、フロントエンドが強いっていうメンバー集まっているけど、それをチームの中で橋渡し、これやったよね、これやってくださいっていうふうにしたくなくて、みんなが同じレベル感で様々なアクセシビリティのことを語れたり、デザインのことを語れたり、フロントエンドも語れるっていうことを意識してタスクを分割したりとか、進め方もすごいコラボレーションを意識して、ちょっとでも分からなかったら、zoomなりSlackなりで共有するし、勉強会も週に1回やって、アクセシビリティのことを学んだりとか、デザインのことを学んだりみたいなこともするし、実装をしたことないTobiちゃんも最近入ってるけど、実装したことなくても実装タスクを拾えるようなサポートしたりとか、そういう挑戦をみんなで応援するっていう文化を作ってきたので、自分もAmiちゃんもTobiちゃんも得意な分野はあるけど結構、いろんなことをみんなでやるっていうところで、そのコアバリューがあって、そのコアバリューの周りにはみ出ている部分をみんなでそこにも触れるみたいなところを、みんなのコアバリューがベン図で重なってるみたいな、そういうチームになってるなとは思いますね。

Tobi／すごいバランスがいいですよね。

sakito／うん。

Ami／うん。

sakito／最初からバランスが良かったってわけでもなくて、みんながやりたい思いだったりとか、こういうチームにしていきたいっていうのをすごい話した結果、今があるんだろうなと思う。最初そこを作ったおかげで、今はすごい話が早いですね。最初はやっぱりめっちゃ時間かかった、勉強会したりとか、みんなで本読んだりとか、成果を出さないといけないやっぱ仕事だから、でも同期するみんなのメタなバックグラウンド背景を共通化するっていうところに結構時間かけたから。
「こういうことやりたいんですよね。」って言ったら、「あ、じゃあこれはこうですね。」みたいな、もう用語説明しなくてもいいし、タスクの内容も軽く説明すれば大体通じるし、みたいなのはチームでは出来上がってる。

Tobi／なんかそこに時間をかけてきた成果だったり、甲斐が今現れてきてますよね。

sakito／うん。ドキュメントにいろいろ残しているから、途中から入ってでも分かりやすい、すべてのその領域においての意思決定だったりとか、ミーティング内容とかドキュメントを残しているので、見返して自分で勉強するっていうこともできる状況かなとは思います。

Tobi／そうですね。いやあ、チームの良い文化が根付いているなあって思いますね（笑）

Mantleチームの現在のフェーズについて（14:45）

Tobi／ちょっとまた話を戻して、1年弱Mantleチームが走ってきてますけど、今どんなフェーズなのかっていうのを…（笑）

Ami／はい（笑）
今、Mantleはkintoneのフロントエンド刷新プロジェクトを中心に活動をしているんですけど、そのプロジェクトのコードベース内で使われている共通のコンポーネントをコンポーネントライブラリに切り出して、それとコンポーネント、1対1になるように、コンポーネントの洞察の仕様だったりとか、どういう時に使う、使わないだったりとかっていうことをドキュメントにするっていう作業をしています。それと同時にデザインのコンポーネントの不具合の改善だったり、デザインの改善だったりっていうところを進めてています。ここからフロントエンド刷新プロジェクトもどんどんコードベース大きくなっていくので、それに合わせてコンポーネントを増やしていったりとか、コンポーネントの使用ルールをもうちょっと精査して、アップデートしていったりとか、デザイントークンとか足りてないところもあるので、そういうところを追加していって、来年では理想は、kintoneのフロントエンド刷新された画面をMantleのデザインシステムのドキュメントとコンポーネントを使えば、デザインが爆速で組める。それはMantleがいなくても、それぞれの開発チームが主体性を持って爆速でデザイン修正が出来るっていうのを目指しております。

Tobi／うん。いや、もう今同時並行でいろんなことが進んでますよね（笑）

sakito／デザインシステムやっぱ作るだけじゃないっていうところをやっているっていう点でね。今のデザインの作り方とかをデザインシステムだったり、デザインの効率よく進めるっていうところを考えて、ワークフローとかも見直してる、ところも手を入れているから、結構色々と毎日やることは溢れてますね。

Tobi／（笑）そうですね。

Ami／他のチームに使ってもらいながら、大きくできてるっていうのは、すごくいいなあと。作り上げてから誰も使ってもらえなかったっていう話は、デザインシステム界隈の失敗話でよくありますけど、使ってもらいながら、大きくできているのはいいなって思います。

Tobi／そうですね。

sakito／そこも最初、結構意識したもんね。細かく社内の人たちに提供していったりとか、コミュニケーションチャンネルを増やすとか、SlackだったりGatherだったり、あとは1周でのフィードバックをもらいやすいようにみんなに説明しにいったりとか、結構丁寧にドキュメントも残して、いろいろとやってきたっていうところで、ちょっと困ったことがあったら言ってくれるし、issuuに書いてくれるし、みんなでデザインシステムを育ててるっていう感じになってきたのは、ここ最近ありますね。

Tobi／そうですね。これからさらに育てていきたいですね。頑張っていきましょう！

sakito／（笑）頑張りましょう！

Ami／（笑）頑張りましょう！

エンディング（18:23）

Tobi／文字起こしのテキストは、後日noteにアップする予定です。ぜひ音声と一緒にお楽しみください。そして、サイボウズデザインPodcastでは皆さまからのお便りをお待ちしています。今日のこの収録を聞いて、追加でMantleチームに質問がございましたら、ぜひお便りをいただけると嬉しいです。お便りフォームのリンクがポッドキャストの説明欄、noteの文字起こし記事にありますので、ぜひそこからお送りください。またはTwitterで#CybozuDesignPodcastをつけてつぶやいていただいてもOKです。ハッシュタグのスペルはC_Y_B_O_Z_U_D_E_S_I_G_N_P_O_D_C_A_S_Tになります。番組の感想、メンバーへの質問、リクエストお待ちしています。それではまた会いましょう。ありがとうございました！