kintoneのデザインシステムを作る 「Mantleチーム」とは？ （後編）#CybozuDesignPodcast
Cybozu Design Podcastではおたよりをお待ちしています！
番組の感想・メンバーへの質問・リクエストなどお送りください。
📮Cybozu Design Podcast おたよりフォーム
オープニング（00:00）
Tobi／皆さんこんにちは！デザイナーのTobiです。この番組はサイボウズデザイン＆リサーチグループのメンバーが日々の活動や取り組みを雑談形式で紹介するコンテンツです。デザイン・リサーチ・アクセシビリティを軸にサイボウズ デザイン&リサーチグループの今をお届けしつつ、メンバーの人柄やチームの雰囲気をお伝えします。
Tobi／今回はkintoneのユーザー体験を最高にする活動をするチーム、Mantleチームの紹介の後編となります。前回はMantleがどういう理想を追っていて、どんな未来を目指しているのか、その簡単な活動の紹介でしたけれども、今回はより具体的な深いお話ができたらなというふうに思っています。チームメンバーのSUGIさん、小林さん、Toshinariさん、よろしくお願いします。
小林・Toshinari・SUGI／よろしくお願いします。
自己紹介（00:56）
Tobi／では、まず簡単に自己紹介と普段どういったことをやっているのかをSUGIさんからよろしくお願いします。
SUGI／はい、SUGIと言います。アクセシビリティエンジニアとして活動をしています。 普段Mantleではアクセシビリティを見ているっていうのもありますし、あとはテスト書いたりとかドキュメントを作ったりとか、あとMantleコンポーネントの実装をしたり、不具合を直したりとかやっています。よろしくお願いします。
Tobi／よろしくお願いします。
Tobi／では次に小林さんよろしくお願いします。
小林／はい、小林大輔と言います。もともと自分はアクセシビリティに関する全社啓発とか、支援とかを行うチームにいたんですけれど、自分はMantleチームにSUGIさんと一緒に兼任をしていて、Mantleチームではコンポーネントのドキュメントの執筆とか実装あとは不具合改修、それからStorybookとかテストコードの整備などをやっています。アクセシビリティに関する助言をすることもあります。今日はよろしくお願いします。
Tobi／お願いします。
Tobi／では最後にToshinariさんよろしくお願いします。
Toshinari／Toshinariと言います。私は職能としてはQAエンジニアになります。テストがらみ、品質がらみのことは全般的に関わるようにしております。今日はよろしくお願いします。
Tobi／お願いします。そうですね、今ここに4人、Mantleチームのメンバーが揃っているんですけれども、前回もお話しは軽くしたんですけれども、もう一度Mantleのどういった活動をしているのかっていうことについて軽くおさらいをしていこうかなというふうに思います。
Tobi／Mantleチームっていうふうな名前でkintone開発チームの一つにはなるんですけれども、ざっくり申し上げるとデザインシステムの開発を行っているチームとなります。現在はkintoneのコンポーネントをより良くするためにドキュメントを書いたりですとか、一つ一つ実装をコンポーネントに実装していったりするような活動を行っているチームとなります。
認識大丈夫でしょうか？（笑）
小林・Toshinari・SUGI／はい（笑）
Tobi／大丈夫そうです。よかったです（笑）
Mantleチームでの具体的な活動内容について／SUGI（03:30）
Tobi／ここから今回の本題の具体的にどういったことをMantleチームで行っているのかという活動の話をしていけたらなあというふうに思います。では、まずSUGIさんから普段のより詳細な活動内容だったりっていうのを教えていただいてもよろしいですか？
SUGI／そうですね。Mantleは今、全体的な活動感言うと、現状のコンポーネントを整備するっていう段階にいて、例えばドキュメントがないので、ドキュメントを作ったり、あとテストが不足しているので、テストを書いて、信頼性とか安全性を担保する活動をしていたり、あとは今Mantleコンポーネントを出しているんですけど、まだまだユーザー体験とかよくできると思うので、今後どういうブラッシュアップができるかなっていう他社事例を見たりとかいう探求をしているっていうのが、全体的な活動感です。自分はですね、結構アクセシビリティとか品質っていうところを重視して見ています。例えば、自分自身が視覚障がいなんですけど、全盲ですね。普段スクリーンリーダーっていう音声読み上げソフトウェアを使ってMantleのコンポーネントとかを見ているわけなんですけど、いわば、マウスを一切使わないユーザーです。なので、別の言い方をすると、キーボードネイティブなんですけど、なので、Mantleが提供しているコンポーネントをこのキーボードネイティブっていう視点から見て、キーボード操作が自然なメンタルモデルで操作できるかなとか、操作した時に不具合が起きてないかなとか、そういう視点からコンポーネントを見て不具合があったら不具合を見つけてissueを登録したり、実際に自分で直したりとかドキュメントにキーボード操作を追記したりとか、あとは将来的にこういう利用操作ができるといいよねっていうのを書いたりとか、ブラッシュアップ方法を提案したりとか、そういう活動をしています。
Tobi／なんかこうよくSUGIさんの活動の印象というか、普段マウス操作をしているだけでは気づかないような、すごく細かい不具合だったりっていうのを見つけてくださる印象がすごく強くてですね、すごく細やかな視点で見てくださってるなあと、チェックしてくださってるなというふうに感じています。
SUGI／ありがとうございます。多分キーボードネイティブだから自然に気づけるっていうところもあるのかなと思ってて。使い倒してるので、その分気づく確率が高いという。あと割と楽しいんですよね、不具合がないかを探索的に網羅して、「あ、ここはまだ不具合あったよ」みたいな感覚が楽しいと思ってやってたりもします。
Mantleチームでの具体的な活動内容について／小林（06:43）
Tobi／ありがとうございます。では次に小林さんお願いしてもよろしいでしょうか？
小林／はい。自分は先ほども話した通りでドキュメントの執筆とか実装、不具合解消とかStorybookとかテストコードの整備とか大体満遍なくやっているようなメンバーなんですけれど、この中だとドキュメントの整備とかに結構注力する場面とかが多いかなとは思っています。具体的にはFigmaとか、あとは実際の実装とか、別の成果物がMantleにはあるので、そのMantleの成果物と整合性が取れるようにするっていうところで、例えばコンポーネント内のパーツの名前とか、コンポーネントの状態の名前とかをきちんと統一しておくとか、そういうところはドキュメントで気をつけていたりします。あとは今後Figmaの整備とかが進んでいくことで、ドキュメント自体を修正するっていう必要も多分出てくると思うので、そういうところで統一性取れるといいかなっていうことで考えていたりします。あとはドキュメント自体の整合性もちょっと気にしたりしていて、細かい表現の統一とかがドキュメント同士で測れるといいなあっていうのも思ったりしています。日本語として読みやすくなるっていう話もあるし、多分将来的に翻訳精度とか、そういうところにも影響してくるんじゃないかなっていうのは個人的に思っていて、多くの人にとって分かりやすいドキュメントにできると、いいなあっていうふうに思っています。っていうところがドキュメントで注力しているところですかね。
あとはSUGIさんと同様かもしれないですけど、アクセシビリティに関する知見とかも少し気にしているところがあって、特に自分の場合はデザイナーさんに助言をするみたいなところが時々あったりします。アクセシビリティの観点をプロトにフィードバックするとか、そういうところをやっていたりとかがあります。
あとはそうですね、実装に関しては、今は、SUGIさんも言ったように移行作業が中心になっているので、コンポーネントを最初から実装するというか、一から実装するっていうことはあんまりないんですけれど、既存のコンポーネントを修正する時には、読みやすさとかを気をつけたりしています。特にMantleはいろんな職能の人が関わっているので、それを見越して読みやすく担保するみたいなところは注力しているかなと思います。
Tobi／ありがとうございます。ぜひ小林さんにお話したいことが2つあってですね、僕がMantleチームに入って一番最初に大きく携わったのが、このドキュメントを作るっていう部分だったんですけれども、レビューしていただくにあたって、すごく丁寧にドキュメントを作ることを教わったんですね。例えば、誰が見ても、それは開発者じゃない人が見ても読みやすいようにするためにフォーマットを整えたりですとか、文の体裁を整えたりですとかっていう、細やかで丁寧なドキュメント作りのイロハを教えていただいたなあっていうふうに思っています。
小林／そうですね、ドキュメントに関しては、他の成果物がせっかくFigmaとか、Storybookだったり、実装だったりっていうところであるのに、それがそのドキュメントが読みにくいとか読みづらいせいで、価値が知られていなかったりとか、価値を誤解されたりとか、そういうところがあるのがすごい自分は気になっていて、ドキュメントでそういうところがちゃんとないようにきちんと整えられるといいんじゃないかなっていうふうに思っています。なので、細かい表現とか、逆に言うと細かいけど、そこがしっかりしてないと、全体の品質とかに響いちゃうっていうのがすごいあんまり良くないと思っていて、そういうところが整備できるといいなって思っています。
Tobi／あともう一件あるんですけれども、アクセシビリティに関して、これは社内のスプリントレビューっていう一週間に一度デザイナーだったり、エンジニアだったり、kintoneの開発に携わるメンバーが集まる時間での話にはなるんですけれども、他のチームの方がデザインを見てほしいっていうふうな依頼をされたときに、すでに完成されたものでないとアクセシビリティに関して質問ができないんじゃないか、みたいな話が出てたかと思うんですけれども、その話がすごく僕の中では印象的で、なんかその辺りのお話も是非伺えたらなあというふうに思ってはいます。
小林／そうですね、おおよそ自分が例えばFigmaとかを見たりするときに、最終的な実装とか、キーボード操作とかスクリーンリーダーでどういう風に操作されるかっていうのを想像するんですけれど、大体Figmaに出た段階で、そのおおよその見通しが立つので、そのタイミングでフィードバックできると、デザイン自体を直したりして、無理ない修正が出来るっていうところですね。それ以降になってしまうと、実装でなんとかスクリーンリーダーだったり、キーボード操作をカバーするっていうことになるんですけれど、結構無理な実装とかになることが多いので、できるだけ早くデザインの段階でフィードバックするっていうところがいいかなと思っていて、そういう発言をしたっていうふうに記憶してます。
Tobi／ありがとうございます。すごくあの話は僕も響くものがあったので、ぜひこういった形でお話できればなというふうに思ってました。
小林／そうですね、もうちょっとなんか早い段階で、人によっては結構やっぱり実装してHTMLをチェックしてもらうっていうような感覚でレビューを依頼してくださる方が多いんですけれど、個人的にはもうちょっと早くフィードバックできると選択肢が広がるので、そういうふうにできるといいなって思っています。
Mantleチームでの具体的な活動内容について／Toshinari（13:12）
Tobi／ありがとうございます。では、Toshinariさんお願いしてもよろしいですか？
Toshinari／はい、分かりました。僕の方から品質保証がらみの話をしていくんですけれども、Mantleチームでの試験に関してなんですけれども、基本的には外部仕様を網羅するような試験っていうのを自動化していっています。QA界隈では、試験の種別としては機能試験とかって言われるような試験の粒度のテスト観点を全て自動化していっている感じですね。もちろん自動化不可の試験とかもあるので、そういったものは適宜手動で実施っていうのはしてはいるんですけども、あとフロリアでは各チームごとに最適な開発フローっていうのをとっています。それは実装する対象物が違うっていうのもあるし、チームメンバーの特性も違うし、あとチームごとに掲げてる目標とかも違うので、自ずと開発フローがみんな一緒になるはずもなくっていう感じで。Mantleではどうしているかっていうと、実装者が試験の設計・実装をして、QAが試験観点のレビューをする体制を取って進めています。Mantleとしての品質保証っていうのはこんな感じなんですけど、違う側面としてじゃあMantleを使う側の品質保証はどうするのかっていう話とかもあったりして、コンポーネントの細かな挙動っていうのはMantleで保証しているので、使う側はどんな粒度で試験をするのかっていう話になるんですけれども、これまでは自分がフロリア内の他のチームに兼務してたので、なんかそのあたりよしなに調整していたんですけども、今後は僕も他チームから離脱していくだろうし、フロリアに閉じず、他のフロリア以外のチームでも使われていくことになっていくと思うので、それらのTipsなんかもそろそろ用意していかないとなって思っている感じでございます。
Tobi／ありがとうございます。今、Mantleチームっていうスモールチームの中で唯一のQAエンジニアとしてToshinariさんがいらっしゃって、結構デザイン界隈に閉じた話にはなるんですけれども、品質保証っていう観点でコンポーネントを見たりとかっていうのは、まだまだ業界に広がっていない部分なのかなっていうふうには思っているんですけれども、なんかこうデザインとQAっていうコラボレーションにおいて、Toshinariさんで思いとかってあったりしますか？
Toshinari／そうですね、まさにそこに手を入れたいっていうか、関わっていきたいなという気持ちがあって、自分はMantleチームに所属したっていう経緯もあったりします。ちょっとこれはQAの話なんですけれども、従来、私がこれまで所属していたチームっていうのがQAは基本的にはですね、デザイン周りに対してクロスブラウザで表示崩れがないかとか、あとは操作する中で表示が崩れないかとかっていうあたりを注視して確認するぐらいしかデザインに対してのテストっていうのは行っていなかったんですね。でも、品質の観点として、本当は色々とあるはずなんです。例えば、視認性とかユーザーの習得性とか操作性、快美性とか、ソフトウェアの品質のですね強化に関する国際規格っていうのがあるんですけど、その中でも品質特性として使用性っていうもので、挙げられています。効果的に効率的に利用できるかどうかという度合いになるんですけど。あとは特にですね、QAエンジニアは業務の性質上、プロダクトを操作する割合っていうのが、他職能よりもすごく多いはずなんです。なので、特にユーザーにより近い視点でプロダクトを捉えることができるのではないかなと思ってまして、そういう思いもあって、これまで以上にデザインの方にQAエンジニアとして関わっていきたいなという気持ちがあります。
Tobi／ありがとうございます。いや、本当にいろんな新しい視点で、デザインを捉えることができる機会になってます。
これからMantleチームでやっていきたいことについて／Toshinari（17:43）
Toshinari／これからはあれですよね、じゃあ実際にどんな観点で評価をしようかとか、定量的な評価ができるのかとか、あとどのタイミングで評価するのか、その試験実施時だけじゃなくて、もっと上流のデザインをレビューする段階でも関われるはずだしとか、なんかそのあたりは探求していきたいですね。それが形になったら、それこそフロリア、そこからkintone全体、さらには社内のプロダクト全体のデザインの品質保証の波及させていきたいな、なんて思っております。
Tobi／ありがとうございます。今、Toshinariさんから、もうこれからMantleでどういったことをやっていきたいかっていうお話をいただけたんですけれども、ぜひSUGIさんと小林さんの方からも今後どういう活動をしていきたいのかっていうことをお話していただけますか？
ではSUGIさんからお願いしてもよろしいでしょうか？
これからMantleチームでやっていきたいことについて／SUGI（18:40）
SUGI／はい、一言で言うと、一貫した体験を届けるための改善をしていきたいなと思ってます。一貫した体験っていうのは、例えば同じようなボタンであれば同じ色をしているし、同じ挙動をしているしとか、そういう画面とかパッケージによって、いろいろなコンポーネントが使われていると思うんですけどそれがユーザーにとって自然ななんか同じような、一致した体験ができるっていう世界観を目指したいです。Mantleのコンポーネントって今、一応提供しているけど、まだそこらへんの統一性とかはこれからブラッシュアップするっていう段階で色とかもまだ整備できてないし、なんか同じようなコンポーネントが実はあったりとかして、そこら辺がまだ整備されてないので、今後のブラッシュアップかなと思ってます。
Tobi／そうですね。ありがとうございます。
では、小林さんからもぜひいただいてよろしいでしょうか？
これからMantleチームでやっていきたいことについて／小林（19:46）
小林／そうですね、自分として今後やっていきたいところで言うと、あのMantleに関わる色々なチームだったり、Mantle内でもそうなんですけれど、Mantleに関わる人たちの中で共通言語というか、成果物に対する議論とか、そういうことはしやすくなるといいなと思っています。具体的にはFigmaとか、実装とかあとドキュメントとかいくつかの成果物があるんですけれども、そういったものがひとつひとつ独立してるんじゃなくて、きちんと中身が統一されていて、ちゃんと議論に参加しやすい、デザイナーさんであれば、例えばFigmaを見たり、実装者であれば、実装のコードを見たりするんですけれど、どういうレベルにあっても、ある程度議論が通じるようにできるといいなあっていうふうに思ったりしています。そのためにはいくつかの成果物に対して同じ名前を使ったりとか、同じ書き方をしたりとか、そういうことが必要になってくると思うので、今後そういうところをちょっとやっていけるといいなと思っています。
エンディング（20:54）
Tobi／ありがとうございます。ぜひこれからもさらにMantleとしてのデザイン活動を頑張っていきましょう！
小林・Toshinari・SUGI／はい！
Tobi／本日は以上になります。皆さん、ありがとうございました！
小林・Toshinari・SUGI／ありがとうございました！
Tobi／文字起こしのテキストは、後日noteにアップする予定です。ぜひ音声と一緒にお楽しみください。そして、Cybozu Design Podcastでは皆さまからのお便りをお待ちしています。今日のこの収録を聞いて質問がございましたら、是非お便りをいただけると嬉しいです。お便りフォームのリンクがポッドキャストの説明欄、noteの文字起こし記事にありますので、是非そこからお送りください。またはTwitterで#CybozuDesignPodcastをつけてつぶやいていただいてもOKです。ハッシュタグのスペルはC_Y_B_O_Z_U_D_E_S_I_G_N_P_O_D_C_A_S_Tになります。番組の感想、メンバーへの質問、リクエストお待ちしています。それではまた次回お会いしましょう。ありがとうございました！
Cybozu Design Podcastではおたよりをお待ちしています！
番組の感想・メンバーへの質問・リクエストなどお送りください。
📮Cybozu Design Podcast おたよりフォーム
この記事が気に入ったらサポートをしてみませんか？