はじめに

概要

▼【告知】2023年 10月24日（火）開催

本編

※ 話の内容は、2023年2月時点のものです。

本日のトークとメンバー

にしな：みなさんこんにちは。「Chatworkプロダクトデザイン部 おChaの時間ですよ！」今回のMCを担当します、Chatworkプロダクトデザイン部 UXリサーチャーの仁科です。
今回は、Chatworkプロダクトデザイン部のUX/UIデザイナーの大竹里佳さんをゲストに迎えて、ChatworkのUIデザイナーのお仕事についてお話ししたいと思っています。それでは大竹さん、簡単に自己紹介をお願いします。

サトカ： Chatworkプロダクトデザイン部 UX/UIデザイナーの大竹里佳です。プロダクトデザイン部ではサトさん、サトカちゃんと呼ばれています。今年で入社5年目で、プロダクトのUX/UIデザインやアクセシビリティ観点でのエキスパートレビューをしたり、プロダクトデザイン部の活動を社内外に伝える広報のリーダーを担当しています。よろしくお願いします。

にしな： よろしくお願いしますー！
ここからはいつも通りあだ名で、「サトさん」と呼ばせていただきますね！
では本題に入る前に、このPodcastのテーマが「お茶の時間」ということで、今日のお茶とお茶菓子を教えてくださーい

サトカ：はい、緑茶とリンツのチョコレートを持ってきました！

にしな：あ、美味しそう〜！ 大玉のやつですか？ いいですね。うちの冷蔵庫にもあります（笑）
私は今日は「あじゃりもち」を用意しました〜。
今週プロダクトデザイン部の合宿があって、部署全員で東京に集合したのですが、京都在住のみゆみゆが前回のPodcastで紹介して、本当にお土産で持ってきてくれた京都のお菓子、「あじゃりもち」です〜！お茶と一緒にいただきたいと思います。

Chatwork UIデザイナーのお仕事紹介

にしな：ではさっそく本日の本題です。
サトさんを迎えてお話ししたかったのは、ズバリ「ChatworkのUIデザイナーの役割とやりがいって？」というテーマです！
すでに入社5年で、現在9名のプロダクトデザイン部のメンバーのうち、社歴が3番目に長くなっていますね。部署内のデザインレビューの時もメンバーにいろんなアドバイスやフィードバックをくれています。
本当に色々なプロジェクトやチームに参加しているので、この5年間の経験を交えつつ、Chatwork UIデザイナー役割とやりがいを聞いていけたらと思っています。

サトカ：はい、分かりました！

にしな：まずはそうですね、ChatworkのUIデザイナーのざっくりとした役割を聞いていければと思います。

サトカ：はい。Chatwork のUIデザイナーは、プロダクトマネジャーが「この課題を解決したい」と立案したものに対して、どう実現するかを形にしていく仕事だと思っています。
これは単に見た目を整えて提案するのではなくて、プロダクトマネージャー（以下、PM）が実現したいことやユーザーの期待を整理し、既存仕様やガイドラインの知識を用いてデザイン案を作っていきます。その過程でエンジニアとのコミュニケーションを取り、ユーザーさんの課題解決と実現可能性のバランスを見ながら最終的な課題の解決案を具体化しています。

にしな：確かに、Chatworkのデザイナーって、あらゆる手を尽くして「この施策に一番フィットする解決策はなんだろう」と常に模索していますよね。
ちなみにサトさんは今までに、どんなプロジェクトに参加してきましたか？

サトカ：Chatworkに新しい機能を作るプロジェクトを何度か担当しました。現在は新機能のプロジェクトと並行して、PMとエンジニアを中心としたモバイルグロース施策のチームにも参加しています。

にしな：モバイルグロース施策のチームっていうのは、何か新しい機能を開発するというよりは、モバイルアプリの改善を小さく区切って回していくようなチームですよね。
大きいプロジェクトから、小さく改善をするチームまで、いろいろ経験しているんですね。サトさん自身は、どんなプロジェクトに入りたい、という希望は出してるんです？

サトカ： 希望を出したことは、ないかもしれません….。というのも、自分が興味のある分野や伸ばしたい部分を日頃からマネージャーに伝えていて、それがすでに考慮されてアサインされています。

にしな：マネージャーとも良い関係構築ができているんですね！
今はどんな分野に興味があるのか、ちょっとだけ聞いてもいいですか？

サトカ：私はもともと大学で心理学を学んでいて、社会心理とか認知心理とかがすごいスキなんですよね。なので、そういった知識を使って、インターフェイスを設計することに興味があります。

にしな：なるほど、Chatworkというプロダクトは1日に何度も使うプロダクトなので、ちょっとした使いづらさがとてもストレスになるんですよね。なのでプロダクト開発の色々な場面で心理学の知識も活かせそうですね。

サトカ： はい。

にしな：では次に、デザイナーがプロジェクトや施策に参加するタイミングについて教えてください。
直近だとモバイルグロース施策のチームに参加しているとのことでしたが、デザイナーが参加したのはどんなタイミングだったんですか？

サトカ： その施策では、PMと共に課題を見つける段階から参加しました。同時に、モバイルアプリのエンジニアにも参加してもらってます。

にしな： なるほど！すでに施策の内容が決まっていたわけではなく、どんな課題に取り組むかを決める上流のタイミングから、デザイナーもエンジニアも参加しているんですね。
取り組む課題が決まったあとの、そこからUIデザインに入っていくまでの流れも聞いていいですか？

サトカ： はい。ブログでも紹介してる、Chatworkのプロダクトデザイン部オリジナルの「MONDRIAN」というUIフローに沿って進めています。
PMと取り組む課題の方向性をすり合わせて、それから既存仕様などの情報整理、UX/UI要件の言語化やユーザー要件の定義をします。
その要件に紐づける形で機能要件を決め画面を設計をし、ワイヤーフレームを作ります。その後、チームで認識合わせをし、最後に詳細なビジュアルを仕上げる、という流れです。

にしな： このプロセスはUIデザイナーは全員やるのでしょうか？

サトカ： そうですね。このプロセスの一番大きな目的は、認識違いや考慮漏れで発生する手戻りの防止なので、基本的には全員やっています。けど、施策によっては求められるスピード感も異なるので、柔軟にアレンジしても良いことになっています。

にしな：最初のすり合わせや前提条件がずれていて、一向にデザインが決まらない…っていうのは結構あるあるかなと思うのですが、それを極力減らすプロセスになっているんですね。
とは言っても、グロース施策などでこういったプロセスを丁寧にたどるのは大変かなと思うのですが、サトさんが入っているモバイルグロース施策チームでも、施策ごとにこのプロセスをたどっているんですか？

サトカ：実はこのチームには、私はUIデザイナーとして入っていたので、UX/UI要件の検討は先輩デザイナーにやってもらっていました。この後の情報設計からがUIデザイナーのメインの仕事でした。

にしな：UXデザイナーはそれぞれの施策に対するUX/UI要件の策定、UIデザイナーは情報設計から先の画面デザイン、という形で分業することもあるんですね。

サトカ：はい。とはいっても、大体のUIデザイナーはUX要件策定からやっていますね。規模が大きかったり、担当案件の並行で時間が取れなかったりすると分業することが多いです。

にしな：分業しつつもプロセス自体は丁寧にたどっているんですね。
UX/UI要件というのは、基本的にはテキストで書いていくと思うのですが、それを書き終えたら実際の画面デザインをしながらすり合わせていくんですか？

サトカ：ここではまだデザインツールは登場しません（笑）
次は情報設計をするフェーズです。
作成したUX/UI要件に紐づけて、ユーザーがこうしたいという要件を出し、それを実現するための機能要件を整理します。そうしてようやく画面要件を整理してワイヤフレームの作成に入り、最後にデザインツールでビジュアルデザインの作成に進みます。

にしな：どんな機能や画面要素が必要かをユーザー目線で言語化して、画面デザインに入っていくんですね。画面デザインも、突然詳細なデザインを作るのではなくて、ワイヤフレームで認識合わせすることで、ここでも出戻りを防いでいるのかなと思いました！
ちなみに、ツールはどんなものを使うことが多いですか？

サトカ：私はMiroが多いですね。デザインツールはSketchで、エンジニアへの共有はAbstractを使っています。
あと、決定事項は基本的にConfluenceというドキュメントツールにまとめます。なので、いつでも誰でもデザイン検討が様子が後からたどれるように、というのを意識してまとめています。

にしな：ざっくり認識合わせするのはMiroみたいな共同編集ツールが便利ですよね。デザインツールは今後Figmaも検討する動きもありつつ、現時点ではSketchという形ですよね。
サトさん自身はFigmaとSketch、どちらが好きとかってあるんですか？

サトカ：んー、ない、ですね（笑）
ツールはツールでしかないので、私はどちらかというと「何を作るか」にフォーカスしたい、というタイプです。

にしな：なるほど〜。
では次に、デザインガイドラインなど参考にするものがあるかを教えてください。

サトカ：スペーシングなどのデザイン方針や、カラーに関するデザインシステムがあります。膨大なドキュメントがあるので、入社当初は探すのがちょっと大変でした。

にしな： Chatworkはドキュメント文化ですもんね。おっしゃる通り、古くなってしまったものも検索に引っかかってしまったりするので、探しやすさ、みたいな部分はちょっと課題がありますよね…。
こういったデザイン環境整備の活動も精力的に取り組んでいるので、興味がある方はぜひJOINしてほしいですね（笑）

サトカ：そうですね！
他にもアクセシビリティや各モバイルOSのプラットフォームガイドラインなど、気にしなくてはならないことがたくさんあるので、やることがいっぱいありますしね。

にしな：さらにユーザーリサーチもデザインプロセスに組み込んでいこうねという動きがありますもんね。

サトカ：ですね。やりたいことがいっぱいで大変な部分もありますが、同じ内容・同じ難易度の施策はないので、そのときの「ベスト」を考えていくことはやりがいだと思ってます。

にしな：確かに…！ チームに溜まっている知見を活用しつつ、その時々の最適解を見つけてく面白さが、Chatworkのデザイナーにはありますね。だからこそ「アレンジ可能な基本のデザインプロセス」があるのは理にかなってますね。

サトカ： そうですね。デザイナーそれぞれの知見でフィードバックする、「デザインレビュー」の取り組みなどもあるのですが、長くなりそうなのでまた別の機会に紹介させてください。

にしな：ぜひお願いします（笑）
ちなみに先ほどUXデザイナーとの棲み分けは少し触れてもらいましたが、他にもUIデザイナーが密接に関わるPMやエンジニアとの連携をもう少し聞ければなと思います。
先ほどモバイルグロース施策のチームでは、課題探索を一緒に行ったとこのことでしたが、どんなふうにコミュニケーションを取ったのでしょうか？

サトカ：そのときは、戦略としてPMが追っている数値があったので、それに関係する既存のプロダクトの機能や遷移をMiro上で整理し、チーム全員でそれを見ながらユーザーが抱えていそうな課題を出していって、何があったらそれが問題解決できそうなのか…とワークしていました。
チームにはエンジニアもいるので、開発の難易度や影響範囲についてもワークを通して共通認識を作っていました。

にしな：PM、デザイナー、エンジニアが集まったチームで密にコミュニケーションを取りながら施策の詳細を詰めているんですね。

サトカ：そうですね。時にはワイヤーフレームまで書いてくれるPMもいるのですが、そこはデザイナーのお仕事なので、漠然とした課題がある時点で相談に持ってきていただいて大丈夫ですよとお伝えしています。

にしな：エンジニアはどんな参加スタンスの方が多いんですか？

サトカ：エンジニアのみなさんは、施策の意図や背景をしっかり理解して取り組みたい、ユーザーが喜ぶものを開発したいといつも考える方々なので、とても積極的に参加してくれていました。

にしな： Chatworkにはプロダクトの改善アイデアを積極的に出しているエンジニアも多いですよね。

サトカ： そうですね、モバイルのチームに限らず、Chatworkのエンジニアはユーザーのためにプロダクトを良くしたいという気持ちが強い人が多いように感じます。なのでこちらも、UI設計の最初の段階から巻き込むようにしてます。

にしな：デザイナーは巻き込み力も大事ですね！
こう言った職種混合のチームが一体になってプロダクトを作っていけるというのも、Chatworkデザイナーの醍醐味かもしれないですね。

サトカ：そうですね〜

エンディング

にしな：まだまだいろいろなお話が聞けそうですが、今回はここで区切りつつ、その他のプロダクトデザイン部の取り組みはまた別途聞いてみたいと思います。
というわけで、「5年目デザイナーに聞く、Chatwork UIデザイナーの役割とやりがい」をご紹介してきましたが、いかがでしたでしょうか。
サトさん、話してみた感想などありますか？

サトカ：自分がもう5年目なんだという事実にびっくりしてます。同時に、この年月の中で失敗と成功を繰り返してきたからこそ、今日これだけの事が話せたのかなーなんて思いました。

にしな：確かに！話してみて初めて、「あれ、こんな経験もしてる！」ってなることありますよね（笑）
そして、まだまだたくさん話してもらえそうなので、またぜひゲストに来てくださいね！

サトカ：はい、待ってます！

にしな：Chatwork ではデザイナーをはじめ、様々な職種で一緒に働いてくださる仲間を募集しています。このエピソードを聞いて興味が湧いた方は、ぜひChatworkの採用サイトもチェックしてみてくださいね。
そして番組への感想や質問などありましたら、X（旧Twitter）で「#おChaの時間」をつけて投稿していただけると嬉しいです！
では、今回はこの辺りで終わりにしたいと思います。最後までお付き合いいただき、ありがとうございました。また次のエピソードでお会いしましょう。
今回は、仁科と、大竹でお届けいたしました。ありがとうございました！

関連リンク

▼Chatworkのプロダクトデザイン部オリジナルのUIフロー

▼Podcast「おChaの時間ですよ」

▼Chatworkプロダクトデザイン部採用情報