共同作業で制作効率300%UP!?コラボレーティブデザインスプリントを体験してきた@UX道場 Meetup 04【参加レポート】

こんにちは@_yonecoです。

この記事は8月5日に開催された、UX道場 Meetup 04「受託Web制作の改革体験！共同作業でデザインをすばやくブラシュアップ」の参加レポートです。

ざっくりどんなイベントだったか？

イベントのメインは「コラボレーティブデザインスプリント」を体験する！というイベントです。なんと、これをチームで行うことでプロダクトの制作効率がめちゃくちゃが上がるらしい…！

と聞いて興味深く、思わず参加ボタンを押してしまったのですが、結論から言うと、学びの多いイベントでした。何が学べたかをざっくり紹介すると…

といった部分が個人的に刺さりました。チームを組んでいてもうまくコミュニケーションが取れなかったり、時間がないとつい一人でまとめがちというか、早い段階から他のメンバーの気づきや考えを上手く拾ってまとめることが出来ないこともあると思うのですが、そういった点を課題に感じている方にとっては参考になる手法を学べる内容になっていました。

講義からワークまでしっかりと参加して、久しぶりにワクワクする気持ちになれたので、その様子について振り返りがてら、レポートをがっつりと書きました！

つたない文章で伝わりにくい点もあるかと思いますが、興味を持たれた方はぜひ読んでいただけるとうれしいです。それでは早速レポートしていきます。

はじめに〜開場＆挨拶〜

会場は五反田にあるfreee株式会社さん。写真を見ていただければわかると思うのですが、とても素敵な会場でした。

左奥にバーカウンターもあってシャレオツ！

会場には飲み物とおやつが用意してあり、セミナーを受けながら自由に食べたり飲んだりしてOKでした。こういうちょっとした気遣いは嬉しいですね。XDのイベントということもあり、ステッカーなども置いてあったのですが写真を取るのを忘れてしまったのが残念…！

イベントは、アドビ システムズ株式会社の轟さんの挨拶から始まり、FREEE株式会社のUXデザイナー井原さんから会場案内が入り、そして今回のイベントの登壇者である株式会社メンバーズでサービスデザイナーをしている川田学さんの挨拶に移りメインの講義が始まりました。

コラボレーティブデザインスプリントを体験しよう

コラボレーティブデザインスプリントはメンバーズではフレームワークとして確立している手法なのだそうです。ビジョンとコンセプトとストラクションというのを分けて議論することで「体験」しやすくするとのお話でした。

私たちのチームでは「デザイン」という行為を、「形のないもののデザイン」と「形のデザイン」に分けています。前者は「形のないアイデアや体験に、他の人にも伝えるための形を与えること」と定義しています。後者は旧来よりの「モノ」のデザインやビジュアルデザインです。この2つのデザインを、他者を巻き込んで一緒に行うことを「コラボレーティブデザイン」と呼んでいます。

「コラボレーティブデザインスプリント」は、時間を短く区切り定型化することで、コラボレーティブデザインを効率的に行えるようにしたフレームワークです。

コラボレーティブデザインにおける、デザイナーのマインドセットは、「他の人の頭も借りてつくる」です。自分の頭だけでは考えきれないスコープに対して、他者の知識や経験などを借りて、「一緒」にデザインをしていきます。「借りる」としているのは、最後の「形のデザイン」は、デザイナーの仕事であることを忘れないようにするためです。

3つの視点でコラボレーションするデザイン手法「コラボレーティブデザインスプリント」 | アドビUX道場 #UXDojo

つまり、一人で悩まずに、チームみんなの頭を借りて効率よくデザインを作ってしまう！ということですね。講師の川田さんはAdobe Blog内でもコラボレーティブデザインスプリントについて記事を執筆されているので、詳しく知りたい方は上記のリンクから読んでみるとより理解が深まると思います。

コラボレーティブデザインスプリントをやってみた率直な感想として、実際にやってみると「あー！こんなふうに考えてまとめていくのか。なるほど！チームで短時間で一気に考えてアウトプットが加速する感覚があるな！」と体感することができました。また開催する機会があるならばもう一度振り返りに受けに行きたいと思ってます。

言葉だけだとイマイチ頭に入って来ないぞ！やってみないとわからないなぁ！という方にもお伝えできるようにワークの様子も細かく紹介していければと思います。（ただ、私の理解が若干乏しい部分もあるので、そこは大目に見ていただけると嬉しいです。）ではさっそく今回のメインのワークの内容に入りますね。

本日のスケジュール

ワークに入る際に本日のスケジュールが出てきました。この時、なかなかすごい量のことを短時間でやり遂げる必要があるのだということを把握しました。その本日のスケジュールがこちら↓

rap(min)のところを見ていただくとわかる通り、分刻みでとにかく時間がない！数分で把握して数十分でアウトプットを出していかなくてはいけない。これを見て最初は少しビビってしまい、背筋がシャキーンとしました。

ついていけるかしら…！集中せねば！

ワーク開始！

チームに別れてさっそくワークの開始です。私達のチームはテーブルにいた3人(全員女性)。デザイナー２人とプロデューサー１人という構成でした。（私はデザイナー枠です）軽く挨拶を済ませ、まずはみんなで前提の把握からはじめます。

前提の説明

チーム全員で以下の前提を把握していきます。

企業の情報

あなたは、A社に勤めるデザイナーです。今回S社から「初めて家を購入する人をサポートする」サービスデザインを依頼されました。S社は家探しをする人に向けた情報を提供している企業で、気になった物件を見つけて、担当する不動産仲介業者への連絡を促すことで収益を得る事業を展開してきた。近年は「探す」にとどまらず、住みたい家を決める、家で暮らす、といった領域までサービスの範囲を広げはじめている。

ビジョン

最近は家を買わないライフスタイルもでてきているが、人生において最も大きな買い物である家を買うということは、「この人と新しい生活を始めるんだ」という不安はありながらも、未来に対する希望を含んだ決意表目にもなるんだと思う二人にとって、形式的な結婚式での決意表明ではなく、生活をより具体的にイメージしながら実感のある決意表明にすることで、改めて二人の関係を前向きに作っていくんだと思い出すきっかけにしてほしい。

一生一緒にいることが幸せの全てだとは思わないが、あえて家を買って二人で住むという選択をする二人が、困難な時にすぐに諦めるのではなく、お互いが努力しながら、自分たちで幸せを作っていこうと思えるようにする。

ペルソナ

カスタマージャーニーマップ

なかなかの情報量に驚きです！短時間で把握できるかな…！しかし、こういう制作案件ありそうだな、というリアリティもあります。

まさかカスタマージャーニーマップまで用意してあるとは…！
本格的！！

自分が関わって作ったわけではないので、スッと把握するのは難しかったですが、限られた時間の中で取捨選択し、全体の大枠をなんとか把握していきます。

①取り組むべきギャップを決める

大枠を把握したら、はじめに前提の中から取り組むべきギャップは何かを探していきます。ビジョンと人（ペルソナ＆カスタマージャニーマップ）から取り組むべきギャップを決めていき、どういった印象を受けたかを付箋に書いていきます。

私達のチームではこんな言葉が出てきました。

ビジョンではすごくキラキラした印象を受けたけれど、ペルソナを読むと理想とのすごいギャップを感じる…

旦那さんはお金のことをとても気にしているよね。売るとなったときに売れるか不安とか。現実感あるね。

結婚式のような誓いっぽさがないし、希望を含んだ決意表明がないよね。エモさ！がない！

忙しくて先のことまで考えられてないね。ビジョンにあるようなことを考える余裕がないという印象。

旦那さんのペルソナだからかもしれないけど、妻との共同作業感がないよね。基本旦那さんが決めている感じ

自分で付箋に書いた情報を元に言葉で補足しながら、それぞれが感じた意見やギャップの内容を共有をしていきます。私はなかなか言語化できなくて唸っていたのですが、メンバーからどんどん意見が出てきたお陰で、思考が引っ張られてだいぶ助かりました。

②「体験のコンセプトVer1.0」デザイン 

ここではギャップをどんな体験で解決するのかを決めます。まずは個人で考えてみて、その後、意見を持ち寄ってチームで話し合います。先程出てきたギャップの中から、何を選ぶかを絞り込めていなかったのでここでまた悩みました。しかし悩んでいる時間もあまりないので早くアウトプットしなくてはなりません。なんとか無理やりにでも紙に書き出していきます。

各々が考えた結果をチームに持ち寄ると、見ているポイントや視点が違うので、意見が色々と出てきました。その中でもひときわ目立った意見としては、『共同作業感』に対するギャップと『お金』と理想に対するギャップでした。

これらを何らかの体験で解決できないかな。

２つのギャップを両方解決できないかな。

一つに絞るべきか。

③「体験の概要Ver1.0」デザイン(5コマで体験を表現)

次に、CJM(カスタマージャーニーマップ)を活用しTO-BE（プランニング）を作っていきます。５コマでどういった体験があって、どういう感情曲線になっていくのかを表現していく作業です。

うーん。。。

5コマでどう分けて考えるべきか、またギャップへの解決方法は具体的にどうするのか、それに対する感情曲線がどう動いていくのか、考えることが増えて、具体的な表現に辿り着けず、チームであれやこれやと話し合い。

先程あげた『共同作業感』に対するギャップと『お金』と理想に対するギャップに対してどのような体験で解決していくのかを今一度整理するために、ビジョンに少し振り返ることにしました。

最近は家を買わないライフスタイルもでてきているが、人生において最も大きな買い物である家を買うということは、「この人と新しい生活を始めるんだ」という不安はありながらも、未来に対する希望を含んだ決意表目にもなるんだと思う二人にとって、形式的な結婚式での決意表明ではなく、生活をより具体的にイメージしながら実感のある決意表明にすることで、改めて二人の関係を前向きに作っていくんだと思い出すきっかけにしてほしい。

一生一緒にいることが幸せの全てだとは思わないが、あえて家を買って二人で住むという選択をする二人が、困難な時にすぐに諦めるのではなく、お互いが努力しながら、自分たちで幸せを作っていこうと思えるようにする。

ビジョンの中に「決意表明」とあったけれど、どうやったら決意表明ができるのか。そもそも、結婚式での決意表明ってなんで生まれるのかな。

結婚式ではお互いの幼少期から出会い、デートや結婚に至るまでを振り替えれるムービーが流れたり、家族や友達などお互いの身近な人から言葉をもらえたりとしているうちに、『この人と結婚して２人で生きていくんだな。』という実感や意識が生まれて、それが二人の関係を前向きに作っていくんだと思い出すきっかけになるのではないかな。

もしかして、結婚式で流れるビデオ(動画)とかインタビューとかは決意表明に対する何らかのヒントになったりする？

体験の概要の３コマ目に書いた未来提案に絡められそうな気もするね。

家を選ぶまでを動画にまとめてストーリーにできるようなサービスに落とし込んでも良いかもしれない。

そんな話し合いが始まりましたが、ここでは具体的な概要に落とし込めず、時間切れに。

④「体験のプロトタイプVer1.0」制作

次は体験のプロトタイプを作成します。「体験の概要」で作成した5コマのシーンを紐解いていって、具体的にどういうアイディアが入るかということも併せて考えていく作業です。

チームの３人それぞれが、１つの視点ではなく複数の視点でサービスというのを捉えるために、データ、シナリオ、プロダクトという３つの役割を３人で分けてチームで取り組みます。チームの誰が何を担当するかを決めたら早速個人に分かれてそれぞれの視点でプロトタイプを作ります。その後、アウトプットをチームに持ち寄って話し合い、ビジュアルとしてプロトタイプに落とし込んでいくという作業に入ります。

プロトタイプ

私がXDを持っていたこともありプロダクトを担当しました。前の話し合いがまとまっていない状態ではあったものの、作ろうとしているのは「動画が撮影できて、残せて、振り替えれるものなのではないか。」という話に落ち着きそうだったので、プロトタイプとして最初に考えたのはカメラアプリです。

マンションの購入を検討している様子や、マンションの下見に行った様子をログとして残すような形です。このアプリを後から振り返って眺めることで『共同作業感』に対するギャップが払拭して、一緒に選んだ体験を忘れないように思い出に残せるというもの。

シナリオ

シナリオの作り方ですが、ワードやメモ帳でまとめてもよいそうなのですが、そういったソフトが使えない時、川田さんの場合は付箋を貼ってまとめていくそうです。

川田さん

なるべく１シーンごとに横に書いていくと直しやすかったりします。このへんちょっと違和感あるな、っていうときは剥がして、新しく貼り直せばよいです。

手書きの中でも上手くやるという方法としてこんなやり方もあるとのこと。意見を参考に他のメンバーが付箋でまとめてくれました。

なんと私がプロトタイプを作っている間に、良い感じのシナリオが…！！前の話し合いの時に出た「家を選ぶまでを動画にまとめてストーリーにできるようなサービスが良いかもしれない」という内容から膨らませて、左上を起点に起承転結から必要な機能までを付箋でポイントを押さえてまとめてもらいました。

ゴールは「めちゃエモ」！！

メモリアルムービーを作ることで、『共同作業感』に対するギャップを埋めていき、お金のことを考えすぎてテンションが下がらないように、計算をサポートしてくれたり、はげましてくれる機能を入れて『お金』と理想に対するギャップの部分を埋めていくという、最初にあげた２つのギャップがうまく収まるような形となりました。

ここまでで上がった内容をプロトタイプに落とし込んで行きます。

やりたい機能が増えたことによってカメラアプリの枠からはだいぶはみ出ていきます。

⑤ここまで作成したものを更にブラッシュアップ！

コンセプトVer2.0を作る

体験まで具体的にできているからこそ、もう一度コンセプトに戻って考えるターンです。ここまで出来上がるとおそらく体験とコンセプトには何らかのギャップが生まれているとのこと。そのギャップをコンセプトVer2.0としてブラッシュアップしていきます。

私達のチームではビジョンが最初の段階で一つの言葉に絞り込めていなかったので、体験を踏まえてもう一度、コンセプトを考えた結果、以下のようになりました。

最初は『共同作業感』に対するギャップと『お金』と理想に対するギャップでしたが、最終的には『２人共通の未来のビジョンがない』ことに対して、『２人で未来のきずなを深める体験』を提案する。という形に落とし込まれました。

体験の概要Ver2.0を作る

コンセプトが変わったことによって今度は体験のブラッシュアップが必要になってきます。コンセプトVer2.0を考えた際に、もっとこうしたら良いんじゃないかという新しい発想やアイディアが生まれるので、それらを体験のなかに組み込んでいく作業です。

最初はまとまりきれなかった体験の概要ですが、Ver2にしてようやく形にすることができました。全体の流れはまさにこんな感じ。２コマ目で気持ちが最低に落ち込むのですが、アプリを通じて最後には最高の体験になるという感情曲線です。3コマ目からのストーリーは以下の流れになります。

体験のプロトタイプVer2.0の作成

これまでの流れを受けて、プロトタイプに修正や改修を加えていきます。

短時間でまとめた故、荒い部分も勿論あるのですが、10分でまとめたにしてはなかなかのボリュームに仕上がりました。メンバーそれぞれが考えていたことがうまいこと集約した形です。

プレゼン

最後にできあがったものを横のチームとプレゼン対決に。

詳細は省きますが、横のチームのプレゼンも私達のチームとは全く違う視点で考えられており、アウトプットの形も出てきたプロダクトも全然違うものだったので、なるほど〜！そういうまとめ方もあるのか。と勉強になりました。

さいごに【イベントの感想】

短い時間の中でチームメンバーの知識や経験を織り交ぜながら思考していくことで、ブレの少ないコンセプトやプロトタイプをあっという間に作り上げるという体験ができる良いイベントでした。

最初にも少しお伝えしましたが、一人で悶々と考えたりダラダラと話すよりも、時間が区切られていることでアウトプットへのスピードが早く、チームの考えを一つの形にまとめることができたので、「コラボレーティブデザインスプリント」とはこういうことなんだなー！３人なら３倍の力でまとめられるのだな！と体感できました。

しかし、時間が無い中でまとめるのは、なかなか大変だった…！
でも、かなり勉強になったなー！

とにかく時間がなかったので、終始ドキドキしておりました。でもその緊張感がまた良かったのかもしれないですね。プロトタイプを作る時間より考えて意見を出し合っている時間のほうが多かったのですが、しかしこんな短時間でよくまとまったなと。これがスプリントと言われればなるほどそうかと納得できます。個人で考えて、チームに持ち寄って考えて、の繰り返しで、それぞれの思考とチームの一体感が醸成されていったように感じられて、そこはとても面白かったです。

もう少し時間があったなら、他のチームのアウトプットを全部見てみたかったな。と思ったのと、最後に懇親会のような他のチームと交流する時間があると更に良いかもしれませんね。

あと、ワークは大満足だったのですが、講義の中で、UXの用語や話への理解がついていけずに焦った部分もあったので、もう少しUX周りを学ばなくてはという個人的な課題も手に入りました。勉強せねば…。

コラボレーティブデザインスプリントは、「プロダクトをこれから作り始めるんだけど、どうやってみんなの意見を形にしたらよいかわからない。」と悩んでいる事業会社のデザイナーさんや、「なんとなく形にしたいものは見えているのだけど、時間のない中でどのように言語化して伝えるのが適切なのかわからない」と悩んでいるディレクターやプロデューサーさんには最適な手法だと思います。

もし、このブログを読んでコラボレーティブデザインスプリントやAdobe UX道場に興味が湧いた方は以下のリンクから最新情報が拾えると思いますのでご参考までに。

以上、UX道場 Meetup 04「受託Web制作の改革体験！共同作業でデザインをすばやくブラシュアップ」の参加レポートをお届けしました。

それでは〜！