オンラインコラボレーションのススメ – SBGift様とフルリモートでオンラインドローツール Cacoo を使いユーザーストーリーマッピングを作成しました

こんにちは。CX事業本部でサーバーレスなシステムを開発してる和田といいます。コロナ禍で仕事の進め方を問い直す日々が続いていますね。わたしたちは IT、それもソフトウェア開発に携わっていて、お客様のご理解もあり、基本フルリモートで自宅から働いています。私自身は、この状況になる前から、お客様とはオンラインミーティングで完結することも多く、直接お会いしての会議は月に一度あるかないか、というぐらいでした。ですので、開発業務など、これまでと大きく変える必要はありませんでした。ありがたいことです。

ただ今回、どうしてもやり方を考えるべきイベントが発生しました。お客様と一緒に実施するユーザーストーリーマッピングの作成 です。フルリモートでできる気がしない…でも、これから開発するプロダクトの価値の共通認識、立ち返る場所を作るために、ユーザーストーリーマッピングという成果物は強力です。そこで、なんとかオンラインで実施する方針をたててみました。

謝辞

今回一緒にユーザーストーリーマッピングを作成いただいたのは、SBGift株式会社様です。本記事を書くことについても快諾いだきました、ありがとうございます。

同社のサービスのひとつ、「ポチッとギフト」は相手と直接会わなくても、配送手続きもなくギフトを送れます。いまの世の中にぴったりですね。

実施環境

項目	内容
SBGift様 参加人数	5名（全員ご自宅から参加）
クラスメソッド 参加人数	3人（全員自宅から参加）
利用ツール	Cacoo
合計所要時間	6時間※

※ 2日がかり。1日目：4時間、延長が必要という判断になり後日：2時間

できあがったもの：

最初に結論

内容がブレないよう、先に伝えたいことを残しておきます。

総合感想

やってよかったし、オンラインでもツールを駆使すればユーザーストーリーマッピングは作れる。電子データで記録が残るのも後続の作業が楽になります。ただ、やはり相応の準備は必要です。

参加メンバーからのフィードバック

• 思ったよりも疲れるので、休憩をこまめに取ったほうが良いかもしれない。1時間に一回など
• ユーザーストーリーマッピングのルールでは、「他人の付箋も自由に動かして、カテゴライズや優先度調整をやってOK」というルールがあるが、 画面にうつっている付箋が内容確定済みで、いわゆるホワイトボードにはられた状態なのか、まだ書き途中からわからない ので下手に動かせない
• オンラインでもなんとかなるもんだなと思った
• Cacoo いいですね

ファシリテーター（私）の感想

場の空気がわからない というのが一番きつかったところです。悩んでるのか、考え込んでいるのか、ガリガリ付箋に書きたいことが山程あるのか、リモートだとどうしてもつかめない情報があります。今回、参加メンバーで「いま悩んでます」「ちょっと思いつきそうにないです」など、脳内を吐露してくれる方が数名いたのですが正直めちゃくちゃありがたかったです。オンラインだとこのあたりのボディランゲージを音声に変換する努力が、もしかしたら必要かもしれません。

一方で、オンラインの強みを感じたところも多々あります。全員が同じ画面を同じ大きさで見れていることの安心感は強かったですね。あとは付箋をコピペしたり、スクショをとって Backlog の wiki に転載したりと、生データが電子データであるというのは模造紙やホワイトボードに残っているケースに比べて終わった後の展開が楽でした。後でひっぱりだす労力がゼロにひとしいので、これだけでもフルリモートでやる価値はあるかもしれません。関連して、「後日どうしても再度集まる必要がある」という状況になった場合、オンラインだと復元しやすいというのがありました。時間の確保くらいです。オフラインだと、場所を用意して、付箋を貼り直して…だと思うので、これは明確なメリットです。

Cacoo はどうだったか

今回は Nulab のツールがSBGift様とクラスメソッド両方で利用できる状態だったこともあり、共同作業ツールとして Cacoo を選択しました。お互い使ったこともあるツールで、スムースにユーザーストーリーを作成することができました。良かった点は以下です：

• 共同作業メンバーのカーソルがリアルタイムで見られる
• 修正内容がリアルタイムで見られる
• 付箋はカスタム図形を用意しました。必要な作業にあわせてカスタム画像を用意できる点
• 動作が軽い

次に、このあたりがもっとよくなると便利だよね、という話になったポイントです：

• 8000px x 8000px 以上の領域が作れると良い。特に横幅に広く。4000px x 12000px などの領域が作れるとありがたい
• どうしてもメモリを使うのか、PC環境によっては一部図形がかけた状態になってしまうことがあった
• 誰が作った図形なのか、例えば図形を選択したときにどこかに表示されると嬉しい

次回以降の Try

皆様がオンラインで実施する場合は以下をケアしておくと良いと思います。

• 画面内に、各メンバーの「作業領域」となるエリアを用意するとよさそうです。Cacooの場合は、別シートでも良いかもしれません。動かして良い付箋なのか、それとも書き途中の付箋なのかがわかれば良いです
• こまめに休憩をとる。内容よりは時間できってもよさそう
• 積極的なガヤがあると、ファシリテーターの助けになります

準備編

ここが一番たいへんでしたが、振り返るとやっておいてよかったと思います。

ツールの検討

以下のとおりです。表にまとめておきます。

検討したツール	なぜ採用しなかったか
Google Jamboard	クラメソの場合 Google Drive のオブジェクトは社外共有不可能なポリシーであったため
miro	お客様にアカウントを作成いただく必要があった。 ツールに慣れる時間が惜しかった。
mural	お客様にアカウントを作成いただく必要があった。 無料期間が限定で、後からでも編集したいという要件があった。

Cacooは、SBGiftもクラスメソッドも普段使っているツールでアカウントがあり、ワークスペースに招待することで共同編集できるという点が嬉しいポイントでした。AWS構成図を作るときにも使っていてどのメンバーも触ったことがあるので、使い方で迷うことも少なく時間が節約できました。逆に、これらの課題がクリアできれば、miro や mural でも問題ないです。

ユーザーストーリーマッピングの流れを確認

ひたすら藤村さんのこのブログを見まくりました。

ユーザーストーリーマッピングをやってみた | Developers.IO

あとは、アジャイルサムライの該当しそうな部分も読んで「なぜそれをやるのか」を自分なりに整理しておきました。

アジャイルサムライ――達人開発者への道【委託】 - 達人出版会

アジェンダの作成

以下のようなアジェンダを用意し、Cacoo でどのような作業を行うことになるかシミュレートし、Cacooのシートをあらかじめ用意しました。

• 自己紹介、ワークショップの流れの説明
• リーンキャンバス作成
• インセプションデッキ作成
  • エレベーターピッチのみ
• ユーザーストーリーマッピング実施
  • バックボーン、ナラティブフローを整理
  • SBGift 営業メンバーからの要望もユーザーストーリーの形に落としていただき、マッピング
  • 直近のリリースターゲットを決める

Cacooでのカスタム図形（付箋）の用意

リモートふりかえり会をCacooを使ってファン・ダン・ラーン(Fun/Done/Learn)でやってみました！ | Cacooブログ

こちらの記事を拝見し、「誰が作った付箋か」がわかるようにすることは必須だなと考え、カスタム図形を用意することにしました。ただ、名前や顔アイコンだと、俯瞰したときにつぶれて誰が作ったものかわからなくなりそうだったので、付箋の色だけ分けて用意することにしました。また付箋のサイズは、「ボード全体（8000px 8000px）を表示したときにギリギリ文字が読めるくらい」に調整しました（280px 280px）。もう少し小さくてもよかったかもしれません。

　

当日の流れ

あとは、藤村さんのブログと同じコンテンツを消化していきました。以下では、オンラインならではの要素について記録しておきます。繰り返しになりますが、シートや付箋が電子データで残り、後で誰でも見られるというのはかなりのメリットです。

自己紹介、ワークショップの流れの説明

• 予想した所要時間：15分
• 実際の所要時間：15分

色分けしたカスタム図形の付箋を選んでもらい、その付箋に自己紹介を書いていただき、発言してもらいました。付箋選び=>テキスト記入はこの日繰り返す作業になるので、最初にやったという感じです。

リーンキャンバス作成

• 予想した所要時間：作成20分、整理15分
• 実際の所要時間：作成20分、整理20分

ビジネスモデルとして考慮するべき要素を盛り込んだ一枚のシートを作ります。今回は、⑦コスト構造と⑧収益の流れ は、ざっくりとした値で構わない、というルールにしました。収益構造については SBGift様側ですでに別途議論していただいていたのと、この場はユーザーストーリーを洗い出して開発のベースにすることが目的だったので、細かい数字を把握することに時間を使いすぎないようにしました。

このブログの進め方を参考にひとつずつ埋めていって、最後に認識をあわせるという流れで実施しました。

リーンキャンバス(Lean Canvas)とは？ テンプレートや事例、書き方などを紹介！ | BizMake Media

エレベーターピッチ

• 予想した所要時間：作成10分、整理10分
• 実際の所要時間：作成10分、整理15分

エレベーターピッチを作成しました。今回の試みは、付箋を俯瞰できるというオンラインの強みを活かすことです。全員各々でエレベーターピッチを作り、あとで共通点やこれはいいね！となったものをまとめることにしました。結果的にこれは成功でした。全員、最終成果物と自分の意見のギャップを把握できるので、エレベーターピッチの内容が頭にのこるというメリットがあります。

↓各メンバーが自分のエレベーターピッチを作成している様子

ユーザーストーリーマッピングの作成と整理

• 予想した所要時間：作成30分、整理30分
• 実際の所要時間： 作成40分、整理1時間（終わらず）

メインイベント、ユーザーストーリーマッピングの作成です。以下のルールを定めました。

* ユーザーストーリーを書き出し、ナラティブフローごとにカテゴライズする
* ユーザーストーリーは、「＜ユーザーの種類＞として＜達成したいゴール＞したい/できる」という形でできれば書く（例：事業者として映画チケットを一括で発行できる）
* 上ほど優先度が高いユーザーストーリーになる
* 左右は、 バックボーン、ナラティブフロー のまとまりを表す
* バックボーン、ナラティブフローは、勝手につくってOK
* 人の付箋を動かしてOK（上下左右）

最大の反省点です。この作業、本来であれば誰の付箋だろうがガンガンに動かしてカテゴライズしていいし、優先度も動かしてOKという原則があり、これが終わっていれば整理にそんなに時間はかからないだろうと踏んでいました。実際には冒頭のまとめで述べたとおり、人が作成した付箋が作成中なのか移動済みなのかわからないので、下手に触れない という状態になってしまいました。結果としてほぼ未整理の状態からユーザーストーリーを確認していくことになり、後日編も含めるとこれだけで3時間はかかった計算です。

ただ、副作用というか、いいこともありました。結果的にユーザーストーリーについてはひとつずつ整理していくことになったので、共通認識の醸成ぶりは全員納得できるレベルのものになったと振り返ります。

ユーザーストーリーマッピングの整理 後日

• 予想した所要時間：2時間
• 実際の所要時間： 2時間30分

ということで後日再度お時間をいただき、ユーザーストーリーを整理するためだけの時間を頂戴しました。こちら、正直なところ私はもう一度時間をとることに二の足を踏んでしまっていたのですが、SBGift 鈴木様が「せっかくここまでやったので、また時間とってやりましょう。うちは全然大丈夫です」と言ってくださり迷いはなくなりました。すべてのストーリーを整理し終え、目的の成果物を作成することができました。

まとめ

オンラインならではの良いところと、苦労したところどちらもありましたが、ツールを使い、準備を行えば、フルリモートでユーザーストーリーマッピングの作成は可能です。１つ言えるのは、かなりの時間を使うことになりますが、全員が納得するまでやり遂げることが大事です。中途半端で駆け足に進めるよりは、納得するまでやりたいので、たくさん時間ください！というスタンスのほうが良いです。もちろん、相応の準備をした上で、という前提になります。

オンラインでのコラボレーションを考えている方の参考になれば幸いです。