どこでもアイデア出しの会議ができるAdobe XDのプラグイン「Whiteboard」を開発しました #AdobeXD

Creative Cloud UI/UX & Web

同じ部屋にいても地球の反対側からでも、Adobe XDを使ったホワイトボード会議で新しいアイデアを一緒に考えられるようになりました。

ほんの数か月前、私たちが住んでいた世界は全く別のものでした。現在、デザインチームはほぼすべてのオフィス作業を完全なリモートワークに切り替えています。私たちはみな、前例のないほどの混乱を経験し、気軽にチームメイトの手を借りたり、向き合って一緒にスケッチをしたり、同じ部屋でバーチャル空間を使ってデザイン思考をしたりできない状況に置かれてしまいました。そこで、Adobe Designチームは、Adobe XDの新機能「共同編集」を有効に活用し、リモートワークがもたらした環境の変化に対応するためのAdobe XD用のプラグイン「Whiteboard」を開発しました。

Whiteboardとは?

Whiteboardは、遠隔地に分散したチームをAdobe XD上で1つにまとめるための、ビジュアルコラボレーションプラグインです。このプラグインは、いつでもどこにいてもデザインチームがイノベーションを起こせるように、共同作業によるアイデア出しやスケッチの共有を実現するものです。特に、リモートワークに移行したばかりの人々にとって、Adobe XDの画面から離れることなく簡単にホワイトボード会議を利用できるようになっています。XDのリアルタイム共同作業の機能を活用することで、人気のデザイン思考やアジャイル開発フレームワークの手法をとりながら、あるいは手描きのスケッチを使いながら、リモートで仕事を完了できるよう、イノベーション精神あふれるチームを支援します。

Whiteboardの使い方は?

Whiteboardプラグインの「使い方」パネルにも説明がありますが、チームが簡単にプラグインを使い始められるように、改めてこちらに使い方の手順をご用意しました。Adobe XDの新機能である共同編集というコラボレーション機能を理解するためにも、ぜひお読みいただきたいガイドです。

XDを最新版にアップデート

共同編集はまだベータ版の機能で、すべてのユーザーが同じバージョンのXDを使用する必要があるため、チーム全員のXDを最新バージョンに揃えてください。全員が同じバージョンを使用していれば、ホワイトボード会議のコラボレーションに必要な共同編集機能が利用可能な状態になります。もちろん、その他の最新機能すべても利用可能になります。

クラウドドキュメントとして保存する

クラウドドキュメントとは、対応するアプリ上で開いたり編集したりできる、クラウドネイティブのファイルのことです。クラウドドキュメントを使えば、どこにいても、常にすべてのデバイスでの作業が更新されます。XDでコラボレーションを行うには、まずファイルをローカルマシンにではなく、クラウドドキュメントとして保存する必要があります。この手順が共同編集を使用する前提となります。

XDで共同編集モードを使用する

現在ベータ版として提供されている共同編集は、XDの画面内で他のデザイナーとリアルタイムに共同作業ができる機能です。他のチームメンバーをドキュメントに招待することで、同じホワイトボード会議やブレインストーミングに参加してもらうことができます。他のデザイナーを招待するには、画面右上の「ドキュメントに招待」アイコンをクリックします。以下の画像をご参照ください。

テンプレートを使ってすぐにスタートする

Whiteboardプラグインは、デザイナーであるかどうかに関わらず、ホワイトボード会議やブレインストーミングのツールとしてXDをお使いいただけるよう、遠隔地に分散したチームを念頭に置いて開発されました。ブレインストーミング、ドローイング、フローチャート、チーム管理など、いくつかのカテゴリーを設けています。また、一般的なデザイン思考フレームワークや、私たちアドビのチーム自身がリモートワークをするうえで必要だと思ったアクティビティなど、ブレインストーミングおよびホワイトボード会議に役立つテンプレートを集めました。ホワイトボード会議のテンプレートは、時間を節約し、チームとのコラボレーションをすぐに始められるようにご用意したもので、皆さんやチームがデザイン思考を実践する際のガイドとしてもお役立ていただけるものです。

エレメントで彩りを添える

テンプレートに含まれていないビジュアル素材が必要な場合や、テンプレートなしでコラボレーションをスタートする場合のために、プラグインにはビジュアル素材も豊富にご用意しています。グリッドや枠線の描画からフローチャート、アイコン、そしてもちろんデザイン思考につきもののポストイットまで、アイデアを形にするために役立つものがそこにあります。また、エレメントを選択するとカラースウォッチが現れ、色を変更することもできます。さらに、エレメントはサイズの拡大と縮小が自在で、簡単なスケッチ作成にも使えるよう設計されています。

お絵描きもできます

フリーハンドのドローイングができないホワイトボードはありえません。Whiteboardプラグインは、マウスでも簡単な線が描けるドローイングパネルを備えています。ドローイングを始めるには、まず追加したいアートボードを選択します。次に、プラグインパネルの「ドローイング」タブに移動し、「ドローイング開始」ボタンを押します。すると、モーダルウィンドウが現れるので、ここで描画する線の太さと色を選択します。線は、モーダルウィンドウの「取り消し」や「消去」コマンドを使って簡単に修正できます。描き終わったら「完了」ボタンを押すだけでアートボードに追加されます。ワイヤーフレームやストーリーボード、注釈や、クリエイティブな作品を描いてみてください。

より良いコミュニケーションのためにビデオ会議サービスを利用する

Whiteboardプラグインを使ってリモートでコラボレーションをする場合、ビデオ会議ソフト(Zoom、Bluejeans、Google Hangouts、Adobe Connectなど)を併用して1人のファシリテーターまたは複数のユーザーがボードを使いながらディスカッションするのが最も効果的です。ビジュアルコミュニケーションと会話の両方を使って会議をスムーズに行うことは、素晴らしいチームワークを実現するための秘訣です。ぜひ共同作業にビデオを活用してください。

ホワイトボード会議のためのスケッチのヒント

スケッチは、私たちの多くが突発的なホワイトボード会議や数日間続くワークショップなどでアイデアを発表する方法ですが、バーチャルなコラボレーション環境の場合、絵心のあるアーティストでなければ能力を発揮できないと尻込みしてしまいがちです。しかし、少しの練習を積み、適切なツールを使うだけで、誰でもアイデアをすばやく効果的に視覚化することができます。そのヒントをご紹介します。

  1. ゆっくりと描く
    ゆっくり描くことを心がけます。線を描くとき、いつもよりほんの数秒長く時間をかけ、慎重にペンを動かすことで、描いたものも、発言も、もっと自信をもって発表ができます。
  2. 文字の練習
    ホワイトボードへの書き込みは、録音された音声と同じように部屋を出てからもずっと残ります。そのため、読みやすい文字を書くことには少し力を入れる価値があります。
  3. アイコンを使いこなす
    何度も繰り返し使うような、単純で小さなアイコンのようなグラフィックスを見つけたら、ぜひその描き方を練習しておきましょう。目標、課題、プロセス、会話、セキュリティー、会社、オプションなどを表す、右側に示すようなものから始めるのがいいかもしれません。
  4. iPadやペンタブレットでもっと便利に
    Whiteboardはマウス操作でも十分に機能しますが、ドローイングに関してペンに勝るものはありません。Mac OS Catalina以降には、iPadをセカンダリーディスプレイとして使えるSidecar機能が導入され、XDでもペンを使ったドローイングが可能になりました。他に、デザイナーがよく使うペンタブレット(ワコムのタブレットなど)も使えます。
  5. UIエレメントの描画
    Whiteboardプラグインは、デザインのアイデア出しをコラボレーションしているときに、シンプルなワイヤーフレームのモックアップを描くのに適しています。画像ボックス、テキスト、ボタン、タブ、スライダーなどのシンプルなUIエレメントを使ってみてください。
  6. 楽しみましょう!
    自分のビジョンを伝えるためのスケッチです。傑作である必要はありません。リラックスして、クリエイティビティーが流れ出るのに任せてみてください。スケッチに色を使ったり、手描きの絵文字を加えたり、他のスケッチの上に描き重ねたりして、個性を吹き込みましょう。そういった遊び心がクリエイティビティーそのものなのです。プラグインを入手

デザイナーのリモートワーク移行を支援するプラグイン開発の背景

Whiteboardを開発したAdobe Design(英語)チームは皆さんと同じく、リモートワーク環境への移行に取り組んでいるデザインチームです。彼らはそれまで仕事に欠かせなかったホワイトボードを使った会議を、仮想環境で再現する方法を探していました。日々XDを使っている彼らの自然な成り行きとして、彼ら自身だけでなく、アドビ社内の他のチームや他社のデザイナーたちにとっても役に立つ、安全な自宅にいながら、使い慣れた環境でアイデア出しやスケッチ共有に使えるソリューションとしてのXDプラグイン開発に着手したのです。

最後にこのプラグインの日本語化に協力してくれたLisa InoueとKoichiro Miyoshiに感謝します。

この記事は4月15日に公開されたIdeate visually anywhere with the Whiteboard plugin for Adobe XDの抄訳です。

POSTED ON 2020.04.16