Adobe XDが実現する共同デザイン作業の新しい形

BY 公開

Adobe XDの開発を始めた主要な動機のひとつは、デザインプロセスにおける摩擦を可能な限り無くし、デザイナーが思考する速度でデザインできる環境を実現したいということでした。

これを念頭に置き、デザイン・プロトタイプ・共有の機能を併せ持つツールAdobe XDの開発を、品質とパフォーマンスを重視しつつ、まずMac向けから始めました。次に、リアルタイムのデザイン及びプロトタイプ確認用のアプリを、iOSとAndroidに提供しました。Windows向けの最初のベータの公開もごく間近に迫っています。PCを利用しているデザイナーに、同様のスピードと効率をもたらすでしょう。Mac OSとWindowsどちらでもAdobe XDが利用できることで、環境が混在するデザインチームの運用性の向上にも期待しています。

ユーザから、Adobe XDが個々のデザイナーの生産性やクリエイティビティに良い影響を与えていると聞くのは嬉しいことです。しかし、魅力的な体験をデザインするには、より多くの人々、チーム内の他のデザイナーや開発者、そしてプロジェクトのステークホルダーを巻き込む必要があることも理解しています。

このブログ記事で紹介する2017年中に追加予定の機能(年1度のクリエイティビティカンファレンスAdobe MAXでも紹介された)は、全てデザインの共有を中心に考えられたもので、「デザインとプロトタイプの作業の繰り返し」を今まで以上に高速化するという目標を持っています。

注:他の全ての機能と同様に、フィードバックを得て製品デザインや機能を繰り返し修正することに時間を費やすつもりです。そのため、ここに記述された内容は公開までに変更される可能性があります。

ステーク ホルダーとの共有

プロトタイプをステークホルダーに見てもらうためのパブリッシュ機能は、最初のAdobe XDのプレビュー版からの基本機能です。MAXのタイミングで公開したベータ版では、公開したプロトタイプに、コメントする機能を追加しました。来年以降も継続して、デザイン確認とコメントの体験の向上を図るつもりです。

comments1

もうひとつの重要なステップは、デザイナーから開発者への間の受け渡しです。多くのデザイナーから、デザインを実装する開発者とのやり取りには、できるだけ多くの情報とデザインの解釈を一箇所にまとめて渡したい、という声を聞きました。PDFを作成して注釈を付けることでガイドを作成することも可能ですが、デザインの書き出しや更新への対応は、時間がかかる退屈なプロセスです。この作業を簡略化するため、デザインスペックとスタイルガイドをAdobe XDのドキュメントから直接パブリッシュして共有する機能を追加する予定です。

Adobe XD内へのデザインスペックの追加により、共有リンクを伝えれられた開発者は、デザイン中のバージョンの情報をブラウザ内で閲覧できますブラウザ内では、アートボードとオブジェクトレベルでの注釈を扱ったり、アセットをダウンロードしたり、プラットフォームごとコードスニペットを取得したり、アニメーションやトランジションを検査したり、それからレイアウトを正しく行うための配置情報の計測もできます。

spec

「スペック」タブは、 Adobe XDドキュメントの情報を提供しますが、「ライブラリ」タブはプロジェクトで使用するアセットやスタイルガイドへの容易なアクセス手段です。実装に使うアセットが必要な開発者でも、キャンペーンに使うロゴが欲しいマーケティング担当でも、パブリッシュされたスタイルガイドを、最新の色、フォント、アセットのリポジトリとして利用できます。

library

プロトタイプの操作性や、ドキュメントのスペックとスタイルガイドの確認を通じ、ステークホルダーはデザインレビューのフィードバックをコメントとして記述できることになります。更に、必要に応じてアセットを使うかもしれません。これにより、ステークホルダーとの協業が、飛躍的に改善されることを期待しています。

他のデザイナーとの協業

デザイナーが協業する相手はステークホルダーだけではありません。特に大きなプロジェクトでは、締め切りに間に合わせるため、他のデザイナーと作業を分け合うでしょう。複数デザイナーが協業する時の一般的な方法は、個別のデザインドキュメントに作業を分割することです。この方法では、ドキュメント間でのアセット共有、最終的にいくつものバージョンのドキュメントの統合が必要です。デザインの最終確認と提出のために全ての作業を一つにまとめる作業は、時間がかかりますし、整合性を取るのは困難です。

余分な作業を減らしデザインに集中できるというAdobe XDの目標のために、この問題に対しては、複数のデザイナーが同じAdobe XDドキュメントにリアルタイムで作業できる機能を追加する予定です。

使い方は簡単で、仲間のデザイナーをAdobe XDドキュメントに招待し、それぞれのアートボードで作業するだけです。あなたが作業しているアートボードの状態を他のデザイナーは見ることができ、アセットを利用することもできます。しかし、あなたのワークボードに変更を加えることはできません。作業を終了し他のアートボードの作業を始めると、それまで作業していたアートボードは他のデザイナーが自動的に作業を引き継げるようになります。このように、デザイナーはファイルやアセットの管理を気にする必要がありません。クラウド接続されたデスクトップアプリケーションとして、Adobe XDは複数デザイナーが数百のアートボードをひとつのドキュメント内に共有しながら、デザイナーの期待に十分応えるパフォーマンスと忠実性をサポートするでしょう。

picture4

もちろん、複数のデザイナーが一緒に作業すれば、不適切なデザイン変更が予期せず起こることもあるでしょう。それが、ビジュアルバージョニングをAdobe XDに追加しようとしている理由です。ビジュアルバージョニングでは、自動保存されたバージョンや、作成されたマイルストーンにアクセス可能です。Adobe XDの中で、どの時点のデザインにでも素早く戻り、必要なアートボードやアセットのバージョンを見つけ、最新のバージョンに持ってくることができます。

バージョン管理機能はクラウドベースのため、ドキュメントをクリエイティブクラウドに保存することで機能が有効になります。ひとたびクラウドに接続すれば、プロトタイプやスタイルガイドをパブリッシュし、リアルタイムで共同作業し、ドキュメントのバージョンが自動管理される環境が利用できるようになるのです。

これらの共同作業機能の公開時期はいつ?

開発チームは積極的にこの記事で紹介した共同作業のワークフローに取り組んでおり、徐々に、パブリックのベータへの公開を、2017年の早い時期から開始する予定です。皆さんがモバイルやWebプロジェクトで働くとき、より効率的に他のデザイナー、開発者、ステークホルダーと協業できる機会の実現に興奮することを期待しています。

開発チームはTwitterの@AdobeXDを使っています。皆さんの意見を楽しみにしています。


この記事は2016年11月2日に公開されたCollaborative Design with Adobe XD(著者)の抄訳です。

  AUTHOR

akihiro kamijo

アドビのコンサルティングチームでリードアーキテクトとして主にUIデザインプロジェクトに関わる。現在は独立してデザイン/開発に関連のマーケティング企画や情報発信、プロジェクト支援を行っている。