部門を超えた選抜チーム──「UIリニューアルプロジェクト」の裏側を語る

こんにちは！広報の松下です。

2019年6月19日、「UIリニューアルプロジェクト 第1弾」として、カオナビのベースとなる『PROFILE BOOK（メンバー詳細画面）』の刷新を行いました。
UIリニューアルプロジェクトはなぜ実現したのか、そしてそこに関わるカオナビ社員はどういった想いで集まったのか、今回はその裏側をご紹介します。

UIリニューアルプロジェクト開始

「カオナビ』は2012年からサービスを開始し、2019年で早7年。ご利用いただいている企業様も2019年3月時点で約1,300社と、順調にその数を増やしています。

しかしその一方、利用企業様が増えるにつれて、

「そういうことができるって知りませんでした！」
「全体的にUIが複雑で……」

と、お客様からUIに関するご意見をいただくこともまた、増えていきました。
もちろん、これまでもこのような意見に対して何も手を打たなかったわけではありません。改善を重ねてきてはいたのです。

しかし、カオナビというサービスをこれまで以上に良くしていくことを考えた時に、今までのやり方ではもう限界なのだということもまた事実でした。

カオナビ社としてもこの課題意識は強く、このプロジェクトは改善取り組み方針『カオナビやります宣言』の大きなミッションのひとつとなりました。

こうしてカオナビのUIリニューアルメンバーに選抜されたのはエンジニア・シニアマネージャーである福田健、 QA（Quality Assurance）の山口絵理、デザイナーの中山俊輔、エンジニアであり、フロントエンドの開発を担当している小松史明の4人。

UIに関して元々それぞれが様々な課題認識を持っている中、デザイナーの中山がそこに一石を投じることでこのプロジェクトが始まりました。

中山 「実は入社当初から UIに対して様々な課題を感じていて、それを解決するにはどうしたらいいかを考えていて。 いろいろと考える中で辿り着いたのが、『新たにデザインシステムを導入すること』でした。それを簡単に資料にしてマネージャーに提案したことをきっかけに、着々と話が進み始めたのです。 結局提案資料を清書する前に UIリニューアルを実施することが決まりました」

ここまで進むのはとても速く、かかった時間はほんの数日。
それだけ共通した危機意識がありました。

集まる精鋭。見えてきた課題と、壁の壊し方

▲左から順に：福田（エンジニア）／中山（デザイナー）／山口（QA）／小松（エンジニア）

かくして発足したタスクフォースチーム。そのチーム構成にはこだわりと“狙い”がありました。

福田 「チームが発足した時点でチーム編成はプロジェクトリーダーが僕で、デザインのリーダーが中山さん。新しい視点も欲しかったので入社して間もない小松さんを開発担当にアサインしました」

新しい視点を取り入れるべく抜擢された新人の小松。案件の重さに重圧もありましたが、同時に期待も大きかったと言います。

小松 「僕は入社して 2カ月なのですが、入社した時点で既に進んでいるプロジェクトでした。しかも優先度の高い案件。『これからのカオナビをつくっていくぞ！』というフェーズだったので、プレッシャーはすごく大きかったです。でもその分、期待も大きくって。僕のつくったものが新しい『カオナビ』の顔として出ていくんだな、と」

そして最後のピースは「顧客ファースト」。それを実現するために選出されたのが、サポートデスク経験者でQAという珍しいキャリアの山口でした。

山口 「私はサポートデスクだった頃にお客様の声に触れる機会が多かったので、その経験を生かせたらと思っていました。 QAは普段つくり終わったものを最後にテストすることが多い部門で、エンジニアやデザイナーと密に仕事をすることが比較的少ないのです。なので、『これは貴重な経験になる！』とワクワクしながらチームに参加しました」

チームにはパッションが溢れていました。

しかし、目標に対する意識が統一されていなければいい結果はついてこない。現状を把握することと、それに対してどのような対策を講じるべきかという明確なビジョンが必要でした。

カオナビが抱えていた課題について、福田はこう振り返ります。

福田 「正直、技術的にはすでに React化を別ラインで進めていたので新しいところはなかったですね。ただ、技術的なところよりも概念的なところで、 Atomic Designでしっかりデザインする方向になったことが特徴的だったと思います。そもそも一番の課題はサービスの特性上、情報過多になりがちな『カオナビ』をどう見せるか、逆に言うと、うまく見せられていないということにすごく課題感を感じていました」

情報のまとまり感やページにおける優先度、ページ間で異なるデザインの方針などが『カオナビ』をより複雑にしていたのです。これらをデザイン的に情報整理して見せる必要があったので、Atomic Designの考えをベースにルールをつくるところから。

こうしてようやくプロジェクトの土台ができあがっていきました。UIリニューアルが着々と進もうとしている中、プロダクトそのものとは異なる課題も。

福田 「お陰様でユーザーも増えサービスも急激に大きくなったのですが、一方でこれまでの開発方法だと今までのようにスピード感を持って開発できないという問題が起き始めていました。業務を細分化して最適化し、ウォーターフォールに近い形で開発していたのですが、この形だとどうしてもデザイナーと開発が遠くて……」

人数も急増しているカオナビにとっての新たな壁は、部門間のコミュニケーションの壁でした。

チームで成し遂げた成功──『UIリニューアル』第1弾完成

フロント側のReactはどうしてもデザイナーと近くでつくっていく必要性があります。なので、『ならばいっそのこと！』と部署の枠を超えてスモールチームで再編する、スクラム開発という形をとることに。これによって進捗状況の可視化ができるのではないか、という目論見もありました。

福田 「中山さんからの提案に、正直初めは懐疑的でした。というのも、今回の案件はスケジュールをハードにコミットしなければならなかったので、いきなり入れるのはちょっと怖いなと思っていました……。細分化された組織からいきなり全員で考えるスクラムが本当に浸透するか判断できなかったんです」

中山 「実は前職でも、上から『スクラムをやります』と言われた時に最初は揉めに揉めました。だから最初はみんなの感情が突き刺さるのがつらいなと思っていました（笑）。でもいざやってみたら、自分がやらなければいけないことが明確に見えるようになったのです」

スクラムで進捗が可視化して振り返りもできるようになったことで、問題点が出てきたときにもチーム全員で話し合うように。結果として、チームの状態もよくなったのです。それぞれの懸念を乗り越えた結果、一人ひとりがクオリティーアップを主体的に意識するようになり、UIリニューアルは着々と進んでいきました。

こうして提案してから約半年で、UIリニューアルの第1弾が完成しました。

今回のUIで意識したことについて、福田はこう語ります。

福田 「お客様へのヒアリングを基に反映している点ももちろんありますが、僕個人としてはそれぞれが『何のためのページか？』というところを強く意識しました。『カオナビ』は元々フラットデザインなので、情報量が多くなればその分デザインに相当気を遣わなければすぐに煩雑になってしまいます。これを中山さんがかっこよくスマートに仕上げてくれました」

お客様に提供したい情報をわかりやすい形で提示する──コンテンツをシャープなものにするための工夫がなされました。情報の取捨選択をして、見せたいものは見せる、見せなくていいものは隠すことが重要なのです。そして、工夫はそれだけではありません。

福田 「情報量が多い箇所は当然適切に減らすべきですが、たとえばアイコンひとつとってみても、『言葉なしで、どの世界の人が見てもわかるデザインにする』といったことも UIで意識しています。電話でやりとりした時に共通認識が持てないアイコンは問題なので、『説明なしで誰でもわかるくらいの直観性』を意識してデザインしてもらっています」

このような発想に至ったのはお客様の意見を取り入れようという強い意識がチームに根付いているから。

山口 「私の方では、デザインを崩さないようにしつつ、過去にお客様から頂いたご意見をもとに、お客様目線で意見を反映できるように気を付けました。お客様から生の声を聴いた経験があったからこそ、ナレッジの共有も含め、いろいろな角度から開発を進められたのはよかったですね」

小松 「僕も実際に自分がカオナビを使っていて詰まったところがあったので、お客様になりきって触ることを意識しました。長く触り続けると違和感に気付けなくなってくると思うので、そういった部分にも目を向けて、これからも改善していけたらと思っています」

最終的には、サポートサイトがいらなくなることが大きな目標。直感的で実用的なデザインをつくるための試みを、これからも続けていきます。 そのうちのひとつとして、隠れ便利機能をつくることを考えています。

中山 「気付けば便利だけど、気付かなくても困らない機能とか。SNSでも下にスワイプしたら更新される機能とかありますよね。直観的なアクションで動かせる機能を増やすと、使いやすく、馴染みやすく感じる人も多くなっていきます。使いやすいと感じる人が増えるよう、そういう機能とかもつくれるといいなと思っています」

カオナビをさらに世の中に広めるために

このように新しい挑戦をしながら開発を進めている本プロジェクト。第1弾は終わりましたが、まだまだプロダクトもチームも発展途上。これからさらなる成長を望んでいます。

福田 「今回のプロジェクトは結果的に、各々が自発的に動くプロジェクトになりました。今後ももっとみんなが主体的に動きたくなるようなチームになっていけたらと思っています」

そんな中で、求めている人物像は──？

福田 「エンジニアではどんな人がマッチしているかというと、 React初心者でもキレイに整えながらコードを書くのを好む人だとマッチしそうだと思います。実際に小松さんも前職までは Vue使いでしたが、カオナビでは React使いに変わりました。 そしてたった 1カ月で違和感なく溶け込けこむまでに急成長したのは、小松さんの素養がうちにマッチしていたからだと思います」

そんな小松もまた、カオナビで働くことに大きな意義とやりがいを見出しています。

小松 「入社直後からライブラリ選定といった重要な作業も任せていただけたことは嬉しかったです。そのほかにも様々な業務を担当させていただけています。こうして裁量を持って日々の開発に臨めるのはエンジニアとして非常にモチベーションが上がりますね」

チャレンジが是認される企業風土。それゆえに、求められるのは積極性と創造性なのだといいます。

小松 「自分で環境を切り開いていける人があっているかな、と。最初から「この環境ないですか？」といったスタンスではなく、開発環境を自らつくり上げたりする人がマッチしていると思っています」

しかし、やはり最も重視されるのはチームを意識して仕事ができる人材であること。コミュニケーションの重要性について中山と山口は語ります。

中山 「僕は、基本的には『ひとりでは何もできない精神』でやっています。それを実現するためにもやはりコミュニケーションはとても大事だと思っていて。僕も最初はエンジニアの島に放り投げられて不安だったんですよ（笑）。でもそんな中で助けてもらうためには、コミュニケーションをとることにつきるなと実感したんです。 デザイナーでいうと、顧客のみに関わらず、チームや会社内でコミュニケーションを図るためにデザインをつくる、という考えを持っている人がいいなと思います。要件であったり要望であったり、言葉・文字だけのものも形にすることで議論が捗ったりふくらんだりします。そういうことが苦にならないで楽しめるといいかなと思いますね」

山口 「相手の意見を否定的に見るのではなく、自分の中に取り込んで膨らますことができる人がいいなと思います。一緒にステップアップしていく気持ちがある人とお仕事ができたらいいですね」

コミュニケーションがしっかりととれるいいチームをつくり、その雰囲気を社内に伝播させていく。その結果としてより高品質なサービスを高回転でリリースできるような会社にしていくのがこれからの目標です。

様々な色を持つ人が集まるカオナビ。「シンプルな仕組みで世の中をちょっと前へ。」というミッションの元、日本のマネジメントを変えられるよう、邁進しています。

よりよいカオナビを一緒につくっていける人材を、カオナビは求めています。