コラボレーティブプロトタイピング とは？

筆者たちは、 プロトタイプ と部門横断的な連携を強化する新しい方法を常に探していますが、 コラボレーティブプロトタイピング は、1日で プロトタイプ を作成する「超効率的な」スプリント手法です。  

デザイナーとデベロッパーの連携を究極のレベルにまで高めませんか？デザインに「信頼できる唯一の情報源（Single source of truth）」を導入し、デベロッパーが 1 対 1 で再現できる忠実度の高いインタラクティブなプロトタイプを数分で作成しましょう。何百ものチームを統合したこの革新的なテクノロジーの詳細についてはMergeについてをぜひご覧ください。  

コラボレーティブプロトタイピング とは

コラボレーティブプロトタイピング  （ ラピッド・コラボレーティブ・プロトタイピング ）は、オースティンを拠点とするデザイン会社「Voltage Control 社」の社長であるダグラス・ファーガソン氏によって生み出されたデザインスプリントの方法論です。  

通常デザインスプリントが５日かかるのに対し、 コラボレーティブ・プロトタイピング のプロセスはわずか１日で結果を出します。チームメンバーは、1枚のデジタルホワイトボード上で並行して作業を行い、デザインツールを使って共同でプロトタイプを作成します。

これは基本的なプロトタイプですが、デザインチームが1日のうちにアイデアのテストとイテレーションを始めることができ、デザインプロセスのスタートラインに立つことができるのです。

コラボレーティブ・プロトタイピングの利点

  ダグラス・ファーガソン氏の「 ラピッド・コラボレーティブ・プロトタイピング 」の最大の利点は、多くのアイデアを効率的に探索できることです。彼は”この手法はデザインスプリントチーム全体を解き放ち、全員が効率的かつ生産的に貢献できるようサポートします。“と記事で述べています。  

 ラピッド・コラボレーティブ・プロトタイピング は、デザインスプリントに1週間を割けない場合、1日で同等の結果を出すことができます。その日の終わりには、プロトタイピングとテストのイテレーションのプロセスを開始するための基本的なプロトタイプがチームの手に入ります。

コラボレーティブ・プロトタイピングは、チームワークの訓練としても優秀であり、組織は、デザイナーのグループや部門横断的なチームを使って、多くのアイデアを開発し、最適なソリューションでイテレーションを行えます。  

最後に、ラピッド・コラボレーティブ・プロトタイピングは、遠隔地でも対面での時と同じように効果的です。ダグラスのチームはデジタルホワイトボードとデザインツールを使ってコラボレーティブ・プロトタイピングを行うことで、誰もが参加し、サッとアイデアを共有できるようにしています。  

チームメンバーが同じツールに接続することで、全員が集中し、様々な コラボレーティブ・プロトタイピング のタスクに取り組むことができます。このプロトタイプの手法は非常に短く、どこからでも接続できるため、通常5日間のデザインスプリントに参加する時間がない多忙なステークホルダーにとって、よりアクセスしやすいプロセスになっています。  

 ラピッドコラボレーティブプロトタイピング のプロセス

  ここでは、7つのステップからなる ラピッド・コラボレーティブ・プロトタイピング のプロセスの概要をご紹介します。

注：このプロセスではスプリントの用語と手法が使用されています。より多くのコンテクストと方法論の理解のために、デザインスプリントに関するこの記事をご確認ください。  

準備として

  以下は、コラボレーティブ・プロトタイピングのセッションに必要なものです：  

• 時間：1日8時間
• 参加者：3〜12名（標準的なデザインスプリントでは7名が最適）、うち1名が決定権者
• デザインファシリテーター：1名（デザインスプリントのフレームワークを理解していることが必須）

  ツール（意見出しや協力のために、全員以下のようなツールへのアクセスが必須）：  

• デジタルホワイトボード：Mural、Miro、Google Jamboard （時間の節約にダグラスのCollaborative Prototyping Mural Templateをコピーするといいでしょう）
• デザインツール： UXPin with Merge –完全に機能するプロトタイプを作成するためのコラボレーティブなデザインツールで、そこにインタラクティブなコンポーネントを持ち込んでプロトタイプを構築することができる。

  対面式のコラボレーティブ・プロトタイピング：チームメンバーがノートPCを使い、互いに会話できるように、ボードルーム形式のレイアウトを使う。  

リモートでのコラボレーティブ・プロトタイピング：全員がZoomや他のビデオ会議ソフトを使って接続。  

もし、 コラボレーティブプロトタイピング をチームが行ったことがないのであれば、何が期待され、どのような形式で行われるかを伝える（参考としてこの記事の共有もいいでしょう）。  

ステップ１：イントロ（５分）

  ラピッド・プロトタイピングのプロセスを紹介し、以下のステップと、”（どのような問題を解決しようとしているのか）” という「本日の目的 」を説明します。  

ステップ２：ストーリーボード（６０〜９０分）

  ストーリーボードは、オンボーディングのシーケンスやeコマースのチェックアウトなど、プロトタイプ化したいユーザーフローのマッピングが必要であり、この最初のステップで、問題に対する理解の共有や、その日のゴールについてチームメンバーの足並みを揃えることができます。  

ダグラスは、あまり細かいことを考えずに、フローの中の4つか5つの重要な瞬間に焦点を当てることを勧めています。このプロトタイプは、最終的な解決策ではなく、さらなるイテレーションのための基礎であることを覚えておきましょう。  

各チームメンバーは、テスト中に遭遇する７ステップを書き出します。それをグループ内で検討し、ベストだと思う４つないし５つを投票で決めます。ファシリテーターは、その５つのステップをホワイトボードに付箋で書き、チームは各ステップに詳細を書き加えてストーリーを強化し、不足しているギャップを埋めていきます。  

”カンバン”を作って可視化する（３０分）

  カンバンには、以下のように付箋に書かれたタスクが３列で記載されています： 

• すること
• 実施中
• 完了

  このタスクを優先順位で並べ、最も高いものを一番上にします。チームメンバーは、付箋にイニシャルを書き込むことでタスクを自己選択し、常に優先順位の高いものから優先的に取り組むことができます。  

対面式のコラボレーティブ・プロトタイピングのセッションを行う場合、常に目にすることができ、全員が進捗を確認することができるということから、物理的なホワイトボードを使うのがベストです。  

ステップ４：ストーリーボードのナレーション（２０分）

  ファシリテーターは、ストーリーボードに従って皆に語りながら、それをまとめていき、語りながらメモをさらに追加することもあります。チームメンバーが個別にメモを取れば、それをファシリテーターがその後にカンバンに追加します。  

ステップ５：コラボレーティブプロトタイピング（４時間）

  プロトタイプの各画面を表すセクションに分割された共有ホワイトボードを作成し、チームメンバーが、カンバン作業に基づいて各セクションにアセットやコンテンツを配置します。  

ステッチャー（デザインファシリテーター）は、ホワイトボード上のアセットを整理し、プロトタイピングのために確実にすべて正確であるようにします。

同時に、プロトタイプ作成者は各画面の制作にデザインツールを使い、ホワイトボードからコンテンツやアセットを取得して、各画面のモックアップを制作していきます。 ​​

チームメンバーは、ホワイトボードやプロトタイプ上で「コメント」や「アノテーション」を通じてコミュニケーションを図り、最大限に効率化します。ホワイトボードやプロトタイプへのフィードバックを共有することで、ファシリテーターがタスクを把握し、必要なフォローアップを行うことができるのです。

この連携によるワークフローで、生産性と効率を最大化するために、各タスクが次のタスクにフィードバックされる「プロトタイピングの生産ライン」ができます。  

ステップ６：対話性の追加

  モックアップが完成したら、インタラクションやページフローを追加して、ユーザーフローを仕上げます。UXPinのインタラクションでは、デザイナーはインタラクションをコピーしたり複製したりすることができ、メンバーの一員が作成したインタラクションを他のメンバーがプロトタイプ全体に複製することで、共同作業によるプロトタイピングの効率を最大化することができます。  

ステップ７： プロトタイプ の再生

最終ステップでは、プロトタイプを確認して、修正があればタスクとしてリストアップしてカンバンに追加され、デザインファシリテーターは、プロトタイプをクリックしながら、各ステップについて議論します。同時に、グループは、例えば再生中に、入力フィールドにエラーメッセージがないことにファシリテーターが気づいた時など、プロトタイプを修正するためのタスクを作成します。  

チームメンバーは、その修正部分をカンバンに追加し、テスト前に修正するよう割り当てます。  

UXPin Mergeによるコラボレーティブプロトタイピング

  ダグラスの方法は、最初のプロジェクトを得るには最適です。ただ、開発に移行できるプロトタイプを完成させることができるチームはほとんどなく、プロトタイプがデザインハンドオフに対応するには、デザイナーはあらゆる状態やマイクロインタラクションなどを考える必要があります。それにより、プロトタイプの作成には、もうしばらく時間がかかるのです。  

そこで、プロトタイプの精度と効率を大幅に上げることができるのが、UXPin Mergeです。アイデア出しから、テストに使える完全なプロトタイプまで、1日もかからずに完成させることができます。これで、作成したいアプリまたは Web サイトのインタラクティブなビルディング ブロックを使用できます。  

内蔵されたMUI ライブラリーを使うか、製品のデザイン システムに接続して、完全に機能するプロトタイプを数分で構築しませんか？ちなみに、PayPal の製品デザイナーは、同社のカスタム Fluent UIのデザイン システムを使って、最終製品のように見える 1 ページの Merge プロトタイプを 10 分もかからず作成します-　迅速なコラボレーティブ・プロトタイピングにピッタリですね。  

「この新しい UXPin のアプローチでは、より協調的で統合的なデザインプロセスが実現されています。デザイン、プロトタイプ、開発を分けるのではなく、UXPinによって、プロセスを通してエンジニアリングと製品チームと関わって統合的なフローを作ることができるのです。」 – Paypal社 UXリード EPX 、エリカ・ライダー氏  

Mergeの仕組み

  Mergeでは、デザインシステムによって定められた基本的なインタラクション、ステート、色、サイズ変更、およびその他のプロパティを備えた対話型コンポーネントを使って、 デザイナーがプロトタイプを構築できるように、【デザインシステム】と【UXPinのデザインエディタ】を同期させることができます。

Mergeのコンポーネントはデフォルトで対話型になっているため、デザイナーはプロジェクトごとにUI（ユーザーインターフェース）要素にインタラクションを追加する数え切れないほどの手間を省くことができます。以下の例では、MUI ライブラリからの UI コンポーネントがいくつか示されていますが、それにはすべてデフォルトの MUI インタラクションがあります。ちなみに我々は、このようなコンポーネントをキャンバス上にドラッグして、【プレビュー】を押しただけです。

このようなデフォルトのインタラクションにより、Merge で完璧なコラボレーティブ・プロトタイピングが実現され、複数の人が同じプロジェクトで作業する場合の一貫性が最大化されます。インタラクティブなコンポーネントを使うことにより、デザイナーはより少ないインタラクションの作成で済み、時間を節約しながらナビゲーションとユーザー フローにより集中することができるのです。

例えば、画像ベースのデザインツールを使って、ダイナミックで機能的な日付ピッカーを作成するのは不可能です。無限に広がる日付の可能性を持つこのコンポーネントは、デザイナーがいくらフレームを使っても再現できないのです。

そこで、UXPin Mergeがあれば、デザイナーはコンポーネントライブラリから完全な機能を持つ日付ピッカーをキャンバスにドラッグして、すぐに使うことができます。  

このプロトタイプの効率化により、デザイナーはラピッド・コラボレーティブ・プロトタイピングにおいて、より短時間で大幅に優れた結果を得ることができるのです。  

連携をもっとよくする

  UXPinのコメント機能で、チームメンバーはお互いにコメントを割り当てることができ、アクションを起こすと【解決済み】としてマークされるので、対面またはリモートでの共同プロトタイピングセッションに最適です。また、チームメンバーは、以下の条件でコメントをフィルターにかけることもできます：  

• 自分に割り当てられたコメント
• 割り当てられてないコメント
• 全ページのコメント
• 未解決のコメント

  また、ステークホルダーがUXPinのアカウントを持っていなくても、パブリックコメントを通じてプロトタイプのプレビューやフィードバックの追加を呼びかけることができます。  

有益なテスト結果

  より質の高いプロトタイプは、テストにおいてより良い結果をもたらします。エンドユーザーはテスト中に最終製品と同じように Mergeのプロトタイプを操作することができ、デザイナーは有益で実用的な結果を得て、より速やかにイテレーションをして改善することができます。

また、テキストフィールドが使えない理由や、日付と時刻を選択できない理由を尋ねる代わりにプロトタイプに関与して、あらゆる機能を使うことができるステークホルダーから、デザイナーはより良いフィードバックを得ることもできます。  

「UXPinを使うことで、ステークホルダーから非常に速くフィードバックを頂くことができます。UXPinでは、プロトタイプに直接コメントを書き込むことができ、UXPinのコメント機能は、私たちが対応した後に、コメントを【解決済み】としてマークできるので、とても便利です。」- Paypal社、UXリード EPX　エリカ・ライダー氏

世界最先端のコラボレーティブ・プロトタイピング ツールでより良い結果を得ませんか。詳細とアクセスのリクエスト方法については、Merge ページをぜひご覧ください。