SMARTCAMP Engineer Blog

スマートキャンプ株式会社(SMARTCAMP Co., Ltd.)のエンジニアブログです。業務で取り入れた新しい技術や試行錯誤を知見として共有していきます。

リモートワークによる開発チームの課題をFigmaで改善した話

f:id:haguri:20200424181047p:plain

スマートキャンプのデザイナー/エンジニアのhaguriです。

弊社では3月からリモートワークに移行しています。

スマートキャンプでは開発チームが、「BOXILチーム」と「Biscuetチーム」の2つあります。

以前の記事では、リモートワーク中の開発チームの様子や、行っているコミュニケーションの工夫などを紹介しました。

tech.smartcamp.co.jp

今回は、2ヶ月弱リモートワークをすることで見えてきた「Biscuetチーム」内の課題と解決に向けて試した方法について紹介します。

発生した課題「認識のズレ」

通常では、あるトピックについて話し合うときは同じスペースでホワイトボードに書いたり、モニターに映して指差しで確認したりしていました。

しかし、リモートワークになってからはSlackやKibelaを通じたテキストコミュニケーションが中心になります。

温度感が伝わらないことや、受け手によって認識も変わってくることで「認識のズレ」が生じてきました。

f:id:haguri:20200424181907p:plain

その課題を解決するために、デザインチームで導入しているコラボレーションツール『Figma』を使用して、ビジュアルコミュニケーションによる意思疎通の精度の向上を図ってみました。

f:id:haguri:20200424181918p:plain

改善1:共通で呼べる名前をつける

Biscuetの開発チーム内では、いままで画面内の各領域について明確に名前が決まっていませんでした。

「左側の...」「真ん中のヒストリーのところの上の...」といった認識が難しい会話をすることが多くなりました。

そこで、以下の例のように画面内の各領域の名前を明確に決めました。

f:id:haguri:20200424144620p:plain
実際の画面:要素が多くて、何について話しているか分かりづらい状態

f:id:haguri:20200424144155p:plain
各エリアに名前をつけた状態

サービスをつくるうえでは、基本的なことです。

ただ、リモートワークで物理的な距離が離れているからこそ、共通の名前をつくることは大切です。

改善2:必須確認事項をいつでも見れるようにする

リモートになって出来なくなったこととして、「張り紙コミュニケーション」があります。

もともとBiscuet開発チームでは、「プランニング時に確認すること」「リリース前に確認すること」といった必ず確認する項目を、ホワイトボードに書いたり、壁に張ったりして目視で確認しあっていました。

コミュニケーションをとるメインの場がZoomになったことで、共通の壁やホワイトボードがなくなり、張り紙を使用したコミュニケーションができなくなりました。

そこで、Kibelaのテンプレート機能とFigmaの埋め込み機能を使用して、リモートでもチーム内で確認しあえるようにしました。

f:id:haguri:20200424145552p:plain

改善3:アイテムごとにUIを作成して、UIを軸に話し合う

Biscuetでは開発手法にスクラムを採用しており、実装する機能を毎週話し合っています。

tech.smartcamp.co.jp

完全リモートに移行したことで、最近ではZoomを使用するようになり、ホワイトボードや直接画面をみんなで見ることが出来なくなりました。

プロダクトの実際の画面を見ずにKibela上で口頭による要件の話し合いをしたり、結果として決まったことだけをkibelaに簡略化して書いてしまうようなことが起きてしまっていました。

それによって、完成したものにずれが生じたり、不具合が発生したりしてしまうことが増えてしまいました。

考えた解決策として、アイテムごとに毎回UIをFigmaで作成して、UIを軸に話し合うようにしました。

f:id:haguri:20200424151118p:plain

全員で同じUIを見て、仕様を考え、決まったことはFigmaの補足としてKibela上にテキストとして記述するようにしました。

可視化することで、誰がみても同じイメージを共有することができるようになりました。

改善4:KPTを付箋のようにやる

スプリントの振り返りとしてKPTを実施しています。KPTもFigmaを使用しています。

オンライン上で付箋のようなコミュニケーションができるサービスはいくつか存在しています。

今回は、エンジニアもみんなFigmaを使用したビジュアルコミュニケーションができるように、練習のためにFigmaで実施しました。

この内容に関しては、スマートキャンプのデザインブログで紹介しているので、ご覧ください。

note.com

「認識のズレ」をビジュアルコミュニケーションで改善

物理的な距離が離れている状況では、認識のズレが起こりやすいです。

そのために画像やイラスト、図形を使用して、見る人によって認識の差がうまれづらい方法による情報の伝え方を意識していくと良いです。

今後のリモートワークが続きそうですが、より効果的で効率的なアウトプットがチームとしてできるように考え、課題や上手くいったことはこのブログでも紹介していこうと思います。

スマートキャンプではデザインブログもnoteで運営しています。 各プロダクトに関する想いだったり、デザインの小話も書いているので、見ていただけるとうれしいです。

note.com